diff options
Diffstat (limited to 'src')
6 files changed, 58 insertions, 29 deletions
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index fb466f2f..2f7649a9 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -54,5 +54,10 @@ >* { margin-right: 0.5em; } + + .extra-content { + display: flex; + flex-grow: 1; + } } } diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index f54c89c4..28f85423 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -113,6 +113,10 @@ <Checkbox :modelValue="!!expertLevel" @update:modelValue="expertLevel = Number($event)"> {{ $t("settings.expert_mode") }} </Checkbox> + <portal-target + class="extra-content" + name="unscrolled-content" + /> </div> </div> </Modal> diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index 251f63fd..7e1da7ab 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -377,6 +377,10 @@ export default { // To separate from other random JSON files and possible future source formats _pleroma_theme_version: 2, theme, source } + }, + isActive () { + const tabSwitcher = this.$parent + return tabSwitcher ? tabSwitcher.isActive('theme') : false } }, components: { diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss index 0db21537..21b49a32 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss @@ -268,13 +268,6 @@ } } - .apply-container { - justify-content: center; - position: absolute; - bottom: 8px; - right: 5px; - } - .radius-item, .color-item { min-width: 20em; @@ -334,16 +327,25 @@ padding: 20px; } + .btn { + margin-left: .25em; + margin-right: .25em; + } +} + +.extra-content { .apply-container { + display: flex; + flex-direction: row; + justify-content: space-around; + flex-grow: 1; + .btn { + flex-grow: 1; min-height: 28px; - min-width: 10em; - padding: 0 2em; + min-width: 0; + max-width: 10em; + padding: 0; } } - - .btn { - margin-left: .25em; - margin-right: .25em; - } } diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue index e86528b8..9cdd229a 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -1018,21 +1018,26 @@ </tab-switcher> </keep-alive> - <div class="apply-container"> - <button - class="btn button-default submit" - :disabled="!themeValid" - @click="setCustomTheme" - > - {{ $t('general.apply') }} - </button> - <button - class="btn button-default" - @click="clearAll" - > - {{ $t('settings.style.switcher.reset') }} - </button> - </div> + <portal + v-if="isActive" + to="unscrolled-content" + > + <div class="apply-container"> + <button + class="btn button-default submit" + :disabled="!themeValid" + @click="setCustomTheme" + > + {{ $t('general.apply') }} + </button> + <button + class="btn button-default" + @click="clearAll" + > + {{ $t('settings.style.switcher.reset') }} + </button> + </div> + </portal> </div> </template> diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index a5c6cd2b..59ff98df 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -55,6 +55,15 @@ export default { return this.active } }, + isActive () { + return tabName => { + const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName + return this.$slots.default.findIndex(isWanted) === this.activeIndex + } + }, + settingsModalVisible () { + return this.settingsModalState === 'visible' + }, ...mapState({ settingsModalState: state => state.interface.settingsModalState }) |