compact notifs

This commit is contained in:
Henry Jameson 2021-06-14 02:52:41 +03:00
parent 636dbdaba8
commit a3c703bd37
7 changed files with 81 additions and 5 deletions

View file

@ -36,7 +36,10 @@
height: 0; height: 0;
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
&:not(:first-child) {
margin-top: 0.5em; margin-top: 0.5em;
}
.gallery-row-inner { .gallery-row-inner {
position: absolute; position: absolute;

View file

@ -181,8 +181,9 @@
</router-link> </router-link>
</div> </div>
<template v-else> <template v-else>
<status-content <StatusContent
class="faint" class="faint"
:compact="true"
:status="notification.action" :status="notification.action"
/> />
</template> </template>

View file

@ -23,6 +23,7 @@ library.add(
const StatusContent = { const StatusContent = {
name: 'StatusContent', name: 'StatusContent',
props: [ props: [
'compact',
'status', 'status',
'focused', 'focused',
'noHeading', 'noHeading',

View file

@ -1,11 +1,17 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.StatusBody { .StatusBody {
display: flex;
flex-direction: column;
.emoji { .emoji {
--_still_image-label-scale: 0.5; --_still_image-label-scale: 0.5;
} }
.attachments {
margin-top: 0.5em;
}
& .text, & .text,
& .summary { & .summary {
font-family: var(--postFont, sans-serif); font-family: var(--postFont, sans-serif);
@ -115,4 +121,54 @@
.cyantext { .cyantext {
color: var(--postCyantext, $fallback--cBlue); 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;
}
}
} }

View file

@ -1,5 +1,8 @@
<template> <template>
<div class="StatusBody"> <div
class="StatusBody"
:class="{ '-compact': compact }"
>
<div class="body"> <div class="body">
<div <div
v-if="status.summary_raw_html" v-if="status.summary_raw_html"
@ -8,6 +11,7 @@
> >
<RichContent <RichContent
class="media-body summary" class="media-body summary"
:single-line="compact"
:html="status.summary_raw_html" :html="status.summary_raw_html"
:emoji="status.emojis" :emoji="status.emojis"
/> />
@ -52,6 +56,7 @@
:html="status.raw_html" :html="status.raw_html"
:emoji="status.emojis" :emoji="status.emojis"
:handle-links="true" :handle-links="true"
:single-line="compact"
:greentext="mergedConfig.greentext" :greentext="mergedConfig.greentext"
@parseReady="setHeadTailLinks" @parseReady="setHeadTailLinks"
/> />

View file

@ -28,6 +28,7 @@ const StatusContent = {
name: 'StatusContent', name: 'StatusContent',
props: [ props: [
'status', 'status',
'compact',
'focused', 'focused',
'noHeading', 'noHeading',
'fullContent', 'fullContent',

View file

@ -1,8 +1,12 @@
<template> <template>
<div class="StatusContent"> <div
class="StatusContent"
:class="{ '-compact': compact }"
>
<slot name="header" /> <slot name="header" />
<StatusBody <StatusBody
:status="status" :status="status"
:compact="compact"
:single-line="singleLine" :single-line="singleLine"
:hide-mentions="hideMentions" :hide-mentions="hideMentions"
@parseReady="setHeadTailLinks" @parseReady="setHeadTailLinks"
@ -36,7 +40,7 @@
</div> </div>
<div <div
v-if="status.card && !noHeading" v-if="status.card && !noHeading && !compact"
class="link-preview media-body" class="link-preview media-body"
> >
<link-preview <link-preview
@ -59,5 +63,10 @@ $status-margin: 0.75em;
.StatusContent { .StatusContent {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
&.-compact {
flex {
display: flex;
}
}
} }
</style> </style>