allow setting palettes from style

2024-11-12 23:24:28 +02:00 · 2024-11-12 23:24:28 +02:00 · 86585cc644
parent d787fb1a60
commit 86585cc644
9 changed files with 143 additions and 46 deletions
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -390,6 +390,13 @@ const afterStoreSetup = async ({ store, i18n }) => {
  app.use(store)
  app.use(i18n)

+  // Little thing to get out of invalid theme state
+  window.resetThemes = () => {
+    store.dispatch('resetThemeV3')
+    store.dispatch('resetThemeV3Palette')
+    store.dispatch('resetThemeV2')
+  }
+
  app.use(vClickOutside)
  app.use(VBodyScrollLock)
  app.use(VueVirtualScroller)
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@ -33,7 +33,7 @@ const AppearanceTab = {
  data () {
    return {
      availableStyles: [],
-      availablePalettes: [],
+      bundledPalettes: [],
      fileImporter: newImporter({
        accept: '.json, .piss',
        validator: this.importValidator,
@ -41,8 +41,8 @@ const AppearanceTab = {
        onImportFailure: this.onImportFailure
      }),
      palettesKeys: [
-        'background',
-        'foreground',
+        'bg',
+        'fg',
        'link',
        'text',
        'cRed',
@ -103,13 +103,13 @@ const AppearanceTab = {
      }))
    })

-    updateIndex('palette').then(palettes => {
-      palettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
+    updateIndex('palette').then(bundledPalettes => {
+      bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
        if (Array.isArray(v)) {
          const [
            name,
-            background,
-            foreground,
+            bg,
+            fg,
            text,
            link,
            cRed = '#FF0000',
@ -117,9 +117,9 @@ const AppearanceTab = {
            cBlue = '#0000FF',
            cOrange = '#E3FF00'
          ] = v
-          this.availablePalettes.push({ key, name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange })
+          this.bundledPalettes.push({ key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange })
        } else {
-          this.availablePalettes.push({ key, ...v })
+          this.bundledPalettes.push({ key, ...v })
        }
      }))
    })
@ -147,6 +147,50 @@ const AppearanceTab = {
    })
  },
  computed: {
+    availablePalettes () {
+      return [
+        ...this.bundledPalettes,
+        ...this.stylePalettes
+      ]
+    },
+    stylePalettes () {
+      if (!this.mergedConfig.styleCustomData) return
+      const meta = this.mergedConfig.styleCustomData
+        .find(x => x.component === '@meta')
+      const result = this.mergedConfig.styleCustomData
+        .filter(x => x.component.startsWith('@palette'))
+        .map(x => {
+          const {
+            variant,
+            bg,
+            fg,
+            text,
+            link,
+            accent,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange,
+            wallpaper
+          } = x
+
+          const result = {
+            name: `${meta.name}: ${variant}`,
+            bg,
+            fg,
+            text,
+            link,
+            accent,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange,
+            wallpaper
+          }
+          return Object.fromEntries(Object.entries(result).filter(([k, v]) => v))
+        })
+      return result
+    },
    noIntersectionObserver () {
      return !window.IntersectionObserver
    },
@ -253,6 +297,11 @@ const AppearanceTab = {
      this.$store.dispatch('setPalette', name)
      this.$store.dispatch('applyTheme')
    },
+    setPaletteCustom (p) {
+      this.$store.dispatch('resetThemeV2')
+      this.$store.dispatch('setPaletteCustom', p)
+      this.$store.dispatch('applyTheme')
+    },
    resetTheming (name) {
      this.$store.dispatch('resetThemeV2')
      this.$store.dispatch('resetThemeV3')
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@ -25,6 +25,7 @@
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5em;

+    h4,
    .unsupported-theme-v2 {
      grid-column: 1 / span 2;
    }
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@ -72,8 +72,9 @@
      <h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
      <div class="palettes">
        <template v-if="customThemeVersion === 'v3'">
+          <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
          <button
-            v-for="p in availablePalettes"
+            v-for="p in bundledPalettes"
            :key="p.name"
            class="btn button-default palette-entry"
            :class="{ toggled: isPaletteActive(p.key) }"
@ -89,6 +90,26 @@
              :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
            />
          </button>
+          <h4 v-if="stylePalettes?.length > 0">
+            {{ $t('settings.style.themes3.palette.style') }}
+          </h4>
+          <button
+            v-for="p in stylePalettes || []"
+            :key="p.name"
+            class="btn button-default palette-entry"
+            :class="{ toggled: isPaletteActive(p.key) }"
+            @click="() => setPaletteCustom(p)"
+          >
+            <label>
+              {{ p.name }}
+            </label>
+            <span
+              v-for="c in palettesKeys"
+              :key="c"
+              class="palette-square"
+              :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+            />
+          </button>
        </template>
        <template v-else-if="customThemeVersion === 'v2'">
          <div class="alert neutral theme-notice unsupported-theme-v2">
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@ -101,6 +101,14 @@ export default {
      ].join('\n')
    })

