From e4a819a0e2ed9c57dc2191428d86a33bb5918862 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 22 May 2024 19:54:19 +0300 Subject: initial Appearance Tab implementation, added text size/UI scale option --- src/components/settings_modal/helpers/setting.js | 10 ++- .../settings_modal/helpers/unit_setting.js | 24 ++++++-- .../settings_modal/helpers/unit_setting.vue | 2 +- src/components/settings_modal/settings_modal.js | 3 + src/components/settings_modal/settings_modal.vue | 12 ++++ .../settings_modal/settings_modal_user_content.js | 2 + .../settings_modal/settings_modal_user_content.vue | 7 +++ .../settings_modal/tabs/appearance_tab.js | 39 ++++++++++++ .../settings_modal/tabs/appearance_tab.vue | 71 ++++++++++++++++++++++ src/components/settings_modal/tabs/general_tab.vue | 15 ----- 10 files changed, 164 insertions(+), 21 deletions(-) create mode 100644 src/components/settings_modal/tabs/appearance_tab.js create mode 100644 src/components/settings_modal/tabs/appearance_tab.vue (limited to 'src/components/settings_modal') diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js index abf9cfdf..3b3e6268 100644 --- a/src/components/settings_modal/helpers/setting.js +++ b/src/components/settings_modal/helpers/setting.js @@ -48,6 +48,10 @@ export default { draftMode: { type: Boolean, default: undefined + }, + timedApplyMode: { + type: Boolean, + default: false } }, inject: { @@ -161,7 +165,11 @@ export default { case 'admin': return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v }) default: - return (k, v) => this.$store.dispatch('setOption', { name: k, value: v }) + if (this.timedApplyMode) { + return (k, v) => this.$store.dispatch('setOptionTemporarily', { name: k, value: v }) + } else { + return (k, v) => this.$store.dispatch('setOption', { name: k, value: v }) + } } }, defaultState () { diff --git a/src/components/settings_modal/helpers/unit_setting.js b/src/components/settings_modal/helpers/unit_setting.js index c9c23cb0..daeddd81 100644 --- a/src/components/settings_modal/helpers/unit_setting.js +++ b/src/components/settings_modal/helpers/unit_setting.js @@ -21,15 +21,23 @@ export default { unitSet: { type: String, default: 'none' + }, + step: { + type: Number, + default: 1 + }, + resetDefault: { + type: Object, + default: null } }, computed: { ...Setting.computed, stateUnit () { - return this.state.replace(/\d+/, '') + return typeof this.state === 'string' ? this.state.replace(/[0-9,.]+/, '') : '' }, stateValue () { - return this.state.replace(/\D+/, '') + return typeof this.state === 'string' ? this.state.replace(/[^0-9,.]+/, '') : '' } }, methods: { @@ -39,10 +47,18 @@ export default { return this.$t(['settings', 'units', this.unitSet, value].join('.')) }, updateValue (e) { - this.configSink(this.path, parseInt(e.target.value) + this.stateUnit) + this.configSink(this.path, parseFloat(e.target.value) + this.stateUnit) }, updateUnit (e) { - this.configSink(this.path, this.stateValue + e.target.value) + let value = this.stateValue + const newUnit = e.target.value + if (this.resetDefault) { + const replaceValue = this.resetDefault[newUnit] + if (replaceValue != null) { + value = replaceValue + } + } + this.configSink(this.path, value + newUnit) } } } diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue index 68f52b1c..86798e04 100644 --- a/src/components/settings_modal/helpers/unit_setting.vue +++ b/src/components/settings_modal/helpers/unit_setting.vue @@ -13,7 +13,7 @@ :id="path" class="input number-input" type="number" - step="1" + step="step" :disabled="disabled" :min="min || 0" :value="stateValue" diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js index ff58f2c3..63c9b24a 100644 --- a/src/components/settings_modal/settings_modal.js +++ b/src/components/settings_modal/settings_modal.js @@ -4,6 +4,7 @@ import AsyncComponentError from 'src/components/async_component_error/async_comp import getResettableAsyncComponent from 'src/services/resettable_async_component.js' import Popover from '../popover/popover.vue' import Checkbox from 'src/components/checkbox/checkbox.vue' +import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { cloneDeep, isEqual } from 'lodash' import { @@ -53,6 +54,7 @@ const SettingsModal = { Modal, Popover, Checkbox, + ConfirmModal, SettingsModalUserContent: getResettableAsyncComponent( () => import('./settings_modal_user_content.vue'), { @@ -165,6 +167,7 @@ const SettingsModal = { }, computed: { currentSaveStateNotice () { + console.log(this.$store.state.interface.settings.currentSaveStateNotice) return this.$store.state.interface.settings.currentSaveStateNotice }, modalActivated () { diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index 50859c94..90dbbde0 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -147,6 +147,18 @@ + + + {{ $t('settings.confirm_new_question') }} + + diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js index 9ac0301f..ac119006 100644 --- a/src/components/settings_modal/settings_modal_user_content.js +++ b/src/components/settings_modal/settings_modal_user_content.js @@ -7,6 +7,7 @@ import FilteringTab from './tabs/filtering_tab.vue' import SecurityTab from './tabs/security_tab/security_tab.vue' import ProfileTab from './tabs/profile_tab.vue' import GeneralTab from './tabs/general_tab.vue' +import AppearanceTab from './tabs/appearance_tab.vue' import VersionTab from './tabs/version_tab.vue' import ThemeTab from './tabs/theme_tab/theme_tab.vue' @@ -44,6 +45,7 @@ const SettingsModalContent = { SecurityTab, ProfileTab, GeneralTab, + AppearanceTab, VersionTab, ThemeTab }, diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue index 0221cccb..da99f340 100644 --- a/src/components/settings_modal/settings_modal_user_content.vue +++ b/src/components/settings_modal/settings_modal_user_content.vue @@ -21,6 +21,13 @@ > +
+ +
+
+
+

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

