made quick settings into their own component, added quick view settings,

added both to conversation view

4 files changed, 6 insertions, 179 deletions

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index c575e876..f195940a 100644
--- a/src/components/timeline/timeline.js
+++ b/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 () {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 266c1d9a..627cafbb 100644
--- a/src/components/timeline/timeline.vue
+++ b/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
diff --git a/src/components/timeline/timeline_quick_settings.js b/src/components/timeline/timeline_quick_settings.js
deleted file mode 100644
index 92d5ac14..00000000
--- a/src/components/timeline/timeline_quick_settings.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faFilter,
-  faFont,
-  faWrench
-)
-
-const TimelineQuickSettings = {
-  components: {
-    Popover
-  },
-  methods: {
-    setReplyVisibility (visibility) {
-      this.$store.dispatch('setOption', { name: 'replyVisibility', value: visibility })
-      this.$store.dispatch('queueFlushAll')
-    },
-    openTab (tab) {
-      this.$store.dispatch('openSettingsModalTab', tab)
-    }
-  },
-  computed: {
-    ...mapGetters(['mergedConfig']),
-    loggedIn () {
-      return !!this.$store.state.users.currentUser
-    },
-    replyVisibilitySelf: {
-      get () { return this.mergedConfig.replyVisibility === 'self' },
-      set () { this.setReplyVisibility('self') }
-    },
-    replyVisibilityFollowing: {
-      get () { return this.mergedConfig.replyVisibility === 'following' },
-      set () { this.setReplyVisibility('following') }
-    },
-    replyVisibilityAll: {
-      get () { return this.mergedConfig.replyVisibility === 'all' },
-      set () { this.setReplyVisibility('all') }
-    },
-    hideMedia: {
-      get () { return this.mergedConfig.hideAttachments || this.mergedConfig.hideAttachmentsInConv },
-      set () {
-        const value = !this.hideMedia
-        this.$store.dispatch('setOption', { name: 'hideAttachments', value })
-        this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
-      }
-    },
-    hideMutedPosts: {
-      get () { return this.mergedConfig.hideFilteredStatuses },
-      set () {
-        const value = !this.hideMutedPosts
-        this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
-      }
-    },
-    muteBotStatuses: {
-      get () { return this.mergedConfig.muteBotStatuses },
-      set () {
-        const value = !this.muteBotStatuses
-        this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
-      }
-    }
-  }
-}
-
-export default TimelineQuickSettings
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
deleted file mode 100644
index 297bc72a..00000000
--- a/src/components/timeline/timeline_quick_settings.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <Popover
-    trigger="click"
-    class="TimelineQuickSettings"
-    :bound-to="{ x: 'container' }"
-  >
-    <template #content>
-      <div class="dropdown-menu">
-        <div v-if="loggedIn">
-          <button
-            class="button-default dropdown-item"
-            @click="replyVisibilityAll = true"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
-            />{{ $t('settings.reply_visibility_all') }}
-          </button>
-          <button
-            class="button-default dropdown-item"
-            @click="replyVisibilityFollowing = true"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
-            />{{ $t('settings.reply_visibility_following_short') }}
-          </button>
-          <button
-            class="button-default dropdown-item"
-            @click="replyVisibilitySelf = true"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
-            />{{ $t('settings.reply_visibility_self_short') }}
-          </button>
-          <div
-            role="separator"
-            class="dropdown-divider"
-          />
-        </div>
-        <button
-          class="button-default dropdown-item"
-          @click="muteBotStatuses = !muteBotStatuses"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': muteBotStatuses }"
-          />{{ $t('settings.mute_bot_posts') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="hideMedia = !hideMedia"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': hideMedia }"
-          />{{ $t('settings.hide_media_previews') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="hideMutedPosts = !hideMutedPosts"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': hideMutedPosts }"
-          />{{ $t('settings.hide_all_muted_posts') }}
-        </button>
-        <button
-          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') }}
-        </button>
-      </div>
-    </template>
-    <template #trigger>
-      <button class="button-unstyled">
-        <FAIcon icon="filter" />
-      </button>
-    </template>
-  </Popover>
-</template>
-
-<script src="./timeline_quick_settings.js"></script>
-
-<style lang="scss">
-
-.TimelineQuickSettings {
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
-</style>