palettes editor done

src/components/palette_editor/palette_editor.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="PaletteEditor">
-    <div class="colors">
     <ColorInput
       v-for="key in paletteKeys"
       :key="key"
@@ -9,24 +8,21 @@
       :label="$t('settings.style.themes3.palette.' + key)"
       @update:modelValue="value => updatePalette(key, value)"
     />
-    </div>
-    <div class="controls">
     <button
-        class="btn button-default"
+      class="btn button-default palette-import-button"
       @click="importPalette"
     >
       <FAIcon icon="file-import" />
       {{ $t('settings.style.themes3.palette.import') }}
     </button>
     <button
-        class="btn button-default"
+      class="btn button-default palette-export-button"
       @click="exportPalette"
     >
       <FAIcon icon="file-export" />
       {{ $t('settings.style.themes3.palette.export') }}
     </button>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -106,18 +102,23 @@ const updatePalette = (paletteKey, value) => {
 
 <style lang="scss">
 .PaletteEditor {
-  .colors {
   display: grid;
   justify-content: space-around;
-    grid-template-columns: repeat(4, min-content);
+  grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: repeat(auto-fit, min-content);
+  grid-template-rows: repeat(3, 1fr) auto;
   grid-gap: 0.5em;
+  align-items: space-between;
+
+  .palette-import-button {
+    grid-column: 1 / span 2;
   }
 
-  .controls {
+  .palette-export-button {
-    display: grid;
+    grid-column: 3 / span 2;
-    grid-template-columns: 1fr 1fr;
+  }
-    grid-gap: 0.5em;
+
+  .color-input.style-control {
+    margin: 0;
   }
 }
 </style>

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

@@ -72,8 +72,9 @@ export default {
     })
 
     // ### Palette stuff
-    const palettes = reactive({
+    const palettes = reactive([
-      light: {
+      {
+        name: 'light',
         bg: '#f2f6f9',
         fg: '#d6dfed',
         text: '#304055',
@@ -85,7 +86,8 @@ export default {
         cOrange: '#ffa500',
         border: '#d8e6f9'
       },
-      dark: {
+      {
+        name: 'dark',
         bg: '#121a24',
         fg: '#182230',
         text: '#b9b9ba',
@@ -96,10 +98,11 @@ export default {
         cGreen: '#0fa00f',
         cOrange: '#ffa500'
       }
-    })
+    ])
 
     const palettesOut = computed(() => {
-      return Object.entries(palettes).map(([name, palette]) => {
+      console.log('WORK DAMN', palettes)
+      return palettes.map(({ name, ...palette }) => {
         const entries = Object
           .entries(palette)
           .map(([slot, data]) => `  ${slot}: ${data};`)
@@ -109,9 +112,10 @@ export default {
       }).join('\n\n')
     })
 
-    const editedPalette = ref('dark')
+    const editedPalette = ref(0)
     const palette = computed({
       get () {
+        console.log(palettes, editedPalette.value)
         return palettes[editedPalette.value]
       },
       set (newPalette) {
@@ -435,10 +439,12 @@ export default {
 
     const updatePreview = () => {
       try {
+        const { name, ...paletteData } = palette.value
+        console.log('WORK', paletteData)
         const rules = init({
           inputRuleset: editorFriendlyToOriginal.value,
           initialStaticVars: {
-            ...palette.value
+            ...paletteData
           },
           ultimateBackgroundColor: '#000000',
           rootComponentName: selectedComponentName.value,
@@ -529,6 +535,7 @@ export default {
       license,
       website,
       palette,
+      palettes,
       editedPalette,
       getNewPalette,
       componentKeys,

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -89,10 +89,33 @@
 
   .palette-editor {
     display: grid;
+    grid-template-areas:
+      "label    editor"
+      "selector editor"
+      "motion   editor";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 0.5em;
+
+    .palette-editor-edit {
+      grid-area: editor;
+    }
 
     .palette-selector {
       &-label {
         font-weight: bold;
+        grid-area: label;
+        margin: 0;
+      }
+    }
+
+    .palette-list {
+      grid-area: selector;
+      margin: 0;
+
+      &-movement {
+        grid-area: motion;
+        margin: 0;
       }
     }
   }

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

@@ -271,14 +271,14 @@
             id="palette-selector"
             v-model="editedPalette"
             class="palette-list"
-            size="10"
+            size="9"
           >
             <option
               v-for="(p, index) in palettes"
-              :key="p"
+              :key="p.name"
               :value="index"
             >
-              {{ p }}
+              {{ p.name }}
             </option>
           </Select>
           <SelectMotion
@@ -286,9 +286,12 @@
             v-model="palettes"
             :selected-id="editedPalette"
             :get-add-value="getNewPalette"
-            @update:selectedId="e => editecPalette = e"
+            @update:selectedId="e => editedPalette = e"
+          />
+        <PaletteEditor
+          class="palette-editor-edit"
+          v-model="palette"
         />
-        <PaletteEditor v-model="palette" />
       </div>
     </tab-switcher>
   </div>

src/i18n/en.json

@@ -760,8 +760,6 @@
           "label": "Palette",
           "import": "Import",
           "export": "Export",
-          "dark": "Dark mode",
-          "light": "Light mode",
           "bg": "Panel background",
           "fg": "Buttons etc.",
           "text": "Text",