add a quick settings menu for timeline headers

src/components/timeline/timeline.js

@@ -2,12 +2,14 @@ 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 { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faCircleNotch
+  faCircleNotch,
+  faCog
 )
 
 export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
@@ -47,7 +49,8 @@ const Timeline = {
   components: {
     Status,
     Conversation,
-    TimelineMenu
+    TimelineMenu,
+    TimelineQuickSettings
   },
   computed: {
     newStatusCount () {

src/components/timeline/timeline.vue

@@ -16,6 +16,7 @@
       >
         {{ $t('timeline.up_to_date') }}
       </div>
+      <TimelineQuickSettings v-if="!embedded" />
     </div>
     <div :class="classes.body">
       <div
@@ -103,9 +104,12 @@
   max-width: 100%;
   flex-wrap: nowrap;
   align-items: center;
+  position: relative;
+
   .loadmore-button {
     flex-shrink: 0;
   }
+
   .loadmore-text {
     flex-shrink: 0;
     line-height: 1em;

src/components/timeline/timeline_quick_settings.js

@@ -0,0 +1,60 @@
+import Popover from '../popover/popover.vue'
+import BooleanSetting from '../settings_modal/helpers/boolean_setting.vue'
+import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter, faWrench } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFilter,
+  faWrench
+)
+
+const TimelineQuickSettings = {
+  components: {
+    Popover,
+    BooleanSetting
+  },
+  methods: {
+    setReplyVisibility (visibility) {
+      console.log('set reply visibility', visibility)
+      this.$store.dispatch('setOption', { name: 'replyVisibility', value: visibility })
+      this.$store.dispatch('queueFlushAll')
+    },
+    openTab (tab) {
+      this.$store.dispatch('openSettingsModalTab', tab)
+    }
+  },
+  computed: {
+    ...mapGetters(['mergedConfig']),
+    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.hideMutedPosts || this.mergedConfig.hideFilteredStatuses },
+      set () {
+        const value = !this.hideMutedPosts
+        this.$store.dispatch('setOption', { name: 'hideMutedPosts', value })
+        this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
+      }
+    }
+  }
+}
+
+export default TimelineQuickSettings

src/components/timeline/timeline_quick_settings.vue

@@ -0,0 +1,105 @@
+<template>
+  <Popover
+    trigger="click"
+    class="TimelineQuickSettings"
+    :bound-to="{ x: 'container' }"
+  >
+    <div
+      slot="content"
+      class="timeline-settings-menu dropdown-menu"
+    >
+      <button
+        class="button-default dropdown-item"
+        @click="replyVisibilityAll = true"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+        />{{ $t('settings.reply_visibility_all') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="replyVisibilityFollowing = true"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+        />{{ $t('settings.reply_visibility_following_short') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="replyVisibilitySelf = true"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+        />{{ $t('settings.reply_visibility_self_short') }}
+      </button>
+      <div
+        role="separator"
+        class="dropdown-divider"
+      />
+      <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="filter" />{{ $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>
+    <div slot="trigger">
+      <FAIcon icon="cog" />
+    </div>
+  </Popover>
+</template>
+
+<script src="./timeline_quick_settings.js"></script>
+
+<style lang="scss">
+
+.TimelineQuickSettings {
+  align-self: stretch;
+
+  > button {
+    font-size: 1.2em;
+    padding-left: 0.7em;
+    padding-right: 0.2em;
+    line-height: 100%;
+    height: 100%;
+  }
+
+  .dropdown-item {
+    margin: 0;
+  }
+
+  .timeline-settings-menu {
+    display: flex;
+    min-width: 12em;
+    flex-direction: column;
+  }
+}
+
+</style>