From debd3a3e7b8215208a0fe256c259748eb7ca9e27 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 15 Oct 2025 16:53:16 +0300 Subject: [PATCH] initial nested settings impl --- .../settings_modal/tabs/appearance_tab.js | 17 +- .../settings_modal/tabs/appearance_tab.scss | 2 +- .../settings_modal/tabs/appearance_tab.vue | 575 +++++++++--------- .../settings_modal/tabs/general_tab.js | 33 +- .../settings_modal/tabs/general_tab.vue | 239 ++++---- src/components/status/status.vue | 3 +- src/i18n/en.json | 4 + 7 files changed, 465 insertions(+), 408 deletions(-) diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index 7fbb0a5cd..56e3ea10c 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -1,3 +1,5 @@ +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' + import BooleanSetting from '../helpers/boolean_setting.vue' import ChoiceSetting from '../helpers/choice_setting.vue' import IntegerSetting from '../helpers/integer_setting.vue' @@ -26,11 +28,17 @@ import { useInterfaceStore, normalizeThemeData } from 'src/stores/interface' import { library } from '@fortawesome/fontawesome-svg-core' import { - faGlobe + faGlobe, + faDashboard, + faPaintRoller, + faTableColumns } from '@fortawesome/free-solid-svg-icons' library.add( - faGlobe + faGlobe, + faPaintRoller, + faDashboard, + faTableColumns ) const AppearanceTab = { @@ -88,7 +96,8 @@ const AppearanceTab = { ProfileSettingIndicator, FontControl, Preview, - PaletteEditor + PaletteEditor, + TabSwitcher }, mounted () { useInterfaceStore().getThemeData() @@ -200,6 +209,8 @@ const AppearanceTab = { paletteDataUsed () { return useInterfaceStore().paletteDataUsed }, + instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }, + instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable }, availableStyles () { return [ ...this.availableThemesV3, diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss index d786cfa38..aa6bd5b45 100644 --- a/src/components/settings_modal/tabs/appearance_tab.scss +++ b/src/components/settings_modal/tabs/appearance_tab.scss @@ -160,7 +160,7 @@ .theme-preview { font-size: 1rem; // fix for firefox - width: 19rem; + width: 14rem; display: flex; flex-direction: column; align-items: center; diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index cd54e2c82..05517af0c 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -1,10 +1,287 @@ - - -
-

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

- -

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

- -
- -
- - -
-
-

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

-
- {{ $t("settings.style.appearance_tab_note") }} -
-
- -
  • - - {{ $t('settings.disable_sticky_headers') }} - -
    • -
  • - - {{ $t('settings.show_scrollbars') }} - -
    • -
  • - - {{ $t('settings.theme_editor_min_width') }} - -
    • - + {{ $t('settings.theme_debug') }} + + +
  • + + {{ $t('settings.force_theme_recompilation_debug') }} + +
    • + + -
    -

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

    - -
    - + diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index ff6d0e477..b98b7195e 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -1,5 +1,7 @@ import { mapState } from 'vuex' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' + import BooleanSetting from '../helpers/boolean_setting.vue' import ChoiceSetting from '../helpers/choice_setting.vue' import ScopeSelector from 'src/components/scope_selector/scope_selector.vue' @@ -9,6 +11,7 @@ import UnitSetting from '../helpers/unit_setting.vue' import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue' import Select from 'src/components/select/select.vue' import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue' +import FontControl from 'src/components/font_control/font_control.vue' import SharedComputedObject from '../helpers/shared_computed_object.js' @@ -16,11 +19,19 @@ import localeService from 'src/services/locale/locale.service.js' import { clearCache, cacheKey, emojiCacheKey } from 'src/services/sw/sw.js' import { library } from '@fortawesome/fontawesome-svg-core' import { - faGlobe + faGlobe, + faMessage, + faPenAlt, + faDatabase, + faSliders } from '@fortawesome/free-solid-svg-icons' library.add( - faGlobe + faGlobe, + faMessage, + faPenAlt, + faDatabase, + faSliders ) const GeneralTab = { @@ -80,7 +91,9 @@ const GeneralTab = { InterfaceLanguageSwitcher, ProfileSettingIndicator, ScopeSelector, - Select + Select, + TabSwitcher, + FontControl }, computed: { postFormats () { @@ -99,8 +112,6 @@ const GeneralTab = { this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) } }, - instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable }, - instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }, ...SharedComputedObject(), ...mapState({ blockExpirationSupported: state => state.instance.blockExpiration, @@ -137,6 +148,18 @@ const GeneralTab = { this.$store.commit('setCurrentUser', user) }) }, + updateFont (key, value) { + this.$store.dispatch('setOption', { + name: 'theme3hacks', + value: { + ...this.mergedConfig.theme3hacks, + fonts: { + ...this.mergedConfig.theme3hacks.fonts, + [key]: value + } + } + }) + }, } } diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 49fc57c79..ce48d923d 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -1,8 +1,17 @@ diff --git a/src/components/status/status.vue b/src/components/status/status.vue index ffdefb24f..91caa6a8c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -152,12 +152,11 @@ :at="false" > - {{ status.user.name }} + {{ status.user.name }}