Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia

src/components/quick_view_settings/quick_view_settings.js

@@ -1,5 +1,6 @@
-import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
+import Popover from 'src/components/popover/popover.vue'
+import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
+import { mapGetters, mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from '../../stores/interface'
@@ -16,7 +17,8 @@ const QuickViewSettings = {
     conversation: Boolean
   },
   components: {
-    Popover
+    Popover,
+    QuickFilterSettings
   },
   methods: {
     setConversationDisplay (visibility) {
@@ -28,6 +30,9 @@ const QuickViewSettings = {
   },
   computed: {
     ...mapGetters(['mergedConfig']),
+    ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile'
+    }),
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
@@ -53,7 +58,6 @@ const QuickViewSettings = {
       get () { return this.mergedConfig.mentionLinkShowAvatar },
       set () {
         const value = !this.showUserAvatars
-        console.log(value)
         this.$store.dispatch('setOption', { name: 'mentionLinkShowAvatar', value })
       }
     },
@@ -63,6 +67,13 @@ const QuickViewSettings = {
         const value = !this.muteBotStatuses
         this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
       }
+    },
+    muteSensitiveStatuses: {
+      get () { return this.mergedConfig.muteSensitiveStatuses },
+      set () {
+        const value = !this.muteSensitiveStatuses
+        this.$store.dispatch('setOption', { name: 'muteSensitiveStatuses', value })
+      }
     }
   }
 }

src/components/quick_view_settings/quick_view_settings.vue

@@ -3,94 +3,125 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
-    :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div
         class="dropdown-menu"
         role="menu"
       >
+        <div
+          v-if="mobileLayout"
+          class="menu-item dropdown-item -icon"
+        >
+          <QuickFilterSettings :nested="true" />
+        </div>
+        <div
+          v-if="mobileLayout"
+          role="separator"
+          class="dropdown-divider"
+        />
         <div role="group">
-          <button
-            class="button-default dropdown-item"
-            :aria-checked="conversationDisplay === 'tree'"
-            role="menuitemradio"
-            @click="conversationDisplay = 'tree'"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :aria-hidden="true"
-              :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
-            /><FAIcon
-              icon="folder-tree"
-              :aria-hidden="true"
-            /> {{ $t('settings.conversation_display_tree_quick') }}
-          </button>
-          <button
-            class="button-default dropdown-item"
-            :aria-checked="conversationDisplay === 'linear'"
-            role="menuitemradio"
-            @click="conversationDisplay = 'linear'"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
-              :aria-hidden="true"
-            /><FAIcon
-              icon="list"
-              :aria-hidden="true"
-            /> {{ $t('settings.conversation_display_linear_quick') }}
-          </button>
+          <div class="menu-item dropdown-item -icon-double">
+            <button
+              class="main-button"
+              :aria-checked="conversationDisplay === 'tree'"
+              role="menuitemradio"
+              @click="conversationDisplay = 'tree'"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :aria-hidden="true"
+                :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+              /><FAIcon
+                icon="folder-tree"
+                :aria-hidden="true"
+                fixed-width
+              /> {{ $t('settings.conversation_display_tree_quick') }}
+            </button>
+          </div>
+          <div class="menu-item dropdown-item -icon-double">
+            <button
+              class="main-button"
+              :aria-checked="conversationDisplay === 'linear'"
+              role="menuitemradio"
+              @click="conversationDisplay = 'linear'"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
+                :aria-hidden="true"
+              /><FAIcon
+                icon="list"
+                :aria-hidden="true"
+                fixed-width
+              /> {{ $t('settings.conversation_display_linear_quick') }}
+            </button>
+          </div>
         </div>
         <div
           role="separator"
           class="dropdown-divider"
         />
-        <button
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="showUserAvatars"
-          @click="showUserAvatars = !showUserAvatars"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': showUserAvatars }"
-            :aria-hidden="true"
-          />{{ $t('settings.mention_link_show_avatar_quick') }}
-        </button>
-        <button
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="showUserAvatars"
+            @click="showUserAvatars = !showUserAvatars"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': showUserAvatars }"
+              :aria-hidden="true"
+            />{{ $t('settings.mention_link_show_avatar_quick') }}
+          </button>
+        </div>
+        <div
           v-if="!conversation"
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="autoUpdate"
-          @click="autoUpdate = !autoUpdate"
+          class="menu-item dropdown-item -icon"
         >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': autoUpdate }"
-            :aria-hidden="true"
-          />{{ $t('settings.auto_update') }}
-        </button>
-        <button
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="autoUpdate"
+            @click="autoUpdate = !autoUpdate"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': autoUpdate }"
+              :aria-hidden="true"
+            />{{ $t('settings.auto_update') }}
+          </button>
+        </div>
+        <div
           v-if="!conversation"
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="collapseWithSubjects"
-          @click="collapseWithSubjects = !collapseWithSubjects"
+          class="menu-item dropdown-item -icon"
         >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
-            :aria-hidden="true"
-          />{{ $t('settings.collapse_subject') }}
-        </button>
-        <button
-          class="button-default dropdown-item dropdown-item-icon"
-          role="menuitem"
-          @click="openTab('general')"
-        >
-          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
-        </button>
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="collapseWithSubjects"
+            @click="collapseWithSubjects = !collapseWithSubjects"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
+              :aria-hidden="true"
+            />{{ $t('settings.collapse_subject') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitem"
+            @click="openTab('general')"
+          >
+            <FAIcon
+              icon="wrench"
+              fixed-width
+            />{{ $t('settings.more_settings') }}
+          </button>
+        </div>
       </div>
     </template>
     <template #trigger>