Merge remote-tracking branch 'origin/develop' into shigusegubu-themes3

Drafts improvements

See merge request pleroma/pleroma-fe!1964

src/App.scss

@@ -402,6 +402,10 @@ nav {
     color: var(--text);
     font-size: 100%;
   }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
 }
 
 .menu-item,

src/components/dialog_modal/dialog_modal.vue

@@ -71,6 +71,7 @@
     margin: 0;
     padding: 1rem;
     white-space: normal;
+    text-align: center;
   }
 
   .dialog-modal-footer {
@@ -114,7 +115,7 @@
 
     button {
       grid-column: 1;
-      height: 2em;
+      height: 3em;
     }
   }
 }

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,

src/components/draft/draft.vue

@@ -27,7 +27,15 @@
         />
       </div>
       <div class="status-preview">
-        <p>{{ draft.status }}</p>
+        <span class="status_content">
+          <p v-if="draft.spoilerText">
+            <i>
+              {{ draft.spoilerText }}:
+            </i>
+          </p>
+          <p v-if="draft.status">{{ draft.status }}</p>
+          <p v-else class="faint">{{ $t('drafts.empty') }}</p>
+        </span>
         <gallery
           v-if="draft.files?.length !== 0"
           class="attachments media-body"
@@ -39,6 +47,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 +108,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 +116,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 +128,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 {

src/components/drafts/drafts.vue

@@ -13,6 +13,7 @@
         <List
           v-else
           :items="drafts"
+          :non-interactive="true"
         >
           <template #item="{ item: draft }">
             <Draft

src/components/menu_item.style.js

@@ -11,8 +11,9 @@ export default {
     'Avatar'
   ],
   states: {
-    hover: ':hover',
-    active: '.-active'
+    hover: ':hover:not(.disabled)',
+    active: '.-active',
+    disabled: '.disabled'
   },
   defaultRules: [
     {
@@ -85,6 +86,28 @@ export default {
         textColor: '--link',
         textAuto: 'no-preserve'
       }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
     }
   ]
 }

src/components/post_status_form/post_status_form.js

@@ -352,6 +352,12 @@ const PostStatusForm = {
         return this.$t('post_status.auto_save_nothing_new')
       }
     },
+    safeToSaveDraft () {
+      return this.newStatus.status ||
+        this.newStatus.spoilerText ||
+        this.newStatus.files?.length ||
+        this.newStatus.hasPoll
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       mobileLayout: state => state.interface.mobileLayout
@@ -747,9 +753,7 @@ const PostStatusForm = {
     saveDraft () {
       if (!this.disableDraft &&
           !this.saveInhibited) {
-        if (this.newStatus.status ||
-            this.newStatus.files?.length ||
-            this.newStatus.hasPoll) {
+        if (this.safeToSaveDraft) {
           return this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
             .then(id => {
               if (this.newStatus.id !== id) {

src/components/post_status_form/post_status_form.vue

@@ -339,6 +339,8 @@
                   v-if="!disableDraft"
                   class="menu-item dropdown-item dropdown-item-icon"
                   role="menu"
+                  :disabled="!safeToSaveDraft"
+                  :class="{ disabled: !safeToSaveDraft }"
                   @click.prevent="saveDraft"
                   @click="close"
                 >

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",