pleroma-fe

commit: f653ac4a62b3cbdec411f93f7d7c4cf8dab72424
parent bc2da26ddafb24283f3bb74bca91b9aa09d705db
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 31 Dec 2024 12:52:29 +0200

display poll indicators in drafts

Diffstat:
M
src/components/draft/draft.js
9
+++++++++
M
src/components/draft/draft.vue
52
++++++++++++++++++++++++++++++++++++++++++++--------
M
src/components/drafts/drafts.vue
1
+
M
src/i18n/en.json
2
++

4 files changed, 56 insertions(+), 8 deletions(-)
diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
@@ -5,6 +5,15 @@ import StatusContent from 'src/components/status_content/status_content.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
 import { cloneDeep } from 'lodash'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPollH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPollH
+)
+
 const Draft = {
   components: {
     PostStatusForm,
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
@@ -27,7 +27,8 @@
         />
       </div>
       <div class="status-preview">
-        <p>{{ draft.status }}</p>
+        <p v-if="draft.status">{{ draft.status }}</p>
+        <p v-else class="faint">{{ $t('drafts.empty') }}</p>
         <gallery
           v-if="draft.files?.length !== 0"
           class="attachments media-body"
@@ -39,6 +40,18 @@
           @play="$emit('mediaplay', attachment.id)"
           @pause="$emit('mediapause', attachment.id)"
         />
+        <div
+          v-if="draft.poll.options"
+          class="poll-indicator-container"
+          :title="$t('drafts.poll_tooltip')"
+        >
+          <div class="poll-indicator">
+            <FAIcon
+              icon="poll-h"
+              size="3x"
+            />
+          </div>
+        </div>
       </div>
     </div>
     <div v-if="editing">
@@ -88,12 +101,6 @@
 <style lang="scss">
 .Draft {
   position: relative;
-  line-height: 1.1;
-  font-size: initial;
-
-  a {
-    color: var(--link);
-  }
 
   .status-content {
     padding: 0.5em;
@@ -102,8 +109,11 @@
 
   .status-preview {
     display: grid;
-    grid-template-columns: 1fr 10em;
+    grid-template-columns: 1fr;
+    grid-auto-columns: 10em;
+    grid-auto-flow: column;
     grid-gap: 0.5em;
+    align-items: start;
     max-width: 100%;
 
     p {
@@ -111,6 +121,32 @@
       white-space: normal;
       overflow-x: hidden;
     }
+
+    .poll-indicator-container {
+      border-radius: var(--roundness);
+      display: grid;
+      justify-items: center;
+      align-items: center;
+      align-self: start;
+      height: 0;
+      padding-bottom: 62.5%;
+      position: relative;
+    }
+
+    .poll-indicator {
+      box-sizing: border-box;
+      border: 1px solid var(--border);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: grid;
+      justify-items: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .actions {
diff --git a/src/components/drafts/drafts.vue b/src/components/drafts/drafts.vue
@@ -13,6 +13,7 @@
         <List
           v-else
           :items="drafts"
+          :non-interactive="true"
         >
           <template #item="{ item: draft }">
             <Draft
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1514,6 +1514,8 @@
   "drafts": {
     "drafts": "Drafts",
     "no_drafts": "You have no drafts",
+    "empty": "(No content)",
+    "poll_tooltip": "Draft contains a poll",
     "continue": "Continue composing",
     "save": "Save without posting",
     "abandon": "Abandon draft",