diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js index 5827c8fb3..c770fbe04 100644 --- a/src/components/settings_modal/settings_modal_user_content.js +++ b/src/components/settings_modal/settings_modal_user_content.js @@ -73,6 +73,11 @@ const SettingsModalContent = { return useInterfaceStore().layoutType === 'mobile' } }, + data () { + return { + navCollapsed: false + } + }, methods: { onOpen () { const targetTab = useInterfaceStore().settingsModalTargetTab @@ -90,9 +95,11 @@ const SettingsModalContent = { useInterfaceStore().clearSettingsModalTargetTab() }, nestedTooBig () { + this.navCollapsed = false this.$refs.tabSwitcher.showNav() }, nestedTooSmall () { + this.navCollapsed = true this.$refs.tabSwitcher.hideNav() } }, diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue index 8771cb5cf..de89cecc8 100644 --- a/src/components/settings_modal/settings_modal_user_content.vue +++ b/src/components/settings_modal/settings_modal_user_content.vue @@ -13,6 +13,7 @@ > diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index 68dd31941..28a4eac40 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -35,6 +35,12 @@ library.add( ) const GeneralTab = { + props: { + parentCollapsed: { + required: true, + type: Boolean + } + }, data () { return { subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({ diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 9ea0fb89c..de88add2d 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -3,6 +3,7 @@ :label="$t('settings.general')" ref="tabSwitcher" class="settings_tab-switcher" + :parent-collapsed="parentCollapsed" @too-small="() => $emit('tooSmall')" @too-big="() => $emit('tooBig')" > diff --git a/src/components/tab_switcher/vertical_tab_switcher.jsx b/src/components/tab_switcher/vertical_tab_switcher.jsx index d28d6d75a..45e502f4c 100644 --- a/src/components/tab_switcher/vertical_tab_switcher.jsx +++ b/src/components/tab_switcher/vertical_tab_switcher.jsx @@ -32,6 +32,11 @@ export default { required: false, type: Boolean, default: false + }, + parentCollapsed: { + required: false, + type: Boolean, + default: false } }, emits: ['tooBig', 'tooSmall'], @@ -91,11 +96,18 @@ export default { const navWidth = this.$refs.nav?.clientWidth const contentsWidth = this.$refs.contents?.clientWidth - if (contentsWidth < tabContentWidth) { - this.$emit('tooSmall') + if (this.parentCollapsed) { + this.hideNav() + } else { + this.$emit('tooSmall') + } } else if (contentsWidth - navWidth >= tabContentWidth){ - this.$emit('tooBig') + if (this.parentCollapsed) { + this.$emit('tooBig') + } else { + this.showNav() + } } }, // DO NOT put it to computed, it doesn't work (caching?) diff --git a/src/components/tab_switcher/vertical_tab_switcher.scss b/src/components/tab_switcher/vertical_tab_switcher.scss index 7dd0c473f..480f90f1a 100644 --- a/src/components/tab_switcher/vertical_tab_switcher.scss +++ b/src/components/tab_switcher/vertical_tab_switcher.scss @@ -26,6 +26,10 @@ flex: 1 1 auto; overflow-x: hidden; + .tab-content-label { + display: none + } + .tab-content { align-self: center; @@ -77,6 +81,14 @@ } &.-nav-content { + > .contents { + > .tab-content-wrapper { + > .tab-content-label { + display: block; + } + } + } + > .tabs { position: absolute; pointer-events: none;