commit: f4276f72416ab0eb8171b843d475d31f13533a44
parent 3fc9673a7d0fb851283e4ed687c2fd7790f03317
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 1 Aug 2022 23:20:27 +0300
made quick settings into their own component, added quick view settings,
added both to conversation view
Diffstat:
11 files changed, 367 insertions(+), 181 deletions(-)
diff --git a/src/components/conversation/conversation.js b/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) {
diff --git a/src/components/conversation/conversation.vue b/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
diff --git a/src/components/quick_filter_settings/quick_filter_settings.js b/src/components/quick_filter_settings/quick_filter_settings.js
@@ -0,0 +1,70 @@
+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 QuickFilterSettings = {
+ props: {
+ conversation: Boolean
+ },
+ 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 QuickFilterSettings
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -0,0 +1,107 @@
+<template>
+ <Popover
+ trigger="click"
+ 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"
+ >
+ <span
+ class="menu-checkbox -radio"
+ :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
+ />{{ $t('settings.reply_visibility_all') }}
+ </button>
+ <button
+ v-if="!conversation"
+ 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
+ v-if="!conversation"
+ 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
+ v-if="!conversation"
+ 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_and_more') }}
+ </button>
+ </div>
+ </template>
+ <template #trigger>
+ <button class="button-unstyled">
+ <FAIcon icon="filter" />
+ </button>
+ </template>
+ </Popover>
+</template>
+
+<script src="./quick_filter_settings.js"></script>
+
+<style lang="scss">
+
+.QuickFilterSettings {
+
+ > button {
+ line-height: 100%;
+ height: 100%;
+ width: var(--__panel-heading-height-inner);
+ text-align: center;
+
+ svg {
+ font-size: 1.2em;
+ }
+ }
+}
+
+</style>
diff --git a/src/components/quick_view_settings/quick_view_settings.js b/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 { faTableList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faTableList,
+ faFolderTree,
+ faBars,
+ faWrench
+)
+
+const QuickViewSettings = {
+ props: {
+ conversation: Boolean
+ },
+ components: {
+ Popover
+ },
+ methods: {
+ setConversationDisplay (visibility) {
+ this.$store.dispatch('setOption', { name: 'conversationDisplay', value: visibility })
+ this.$store.dispatch('queueFlushAll')
+ },
+ 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.mentionLinkShowAvatar
+ 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
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
@@ -0,0 +1,96 @@
+<template>
+ <Popover
+ trigger="click"
+ class="QuickViewSettings"
+ :bound-to="{ x: 'container' }"
+ >
+ <template #content>
+ <div class="dropdown-menu">
+ <div v-if="loggedIn">
+ <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="bars"/> {{ $t('settings.conversation_display_linear_quick') }}
+ </button>
+ <div
+ role="separator"
+ class="dropdown-divider"
+ />
+ </div>
+ <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="table-list" />
+ </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>
diff --git 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
@@ -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
@@ -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
@@ -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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -375,7 +375,7 @@
"filtering": "Filtering",
"wordfilter": "Wordfilter",
"filtering_explanation": "All statuses containing these words will be muted, one per line",
- "word_filter": "Word filter",
+ "word_filter_and_more": "Word filter and more...",
"follow_export": "Follow export",
"follow_export_button": "Export your follows to a csv file",
"follow_import": "Follow import",
@@ -509,6 +509,7 @@
"subject_line_noop": "Do not copy",
"conversation_display": "Conversation display style",
"conversation_display_tree": "Tree-style",
+ "conversation_display_tree_quick": "Tree view",
"disable_sticky_headers": "Don't stick column headers to top of the screen",
"show_scrollbars": "Show side column's scrollbars",
"third_column_mode": "When there's enough space, show third column containing",
@@ -518,6 +519,7 @@
"tree_advanced": "Allow more flexible navigation in tree view",
"tree_fade_ancestors": "Display ancestors of the current status in faint text",
"conversation_display_linear": "Linear-style",
+ "conversation_display_linear_quick": "Linear view",
"conversation_other_replies_button": "Show the \"other replies\" button",
"conversation_other_replies_button_below": "Below statuses",
"conversation_other_replies_button_inside": "Inside statuses",
@@ -526,8 +528,10 @@
"sensitive_by_default": "Mark posts as sensitive by default",
"stop_gifs": "Pause animated images until you hover on them",
"streaming": "Automatically show new posts when scrolled to the top",
+ "auto_update": "Show new posts automatically",
"user_mutes": "Users",
"useStreamingApi": "Receive posts and notifications real-time",
+ "use_websockets": "Use websockets (Realtime updates)",
"text": "Text",
"theme": "Theme",
"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
@@ -549,6 +553,7 @@
"mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
"mention_link_use_tooltip": "Show user card when clicking mention links",
"mention_link_show_avatar": "Show user avatar beside the link",
+ "mention_link_show_avatar_quick": "Show user avatar next to mentions",
"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
"user_popover_avatar_zoom": "Clicking on user avatar in popover zooms it instead of closing the popover",
