commit: 6343b91abf7fbad1cdd8b4648d1fc825d8e9b03c
parent 6142ac2bfcacec227e4035cac19f2c5d968e72d6
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Jun 2024 02:22:47 +0300
more scaling options
Diffstat:
11 files changed, 165 insertions(+), 121 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -1,23 +1,8 @@
<template>
<div :label="$t('settings.general')">
<div class="setting-item">
- <h2>{{ $t('settings.interface') }}</h2>
+ <h2>{{ $t('settings.scale_and_layout') }}</h2>
<ul class="setting-list">
- <li v-if="instanceWallpaperUsed">
- <BooleanSetting path="hideInstanceWallpaper">
- {{ $t('settings.hide_wallpaper') }}
- </BooleanSetting>
- </li>
- <li>
- <BooleanSetting path="disableStickyHeaders">
- {{ $t('settings.disable_sticky_headers') }}
- </BooleanSetting>
- </li>
- <li>
- <BooleanSetting path="showScrollbars">
- {{ $t('settings.show_scrollbars') }}
- </BooleanSetting>
- </li>
<li>
<UnitSetting
path="textSize"
@@ -49,6 +34,105 @@
</small>
</div>
</li>
+ <li>
+ <UnitSetting
+ path="emojiSize"
+ step="0.1"
+ :units="['px', 'rem']"
+ :reset-default="{ 'px': 32, 'rem': 2.2 }"
+ >
+ {{ $t('settings.emoji_size') }}
+ </UnitSetting>
+ <ul
+ class="setting-list suboptions"
+ >
+ <li>
+ <FloatSetting
+ v-if="user"
+ path="emojiReactionsScale"
+ expert="1"
+ >
+ {{ $t('settings.emoji_reactions_scale') }}
+ </FloatSetting>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <UnitSetting
+ path="navbarSize"
+ step="0.1"
+ :units="['px', 'rem']"
+ :reset-default="{ 'px': 64, 'rem': 3.5 }"
+ >
+ {{ $t('settings.navbar_size') }}
+ </UnitSetting>
+ </li>
+ <h3>{{ $t('settings.columns') }}</h3>
+ <li>
+ <UnitSetting
+ path="panelHeaderSize"
+ step="0.1"
+ :units="['px', 'rem']"
+ :reset-default="{ 'px': 64, 'rem': 3.2 }"
+ timed-apply-mode
+ >
+ {{ $t('settings.panel_header_size') }}
+ </UnitSetting>
+ </li>
+ <li>
+ <BooleanSetting path="sidebarRight">
+ {{ $t('settings.right_sidebar') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="navbarColumnStretch">
+ {{ $t('settings.navbar_column_stretch') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <ChoiceSetting
+ v-if="user"
+ id="thirdColumnMode"
+ path="thirdColumnMode"
+ :options="thirdColumnModeOptions"
+ >
+ {{ $t('settings.third_column_mode') }}
+ </ChoiceSetting>
+ </li>
+ <li v-if="expertLevel > 0">
+ {{ $t('settings.column_sizes') }}
+ <div class="column-settings">
+ <UnitSetting
+ v-for="column in columns"
+ :key="column"
+ :path="column + 'ColumnWidth'"
+ :units="horizontalUnits"
+ expert="1"
+ >
+ {{ $t('settings.column_sizes_' + column) }}
+ </UnitSetting>
+ </div>
+ </li>
+ <li>
+ <BooleanSetting path="disableStickyHeaders">
+ {{ $t('settings.disable_sticky_headers') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="showScrollbars">
+ {{ $t('settings.show_scrollbars') }}
+ </BooleanSetting>
+ </li>
+ </ul>
+ </div>
+ <div class="setting-item">
+ <h2>{{ $t('settings.visual_tweaks') }}</h2>
+ <ul class="setting-list">
+ <li v-if="instanceWallpaperUsed">
+ <BooleanSetting path="hideInstanceWallpaper">
+ {{ $t('settings.hide_wallpaper') }}
+ </BooleanSetting>
+ </li>
</ul>
</div>
</div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
@@ -3,7 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
import IntegerSetting from '../helpers/integer_setting.vue'
import FloatSetting from '../helpers/float_setting.vue'
-import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -40,11 +40,6 @@ const GeneralTab = {
value: mode,
label: this.$t(`settings.mention_link_display_${mode}`)
})),
- thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
- key: mode,
- value: mode,
- label: this.$t(`settings.third_column_mode_${mode}`)
- })),
userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
key: mode,
value: mode,
@@ -70,9 +65,6 @@ const GeneralTab = {
ProfileSettingIndicator
},
computed: {
- horizontalUnits () {
- return defaultHorizontalUnits
- },
postFormats () {
return this.$store.state.instance.postFormats || []
},
@@ -83,29 +75,6 @@ const GeneralTab = {
label: this.$t(`post_status.content_type["${format}"]`)
}))
},
- 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()
},
methods: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
@@ -93,43 +93,6 @@
{{ $t('settings.hide_shoutbox') }}
</BooleanSetting>
</li>
- <li>
- <h3>{{ $t('settings.columns') }}</h3>
- </li>
- <li>
- <BooleanSetting path="sidebarRight">
- {{ $t('settings.right_sidebar') }}
- </BooleanSetting>
- </li>
- <li>
- <BooleanSetting path="navbarColumnStretch">
- {{ $t('settings.navbar_column_stretch') }}
- </BooleanSetting>
- </li>
- <li>
- <ChoiceSetting
- v-if="user"
- id="thirdColumnMode"
- path="thirdColumnMode"
- :options="thirdColumnModeOptions"
- >
- {{ $t('settings.third_column_mode') }}
- </ChoiceSetting>
- </li>
- <li v-if="expertLevel > 0">
- {{ $t('settings.column_sizes') }}
- <div class="column-settings">
- <UnitSetting
- v-for="column in columns"
- :key="column"
- :path="column + 'ColumnWidth'"
- :units="horizontalUnits"
- expert="1"
- >
- {{ $t('settings.column_sizes_' + column) }}
- </UnitSetting>
- </div>
- </li>
<li class="select-multiple">
<span class="label">{{ $t('settings.confirm_dialogs') }}</span>
<ul class="option-list">
@@ -262,15 +225,6 @@
{{ $t('settings.no_rich_text_description') }}
</BooleanSetting>
</li>
- <li>
- <FloatSetting
- v-if="user"
- path="emojiReactionsScale"
- expert="1"
- >
- {{ $t('settings.emoji_reactions_scale') }}
- </FloatSetting>
- </li>
<h3>{{ $t('settings.attachments') }}</h3>
<li>
<BooleanSetting
@@ -513,17 +467,3 @@
</template>
<script src="./general_tab.js"></script>
-
-<style lang="scss">
-.column-settings {
- display: flex;
- justify-content: space-evenly;
- flex-wrap: wrap;
-}
-
-.column-settings .size-label {
- display: block;
- margin-bottom: 0.5em;
- margin-top: 0.5em;
-}
-</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -382,6 +382,10 @@
"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",
+ "emoji_size": "Emoji size",
+ "navbar_size": "Top bar size",
+ "panel_header_size": "Panel header size",
+ "visual_tweaks": "Minor visual tweaks",
"mfa": {
"otp": "OTP",
"setup_otp": "Setup OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -117,6 +117,8 @@ export const defaultState = {
notifsColumnWidth: '25rem',
emojiReactionsScale: undefined,
textSize: undefined, // instance default
+ emojiSize: undefined, // instance default
+ navbarSize: undefined, // instance default
navbarColumnStretch: false,
greentext: undefined, // instance default
useAtIcon: undefined, // instance default
@@ -262,6 +264,9 @@ const config = {
case 'contentColumnWidth':
case 'notifsColumnWidth':
case 'textSize':
+ case 'navbarSize':
+ case 'panelHeaderSize':
+ case 'emojiSize':
case 'emojiReactionsScale':
applyConfig(state)
break
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -100,6 +100,9 @@ const defaultState = {
theme: 'pleroma-dark',
emojiReactionsScale: 1.0,
textSize: '14px',
+ emojiSize: '2.2em',
+ navbarSize: '3.5em',
+ panelHeaderSize: '3.2em',
virtualScrolling: true,
sensitiveByDefault: false,
conversationDisplay: 'linear',
diff --git a/src/panel.scss b/src/panel.scss
@@ -60,9 +60,9 @@
.panel-heading,
.panel-footer {
- --panel-heading-height-padding: 0.6em;
- --__panel-heading-gap: 0.5em;
- --__panel-heading-height: 3.2em;
+ --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.15);
+ --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
+ --__panel-heading-height: var(--panelHeaderSize, 3.2em);
--__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
backdrop-filter: var(--__panel-backdrop-filter);
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -148,26 +148,34 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
return Promise.resolve()
}
-const configColumns = ({
+const extractStyleConfig = ({
sidebarColumnWidth,
contentColumnWidth,
notifsColumnWidth,
emojiReactionsScale,
+ roundnessOverride,
+ emojiSize,
+ navbarSize,
+ panelHeaderSize,
textSize
}) => ({
sidebarColumnWidth,
contentColumnWidth,
notifsColumnWidth,
emojiReactionsScale,
+ roundnessOverride,
+ emojiSize,
+ navbarSize,
+ panelHeaderSize,
textSize
})
-const defaultConfigColumns = configColumns(defaultState)
+const defaultStyleConfig = extractStyleConfig(defaultState)
-export const applyConfig = (config) => {
- const columns = configColumns(config)
+export const applyConfig = (input) => {
+ const config = extractStyleConfig(input)
- if (columns === defaultConfigColumns) {
+ if (config === defaultStyleConfig) {
return
}
@@ -176,7 +184,7 @@ export const applyConfig = (config) => {
body.classList.add('hidden')
const rules = Object
- .entries(columns)
+ .entries(config)
.filter(([k, v]) => v)
.map(([k, v]) => `--${k}: ${v}`).join(';')
