diff --git a/changelog.d/settings-shuffle.change b/changelog.d/settings-shuffle.change new file mode 100644 index 000000000..f1d9ecf89 --- /dev/null +++ b/changelog.d/settings-shuffle.change @@ -0,0 +1,3 @@ +rearranged and split settings to make more sense and be less of a wall of text +on mobile settings now take up full width and presented in navigation style +improved styles for settings diff --git a/src/components/tab_switcher/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx similarity index 93% rename from src/components/tab_switcher/vertical_tab_switcher.jsx rename to src/components/settings_modal/helpers/vertical_tab_switcher.jsx index 9367821a7..ce5e3fa20 100644 --- a/src/components/tab_switcher/vertical_tab_switcher.jsx +++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx @@ -128,10 +128,8 @@ export default { const props = slot.props if (!props) return const active = this.activeIndex === index - const classes = ['tab-content-wrapper', active ? '-active' : '-hidden' ] - if (props.fullHeight) { - classes.push('-full-height') - } + const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ] + let delayRender = slot.props['delay-render'] if (delayRender && active) { slot.props['delay-render'] = false @@ -159,13 +157,20 @@ export default { ) + const contentClasses = ['tab-content'] + if (props['full-width']) { + contentClasses.push('-full-width') + } + if (props['full-height']) { + contentClasses.push('-full-height') + } return ( -
+
{header}
-
+
{renderSlot}
diff --git a/src/components/tab_switcher/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss similarity index 98% rename from src/components/tab_switcher/vertical_tab_switcher.scss rename to src/components/settings_modal/helpers/vertical_tab_switcher.scss index 4a0b10203..4ac03ae59 100644 --- a/src/components/tab_switcher/vertical_tab_switcher.scss +++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss @@ -39,6 +39,10 @@ &.-full-width { align-self: stretch; } + + &.-full-height { + flex: 1; + } } .tab-content-label { diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index a1e3ec412..78698803e 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -50,9 +50,11 @@ } &.two-column { - column-count: 2; + display: grid; + grid-template-columns: 1fr 1fr; > li { + margin: 0; break-inside: avoid; } } @@ -106,11 +108,13 @@ &.-mobile { .tabs { .menu-item { - font-size: 1.2em + font-size: 1.2em; + padding-top: 0.75em; + padding-bottom: 0.75em; } } - .setting-list, + .setting-list:not(.suboptions), .option-list { padding-left: 0.25em; @@ -121,7 +125,7 @@ } &.two-column { - column-count: 1; + grid-template-columns: 1fr; } } } diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js index fa6b7f8ad..bc0039118 100644 --- a/src/components/settings_modal/settings_modal_admin_content.js +++ b/src/components/settings_modal/settings_modal_admin_content.js @@ -1,4 +1,4 @@ -import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx' +import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx' import InstanceTab from './admin_tabs/instance_tab.vue' import LimitsTab from './admin_tabs/limits_tab.vue' diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js index 18e1148dc..d3a66aedb 100644 --- a/src/components/settings_modal/settings_modal_user_content.js +++ b/src/components/settings_modal/settings_modal_user_content.js @@ -1,4 +1,4 @@ -import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx' +import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx' import DataImportExportTab from './tabs/data_import_export_tab.vue' import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss index 5deca7868..306d8e898 100644 --- a/src/components/settings_modal/settings_modal_user_content.scss +++ b/src/components/settings_modal/settings_modal_user_content.scss @@ -1,8 +1,11 @@ .settings_tab-switcher { height: 100%; + [full-height="true"] { + height: 100% + } + .setting-item { - border-bottom: 2px solid var(--border); margin: 1em 1em 1.4em; padding-bottom: 1.4em; diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue index 6709b6e02..b2b291e9b 100644 --- a/src/components/settings_modal/settings_modal_user_content.vue +++ b/src/components/settings_modal/settings_modal_user_content.vue @@ -80,6 +80,7 @@ icon="eye-slash" data-tab-name="mutesAndBlocks" :full-width="true" + :full-height="true" >
@@ -95,7 +96,6 @@ :label="$t('settings.security_tab')" icon="lock" data-tab-name="security" - :full-width="true" >
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index 3bb5ec508..371d40012 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -1,5 +1,3 @@ -import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx' - import BooleanSetting from '../helpers/boolean_setting.vue' import ChoiceSetting from '../helpers/choice_setting.vue' import IntegerSetting from '../helpers/integer_setting.vue' @@ -88,8 +86,7 @@ const AppearanceTab = { UnitSetting, ProfileSettingIndicator, Preview, - PaletteEditor, - VerticalTabSwitcher + PaletteEditor }, mounted () { useInterfaceStore().getThemeData() diff --git a/src/components/settings_modal/tabs/composing_tab.vue b/src/components/settings_modal/tabs/composing_tab.vue index a48e6928e..507ac5c79 100644 --- a/src/components/settings_modal/tabs/composing_tab.vue +++ b/src/components/settings_modal/tabs/composing_tab.vue @@ -13,7 +13,8 @@ :user-default="$store.state.profileConfig.defaultScope" :initial-scope="$store.state.profileConfig.defaultScope" :on-scope-change="changeDefaultScope" - :unstyled="false"uns + :unstyled="false" + uns /> @@ -82,7 +83,9 @@ -

{{ $t('settings.attachments') }}

+

+ {{ $t('settings.attachments') }} +

diff --git a/src/components/settings_modal/tabs/developer_tab.js b/src/components/settings_modal/tabs/developer_tab.js index e9978884e..f8f21e9f4 100644 --- a/src/components/settings_modal/tabs/developer_tab.js +++ b/src/components/settings_modal/tabs/developer_tab.js @@ -23,6 +23,23 @@ const VersionTab = { return pleromaFeCommitUrl + this.frontendVersion }, ...SharedComputedObject(), + }, + methods: { + clearAssetCache () { + this.clearCache(cacheKey) + }, + clearEmojiCache () { + this.clearCache(emojiCacheKey) + }, + clearCache (key) { + clearCache(key) + .then(() => { + this.$store.dispatch('settingsSaved', { success: true }) + }) + .catch(error => { + this.$store.dispatch('settingsSaved', { error }) + }) + } } } diff --git a/src/components/settings_modal/tabs/developer_tab.vue b/src/components/settings_modal/tabs/developer_tab.vue index 6b4480db7..aafa4ec17 100644 --- a/src/components/settings_modal/tabs/developer_tab.vue +++ b/src/components/settings_modal/tabs/developer_tab.vue @@ -4,7 +4,7 @@ class="developer-tab" >
-

{{ $t('settings.version.title')}}

+

{{ $t('settings.version.title') }}

{{ $t('settings.version.backend_version') }}
@@ -20,12 +20,12 @@ + > {{ frontendVersion }}
-

{{ $t('settings.debug')}}

+

{{ $t('settings.debug') }}

-

{{ $t('settings.confirmations') }}

-