more scaling options

3 months ago · 6343b91abf
parent 6142ac2bfc
commit 6343b91abf
11 changed files with 165 additions and 121 deletions
--- 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
 }

--- 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;
--- 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()
  }
 }
--- 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>
--- 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: {
--- 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>
--- 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",
--- 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
--- 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',
--- 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);
--- 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(';')