unified layout-setting code and made an option to control or disable

third column behavior
This commit is contained in:
Henry Jameson 2022-04-12 21:18:06 +03:00
parent b37932fdf4
commit 3d37b9d8e1
6 changed files with 52 additions and 19 deletions

View file

@ -98,22 +98,22 @@ export default {
}, },
layoutType () { return this.$store.state.interface.layoutType }, layoutType () { return this.$store.state.interface.layoutType },
privateMode () { return this.$store.state.instance.private }, 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 }, noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars }, showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
}, },
methods: { methods: {
updateMobileState () { updateMobileState () {
const mobileLayout = windowWidth() <= 800 this.$store.dispatch('setLayoutWidth', windowWidth())
const wideLayout = windowWidth() >= 1300 this.$store.dispatch('setLayoutHeight', windowHeight())
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)
} }
} }
} }

View file

@ -8,7 +8,7 @@ import App from '../App.vue'
import routes from './routes' import routes from './routes'
import VBodyScrollLock from 'src/directives/body_scroll_lock' 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 { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { CURRENT_VERSION } from '../services/theme_data/theme_data.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 }) => { const afterStoreSetup = async ({ store, i18n }) => {
// TODO cleanup copypasta store.dispatch('setLayoutWidth', windowWidth())
const mobileLayout = windowWidth() <= 800 store.dispatch('setLayoutHeight', windowHeight())
const wideLayout = windowWidth() >= 1300
const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
store.dispatch('setLayoutType', layoutType)
FaviconService.initFaviconService() FaviconService.initFaviconService()

View file

@ -38,6 +38,11 @@ const GeneralTab = {
value: mode, value: mode,
label: this.$t(`settings.mention_link_display_${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: loopSilentAvailable:
// Firefox // Firefox
Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||

View file

@ -70,6 +70,15 @@
{{ $t('settings.show_scrollbars') }} {{ $t('settings.show_scrollbars') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li>
<ChoiceSetting
id="thirdColumnMode"
path="thirdColumnMode"
:options="thirdColumnModeOptions"
>
{{ $t('settings.third_column_mode') }}
</ChoiceSetting>
</li>
<li> <li>
<BooleanSetting <BooleanSetting
path="alwaysShowNewPostButton" path="alwaysShowNewPostButton"

View file

@ -46,6 +46,7 @@ export const defaultState = {
pauseOnUnfocused: true, pauseOnUnfocused: true,
stopGifs: true, stopGifs: true,
replyVisibility: 'all', replyVisibility: 'all',
thirdColumnMode: 'notifications',
notificationVisibility: { notificationVisibility: {
follows: true, follows: true,
mentions: true, mentions: true,
@ -165,6 +166,9 @@ const config = {
case 'interfaceLanguage': case 'interfaceLanguage':
messages.setLanguage(this.getters.i18n, value) messages.setLanguage(this.getters.i18n, value)
break break
case 'thirdColumnMode':
dispatch('setLayoutWidth', undefined)
break
} }
} }
} }

View file

@ -72,6 +72,9 @@ const interfaceMod = {
setLayoutHeight (state, value) { setLayoutHeight (state, value) {
state.layoutHeight = value state.layoutHeight = value
}, },
setLayoutWidth (state, value) {
state.layoutWidth = value
},
setLastTimeline (state, value) { setLastTimeline (state, value) {
state.lastTimeline = value state.lastTimeline = value
} }
@ -86,9 +89,6 @@ const interfaceMod = {
setNotificationPermission ({ commit }, permission) { setNotificationPermission ({ commit }, permission) {
commit('setNotificationPermission', permission) commit('setNotificationPermission', permission)
}, },
setLayoutType ({ commit }, value) {
commit('setLayoutType', value)
},
closeSettingsModal ({ commit }) { closeSettingsModal ({ commit }) {
commit('closeSettingsModal') commit('closeSettingsModal')
}, },
@ -133,6 +133,24 @@ const interfaceMod = {
setLayoutHeight ({ commit }, value) { setLayoutHeight ({ commit }, value) {
commit('setLayoutHeight', 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) { setLastTimeline ({ commit }, value) {
commit('setLastTimeline', value) commit('setLastTimeline', value)
} }