diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 20 | ||||
| -rw-r--r-- | src/boot/after_store.js | 9 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/general_tab.js | 5 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/general_tab.vue | 9 | ||||
| -rw-r--r-- | src/modules/config.js | 4 | ||||
| -rw-r--r-- | src/modules/interface.js | 24 |
6 files changed, 52 insertions, 19 deletions
@@ -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 ce96141d..f655c38f 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 62d86176..89505cb3 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 e29bc7cf..db8718cf 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -71,6 +71,15 @@ </BooleanSetting> </li> <li> + <ChoiceSetting + id="thirdColumnMode" + path="thirdColumnMode" + :options="thirdColumnModeOptions" + > + {{ $t('settings.third_column_mode') }} + </ChoiceSetting> + </li> + <li> <BooleanSetting path="alwaysShowNewPostButton" expert="1" diff --git a/src/modules/config.js b/src/modules/config.js index 6d2e6ce0..c0d5c3c2 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -46,6 +46,7 @@ export const defaultState = { pauseOnUnfocused: true, stopGifs: true, replyVisibility: 'all', + thirdColumnMode: 'notifications', notificationVisibility: { follows: true, mentions: true, @@ -165,6 +166,9 @@ const config = { case 'interfaceLanguage': messages.setLanguage(this.getters.i18n, value) break + case 'thirdColumnMode': + dispatch('setLayoutWidth', undefined) + break } } } diff --git a/src/modules/interface.js b/src/modules/interface.js index 9df72b88..ed31b6ff 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -72,6 +72,9 @@ const interfaceMod = { setLayoutHeight (state, value) { state.layoutHeight = value }, + setLayoutWidth (state, value) { + state.layoutWidth = value + }, setLastTimeline (state, value) { state.lastTimeline = value } @@ -86,9 +89,6 @@ const interfaceMod = { setNotificationPermission ({ commit }, permission) { commit('setNotificationPermission', permission) }, - setLayoutType ({ commit }, value) { - commit('setLayoutType', value) - }, closeSettingsModal ({ commit }) { commit('closeSettingsModal') }, @@ -133,6 +133,24 @@ const interfaceMod = { setLayoutHeight ({ commit }, value) { commit('setLayoutHeight', value) }, + // value is optional, assuming it was cached prior + setLayoutWidth ({ commit, state, rootGetters }, value) { + let width = value + if (value !== undefined) { + commit('setLayoutWidth', value) + } else { + width = state.layoutWidth + } + const mobileLayout = width <= 800 + const normalOrMobile = mobileLayout ? 'mobile' : 'normal' + const { thirdColumnMode } = rootGetters.mergedConfig + if (thirdColumnMode === 'none') { + commit('setLayoutType', normalOrMobile) + } else { + const wideLayout = width >= 1300 + commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile) + } + }, setLastTimeline ({ commit }, value) { commit('setLastTimeline', value) } |