+    const metaRule = computed(() => ({
+      component: '@meta',
+      name: exports.name.value,
+      author: exports.author.value,
+      license: exports.license.value,
+      website: exports.website.value
+    }))
+
    // ## Palette stuff
    const palettes = reactive([
      {
@ -169,6 +177,22 @@ export default {
      cOrange: '#ffa500'
    })

+    // Raw format
+    const palettesRule = computed(() => {
+      return palettes.map(palette => {
+        const { name, ...rest } = palette
+        return {
+          component: '@palette',
+          variant: name,
+          ...Object
+            .entries(rest)
+            .filter(([k, v]) => v)
+            .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
+        }
+      })
+    })
+
+    // Text format
    const palettesOut = computed(() => {
      return palettes.map(({ name, ...palette }) => {
        const entries = Object
@ -519,6 +543,15 @@ export default {
      virtualDirectives.value = value
    }

+    // Raw format
+    const virtualDirectivesRule = computed(() => ({
+      component: 'Root',
+      directives: Object.fromEntries(
+        virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+      )
+    }))
+
+    // Text format
    const virtualDirectivesOut = computed(() => {
      return [
        'Root {',
@ -548,25 +581,6 @@ export default {
      )
    })

-    const paletteRule = computed(() => {
-      const { name, ...rest } = selectedPalette.value
-      return {
-        component: 'Root',
-        directives: Object
-          .entries(rest)
-          .filter(([k, v]) => v)
-          .map(([k, v]) => ['--' + k, v])
-          .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
-      }
-    })
-
-    const virtualDirectivesRule = computed(() => ({
-      component: 'Root',
-      directives: Object.fromEntries(
-        virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
-      )
-    }))
-
    // ## Export and Import
    const styleExporter = newExporter({
      filename: () => exports.name.value ?? 'pleroma_theme',
@ -613,6 +627,15 @@ export default {
      }
    })

+    // Raw format
+    const exportRules = computed(() => [
+      metaRule.value,
+      ...palettesRule.value,
+      virtualDirectivesRule.value,
+      ...editorFriendlyToOriginal.value
+    ])
+
+    // Text format
    const exportStyleData = computed(() => {
      return [
        metaOut.value,
@ -630,12 +653,6 @@ export default {
      styleImporter.importData()
    }

-    const exportRules = computed(() => [
-      paletteRule.value,
-      virtualDirectivesRule.value,
-      ...editorFriendlyToOriginal.value
-    ])
-
    exports.applyStyle = () => {
      store.dispatch('setStyleCustom', exportRules.value)
    }
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -771,7 +771,9 @@
          "cGreen": "Green color",
          "cOrange": "Orange color",
          "wallpaper": "Wallpaper",
-          "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
+          "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
+          "bundled": "Bundled palettes",
+          "style": "Palettes provided by selected style"
        },
        "editor": {
          "title": "Style",
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@ -460,8 +460,8 @@ const interfaceMod = {
        if (Array.isArray(paletteDataUsed)) {
          const [
            name,
-            background,
-            foreground,
+            bg,
+            fg,
            text,
            link,
            cRed = '#FF0000',
@ -469,10 +469,10 @@ const interfaceMod = {
            cBlue = '#0000FF',
            cOrange = '#E3FF00'
          ] = paletteDataUsed
-          paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
+          paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
        }
+        console.log(paletteDataUsed)

-        console.log('USCD', userStyleCustomData)
        const style = await getData(
          'style',
          stylesIndex,
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@ -227,8 +227,8 @@ export const init = ({
      bScore += b.component === 'Text' ? 1 : 0

      // Debug
-      a.specifityScore = aScore
-      b.specifityScore = bScore
+      a._specificityScore = aScore
+      b._specificityScore = bScore

      if (aScore === bScore) {
        return ai - bi
--- a/static/palettes/index.json
+++ b/static/palettes/index.json
@ -3,8 +3,8 @@
  "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
  "classic-dark": {
    "name": "Classic Dark",
-    "background": "#161c20",
-    "foreground": "#282e32",
+    "bg": "#161c20",
+    "fg": "#282e32",
    "text": "#b9b9b9",
    "link": "#baaa9c",
    "cRed": "#d31014",
@ -16,8 +16,8 @@
  "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
  "tomorrow-night": {
    "name": "Tomorrow Night",
-    "background": "#1d1f21",
-    "foreground": "#373b41",
+    "bg": "#1d1f21",
+    "fg": "#373b41",
    "link": "#81a2be",
    "text": "#c5c8c6",
    "cRed": "#cc6666",