pleroma-fe

commit: eed05f1380fd60f9564558c82f142c317ef670f5
parent eca8da6593f693052ed68fd86754f40c383cf94f
Author: Henry Jameson <me@hjkos.com>
Date:   Fri, 21 Jun 2024 22:46:01 +0300

forced roundness tweak config

Diffstat:
M
src/components/settings_modal/tabs/appearance_tab.js
5
+++++
M
src/components/settings_modal/tabs/appearance_tab.vue
9
+++++++++
M
src/i18n/en.json
6
++++++
M
src/modules/config.js
3
+++
M
src/modules/instance.js
1
+
M
src/services/style_setter/style_setter.js
51
++++++++++++++++++++++++++++++++++++++-------------

6 files changed, 62 insertions(+), 13 deletions(-)
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
@@ -22,6 +22,11 @@ const AppearanceTab = {
         key: mode,
         value: mode,
         label: this.$t(`settings.third_column_mode_${mode}`)
+      })),
+      forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
+        key: mode,
+        value: i - 1,
+        label: this.$t(`settings.forced_roundness_mode_${mode}`)
       }))
     }
   },
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -128,6 +128,15 @@
     <div class="setting-item">
       <h2>{{ $t('settings.visual_tweaks') }}</h2>
       <ul class="setting-list">
+        <li>
+          <ChoiceSetting
+            id="forcedRoundness"
+            path="forcedRoundness"
+            :options="forcedRoundnessOptions"
+          >
+            {{ $t('settings.force_interface_roundness') }}
+          </ChoiceSetting>
+        </li>
         <li v-if="instanceWallpaperUsed">
           <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -386,6 +386,12 @@
     "navbar_size": "Top bar size",
     "panel_header_size": "Panel header size",
     "visual_tweaks": "Minor visual tweaks",
+    "force_interface_roundness": "Override interface roundness/sharpness",
+    "forced_roundness_mode_disabled": "Use theme defaults",
+    "forced_roundness_mode_sharp": "Force sharp edges",
+    "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
+    "forced_roundness_mode_round": "Force round edges",
+    "scale_and_layout": "Interface scale and layout",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -119,6 +119,8 @@ export const defaultState = {
   textSize: undefined, // instance default
   emojiSize: undefined, // instance default
   navbarSize: undefined, // instance default
+  panelHeaderSize: undefined, // instance default
+  forcedRoundness: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -266,6 +268,7 @@ const config = {
           case 'textSize':
           case 'navbarSize':
           case 'panelHeaderSize':
+          case 'forcedRoundness':
           case 'emojiSize':
           case 'emojiReactionsScale':
             applyConfig(state)
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -103,6 +103,7 @@ const defaultState = {
   emojiSize: '2.2rem',
   navbarSize: '3.5rem',
   panelHeaderSize: '3.2rem',
+  forcedRoundness: -1,
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -153,22 +153,41 @@ const extractStyleConfig = ({
   contentColumnWidth,
   notifsColumnWidth,
   emojiReactionsScale,
-  roundnessOverride,
   emojiSize,
   navbarSize,
   panelHeaderSize,
-  textSize
-}) => ({
-  sidebarColumnWidth,
-  contentColumnWidth,
-  notifsColumnWidth,
-  emojiReactionsScale,
-  roundnessOverride,
-  emojiSize,
-  navbarSize,
-  panelHeaderSize,
-  textSize
-})
+  textSize,
+  forcedRoundness
+}) => {
+  const result = {
+    sidebarColumnWidth,
+    contentColumnWidth,
+    notifsColumnWidth,
+    emojiReactionsScale,
+    emojiSize,
+    navbarSize,
+    panelHeaderSize,
+    textSize
+  }
+
+  console.log(forcedRoundness)
+  switch (forcedRoundness) {
+    case 'disable':
+      break
+    case '0':
+      result.forcedRoundness = '0'
+      break
+    case '1':
+      result.forcedRoundness = '1px'
+      break
+    case '2':
+      result.forcedRoundness = '0.4rem'
+      break
+    default:
+  }
+
+  return result
+}
 
 const defaultStyleConfig = extractStyleConfig(defaultState)
 
@@ -197,6 +216,12 @@ export const applyConfig = (input) => {
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
 
+  if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
+    styleSheet.insertRule(` * {
+        --roundness: var(--forcedRoundness) !important;
+    }`, 'index-max')
+  }
+
   body.classList.remove('hidden')
 }