image description improvements

src/App.scss

@@ -50,7 +50,7 @@ body {
 // have a cursor/pointer to operate them
 @media (any-pointer: fine) {
   * {
-    scrollbar-color: var(--fg) transparent;
+    scrollbar-color: var(--text) transparent;
 
     &::-webkit-scrollbar {
       background: transparent;
@@ -130,7 +130,7 @@ body {
   }
   // Body should have background to scrollbar otherwise it will use white (body color?)
   html {
-    scrollbar-color: var(--fg) var(--wallpaper);
+    scrollbar-color: var(--text) var(--wallpaper);
     background: var(--wallpaper);
   }
 }

src/components/attachment/attachment.js

@@ -4,6 +4,7 @@ import nsfwImage from '../../assets/nsfw.png'
 import Flash from '../flash/flash.vue'
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
+import Popover from '../popover/popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -65,13 +66,13 @@ const Attachment = {
       modalOpen: false,
       showHidden: false,
       flashLoaded: false,
-      showDescription: false,
     }
   },
   components: {
     Flash,
     StillImage,
     VideoAttachment,
+    Popover,
   },
   computed: {
     classNames() {
@@ -180,9 +181,6 @@ const Attachment = {
     setFlashLoaded(event) {
       this.flashLoaded = event
     },
-    toggleDescription() {
-      this.showDescription = !this.showDescription
-    },
     toggleHidden(event) {
       if (
         this.mergedConfig.useOneClickNsfw &&

src/components/attachment/attachment.scss

@@ -134,7 +134,7 @@
       width: 2em;
       height: 2em;
       margin-left: 0.5em;
-      font-size: 1.25em;
+      font-size: 1em;
     }
   }
 
@@ -265,3 +265,25 @@
     }
   }
 }
+
+.description-popover {
+  padding: 1em;
+  width: 50ch;
+  overflow: hidden;
+
+  summary {
+    display: inline-block;
+    margin-bottom: 0.5em;
+    font-weight: bold;
+    pointer-events: none;
+  }
+
+  span {
+    display: block;
+    overflow-y: auto;
+    max-height: 10.5em;
+    text-wrap: pretty;
+    line-height: 1.5;
+    white-space: pre-wrap;
+  }
+}

src/components/attachment/attachment.vue

@@ -30,21 +30,16 @@
       </button>
     </div>
     <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
+      v-if="size !== 'hide' && !hideDescription && edit"
       class="description-container"
       :class="{ '-static': !edit }"
     >
-      <input
+      <textarea
-        v-if="edit"
         v-model="localDescription"
         type="text"
         class="input description-field"
         :placeholder="$t('post_status.media_description')"
-        @keydown.enter.prevent=""
+      />
-      >
-      <p v-else>
-        {{ localDescription }}
-      </p>
     </div>
   </button>
   <div
@@ -87,14 +82,22 @@
         >
           <FAIcon icon="stop" />
         </button>
-        <button
+        <Popover
           v-if="attachment.description && size !== 'small' && !edit && attachment.type !== 'unknown'"
-          class="button-default attachment-button -transparent"
+          trigger="click"
-          :title="$t('status.show_attachment_description')"
+          popover-class="popover popover-default description-popover"
-          @click.prevent="toggleDescription"
+          :trigger-attrs="{ 'class': 'button-default attachment-button -transparent', 'title': $t('status.attachment_description') }"
-        >
+          >
-          <FAIcon icon="align-right" />
+          <template #trigger>
-        </button>
+            <FAIcon icon="align-right" />
+          </template>
+          <template #content>
+            <details open>
+              <summary>{{ $t('status.attachment_description') }}</summary>
+              <span>{{ localDescription }}</span>
+            </details>
+          </template>
+        </Popover>
         <button
           v-if="!useModal && attachment.type !== 'unknown'"
           class="button-default attachment-button -transparent"
@@ -244,21 +247,16 @@
       </span>
     </div>
     <div
-      v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"
+      v-if="size !== 'hide' && !hideDescription && edit"
       class="description-container"
       :class="{ '-static': !edit }"
     >
-      <input
+      <textarea
-        v-if="edit"
         v-model="localDescription"
         type="text"
         class="input description-field"
         :placeholder="$t('post_status.media_description')"
-        @keydown.enter.prevent=""
+      />
-      >
-      <p v-else>
-        {{ localDescription }}
-      </p>
     </div>
   </div>
 </template>

src/components/gallery/gallery.vue

@@ -129,7 +129,7 @@
 
         .gallery-item {
           margin: 0;
-          height: 15em;
+          height: 20em;
         }
       }
     }

src/components/media_modal/media_modal.vue

@@ -89,13 +89,16 @@
       />
     </button>
 
-    <span
+    <details
+      open
       v-if="description"
       class="description"
     >
-      {{ description }}
+      <summary>{{ $t('status.attachment_description') }}</summary>
-    </span>
+      <span>{{ description }}</span>
+    </details>
     <span
+      v-if="media.length > 1"
       class="counter"
     >
       {{ $t('media_modal.counter', { current: currentIndex + 1, total: media.length }, currentIndex + 1) }}
@@ -159,19 +162,43 @@ $modal-view-button-icon-margin: 0.5em;
   .counter {
     /* Hardcoded since background is also hardcoded */
     color: white;
-    margin-top: 1em;
+    text-shadow: 0 0 1em black, 0 0 1em black, 0 0 1em black;
-    text-shadow: 0 0 10px black, 0 0 10px black;
+    margin: 1em 2em;
-    padding: 0.2em 2em;
+    overflow: hidden;
+
+  }
+
+  .description + .counter {
+    margin-top: 0;
   }
 
   .description {
     flex: 0 0 auto;
-    overflow-y: auto;
+    max-width: 80ch;
-    min-height: 1em;
-    max-width: 35.8em;
     max-height: 9.5em;
-    overflow-wrap: break-word;
+
-    text-wrap: pretty;
+    summary {
+      margin-bottom: 0.5em;
+      display: inline-block;
+      font-weight: bold;
+      pointer-events: none;
+    }
+
+    span {
+      display: block;
+      overflow-y: auto;
+      min-height: 1em;
+      text-wrap: pretty;
+      max-height: 10.5em;
+      white-space: pre-wrap;
+      line-height: 1.5;
+      scrollbar-color: white transparent;
+
+      &::-webkit-scrollbar-button,
+      &::-webkit-scrollbar-thumb {
+        background-color: white;
+      }
+    }
   }
 
   .modal-image {

src/i18n/en.json

@@ -1602,6 +1602,7 @@
     "show_all_attachments": "Show all attachments",
     "show_attachment_in_modal": "Show in media modal",
     "show_attachment_description": "Preview description (open attachment for full description)",
+    "attachment_description": "Attachment description",
     "hide_attachment": "Hide attachment",
     "remove_attachment": "Remove attachment",
     "attachment_stop_flash": "Stop Flash player",