From 3d37b9d8e1cad78fb1f666b3cfb7f28b1fdc1c2d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 12 Apr 2022 21:18:06 +0300 Subject: [PATCH 1/3] unified layout-setting code and made an option to control or disable third column behavior --- src/App.js | 20 ++++++++-------- src/boot/after_store.js | 9 +++---- .../settings_modal/tabs/general_tab.js | 5 ++++ .../settings_modal/tabs/general_tab.vue | 9 +++++++ src/modules/config.js | 4 ++++ src/modules/interface.js | 24 ++++++++++++++++--- 6 files changed, 52 insertions(+), 19 deletions(-) diff --git a/src/App.js b/src/App.js index 9cfaf4fa1..19c585955 100644 --- a/src/App.js +++ b/src/App.js @@ -98,22 +98,22 @@ export default { }, layoutType () { return this.$store.state.interface.layoutType }, privateMode () { return this.$store.state.instance.private }, - reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight }, + reverseLayout () { + const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig + if (this.layoutType !== 'wide') { + return reverseSetting + } else { + return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting + } + }, noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders }, showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars }, ...mapGetters(['mergedConfig']) }, methods: { updateMobileState () { - const mobileLayout = windowWidth() <= 800 - const wideLayout = windowWidth() >= 1300 - const layoutHeight = windowHeight() - const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal') - const changed = layoutType !== this.layoutType - if (changed) { - this.$store.dispatch('setLayoutType', layoutType) - } - this.$store.dispatch('setLayoutHeight', layoutHeight) + this.$store.dispatch('setLayoutWidth', windowWidth()) + this.$store.dispatch('setLayoutHeight', windowHeight()) } } } diff --git a/src/boot/after_store.js b/src/boot/after_store.js index ce96141d0..f655c38f0 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -8,7 +8,7 @@ import App from '../App.vue' import routes from './routes' import VBodyScrollLock from 'src/directives/body_scroll_lock' -import { windowWidth } from '../services/window_utils/window_utils' +import { windowWidth, windowHeight } from '../services/window_utils/window_utils' import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' @@ -332,11 +332,8 @@ const checkOAuthToken = async ({ store }) => { } const afterStoreSetup = async ({ store, i18n }) => { - // TODO cleanup copypasta - const mobileLayout = windowWidth() <= 800 - const wideLayout = windowWidth() >= 1300 - const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal') - store.dispatch('setLayoutType', layoutType) + store.dispatch('setLayoutWidth', windowWidth()) + store.dispatch('setLayoutHeight', windowHeight()) FaviconService.initFaviconService() diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index 62d86176d..89505cb33 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -38,6 +38,11 @@ const GeneralTab = { value: mode, label: this.$t(`settings.mention_link_display_${mode}`) })), + thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({ + key: mode, + value: mode, + label: this.$t(`settings.conversation_display_${mode}`) + })), loopSilentAvailable: // Firefox Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index e29bc7cf5..db8718cf5 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -70,6 +70,15 @@ {{ $t('settings.show_scrollbars') }} +
  • + + {{ $t('settings.third_column_mode') }} + +
  • = 1300 + commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile) + } + }, setLastTimeline ({ commit }, value) { commit('setLastTimeline', value) } From 4b050c7fa5e21f3f19c295d3e4b32f312651a213 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 12 Apr 2022 21:49:14 +0300 Subject: [PATCH 2/3] properly ignore sticky elements when calculating offset because they technically are following main scroll --- src/services/offset_finder/offset_finder.service.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/offset_finder/offset_finder.service.js b/src/services/offset_finder/offset_finder.service.js index 9034f8c84..5a904f08c 100644 --- a/src/services/offset_finder/offset_finder.service.js +++ b/src/services/offset_finder/offset_finder.service.js @@ -9,7 +9,7 @@ export const findOffset = (child, parent, { top = 0, left = 0 } = {}, ignorePadd result.left += ignorePadding ? 0 : leftPadding } - if (child.offsetParent && (parent === window || parent.contains(child.offsetParent) || parent === child.offsetParent)) { + if (child.offsetParent && window.getComputedStyle(child.offsetParent).position !== 'sticky' && (parent === window || parent.contains(child.offsetParent) || parent === child.offsetParent)) { return findOffset(child.offsetParent, parent, result, false) } else { if (parent !== window) { From 28556f7c277ea96ac7216e019f448480108fba5d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 12 Apr 2022 22:01:04 +0300 Subject: [PATCH 3/3] localization updates --- src/components/settings_modal/tabs/general_tab.js | 2 +- src/i18n/en.json | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index 89505cb33..c97b34101 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -41,7 +41,7 @@ const GeneralTab = { thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({ key: mode, value: mode, - label: this.$t(`settings.conversation_display_${mode}`) + label: this.$t(`settings.third_column_mode_${mode}`) })), loopSilentAvailable: // Firefox diff --git a/src/i18n/en.json b/src/i18n/en.json index f8336e5ce..d04df3258 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -367,7 +367,7 @@ "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)", "hide_isp": "Hide instance-specific panel", "hide_shoutbox": "Hide instance shoutbox", - "right_sidebar": "Show sidebar on the right side", + "right_sidebar": "Reverse order of columns", "always_show_post_button": "Always show floating New Post button", "hide_wallpaper": "Hide instance wallpaper", "preload_images": "Preload images", @@ -481,6 +481,12 @@ "subject_line_noop": "Do not copy", "conversation_display": "Conversation display style", "conversation_display_tree": "Tree-style", + "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", + "third_column_mode_none": "Don't show third column at all", + "third_column_mode_notifications": "Notifications column", + "third_column_mode_postform": "Main post form and navigation", "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",