pleroma-fe

commit: c83ddb0b2b824fb3c0e3bb596552e98c162c78d3
parent d3b5f76486373f658a2802b5b9ab7628ebc862fb
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 27 Feb 2024 17:03:39 +0200

better v1 detection, better menu-item consistency

Diffstat:
M
src/components/menu_item.style.js
35
+++++++++++++++++++++++++++++++----
M
src/components/navigation/navigation_entry.vue
14
+++++++++++++-
M
src/components/settings_modal/tabs/theme_tab/theme_tab.js
2
++
M
src/services/style_setter/style_setter.js
8
++++----
M
src/services/theme_data/css_utils.js
2
+-
M
src/services/theme_data/theme_data_3.service.js
8
++++++--

6 files changed, 57 insertions(+), 12 deletions(-)
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
@@ -30,17 +30,44 @@ export default {
     {
       state: ['active'],
       directives: {
-        background: '$mod(--bg, 5)',
+        background: '$mod(--bg, 10)',
+        opacity: 1
+      }
+    },
+    {
+      state: ['active', 'hover'],
+      directives: {
+        background: '$mod(--bg, 15)',
         opacity: 1
       }
     },
     {
       component: 'Text',
-      variant: 'normal',
       parent: {
         component: 'MenuItem',
-        state: ['normal', 'hover'],
-        variant: 'normal'
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
       },
       directives: {
         textColor: '--link',
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
@@ -10,7 +10,7 @@
     >
       <component
         :is="routeTo ? 'a' : 'button'"
-        class="main-link button-unstyled"
+        class="main-link"
         :href="href"
         @click="navigate"
       >
@@ -84,11 +84,23 @@
   }
 
   .main-link {
+    background: none;
+    border: none;
+    outline: none;
+    display: inline;
+    text-align: initial;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: unset;
+    cursor: pointer;
+    box-sizing: content-box;
+    color: var(--text);
     flex: 1;
     padding: 0 1em;
   }
 
   .menu-icon {
+    color: var(--icon);
     margin-right: 0.8em;
   }
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -514,6 +514,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
         }
@@ -521,6 +522,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customThemeSource',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
           fonts: this.fontsLocal,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -8,11 +8,11 @@ import { chunk } from 'lodash'
 
 export const applyTheme = async (input) => {
   let extraRules
-  if (input.themeType !== 1) {
+  if (input.themeFileVersion === 1) {
+    extraRules = convertTheme2To3(input)
+  } else {
     const { theme } = generatePreset(input)
     extraRules = convertTheme2To3(theme)
-  } else {
-    extraRules = convertTheme2To3(input)
   }
 
   const themes3 = init(extraRules, '#FFFFFF')
@@ -125,7 +125,7 @@ export const getPreset = (val) => {
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
     .then((theme) => {
       const isV1 = Array.isArray(theme)
-      const data = isV1 ? { themeType: 1 } : theme.theme
+      const data = isV1 ? {} : theme.theme
 
       if (isV1) {
         const bg = hex2rgb(theme[1])
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
@@ -155,7 +155,7 @@ export const getCssRules = (rules) => rules.map(rule => {
   return [
     header,
     directives + ';',
-    (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    (rule.component === 'Text' && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
     '',
     virtualDirectives,
     footer
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -275,8 +275,12 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
         ...combination,
         directives: {},
-        virtualDirectives,
-        virtualDirectivesRaw
+        virtualDirectives: {
+          [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        },
+        virtualDirectivesRaw: {
+          [virtualName]: textColor
+        }
       }
     } else {
       computed[selector] = computed[selector] || {}