commit: 3d37b9d8e1cad78fb1f666b3cfb7f28b1fdc1c2d
parent b37932fdf434d23777eaa58fccbf7afb07a052ea
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 21:18:06 +0300
unified layout-setting code and made an option to control or disable
third column behavior
Diffstat:
6 files changed, 52 insertions(+), 19 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)
}
