From f4276f72416ab0eb8171b843d475d31f13533a44 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 1 Aug 2022 23:20:27 +0300 Subject: made quick settings into their own component, added quick view settings, added both to conversation view --- src/components/conversation/conversation.js | 6 +- src/components/conversation/conversation.vue | 8 ++ .../quick_filter_settings/quick_filter_settings.js | 70 +++++++++++++ .../quick_filter_settings.vue | 107 ++++++++++++++++++++ .../quick_view_settings/quick_view_settings.js | 69 +++++++++++++ .../quick_view_settings/quick_view_settings.vue | 96 ++++++++++++++++++ src/components/timeline/timeline.js | 6 +- src/components/timeline/timeline.vue | 3 +- src/components/timeline/timeline_quick_settings.js | 67 ------------- .../timeline/timeline_quick_settings.vue | 109 --------------------- src/i18n/en.json | 7 +- 11 files changed, 367 insertions(+), 181 deletions(-) create mode 100644 src/components/quick_filter_settings/quick_filter_settings.js create mode 100644 src/components/quick_filter_settings/quick_filter_settings.vue create mode 100644 src/components/quick_view_settings/quick_view_settings.js create mode 100644 src/components/quick_view_settings/quick_view_settings.vue delete mode 100644 src/components/timeline/timeline_quick_settings.js delete mode 100644 src/components/timeline/timeline_quick_settings.vue (limited to 'src') diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 3b540cac..712e2a2c 100644 --- 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 index 1adbe250..c7dacdf9 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -17,6 +17,14 @@ > {{ $t('timeline.collapse') }} + +
+ + + + + + + + + diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js new file mode 100644 index 00000000..bb39eb13 --- /dev/null +++ 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 new file mode 100644 index 00000000..78f315f3 --- /dev/null +++ b/src/components/quick_view_settings/quick_view_settings.vue @@ -0,0 +1,96 @@ + + + + + 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') }}
- + +
- - - - - - - - - diff --git a/src/i18n/en.json b/src/i18n/en.json index a10b271a..c54d4750 100644 --- 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", -- cgit v1.2.3-70-g09d2