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 () {
this.idempotencyKey = Date.now().toString()
},
openProfileTab () {
this.$store.dispatch('openSettingsModalTab', 'profile')
}
}
}

View file

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

View file

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

View file

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

View file

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