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 ca91c9c11c..3e967e9ca4 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 0081dee4d0..396ae0e18a 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 26491e1b47..6dc028a6c8 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 81a687f1ea..a93c92e0c6 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 3dc4916c44..6609d989a2 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 11a4974b58..4d6f0a145d 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 feb34d2c13..06edd78053 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>