From 3f55c08693560f634ec129889b19a2031e93a67e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 6 Oct 2024 00:50:29 +0300
Subject: [PATCH 1/2] work on palette editor

---
 .../tabs/style_tab/style_tab.js               | 16 ++++++++++
 .../tabs/style_tab/style_tab.scss             |  9 ++++--
 .../tabs/style_tab/style_tab.vue              | 29 +++++++++++--------
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index cbd25dfc2..f3d44bac5 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -2,6 +2,7 @@ import { ref, reactive, computed, watch } from 'vue'
 import { get, set } from 'lodash'
 
 import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ComponentPreview from 'src/components/component_preview/component_preview.vue'
 import StringSetting from '../../helpers/string_setting.vue'
@@ -42,6 +43,7 @@ library.add(
 export default {
   components: {
     Select,
+    SelectMotion,
     Checkbox,
     Tooltip,
     StringSetting,
@@ -117,6 +119,19 @@ export default {
       }
     })
 
+    const getNewPalette = () => ({
+      name: 'new palette',
+      bg: '#121a24',
+      fg: '#182230',
+      text: '#b9b9ba',
+      link: '#d8a070',
+      accent: '#d8a070',
+      cRed: '#FF0000',
+      cBlue: '#0095ff',
+      cGreen: '#0fa00f',
+      cOrange: '#ffa500'
+    })
+
     // ### I18n stuff
     // The paths in i18n are getting ridicously long, this effectively shortens them
     const getI18nPath = (componentName) => `settings.style.themes3.editor.components.${componentName}`
@@ -515,6 +530,7 @@ export default {
       website,
       palette,
       editedPalette,
+      getNewPalette,
       componentKeys,
       componentsMap,
       selectedComponent,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 0306454fc..deb087eef 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -88,9 +88,12 @@
   }
 
   .palette-editor {
-    > .label:not(.Select) {
-      font-weight: bold;
-      justify-self: right;
+    display: grid;
+
+    .palette-selector {
+      &-label {
+        font-weight: bold;
+      }
     }
   }
 
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index b73732f8a..9951849aa 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -260,29 +260,34 @@
         :label="$t('settings.style.themes3.editor.palette_tab')"
         class="setting-item palette-editor"
       >
-        <div class="label">
-          <label for="palette-selector">
+          <label
+            class="palette-selector-label"
+            for="palette-selector"
+          >
             {{ $t('settings.style.themes3.palette.label') }}
             {{ ' ' }}
           </label>
           <Select
             id="palette-selector"
             v-model="editedPalette"
+            class="palette-list"
+            size="10"
           >
             <option
-              key="dark"
-              value="dark"
+              v-for="(p, index) in palettes"
+              :key="p"
+              :value="index"
             >
-              {{ $t('settings.style.themes3.palette.dark') }}
-            </option>
-            <option
-              key="light"
-              value="light"
-            >
-              {{ $t('settings.style.themes3.palette.light') }}
+              {{ p }}
             </option>
           </Select>
-        </div>
+          <SelectMotion
+            class="palette-list-movement"
+            v-model="palettes"
+            :selected-id="editedPalette"
+            :get-add-value="getNewPalette"
+            @update:selectedId="e => editecPalette = e"
+          />
         <PaletteEditor v-model="palette" />
       </div>
     </tab-switcher>

From bae4836349961f92dbddec22a9a23d9aebc6fccf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 6 Oct 2024 01:16:24 +0300
Subject: [PATCH 2/2] palettes editor done

---
 .../palette_editor/palette_editor.vue         | 73 ++++++++++---------
 .../tabs/style_tab/style_tab.js               | 21 ++++--
 .../tabs/style_tab/style_tab.scss             | 23 ++++++
 .../tabs/style_tab/style_tab.vue              | 13 ++--
 src/i18n/en.json                              |  2 -
 5 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index b6350b0f2..cebe73ee1 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -1,31 +1,27 @@
 <template>
   <div class="PaletteEditor">
-    <div class="colors">
-      <ColorInput
-        v-for="key in paletteKeys"
-        :key="key"
-        :model-value="props.modelValue[key]"
-        :fallback="fallback(key)"
-        :label="$t('settings.style.themes3.palette.' + key)"
-        @update:modelValue="value => updatePalette(key, value)"
-      />
-    </div>
-    <div class="controls">
-      <button
-        class="btn button-default"
-        @click="importPalette"
-      >
-        <FAIcon icon="file-import" />
-        {{ $t('settings.style.themes3.palette.import') }}
-      </button>
-      <button
-        class="btn button-default"
-        @click="exportPalette"
-      >
-        <FAIcon icon="file-export" />
-        {{ $t('settings.style.themes3.palette.export') }}
-      </button>
-    </div>
+    <ColorInput
+      v-for="key in paletteKeys"
+      :key="key"
+      :model-value="props.modelValue[key]"
+      :fallback="fallback(key)"
+      :label="$t('settings.style.themes3.palette.' + key)"
+      @update:modelValue="value => updatePalette(key, value)"
+    />
+    <button
+      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 palette-export-button"
+      @click="exportPalette"
+    >
+      <FAIcon icon="file-export" />
+      {{ $t('settings.style.themes3.palette.export') }}
+    </button>
   </div>
 </template>
 
@@ -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-rows: repeat(auto-fit, min-content);
-    grid-gap: 0.5em;
+  display: grid;
+  justify-content: space-around;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr) auto;
+  grid-gap: 0.5em;
+  align-items: space-between;
+
+  .palette-import-button {
+    grid-column: 1 / span 2;
   }
 
-  .controls {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0.5em;
+  .palette-export-button {
+    grid-column: 3 / span 2;
+  }
+
+  .color-input.style-control {
+    margin: 0;
   }
 }
 </style>
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index f3d44bac5..fb42e193e 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -72,8 +72,9 @@ export default {
     })
 
     // ### Palette stuff
-    const palettes = reactive({
-      light: {
+    const palettes = reactive([
+      {
+        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,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index deb087eef..f557b7d59 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/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;
       }
     }
   }
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 9951849aa..704cdc1bc 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/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 v-model="palette" />
+        <PaletteEditor
+          class="palette-editor-edit"
+          v-model="palette"
+        />
       </div>
     </tab-switcher>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b5628be4a..b7ee0984c 100644
--- a/src/i18n/en.json
+++ b/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",