From a3c703bd37fc55c2377cb0bf099af6a21ea07e8e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 14 Jun 2021 02:52:41 +0300
Subject: [PATCH] compact notifs
---
src/components/gallery/gallery.vue | 5 +-
src/components/notification/notification.vue | 3 +-
src/components/status_body/status_body.js | 1 +
src/components/status_body/status_body.scss | 56 +++++++++++++++++++
src/components/status_body/status_body.vue | 7 ++-
.../status_content/status_content.js | 1 +
.../status_content/status_content.vue | 13 ++++-
7 files changed, 81 insertions(+), 5 deletions(-)
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index ca91c9c1..3e967e9c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -36,7 +36,10 @@
height: 0;
width: 100%;
flex-grow: 1;
- margin-top: 0.5em;
+
+ &:not(:first-child) {
+ margin-top: 0.5em;
+ }
.gallery-row-inner {
position: absolute;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 0081dee4..396ae0e1 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -181,8 +181,9 @@
</router-link>
</div>
<template v-else>
- <status-content
+ <StatusContent
class="faint"
+ :compact="true"
:status="notification.action"
/>
</template>
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 26491e1b..6dc028a6 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -23,6 +23,7 @@ library.add(
const StatusContent = {
name: 'StatusContent',
props: [
+ 'compact',
'status',
'focused',
'noHeading',
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 81a687f1..a93c92e0 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -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;
+ }
+ }
}
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 3dc4916c..6609d989 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -1,5 +1,8 @@
<template>
- <div class="StatusBody">
+<div
+ class="StatusBody"
+ :class="{ '-compact': compact }"
+>
<div class="body">
<div
v-if="status.summary_raw_html"
@@ -8,6 +11,7 @@
>
<RichContent
class="media-body summary"
+ :single-line="compact"
:html="status.summary_raw_html"
:emoji="status.emojis"
/>
@@ -52,6 +56,7 @@
:html="status.raw_html"
:emoji="status.emojis"
:handle-links="true"
+ :single-line="compact"
:greentext="mergedConfig.greentext"
@parseReady="setHeadTailLinks"
/>
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 11a4974b..4d6f0a14 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -28,6 +28,7 @@ const StatusContent = {
name: 'StatusContent',
props: [
'status',
+ 'compact',
'focused',
'noHeading',
'fullContent',
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index feb34d2c..06edd780 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -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="setHeadTailLinks"
@@ -36,7 +40,7 @@
</div>
<div
- v-if="status.card && !noHeading"
+ v-if="status.card && !noHeading && !compact"
class="link-preview media-body"
>
<link-preview
@@ -59,5 +63,10 @@ $status-margin: 0.75em;
.StatusContent {
flex: 1;
min-width: 0;
+ &.-compact {
+ flex {
+ display: flex;
+ }
+ }
}
</style>