work on palette editor

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,

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;
+      }
     }
   }
 

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>