Merge remote-tracking branch 'upstream/develop' into tusooa/stylelint

src/components/attachment/attachment.js

@@ -36,6 +36,7 @@ library.add(
 const Attachment = {
   props: [
     'attachment',
+    'compact',
     'description',
     'hideDescription',
     'nsfw',
@@ -71,7 +72,8 @@ const Attachment = {
         {
           '-loading': this.loading,
           '-nsfw-placeholder': this.hidden,
-          '-editable': this.edit !== undefined
+          '-editable': this.edit !== undefined,
+          '-compact': this.compact
         },
         '-type-' + this.type,
         this.size && '-size-' + this.size,

src/components/attachment/attachment.scss

@@ -266,4 +266,10 @@
   &.-loading {
     cursor: progress;
   }
+
+  &.-compact {
+    .placeholder-container {
+      padding-bottom: 0.5em;
+    }
+  }
 }

src/components/attachment/attachment.vue

@@ -162,10 +162,11 @@
         target="_blank"
       >
         <FAIcon
-          size="5x"
+          :size="compact ? '2x' : '5x'"
           :icon="placeholderIconClass"
+          :title="localDescription"
         />
-        <p>
+        <p v-if="!compact">
           {{ localDescription }}
         </p>
       </a>

src/components/desktop_nav/desktop_nav.vue

@@ -38,7 +38,7 @@
         />
         <button
           class="button-unstyled nav-icon"
-          @click="openSettingsModal"
+          @click.stop="openSettingsModal"
         >
           <FAIcon
             fixed-width
@@ -65,7 +65,7 @@
         <button
           v-if="currentUser"
           class="button-unstyled nav-icon"
-          @click.prevent="logout"
+          @click.stop.prevent="logout"
         >
           <FAIcon
             fixed-width

src/components/emoji_picker/emoji_picker.js

@@ -244,7 +244,7 @@ const EmojiPicker = {
         if (!this.$refs['emoji-groups']) {
           return
         }
-        this.width = this.$refs['emoji-groups'].$el.offsetWidth
+        this.width = this.$refs['emoji-groups'].$el.clientWidth
       })
     }
   },

src/components/emoji_picker/emoji_picker.scss

@@ -7,7 +7,7 @@ $emoji-picker-emoji-size: 32px;
 
 .emoji-picker {
   width: 25em;
-  max-width: 100vw;
+  max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
   background-color: $fallback--bg;

src/components/emoji_picker/emoji_picker.vue

@@ -83,6 +83,7 @@
             :emit-update="true"
             @update="onScroll"
             @visible="recalculateItemPerRow"
+            @resize="recalculateItemPerRow"
           >
             <template #default="{ item: group, index, active }">
               <DynamicScrollerItem

src/components/gallery/gallery.js

@@ -4,6 +4,7 @@ import { sumBy, set } from 'lodash'
 const Gallery = {
   props: [
     'attachments',
+    'compact',
     'limitRows',
     'descriptions',
     'limit',

src/components/gallery/gallery.vue

@@ -20,6 +20,7 @@
             v-for="(attachment, attachmentIndex) in row.items"
             :key="attachment.id"
             class="gallery-item"
+            :compact="compact"
             :nsfw="nsfw"
             :attachment="attachment"
             :size="size"

src/components/media_modal/media_modal.js

@@ -63,6 +63,11 @@ const MediaModal = {
     },
     type () {
       return this.currentMedia ? this.getType(this.currentMedia) : null
+    },
+    swipeDisableClickThreshold () {
+      // If there is only one media, allow more mouse movements to close the modal
+      // because there is less chance that the user wants to switch to another image
+      return () => this.canNavigate ? 1 : 30
     }
   },
   methods: {

src/components/media_modal/media_modal.vue

@@ -10,6 +10,7 @@
       class="modal-image-container"
       :direction="swipeDirection"
       :threshold="swipeThreshold"
+      :disable-click-threshold="swipeDisableClickThreshold"
       @preview-requested="handleSwipePreview"
       @swipe-finished="handleSwipeEnd"
       @swipeless-clicked="hide"

src/components/react_button/react_button.js

@@ -41,7 +41,7 @@ const ReactButton = {
     },
     focusInput () {
       this.$nextTick(() => {
-        const input = this.$el.querySelector('input')
+        const input = document.querySelector('.reaction-picker-filter > input')
         if (input) input.focus()
       })
     },

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,4 +1,4 @@
-import { filter, trim } from 'lodash'
+import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
@@ -29,11 +29,16 @@ const FilteringTab = {
       },
       set (value) {
         this.muteWordsStringLocal = value
+        this.debouncedSetMuteWords(value)
+      }
+    },
+    debouncedSetMuteWords () {
+      return debounce((value) => {
         this.$store.dispatch('setOption', {
           name: 'muteWords',
           value: filter(value.split('\n'), (word) => trim(word).length > 0)
         })
-      }
+      }, 1000)
     }
   },
   // Updating nested properties

src/components/settings_modal/tabs/profile_tab.js

@@ -153,7 +153,7 @@ const ProfileTab = {
       return false
     },
     deleteField (index, event) {
-      this.$delete(this.newFields, index)
+      this.newFields.splice(index, 1)
     },
     uploadFile (slot, e) {
       const file = e.target.files[0]

src/components/status/status.vue

@@ -84,7 +84,7 @@
           :user="statusoid.user"
         />
         <div class="right-side faint">
-          <span
+          <bdi
             class="status-username repeater-name"
             :title="retweeter"
           >
@@ -101,7 +101,7 @@
               v-else
               :to="retweeterProfileLink"
             >{{ retweeter }}</router-link>
-          </span>
+          </bdi>
           {{ ' ' }}
           <FAIcon
             icon="retweet"

src/components/status_content/status_content.vue

@@ -33,6 +33,7 @@
       <gallery
         v-if="status.attachments.length !== 0"
         class="attachments media-body"
+        :compact="compact"
         :nsfw="nsfwClickthrough"
         :attachments="status.attachments"
         :limit="compact ? 1 : 0"

src/components/swipe_click/swipe_click.js

@@ -5,6 +5,8 @@ import GestureService from '../../services/gesture_service/gesture_service'
  *   direction: a vector that indicates the direction of the intended swipe
  *   threshold: the minimum distance in pixels the swipe has moved on `direction'
  *              for swipe-finished() to have a non-zero sign
+ *   disableClickThreshold: the minimum distance in pixels for the swipe to
+ *                          not trigger a click
  *   perpendicularTolerance: see gesture_service
  *
  * Events:
@@ -34,6 +36,10 @@ const SwipeClick = {
       type: Function,
       default: () => 30
     },
+    disableClickThreshold: {
+      type: Function,
+      default: () => 1
+    },
     perpendicularTolerance: {
       type: Number,
       default: 1.0
@@ -72,6 +78,7 @@ const SwipeClick = {
     this.$gesture = new GestureService.SwipeAndClickGesture({
       direction: this.direction,
       threshold: this.threshold,
+      disableClickThreshold: this.disableClickThreshold,
       perpendicularTolerance: this.perpendicularTolerance,
       swipePreviewCallback: this.preview,
       swipeEndCallback: this.end,