Merge remote-tracking branch 'origin/develop' into been-awhile

* origin/develop:
  lint
  fix bugs
  Apply 1 suggestion(s) to 1 file(s)
  change icons
  Update dependency vue-i18n to v9.2.0
  made quick settings into their own component, added quick view settings, added both to conversation view

src/components/conversation/conversation.js

@@ -1,6 +1,8 @@
 import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
 import ThreadTree from '../thread_tree/thread_tree.vue'
+import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
+import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -343,7 +345,9 @@ const conversation = {
   },
   components: {
     Status,
-    ThreadTree
+    ThreadTree,
+    QuickFilterSettings,
+    QuickViewSettings
   },
   watch: {
     statusId (newVal, oldVal) {

src/components/conversation/conversation.vue

@@ -17,6 +17,14 @@
       >
         {{ $t('timeline.collapse') }}
       </button>
+      <QuickFilterSettings
+        v-if="!collapsable"
+        :conversation="true"
+      />
+      <QuickViewSettings
+        v-if="!collapsable"
+        :conversation="true"
+      />
     </div>
     <div class="conversation-body panel-body">
       <div

src/components/quick_filter_settings/quick_filter_settings.js

@@ -9,7 +9,10 @@ library.add(
   faWrench
 )
 
-const TimelineQuickSettings = {
+const QuickFilterSettings = {
+  props: {
+    conversation: Boolean
+  },
   components: {
     Popover
   },
@@ -64,4 +67,4 @@ const TimelineQuickSettings = {
   }
 }
 
-export default TimelineQuickSettings
+export default QuickFilterSettings

src/components/quick_filter_settings/quick_filter_settings.vue

@@ -1,13 +1,14 @@
 <template>
   <Popover
     trigger="click"
-    class="TimelineQuickSettings"
+    class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
   >
     <template #content>
       <div class="dropdown-menu">
         <div v-if="loggedIn">
           <button
+            v-if="!conversation"
             class="button-default dropdown-item"
             @click="replyVisibilityAll = true"
           >
@@ -17,6 +18,7 @@
             />{{ $t('settings.reply_visibility_all') }}
           </button>
           <button
+            v-if="!conversation"
             class="button-default dropdown-item"
             @click="replyVisibilityFollowing = true"
           >
@@ -26,6 +28,7 @@
             />{{ $t('settings.reply_visibility_following_short') }}
           </button>
           <button
+            v-if="!conversation"
             class="button-default dropdown-item"
             @click="replyVisibilitySelf = true"
           >
@@ -35,6 +38,7 @@
             />{{ $t('settings.reply_visibility_self_short') }}
           </button>
           <div
+            v-if="!conversation"
             role="separator"
             class="dropdown-divider"
           />
@@ -70,13 +74,7 @@
           class="button-default dropdown-item dropdown-item-icon"
           @click="openTab('filtering')"
         >
-          <FAIcon icon="font" />{{ $t('settings.word_filter') }}
-        </button>
-        <button
-          class="button-default dropdown-item dropdown-item-icon"
-          @click="openTab('general')"
-        >
-          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
+          <FAIcon icon="font" />{{ $t('settings.word_filter_and_more') }}
         </button>
       </div>
     </template>
@@ -88,11 +86,11 @@
   </Popover>
 </template>
 
-<script src="./timeline_quick_settings.js"></script>
+<script src="./quick_filter_settings.js"></script>
 
 <style lang="scss">
 
-.TimelineQuickSettings {
+.QuickFilterSettings {
 
   > button {
     line-height: 100%;

src/components/quick_view_settings/quick_view_settings.js

@@ -0,0 +1,69 @@
+import Popover from '../popover/popover.vue'
+import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faList,
+  faFolderTree,
+  faBars,
+  faWrench
+)
+
+const QuickViewSettings = {
+  props: {
+    conversation: Boolean
+  },
+  components: {
+    Popover
+  },
+  methods: {
+    setConversationDisplay (visibility) {
+      this.$store.dispatch('setOption', { name: 'conversationDisplay', value: visibility })
+    },
+    openTab (tab) {
+      this.$store.dispatch('openSettingsModalTab', tab)
+    }
+  },
+  computed: {
+    ...mapGetters(['mergedConfig']),
+    loggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    conversationDisplay: {
+      get () { return this.mergedConfig.conversationDisplay },
+      set (newVal) { this.setConversationDisplay(newVal) }
+    },
+    autoUpdate: {
+      get () { return this.mergedConfig.streaming },
+      set () {
+        const value = !this.autoUpdate
+        this.$store.dispatch('setOption', { name: 'streaming', value })
+      }
+    },
+    collapseWithSubjects: {
+      get () { return this.mergedConfig.collapseMessageWithSubject },
+      set () {
+        const value = !this.collapseWithSubjects
+        this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
+      }
+    },
+    showUserAvatars: {
+      get () { return this.mergedConfig.mentionLinkShowAvatar },
+      set () {
+        const value = !this.showUserAvatars
+        console.log(value)
+        this.$store.dispatch('setOption', { name: 'mentionLinkShowAvatar', value })
+      }
+    },
+    muteBotStatuses: {
+      get () { return this.mergedConfig.muteBotStatuses },
+      set () {
+        const value = !this.muteBotStatuses
+        this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
+      }
+    }
+  }
+}
+
+export default QuickViewSettings

src/components/quick_view_settings/quick_view_settings.vue

@@ -0,0 +1,94 @@
+<template>
+  <Popover
+    trigger="click"
+    class="QuickViewSettings"
+    :bound-to="{ x: 'container' }"
+  >
+    <template #content>
+      <div class="dropdown-menu">
+        <button
+          class="button-default dropdown-item"
+          @click="conversationDisplay = 'tree'"
+        >
+          <span
+            class="menu-checkbox -radio"
+            :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+          /><FAIcon icon="folder-tree" /> {{ $t('settings.conversation_display_tree_quick') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="conversationDisplay = 'linear'"
+        >
+          <span
+            class="menu-checkbox -radio"
+            :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
+          /><FAIcon icon="list" /> {{ $t('settings.conversation_display_linear_quick') }}
+        </button>
+        <div
+          role="separator"
+          class="dropdown-divider"
+        />
+        <button
+          class="button-default dropdown-item"
+          @click="showUserAvatars = !showUserAvatars"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': showUserAvatars }"
+          />{{ $t('settings.mention_link_show_avatar_quick') }}
+        </button>
+        <button
+          v-if="!conversation"
+          class="button-default dropdown-item"
+          @click="autoUpdate = !autoUpdate"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': autoUpdate }"
+          />{{ $t('settings.auto_update') }}
+        </button>
+        <button
+          v-if="!conversation"
+          class="button-default dropdown-item"
+          @click="collapseWithSubjects = !collapseWithSubjects"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
+          />{{ $t('settings.collapse_subject') }}
+        </button>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click="openTab('general')"
+        >
+          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
+        </button>
+      </div>
+    </template>
+    <template #trigger>
+      <button class="button-unstyled">
+        <FAIcon icon="bars" />
+      </button>
+    </template>
+  </Popover>
+</template>
+
+<script src="./quick_view_settings.js"></script>
+
+<style lang="scss">
+
+.QuickViewSettings {
+
+  > button {
+    line-height: 100%;
+    height: 100%;
+    width: var(--__panel-heading-height-inner);
+    text-align: center;
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
+}
+
+</style>

src/components/timeline/timeline.js

@@ -2,7 +2,8 @@ import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
-import TimelineQuickSettings from './timeline_quick_settings.vue'
+import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
+import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
@@ -38,7 +39,8 @@ const Timeline = {
     Status,
     Conversation,
     TimelineMenu,
-    TimelineQuickSettings
+    QuickFilterSettings,
+    QuickViewSettings
   },
   computed: {
     filteredVisibleStatuses () {

src/components/timeline/timeline.vue

@@ -16,7 +16,8 @@
       >
         {{ $t('timeline.up_to_date') }}
       </div>
-      <TimelineQuickSettings v-if="!embedded" />
+      <QuickFilterSettings v-if="!embedded" />
+      <QuickViewSettings v-if="!embedded" />
     </div>
     <div :class="classes.body">
       <div