+
    +
  • + + {{ $t('settings.hide_wallpaper') }} + +
    • +
  • + + {{ $t('settings.disable_sticky_headers') }} + +
    • +
  • + + {{ $t('settings.show_scrollbars') }} + +
    • +
  • + + {{ $t('settings.text_size') }} + +
    + + + px + rem + +
    + + 14px + +     +
    +
    • +
+
+
+ + + + + diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 208c49ee..240c0762 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -15,11 +15,6 @@ {{ $t('settings.hide_isp') }} -
  • - - {{ $t('settings.hide_wallpaper') }} - -
  • {{ $t('settings.stop_gifs') }} @@ -101,16 +96,6 @@

  • {{ $t('settings.columns') }}

    • -
  • - - {{ $t('settings.disable_sticky_headers') }} - -
    • -
  • - - {{ $t('settings.show_scrollbars') }} - -
  • {{ $t('settings.right_sidebar') }} -- cgit v1.2.3-70-g09d2 From 6343b91abf7fbad1cdd8b4648d1fc825d8e9b03c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 13 Jun 2024 02:22:47 +0300 Subject: more scaling options --- src/App.scss | 5 +- src/components/emoji_reactions/emoji_reactions.vue | 2 +- .../settings_modal/tabs/appearance_tab.js | 32 +++++- .../settings_modal/tabs/appearance_tab.vue | 116 ++++++++++++++++++--- src/components/settings_modal/tabs/general_tab.js | 33 +----- src/components/settings_modal/tabs/general_tab.vue | 60 ----------- src/i18n/en.json | 4 + src/modules/config.js | 5 + src/modules/instance.js | 3 + src/panel.scss | 6 +- src/services/style_setter/style_setter.js | 20 ++-- 11 files changed, 165 insertions(+), 121 deletions(-) (limited to 'src/components/settings_modal') diff --git a/src/App.scss b/src/App.scss index 32ca9189..a2710436 100644 --- a/src/App.scss +++ b/src/App.scss @@ -5,7 +5,7 @@ :root { --fontSize: 14px; --status-margin: 0.75em; - --navbar-height: 3.5rem; + --navbar-height: var(--navbarSize, 3.5rem); --post-line-height: 1.4; // Z-Index stuff --ZI_media_modal: 9000; @@ -21,6 +21,9 @@ html { font-size: var(--textSize); + + --navbar-height: var(--navbarSize, 3.5rem); + --emoji-size: var(--emojiSize, 32px); // overflow-x: clip causes my browser's tab to crash with SIGILL lul } diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index ad4a3c0b..3ab4c125 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -79,7 +79,7 @@ margin-top: 0.25em; flex-wrap: wrap; - --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1)); + --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1)); .emoji-reaction-container { display: flex; diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index b96106bd..542ab0c1 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -2,7 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue' import ChoiceSetting from '../helpers/choice_setting.vue' import IntegerSetting from '../helpers/integer_setting.vue' import FloatSetting from '../helpers/float_setting.vue' -import UnitSetting from '../helpers/unit_setting.vue' +import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue' import SharedComputedObject from '../helpers/shared_computed_object.js' import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue' @@ -17,7 +17,13 @@ library.add( const AppearanceTab = { data () { - return {} + return { + thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({ + key: mode, + value: mode, + label: this.$t(`settings.third_column_mode_${mode}`) + })) + } }, components: { BooleanSetting, @@ -28,10 +34,32 @@ const AppearanceTab = { ProfileSettingIndicator }, computed: { + horizontalUnits () { + return defaultHorizontalUnits + }, + columns () { + const mode = this.$store.getters.mergedConfig.thirdColumnMode + + const notif = mode === 'none' ? [] : ['notifs'] + + if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') { + return [...notif, 'content', 'sidebar'] + } else { + return ['sidebar', 'content', ...notif] + } + }, + instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }, instanceWallpaperUsed () { return this.$store.state.instance.background && !this.$store.state.users.currentUser.background_image }, + instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable }, + language: { + get: function () { return this.$store.getters.mergedConfig.interfaceLanguage }, + set: function (val) { + this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) + } + }, ...SharedComputedObject() } } diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index 7730b701..75126df7 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -1,23 +1,8 @@