style application stuff

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -1,4 +1,5 @@
 import { ref, reactive, computed, watch, provide } from 'vue'
+import { useStore } from 'vuex'
 import { get, set } from 'lodash'
 
 import Select from 'src/components/select/select.vue'
@@ -75,8 +76,9 @@ export default {
     Preview,
     VirtualDirectivesTab
   },
-  setup () {
+  setup (props, context) {
     const exports = {}
+    const store = useStore()
     // All rules that are made by editor
     const allEditedRules = reactive({})
 
@@ -515,7 +517,9 @@ export default {
         })
       }
 
-      convert(selectedComponentName.value, allEditedRules[selectedComponentName.value])
+      componentsMap.values().forEach(({ name }) => {
+        convert(name, allEditedRules[name])
+      })
 
       return resultRules
     })
@@ -621,49 +625,63 @@ export default {
       )
     })
 
-    const overallPreviewRules = ref()
+    const overallPreviewCssRules = ref()
-    exports.overallPreviewRules = overallPreviewRules
+    exports.overallPreviewCssRules = overallPreviewCssRules
-    exports.updateOverallPreview = () => {
+
+    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}`])
+      )
+    }))
+
+    const exportRules = computed(() => [
+      paletteRule.value,
+      virtualDirectivesRule.value,
+      ...editorFriendlyToOriginal.value
+    ])
+
+    const compilePreviewRules = () => {
       try {
-        // This normally would be handled by Root but since we pass something
-        // else we have to make do ourselves
-
-        const { name, ...rest } = selectedPalette.value
-        const paletteRule = {
-          component: 'Root',
-          directives: Object
-            .entries(rest)
-            .map(([k, v]) => ['--' + k, v])
-            .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
-        }
-
-        const virtualDirectivesRule = {
-          component: 'Root',
-          directives: Object.fromEntries(
-            virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
-          )
-        }
-
         const rules = init({
-          inputRuleset: [
+          inputRuleset: exportRules.value,
-            paletteRule,
-            virtualDirectivesRule,
-            ...editorFriendlyToOriginal.value
-          ],
           ultimateBackgroundColor: '#000000',
           liteMode: true,
           debug: true
         }).eager
 
-        overallPreviewRules.value = getScopedVersion(
+        return rules
-          getCssRules(rules),
-          '#edited-style-preview'
-        ).join('\n')
       } catch (e) {
         console.error('Could not compile preview theme', e)
+        return null
       }
     }
 
+    exports.updateOverallPreview = () => {
+      const rules = compilePreviewRules()
+      if (rules === null) return
+      overallPreviewCssRules.value = getScopedVersion(
+        getCssRules(rules),
+        '#edited-style-preview'
+      ).join('\n')
+    }
+
+    exports.applyStyle = () => {
+      store.dispatch('setStyleCustom', exportRules.value)
+    }
+
     // ## Export and Import
     const styleExporter = newExporter({
       filename: () => exports.name.value ?? 'pleroma_theme',

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -7,7 +7,7 @@
       <!-- eslint-disable vue/no-v-text-v-html-on-component -->
       <component
         :is="'style'"
-        v-html="overallPreviewRules"
+        v-html="overallPreviewCssRules"
       />
       <!-- eslint-enable vue/no-v-text-v-html-on-component -->
       <Preview id="edited-style-preview" />
@@ -41,7 +41,7 @@
       </button>
       <button
         class="btn button-default button-apply"
-        @click="applyTheme"
+        @click="applyStyle"
       >
         <FAIcon icon="check" />
         {{ $t('settings.style.themes3.editor.apply_preview') }}

src/modules/interface.js

@@ -351,10 +351,10 @@ const interfaceMod = {
       let majorVersionUsed
 
       console.log(
-        `USER V3 palette: ${userPaletteName}, style: ${userStyleName} `
+        `USER V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
       )
       console.log(
-        `USER V2 name: ${userThemeV2Name}, source: ${userThemeV2Source}, snapshot: ${userThemeV2Snapshot}`
+        `USER V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
       )
 
       console.log(`INST V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
@@ -411,8 +411,8 @@ const interfaceMod = {
       let styleDataUsed = null
       let styleNameUsed = null
       let paletteDataUsed = null
-      let paletteNameUsed = null
+      // let paletteNameUsed = null
-      let themeNameUsed = null
+      // let themeNameUsed = null
       let themeDataUsed = null
 
       const getData = async (resource, index, customData, name) => {
@@ -455,7 +455,7 @@ const interfaceMod = {
           userPaletteCustomData,
           userPaletteName || instancePaletteName
         )
-        paletteNameUsed = palette.nameUsed
+        // paletteNameUsed = palette.nameUsed
         paletteDataUsed = palette.dataUsed
         if (Array.isArray(paletteDataUsed)) {
           const [
@@ -471,9 +471,8 @@ const interfaceMod = {
           ] = paletteDataUsed
           paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
         }
-        console.log('PAL', userPaletteName, paletteNameUsed)
-        console.log('PAL', paletteDataUsed)
 
+        console.log('USCD', userStyleCustomData)
         const style = await getData(
           'style',
           stylesIndex,
@@ -489,15 +488,13 @@ const interfaceMod = {
           userThemeV2Source || userThemeV2Snapshot,
           userThemeV2Name || instanceThemeV2Name
         )
-        themeNameUsed = theme.nameUsed
+        // themeNameUsed = theme.nameUsed
         themeDataUsed = theme.dataUsed
 
         // Themes v2 editor support
         commit('setInstanceOption', { name: 'themeData', value: themeDataUsed })
       }
 
-      console.log('STYLE', styleNameUsed, paletteNameUsed, themeNameUsed)
-
       // commit('setOption', { name: 'palette', value: paletteNameUsed })
       // commit('setOption', { name: 'style', value: styleNameUsed })
       // commit('setOption', { name: 'theme', value: themeNameUsed })