Merge branch 'tusooa/quote' into 'develop'

Quote

See merge request pleroma/pleroma-fe!1846

src/components/post_status_form/post_status_form.js

@@ -156,11 +156,13 @@ const PostStatusForm = {
         poll: this.statusPoll || {},
         mediaDescriptions: this.statusMediaDescriptions || {},
         visibility: this.statusScope || scope,
-        contentType: statusContentType
+        contentType: statusContentType,
+        quoting: false
       }
     }
 
     return {
+      randomSeed: `${Math.random()}`.replace('.', '-'),
       dropFiles: [],
       uploadingFiles: false,
       error: null,
@@ -265,6 +267,30 @@ const PostStatusForm = {
     isEdit () {
       return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
     },
+    quotable () {
+      if (!this.$store.state.instance.quotingAvailable) {
+        return false
+      }
+
+      if (!this.replyTo) {
+        return false
+      }
+
+      const repliedStatus = this.$store.state.statuses.allStatusesObject[this.replyTo]
+      if (!repliedStatus) {
+        return false
+      }
+
+      if (repliedStatus.visibility === 'public' ||
+          repliedStatus.visibility === 'unlisted' ||
+          repliedStatus.visibility === 'local') {
+        return true
+      } else if (repliedStatus.visibility === 'private') {
+        return repliedStatus.user.id === this.$store.state.users.currentUser.id
+      }
+
+      return false
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       mobileLayout: state => state.interface.mobileLayout
@@ -292,7 +318,8 @@ const PostStatusForm = {
         visibility: newStatus.visibility,
         contentType: newStatus.contentType,
         poll: {},
-        mediaDescriptions: {}
+        mediaDescriptions: {},
+        quoting: false
       }
       this.pollFormVisible = false
       this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
@@ -340,6 +367,8 @@ const PostStatusForm = {
         return
       }
 
+      const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId'
+
       const postingOptions = {
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
@@ -347,7 +376,7 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: newStatus.files,
         store: this.$store,
-        inReplyToStatusId: this.replyTo,
+        [replyOrQuoteAttr]: this.replyTo,
         contentType: newStatus.contentType,
         poll,
         idempotencyKey: this.idempotencyKey
@@ -373,6 +402,7 @@ const PostStatusForm = {
       }
       const newStatus = this.newStatus
       this.previewLoading = true
+      const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId'
       statusPoster.postStatus({
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
@@ -380,7 +410,7 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: [],
         store: this.$store,
-        inReplyToStatusId: this.replyTo,
+        [replyOrQuoteAttr]: this.replyTo,
         contentType: newStatus.contentType,
         poll: {},
         preview: true

src/components/post_status_form/post_status_form.vue

@@ -126,6 +126,36 @@
             class="preview-status"
           />
         </div>
+        <div
+          v-if="quotable"
+          role="radiogroup"
+          class="btn-group reply-or-quote-selector"
+        >
+          <button
+            :id="`reply-or-quote-option-${randomSeed}-reply`"
+            class="btn button-default reply-or-quote-option"
+            :class="{ toggled: !newStatus.quoting }"
+            tabindex="0"
+            role="radio"
+            :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
+            :aria-checked="!newStatus.quoting"
+            @click="newStatus.quoting = false"
+          >
+            {{ $t('post_status.reply_option') }}
+          </button>
+          <button
+            :id="`reply-or-quote-option-${randomSeed}-quote`"
+            class="btn button-default reply-or-quote-option"
+            :class="{ toggled: newStatus.quoting }"
+            tabindex="0"
+            role="radio"
+            :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
+            :aria-checked="newStatus.quoting"
+            @click="newStatus.quoting = true"
+          >
+            {{ $t('post_status.quote_option') }}
+          </button>
+        </div>
         <EmojiInput
           v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
           v-model="newStatus.spoilerText"
@@ -420,6 +450,10 @@
     margin: 0;
   }
 
+  .reply-or-quote-selector {
+    margin-bottom: 0.5em;
+  }
+
   .text-format {
     .only-format {
       color: $fallback--faint;

src/components/status/status.js

@@ -133,6 +133,7 @@ const Status = {
     'showPinned',
     'inProfile',
     'profileUserId',
+    'inQuote',
 
     'simpleTree',
     'controlledThreadDisplayStatus',
@@ -159,7 +160,8 @@ const Status = {
       uncontrolledMediaPlaying: [],
       suspendable: true,
       error: null,
-      headTailLinks: null
+      headTailLinks: null,
+      displayQuote: !this.inQuote
     }
   },
   computed: {
@@ -401,6 +403,18 @@ const Status = {
     },
     editingAvailable () {
       return this.$store.state.instance.editingAvailable
+    },
+    hasVisibleQuote () {
+      return this.status.quote_url && this.status.quote_visible
+    },
+    hasInvisibleQuote () {
+      return this.status.quote_url && !this.status.quote_visible
+    },
+    quotedStatus () {
+      return this.status.quote_id ? this.$store.state.statuses.allStatusesObject[this.status.quote_id] : undefined
+    },
+    shouldDisplayQuote () {
+      return this.quotedStatus && this.displayQuote
     }
   },
   methods: {
@@ -469,6 +483,18 @@ const Status = {
           window.scrollBy(0, rect.bottom - window.innerHeight + 50)
         }
       }
+    },
+    toggleDisplayQuote () {
+      if (this.shouldDisplayQuote) {
+        this.displayQuote = false
+      } else if (!this.quotedStatus) {
+        this.$store.dispatch('fetchStatus', this.status.quote_id)
+          .then(() => {
+            this.displayQuote = true
+          })
+      } else {
+        this.displayQuote = true
+      }
     }
   },
   watch: {

src/components/status/status.scss

@@ -422,4 +422,22 @@
       }
     }
   }
+
+  .quoted-status {
+    margin-top: 0.5em;
+    border: 1px solid var(--border, $fallback--border);
+    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+
+    &.-unavailable-prompt {
+      padding: 0.5em;
+    }
+  }
+
+  .display-quoted-status-button {
+    margin: 0.5em;
+
+    &-icon {
+      color: inherit;
+    }
+  }
 }

src/components/status/status.vue

@@ -364,6 +364,45 @@
             @parseReady="setHeadTailLinks"
           />
 
+          <article
+            v-if="hasVisibleQuote"
+            class="quoted-status"
+          >
+            <button
+              class="button-unstyled -link display-quoted-status-button"
+              :aria-expanded="shouldDisplayQuote"
+              @click="toggleDisplayQuote"
+            >
+              {{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }}
+              <FAIcon
+                class="display-quoted-status-button-icon"
+                :icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'"
+              />
+            </button>
+            <Status
+              v-if="shouldDisplayQuote"
+              :statusoid="quotedStatus"
+              :in-quote="true"
+            />
+          </article>
+          <p
+            v-else-if="hasInvisibleQuote"
+            class="quoted-status -unavailable-prompt"
+          >
+            <i18n-t keypath="status.invisible_quote">
+              <template #link>
+                <bdi>
+                  <a
+                    :href="status.quote_url"
+                    target="_blank"
+                  >
+                    {{ status.quote_url }}
+                  </a>
+                </bdi>
+              </template>
+            </i18n-t>
+          </p>
+
           <div
             v-if="inConversation && !isPreview && replies && replies.length"
             class="replies"