From ae345d2c458bd0952d9b85c2e03060b2d286d320 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Feb 2024 17:26:08 +0200 Subject: buttons look great now, including unstyled ones menu items work too --- src/components/settings_modal/settings_modal.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/components/settings_modal/settings_modal.vue') diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index 4e7fd931..d5931318 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -70,7 +70,7 @@ 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') }} diff --git a/src/i18n/en.json b/src/i18n/en.json index f626e933..0c3f26b9 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -374,6 +374,14 @@ "enter_current_password_to_confirm": "Enter your current password to confirm your identity", "post_look_feel": "Posts Look & Feel", "mention_links": "Mention links", + "appearance": "Appearance", + "confirm_new_setting": "Confirm new setting?", + "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.", + "revert": "Revert", + "confirm": "Confirm", + "text_size": "Text and interface size", + "text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.", + "text_size_tip2": "Values other than {0} might break some things and themes", "mfa": { "otp": "OTP", "setup_otp": "Setup OTP", diff --git a/src/modules/config.js b/src/modules/config.js index 8001b854..4d5e8efc 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -115,7 +115,8 @@ export const defaultState = { sidebarColumnWidth: '25rem', contentColumnWidth: '45rem', notifsColumnWidth: '25rem', - emojiReactionsScale: 1.0, + emojiReactionsScale: undefined, + textSize: undefined, // instance default navbarColumnStretch: false, greentext: undefined, // instance default useAtIcon: undefined, // instance default @@ -173,6 +174,10 @@ const config = { } }, mutations: { + setOptionTemporarily (state, { name, value }) { + set(state, name, value) + applyConfig(state) + }, setOption (state, { name, value }) { set(state, name, value) }, @@ -203,6 +208,31 @@ const config = { setHighlight ({ commit, dispatch }, { user, color, type }) { commit('setHighlight', { user, color, type }) }, + setOptionTemporarily ({ commit, dispatch, state, rootState }, { name, value }) { + if (rootState.interface.temporaryChangesTimeoutId !== null) { + console.warn('Can\'t track more than one temporary change') + return + } + const oldValue = state[name] + + commit('setOptionTemporarily', { name, value }) + + const confirm = () => { + dispatch('setOption', { name, value }) + commit('clearTemporaryChanges') + } + + const revert = () => { + commit('setOptionTemporarily', { name, value: oldValue }) + commit('clearTemporaryChanges') + } + + commit('setTemporaryChanges', { + timeoutId: setTimeout(revert, 10000), + confirm, + revert + }) + }, setOption ({ commit, dispatch, state }, { name, value }) { const exceptions = new Set([ 'useStreamingApi' @@ -231,6 +261,7 @@ const config = { case 'sidebarColumnWidth': case 'contentColumnWidth': case 'notifsColumnWidth': + case 'textSize': case 'emojiReactionsScale': applyConfig(state) break diff --git a/src/modules/instance.js b/src/modules/instance.js index 0a5c1ae7..4a75d948 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -98,6 +98,8 @@ const defaultState = { sidebarRight: false, subjectLineBehavior: 'email', theme: 'pleroma-dark', + emojiReactionsScale: 1.0, + textSize: '14px', virtualScrolling: true, sensitiveByDefault: false, conversationDisplay: 'linear', diff --git a/src/modules/interface.js b/src/modules/interface.js index 39242b9d..e21b4204 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -1,5 +1,8 @@ const defaultState = { themeApplied: false, + temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout + temporaryChangesConfirm: () => {}, // used for applying temporary options + temporaryChangesRevert: () => {}, // used for reverting temporary options settingsModalState: 'hidden', settingsModalLoadedUser: false, settingsModalLoadedAdmin: false, @@ -36,6 +39,17 @@ const interfaceMod = { state.settings.currentSaveStateNotice = { error: true, errorData: error } } }, + setTemporaryChanges (state, { timeoutId, confirm, revert }) { + state.temporaryChangesTimeoutId = timeoutId + state.temporaryChangesConfirm = confirm + state.temporaryChangesRevert = revert + }, + clearTemporaryChanges (state) { + clearTimeout(state.temporaryChangesTimeoutId) + state.temporaryChangesTimeoutId = null + state.temporaryChangesConfirm = () => {} + state.temporaryChangesRevert = () => {} + }, setThemeApplied (state) { state.themeApplied = true }, diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 369d2c9f..a98456d3 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -148,8 +148,19 @@ export const applyTheme = async (input, onFinish = (data) => {}) => { return Promise.resolve() } -const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) => - ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) +const configColumns = ({ + sidebarColumnWidth, + contentColumnWidth, + notifsColumnWidth, + emojiReactionsScale, + textSize +}) => ({ + sidebarColumnWidth, + contentColumnWidth, + notifsColumnWidth, + emojiReactionsScale, + textSize +}) const defaultConfigColumns = configColumns(defaultState) @@ -175,6 +186,7 @@ export const applyConfig = (config) => { styleSheet.toString() styleSheet.insertRule(`:root { ${rules} }`, 'index-max') + body.classList.remove('hidden') } -- cgit v1.2.3-70-g09d2