got it working again

2024-10-06 18:56:45 +03:00 · 2024-10-06 18:56:45 +03:00 · 8725de3e91
parent a6863248bb
commit 8725de3e91
4 changed files with 152 additions and 88 deletions
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@ -60,6 +60,9 @@ export default {
    ContrastRatio
  },
  setup () {
+    // All rules that are made by editor
+    const allEditedRules = reactive({})
+
    // ## Meta stuff
    const name = ref('')
    const author = ref('')
@ -79,6 +82,18 @@ export default {

    // ## Palette stuff
    const palettes = reactive([
+      {
+        name: 'dark',
+        bg: '#121a24',
+        fg: '#182230',
+        text: '#b9b9ba',
+        link: '#d8a070',
+        accent: '#d8a070',
+        cRed: '#FF0000',
+        cBlue: '#0095ff',
+        cGreen: '#0fa00f',
+        cOrange: '#ffa500'
+      },
      {
        name: 'light',
        bg: '#f2f6f9',
@ -91,18 +106,6 @@ export default {
        cGreen: '#0fa00f',
        cOrange: '#ffa500',
        border: '#d8e6f9'
-      },
-      {
-        name: 'dark',
-        bg: '#121a24',
-        fg: '#182230',
-        text: '#b9b9ba',
-        link: '#d8a070',
-        accent: '#d8a070',
-        cRed: '#FF0000',
-        cBlue: '#0095ff',
-        cGreen: '#0fa00f',
-        cOrange: '#ffa500'
      }
    ])
    const selectedPaletteId = ref(0)
@ -225,9 +228,6 @@ export default {
      return root
    })

-    // All rules that are made by editor
-    const allEditedRules = reactive({})
-
    // Checkging whether component can support some "directives" which
    // are actually virtual subcomponents, i.e. Text, Link etc
    const componentHas = (subComponent) => {
@ -395,53 +395,6 @@ export default {
        return null
      }
    })
-    const updatePreview = () => {
-      try {
-        const { name, ...paletteData } = selectedPalette.value
-        const rules = init({
-          inputRuleset: editorFriendlyToOriginal.value,
-          initialStaticVars: {
-            ...paletteData
-          },
-          ultimateBackgroundColor: '#000000',
-          rootComponentName: selectedComponentName.value,
-          editMode: true,
-          debug: true
-        }).eager
-        previewRules.splice(0, previewRules.length)
-        previewRules.push(...rules)
-      } catch (e) {
-        console.error('Could not compile preview theme', e)
-      }
-    }
-    const updateSelectedComponent = () => {
-      selectedVariant.value = 'normal'
-      selectedState.clear()
-      updatePreview()
-    }
-    updateSelectedComponent()
-
-    watch(
-      allEditedRules,
-      updatePreview
-    )
-
-    watch(
-      palettes,
-      updatePreview
-    )
-
-    watch(
-      selectedPalette,
-      updatePreview
-    )
-
-    watch(
-      selectedComponentName,
-      updateSelectedComponent
-    )
-
-    // export and import
    const editorFriendlyToOriginal = computed(() => {
      const resultRules = []

@ -481,10 +434,61 @@ export default {
      return resultRules
    })

+    const updatePreview = () => {
+      try {
+        const { name, ...paletteData } = selectedPalette.value
+        // This normally would be handled by Root but since we pass something
+        // else we have to make do ourselves
+        paletteData.accent = paletteData.accent || paletteData.link
+        paletteData.link = paletteData.link || paletteData.accent
+        const rules = init({
+          inputRuleset: editorFriendlyToOriginal.value,
+          initialStaticVars: {
+            ...paletteData
+          },
+          ultimateBackgroundColor: '#000000',
+          rootComponentName: selectedComponentName.value,
+          editMode: true,
+          debug: true
+        }).eager
+        previewRules.splice(0, previewRules.length)
+        previewRules.push(...rules)
+      } catch (e) {
+        console.error('Could not compile preview theme', e)
+      }
+    }
+
+    const updateSelectedComponent = () => {
+      selectedVariant.value = 'normal'
+      selectedState.clear()
+      updatePreview()
+    }
+    updateSelectedComponent()
+
+    // export and import
+    watch(
+      allEditedRules,
+      updatePreview
+    )
+
+    watch(
+      palettes,
+      updatePreview
+    )
+
+    watch(
+      selectedPalette,
+      updatePreview
+    )
+
+    watch(
+      selectedComponentName,
+      updateSelectedComponent
+    )
+
    // ## Variables
    const allCustomVirtualDirectives = [...componentsMap.values()]
      .map(c => {
-        console.log(c.defaultRules.filter(c => c.component === 'Root'))
        return c
          .defaultRules
          .filter(c => c.component === 'Root')
@ -504,6 +508,17 @@ export default {
    const virtualDirectives = reactive(allCustomVirtualDirectives)
    const selectedVirtualDirectiveId = ref(0)
    const selectedVirtualDirective = computed(() => virtualDirectives[selectedVirtualDirectiveId.value])
+    const selectedVirtualDirectiveParsed = computed({
+      get () {
+        switch (selectedVirtualDirective.value.valType) {
+          case 'shadow':
+            return {}
+          default:
+            return null
+        }
+      }
+    })
+
    const getNewDirective = () => ({
      name: 'newDirective',
      valType: 'generic',
@ -512,8 +527,10 @@ export default {

    // ## Export and Import
    const styleExporter = newExporter({
-      filename: 'pleroma.palette.json',
-      getExportedObject: () => exportStyleData
+      filename: name.value || 'pleroma_theme',
+      mime: 'text/plain',
+      extension: 'piss',
+      getExportedObject: () => exportStyleData.value
    })
    const exportStyleData = computed(() => {
      return [
@ -591,6 +608,7 @@ export default {
      virtualDirectives,
      selectedVirtualDirective,
      selectedVirtualDirectiveId,
+      selectedVirtualDirectiveParsed,
      getNewDirective,

      // ## Export and Import
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@ -87,34 +87,32 @@
    }
  }

-  .palette-editor {
+  .list-editor {
    display: grid;
    grid-template-areas:
      "label    editor"
      "selector editor"
-      "motion   editor";
+      "movement editor";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 0.5em;

-    .palette-editor-edit {
+    .list-edit-area {
      grid-area: editor;
    }

-    .palette-selector {
+    .list-select {
+      grid-area: selector;
+      margin: 0;
+
      &-label {
        font-weight: bold;
        grid-area: label;
        margin: 0;
      }
-    }
-
-    .palette-list {
-      grid-area: selector;
-      margin: 0;

      &-movement {
-        grid-area: motion;
+        grid-area: movement;
        margin: 0;
      }
    }
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@ -258,10 +258,10 @@
      <div
        key="palette"
        :label="$t('settings.style.themes3.editor.palette_tab')"
-        class="setting-item palette-editor"
+        class="setting-item list-editor"
      >
          <label
-            class="palette-selector-label"
+            class="list-select-label"
            for="palette-selector"
          >
            {{ $t('settings.style.themes3.palette.label') }}
@ -269,9 +269,9 @@
          </label>
          <Select
            id="palette-selector"
-            v-model="editedPalette"
-            class="palette-list"
-            size="9"
+            v-model="selectedPaletteId"
+            class="list-select"
+            size="10"
          >
            <option
              v-for="(p, index) in palettes"
@ -282,17 +282,58 @@
            </option>
          </Select>
          <SelectMotion
-            class="palette-list-movement"
+            class="list-select-movement"
            v-model="palettes"
-            :selected-id="editedPalette"
            :get-add-value="getNewPalette"
-            @update:selectedId="e => editedPalette = e"
+            :selected-id="selectedPaletteId"
+            @update:selectedId="e => selectedPaletteId = e"
          />
        <PaletteEditor
-          class="palette-editor-edit"
-          v-model="palette"
+          class="list-edit-area"
+          v-model="selectedPalette"
        />
      </div>
+      <div
+        key="variables"
+        :label="$t('settings.style.themes3.editor.variables_tab')"
+        class="setting-item list-editor"
+      >
+          <label
+            class="list-select-label"
+            for="variables-selector"
+          >
+            {{ $t('settings.style.themes3.variables.label') }}
+            {{ ' ' }}
+          </label>
+          <Select
+            id="variables-selector"
+            v-model="selectedVirtualDirectiveId"
+            class="list-select"
+            size="9"
+          >
+            <option
+              v-for="(p, index) in virtualDirectives"
+              :key="p.name"
+              :value="index"
+            >
+              {{ p.name }}
+            </option>
+          </Select>
+          <SelectMotion
+            class="list-select-movement"
+            v-model="virtualDirectives"
+            :selected-id="selectedVirtualDirectiveId"
+            :get-add-value="getNewVirtualDirective"
+            @update:selectedId="e => selectedVirtualDirectiveId = e"
+          />
+          <div class="list-edit-area">
+            <ShadowControl
+              v-if="selectedVirtualDirective.valType === 'shadow'"
+              v-model="selectedVirtualDirective.value"
+            />
+            {{ selectedVirtualDirective.valType }}
+          </div>
+      </div>
    </tab-switcher>
  </div>
 </template>
--- a/src/services/export_import/export_import.js
+++ b/src/services/export_import/export_import.js
@ -2,15 +2,22 @@ import utf8 from 'utf8'

 export const newExporter = ({
  filename = 'data',
+  mime = 'application/json',
+  extension = '.json',
  getExportedObject
 }) => ({
  exportData () {
-    const stringified = utf8.encode(JSON.stringify(getExportedObject(), null, 2)) // Pretty-print and indent with 2 spaces
+    let stringified
+    if (mime === 'application/json') {
+      stringified = utf8.encode(JSON.stringify(getExportedObject(), null, 2)) // Pretty-print and indent with 2 spaces
+    } else {
+      stringified = utf8.encode(getExportedObject()) // Pretty-print and indent with 2 spaces
+    }

    // Create an invisible link with a data url and simulate a click
    const e = document.createElement('a')
-    e.setAttribute('download', `${filename}.json`)
-    e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+    e.setAttribute('download', `${filename}.${extension}`)
+    e.setAttribute('href', `data:${mime};base64, ${window.btoa(stringified)}`)
    e.style.display = 'none'

    document.body.appendChild(e)