Merge branch 'compact-notifs' into proper-attachments
* compact-notifs: compact notifs
This commit is contained in:
commit
c1293c3afa
5 changed files with 71 additions and 3 deletions
|
@ -181,8 +181,9 @@
|
|||
</router-link>
|
||||
</div>
|
||||
<template v-else>
|
||||
<status-content
|
||||
<StatusContent
|
||||
class="faint"
|
||||
:compact="true"
|
||||
:status="notification.action"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -21,6 +21,7 @@ library.add(
|
|||
const StatusContent = {
|
||||
name: 'StatusContent',
|
||||
props: [
|
||||
'compact',
|
||||
'status',
|
||||
'focused',
|
||||
'noHeading',
|
||||
|
|
|
@ -1,11 +1,17 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.StatusBody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.emoji {
|
||||
--_still_image-label-scale: 0.5;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
& .text,
|
||||
& .summary {
|
||||
font-family: var(--postFont, sans-serif);
|
||||
|
@ -115,4 +121,54 @@
|
|||
.cyantext {
|
||||
color: var(--postCyantext, $fallback--cBlue);
|
||||
}
|
||||
|
||||
&.-compact {
|
||||
flex-direction: row;
|
||||
|
||||
--emoji-size: 16px;
|
||||
|
||||
& .body,
|
||||
& .attachments {
|
||||
max-height: 3.25em;
|
||||
}
|
||||
|
||||
.body {
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
min-width: 5em;
|
||||
flex: 5 1 auto;
|
||||
mask-size: auto 3.5em, auto auto;
|
||||
mask-position: 0 0, 0 0;
|
||||
mask-repeat: repeat-x, repeat;
|
||||
mask-image:
|
||||
linear-gradient(to top, white 0.5em, transparent 2.5em),
|
||||
linear-gradient(to top, white, white);
|
||||
|
||||
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
margin-top: 0;
|
||||
flex: 1 1 auto;
|
||||
min-width: 5em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.summary-wrapper {
|
||||
.summary::after {
|
||||
content: ': ';
|
||||
}
|
||||
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -28,6 +28,7 @@ const StatusContent = {
|
|||
name: 'StatusContent',
|
||||
props: [
|
||||
'status',
|
||||
'compact',
|
||||
'focused',
|
||||
'noHeading',
|
||||
'fullContent',
|
||||
|
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<div class="StatusContent">
|
||||
<div
|
||||
class="StatusContent"
|
||||
:class="{ '-compact': compact }"
|
||||
>
|
||||
<slot name="header" />
|
||||
<StatusBody
|
||||
:status="status"
|
||||
:compact="compact"
|
||||
:single-line="singleLine"
|
||||
:hide-mentions="hideMentions"
|
||||
@parseReady="$emit('parseReady', $event)"
|
||||
|
@ -23,7 +27,7 @@
|
|||
/>
|
||||
|
||||
<div
|
||||
v-if="status.card && !noHeading"
|
||||
v-if="status.card && !noHeading && !compact"
|
||||
class="link-preview media-body"
|
||||
>
|
||||
<link-preview
|
||||
|
@ -46,5 +50,10 @@ $status-margin: 0.75em;
|
|||
.StatusContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
&.-compact {
|
||||
flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue