Merge branch 'develop' into 'master'

Update master branch

See merge request pleroma/pleroma-fe!1861

2 files changed, 155 insertions, 68 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index eb55cfcc..ba49961d 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -8,6 +8,7 @@ import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
+import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
@@ -155,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,
@@ -264,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
@@ -291,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()
@@ -339,6 +367,8 @@ const PostStatusForm = {
         return
       }
 
+      const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId'
+
       const postingOptions = {
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
@@ -346,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
@@ -372,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,
@@ -379,7 +410,7 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: [],
         store: this.$store,
-        inReplyToStatusId: this.replyTo,
+        [replyOrQuoteAttr]: this.replyTo,
         contentType: newStatus.contentType,
         poll: {},
         preview: true
@@ -629,6 +660,9 @@ const PostStatusForm = {
     },
     openProfileTab () {
       this.$store.dispatch('openSettingsModalTab', 'profile')
+    },
+    propsToNative (props) {
+      return propsToNative(props)
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index f65058f4..9b108a5a 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -30,6 +30,9 @@
           <span>{{ $t('post_status.scope_notice.public') }}</span>
           <a
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -42,6 +45,9 @@
           <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
           <a
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -54,6 +60,9 @@
           <span>{{ $t('post_status.scope_notice.private') }}</span>
           <a
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -117,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"
@@ -124,14 +163,17 @@
           :suggest="emojiSuggestor"
           class="form-control"
         >
-          <input
-            v-model="newStatus.spoilerText"
-            type="text"
-            :placeholder="$t('post_status.content_warning')"
-            :disabled="posting && !optimisticPosting"
-            size="1"
-            class="form-post-subject"
-          >
+          <template #default="inputProps">
+            <input
+              v-model="newStatus.spoilerText"
+              type="text"
+              :placeholder="$t('post_status.content_warning')"
+              :disabled="posting && !optimisticPosting"
+              v-bind="propsToNative(inputProps)"
+              size="1"
+              class="form-post-subject"
+            >
+          </template>
         </EmojiInput>
         <EmojiInput
           ref="emoji-input"
@@ -148,29 +190,32 @@
           @sticker-upload-failed="uploadFailed"
           @shown="handleEmojiInputShow"
         >
-          <textarea
-            ref="textarea"
-            v-model="newStatus.status"
-            :placeholder="placeholder || $t('post_status.default')"
-            rows="1"
-            cols="1"
-            :disabled="posting && !optimisticPosting"
-            class="form-post-body"
-            :class="{ 'scrollable-form': !!maxHeight }"
-            @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
-            @keydown.meta.enter="postStatus($event, newStatus)"
-            @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
-            @input="resize"
-            @compositionupdate="resize"
-            @paste="paste"
-          />
-          <p
-            v-if="hasStatusLengthLimit"
-            class="character-counter faint"
-            :class="{ error: isOverLengthLimit }"
-          >
-            {{ charactersLeft }}
-          </p>
+          <template #default="inputProps">
+            <textarea
+              ref="textarea"
+              v-model="newStatus.status"
+              :placeholder="placeholder || $t('post_status.default')"
+              rows="1"
+              cols="1"
+              :disabled="posting && !optimisticPosting"
+              class="form-post-body"
+              :class="{ 'scrollable-form': !!maxHeight }"
+              v-bind="propsToNative(inputProps)"
+              @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
+              @keydown.meta.enter="postStatus($event, newStatus)"
+              @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
+              @input="resize"
+              @compositionupdate="resize"
+              @paste="paste"
+            />
+            <p
+              v-if="hasStatusLengthLimit"
+              class="character-counter faint"
+              :class="{ error: isOverLengthLimit }"
+            >
+              {{ charactersLeft }}
+            </p>
+          </template>
         </EmojiInput>
         <div
           v-if="!disableScopeSelector"
@@ -193,6 +238,7 @@
               id="post-content-type"
               v-model="newStatus.contentType"
               class="form-control"
+              :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
             >
               <option
                 v-for="postFormat in postFormats"
@@ -265,12 +311,10 @@
         >
           {{ $t('post_status.post') }}
         </button>
-        <!-- touchstart is used to keep the OSK at the same position after a message send -->
         <button
           v-else
           :disabled="uploadingFiles || disableSubmit"
           class="btn button-default"
-          @touchstart.stop.prevent="postStatus($event, newStatus)"
           @click.stop.prevent="postStatus($event, newStatus)"
         >
           {{ $t('post_status.post') }}
@@ -331,7 +375,7 @@
 <script src="./post_status_form.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .post-status-form {
   position: relative;
@@ -378,7 +422,9 @@
     &:hover {
       text-decoration: underline;
     }
-    svg, i {
+
+    svg,
+    i {
       margin-left: 0.2em;
       font-size: 0.8em;
       transform: rotate(90deg);
@@ -404,6 +450,10 @@
     margin: 0;
   }
 
+  .reply-or-quote-selector {
+    margin-bottom: 0.5em;
+  }
+
   .text-format {
     .only-format {
       color: $fallback--faint;
@@ -428,7 +478,25 @@
     }
   }
 
-  .media-upload-icon, .poll-icon, .emoji-icon {
+  // Order is not necessary but a good indicator
+  .media-upload-icon {
+    order: 1;
+    justify-content: left;
+  }
+
+  .emoji-icon {
+    order: 2;
+    justify-content: center;
+  }
+
+  .poll-icon {
+    order: 3;
+    justify-content: right;
+  }
+
+  .media-upload-icon,
+  .poll-icon,
+  .emoji-icon {
     font-size: 1.85em;
     line-height: 1.1;
     flex: 1;
@@ -436,16 +504,20 @@
     display: flex;
     align-items: center;
 
-    &.selected, &:hover {
+    &.selected,
+    &:hover {
       // needs to be specific to override icon default color
-      svg, i, label {
+      svg,
+      i,
+      label {
         color: $fallback--lightText;
         color: var(--lightText, $fallback--lightText);
       }
     }
 
     &.disabled {
-      svg, i {
+      svg,
+      i {
         cursor: not-allowed;
         color: $fallback--icon;
         color: var(--btnDisabledText, $fallback--icon);
@@ -458,32 +530,17 @@
     }
   }
 
-  // Order is not necessary but a good indicator
-  .media-upload-icon {
-    order: 1;
-    justify-content: left;
-  }
-
-  .emoji-icon {
-    order: 2;
-    justify-content: center;
-  }
-
-  .poll-icon {
-    order: 3;
-    justify-content: right;
-  }
-
   .error {
     text-align: center;
   }
 
   .media-upload-wrapper {
-    margin-right: .2em;
-    margin-bottom: .5em;
+    margin-right: 0.2em;
+    margin-bottom: 0.5em;
     width: 18em;
 
-    img, video {
+    img,
+    video {
       object-fit: contain;
       max-height: 10em;
     }
@@ -557,18 +614,14 @@
     }
   }
 
-  .btn[disabled] {
-    cursor: not-allowed;
-  }
-
   @keyframes fade-in {
     from { opacity: 0; }
-    to   { opacity: 0.6; }
+    to { opacity: 0.6; }
   }
 
   @keyframes fade-out {
     from { opacity: 0.6; }
-    to   { opacity: 0; }
+    to { opacity: 0; }
   }
 
   .drop-indicator {