3 files changed, 80 insertions, 17 deletions

diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index ef542307..b8f6f9a0 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -21,18 +21,21 @@ library.add(
 const StatusContent = {
   name: 'StatusContent',
   props: [
+    'compact',
     'status',
     'focused',
     'noHeading',
     'fullContent',
-    'singleLine'
+    'singleLine',
+    'showingTall',
+    'expandingSubject',
+    'showingLongSubject',
+    'toggleShowingTall',
+    'toggleExpandingSubject',
+    'toggleShowingLongSubject'
   ],
   data () {
     return {
-      showingTall: this.fullContent || (this.inConversation && this.focused),
-      showingLongSubject: false,
-      // not as computed because it sets the initial state which will be changed later
-      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
       postLength: this.status.text.length,
       parseReadyDone: false
     }
@@ -49,6 +52,7 @@ const StatusContent = {
     // Using max-height + overflow: auto for status components resulted in false positives
     // very often with japanese characters, and it was very annoying.
     tallStatus () {
+      if (this.singleLine || this.compact) return false
       const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
       return lengthScore > 20
     },
@@ -113,9 +117,9 @@ const StatusContent = {
     },
     toggleShowMore () {
       if (this.mightHideBecauseTall) {
-        this.showingTall = !this.showingTall
+        this.toggleShowingTall()
       } else if (this.mightHideBecauseSubject) {
-        this.expandingSubject = !this.expandingSubject
+        this.toggleExpandingSubject()
       }
     },
     generateTagLink (tag) {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index c7732bfe..039d4c7f 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);
@@ -13,7 +19,7 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
   }
 
   .summary {
@@ -115,4 +121,54 @@
   .cyantext {
     color: var(--postCyantext, $fallback--cBlue);
   }
+
+  &.-compact {
+    align-items: top;
+    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 bottom, white 2em, transparent 3em);
+
+      /* 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 0;
+      min-width: 5em;
+      height: 100%;
+      margin-left: 0.5em;
+    }
+
+    .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 9f01c470..fb356360 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"
@@ -12,16 +15,16 @@
           :emoji="status.emojis"
         />
         <button
-          v-if="longSubject && showingLongSubject"
+          v-show="longSubject && showingLongSubject"
           class="button-unstyled -link tall-subject-hider"
-          @click.prevent="showingLongSubject=false"
+          @click.prevent="toggleShowingLongSubject"
         >
           {{ $t("status.hide_full_subject") }}
         </button>
         <button
-          v-else-if="longSubject"
+          v-show="longSubject && !showingLongSubject"
           class="button-unstyled -link tall-subject-hider"
-          @click.prevent="showingLongSubject=true"
+          @click.prevent="toggleShowingLongSubject"
         >
           {{ $t("status.show_full_subject") }}
         </button>
@@ -31,7 +34,7 @@
         class="text-wrapper"
       >
         <button
-          v-if="hideTallStatus"
+          v-show="hideTallStatus"
           class="button-unstyled -link tall-status-hider"
           :class="{ '-focused': focused }"
           @click.prevent="toggleShowMore"
@@ -51,7 +54,7 @@
         />
 
         <button
-          v-if="hideSubjectStatus"
+          v-show="hideSubjectStatus"
           class="button-unstyled -link cw-status-hider"
           @click.prevent="toggleShowMore"
         >
@@ -82,7 +85,7 @@
           />
         </button>
         <button
-          v-if="showingMore && !fullContent"
+          v-show="showingMore && !fullContent"
           class="button-unstyled -link status-unhider"
           @click.prevent="toggleShowMore"
         >
@@ -93,5 +96,5 @@
     <slot v-if="!hideSubjectStatus" />
   </div>
 </template>
-<script src="./status_body.js" ></script>
+<script src="./status_body.js"></script>
 <style lang="scss" src="./status_body.scss" />