Add hacky functionality to open specific settings tabs

This commit is contained in:
Shpuld Shpuldson 2020-09-03 15:45:13 +03:00
parent acc45b49a5
commit f281663b49
6 changed files with 69 additions and 12 deletions

View file

@ -555,6 +555,9 @@ const PostStatusForm = {
}, },
updateIdempotencyKey () { updateIdempotencyKey () {
this.idempotencyKey = Date.now().toString() this.idempotencyKey = Date.now().toString()
},
openProfileTab () {
this.$store.dispatch('openSettingsModalTab', 'profile')
} }
} }
} }

View file

@ -23,9 +23,12 @@
tag="p" tag="p"
class="visibility-notice" class="visibility-notice"
> >
<router-link :to="{ name: 'user-settings' }"> <a
href="#"
@click="openProfileTab"
>
{{ $t('post_status.account_not_locked_warning_link') }} {{ $t('post_status.account_not_locked_warning_link') }}
</router-link> </a>
</i18n> </i18n>
<p <p
v-if="!hideScopeNotice && newStatus.visibility === 'public'" v-if="!hideScopeNotice && newStatus.visibility === 'public'"

View file

@ -27,6 +27,34 @@ const SettingsModalContent = {
computed: { computed: {
isLoggedIn () { isLoggedIn () {
return !!this.$store.state.users.currentUser return !!this.$store.state.users.currentUser
},
open () {
return this.$store.state.interface.settingsModalState !== 'hidden'
}
},
methods: {
onOpen () {
const targetTab = this.$store.state.interface.settingsModalTargetTab
// We're being told to open in specific tab
if (targetTab) {
const tabIndex = this.$refs.tabSwitcher.$slots.default.findIndex(elm => {
return elm.data && elm.data.attrs['data-tab-name'] === targetTab
})
if (tabIndex >= 0) {
this.$refs.tabSwitcher.setTab(tabIndex)
}
}
// Clear the state of target tab, so that next time settings is opened
// it doesn't force it.
this.$store.dispatch('clearSettingsModalTargetTab')
}
},
mounted () {
this.onOpen()
},
watch: {
open: function (value) {
if (value) this.onOpen()
} }
} }
} }

View file

@ -8,6 +8,7 @@
<div <div
:label="$t('settings.general')" :label="$t('settings.general')"
icon="wrench" icon="wrench"
data-tab-name="general"
> >
<GeneralTab /> <GeneralTab />
</div> </div>
@ -15,6 +16,7 @@
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.profile_tab')" :label="$t('settings.profile_tab')"
icon="user" icon="user"
data-tab-name="profile"
> >
<ProfileTab /> <ProfileTab />
</div> </div>
@ -22,18 +24,21 @@
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.security_tab')" :label="$t('settings.security_tab')"
icon="lock" icon="lock"
data-tab-name="security"
> >
<SecurityTab /> <SecurityTab />
</div> </div>
<div <div
:label="$t('settings.filtering')" :label="$t('settings.filtering')"
icon="filter" icon="filter"
data-tab-name="filtering"
> >
<FilteringTab /> <FilteringTab />
</div> </div>
<div <div
:label="$t('settings.theme')" :label="$t('settings.theme')"
icon="brush" icon="brush"
data-tab-name="theme"
> >
<ThemeTab /> <ThemeTab />
</div> </div>
@ -41,6 +46,7 @@
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.notifications')" :label="$t('settings.notifications')"
icon="bell-ringing-o" icon="bell-ringing-o"
data-tab-name="notifications"
> >
<NotificationsTab /> <NotificationsTab />
</div> </div>
@ -48,6 +54,7 @@
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.data_import_export_tab')" :label="$t('settings.data_import_export_tab')"
icon="download" icon="download"
data-tab-name="dataImportExport"
> >
<DataImportExportTab /> <DataImportExportTab />
</div> </div>
@ -56,12 +63,14 @@
:label="$t('settings.mutes_and_blocks')" :label="$t('settings.mutes_and_blocks')"
:fullHeight="true" :fullHeight="true"
icon="eye-off" icon="eye-off"
data-tab-name="mutesAndBlocks"
> >
<MutesAndBlocksTab /> <MutesAndBlocksTab />
</div> </div>
<div <div
:label="$t('settings.version.title')" :label="$t('settings.version.title')"
icon="info-circled" icon="info-circled"
data-tab-name="version"
> >
<VersionTab /> <VersionTab />
</div> </div>

View file

@ -60,16 +60,19 @@ export default Vue.component('tab-switcher', {
} }
}, },
methods: { methods: {
activateTab (index) { clickTab (index) {
return (e) => { return (e) => {
e.preventDefault() e.preventDefault()
if (typeof this.onSwitch === 'function') { this.setTab(index)
this.onSwitch.call(null, this.$slots.default[index].key) }
} },
this.active = index setTab (index) {
if (this.scrollableTabs) { if (typeof this.onSwitch === 'function') {
this.$refs.contents.scrollTop = 0 this.onSwitch.call(null, this.$slots.default[index].key)
} }
this.active = index
if (this.scrollableTabs) {
this.$refs.contents.scrollTop = 0
} }
} }
}, },
@ -88,7 +91,7 @@ export default Vue.component('tab-switcher', {
<div class={classesWrapper.join(' ')}> <div class={classesWrapper.join(' ')}>
<button <button
disabled={slot.data.attrs.disabled} disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)} onClick={this.clickTab(index)}
class={classesTab.join(' ')}> class={classesTab.join(' ')}>
<img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/> <img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/>
{slot.data.attrs.label ? '' : slot.data.attrs.label} {slot.data.attrs.label ? '' : slot.data.attrs.label}
@ -100,7 +103,7 @@ export default Vue.component('tab-switcher', {
<div class={classesWrapper.join(' ')}> <div class={classesWrapper.join(' ')}>
<button <button
disabled={slot.data.attrs.disabled} disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)} onClick={this.clickTab(index)}
class={classesTab.join(' ')} class={classesTab.join(' ')}
type="button" type="button"
> >

View file

@ -3,6 +3,7 @@ import { set, delete as del } from 'vue'
const defaultState = { const defaultState = {
settingsModalState: 'hidden', settingsModalState: 'hidden',
settingsModalLoaded: false, settingsModalLoaded: false,
settingsModalTargetTab: null,
settings: { settings: {
currentSaveStateNotice: null, currentSaveStateNotice: null,
noticeClearTimeout: null, noticeClearTimeout: null,
@ -62,6 +63,9 @@ const interfaceMod = {
state.settingsModalLoaded = true state.settingsModalLoaded = true
} }
}, },
setSettingsModalTargetTab (state, value) {
state.settingsModalTargetTab = value
},
pushGlobalNotice (state, notice) { pushGlobalNotice (state, notice) {
state.globalNotices.push(notice) state.globalNotices.push(notice)
}, },
@ -97,6 +101,13 @@ const interfaceMod = {
togglePeekSettingsModal ({ commit }) { togglePeekSettingsModal ({ commit }) {
commit('togglePeekSettingsModal') commit('togglePeekSettingsModal')
}, },
clearSettingsModalTargetTab ({ commit }) {
commit('setSettingsModalTargetTab', null)
},
openSettingsModalTab ({ commit }, value) {
commit('setSettingsModalTargetTab', value)
commit('openSettingsModal')
},
pushGlobalNotice ( pushGlobalNotice (
{ commit, dispatch }, { commit, dispatch },
{ {