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 },
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())
}
}
}

View file

@ -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()

View file

@ -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') ||

View file

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

View file

@ -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
}
}
}

View file

@ -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)
}