src/components/palette_editor/palette_editor.vue

@@ -1,27 +1,31 @@
 <template>
   <div class="PaletteEditor">
-    <ColorInput
+    <div class="colors">
-      v-for="key in paletteKeys"
+      <ColorInput
-      :key="key"
+        v-for="key in paletteKeys"
-      :model-value="props.modelValue[key]"
+        :key="key"
-      :fallback="fallback(key)"
+        :model-value="props.modelValue[key]"
-      :label="$t('settings.style.themes3.palette.' + key)"
+        :fallback="fallback(key)"
-      @update:modelValue="value => updatePalette(key, value)"
+        :label="$t('settings.style.themes3.palette.' + key)"
-    />
+        @update:modelValue="value => updatePalette(key, value)"
-    <button
+      />
-      class="btn button-default palette-import-button"
+    </div>
-      @click="importPalette"
+    <div class="controls">
-    >
+      <button
-      <FAIcon icon="file-import" />
+        class="btn button-default"
-      {{ $t('settings.style.themes3.palette.import') }}
+        @click="importPalette"
-    </button>
+      >
-    <button
+        <FAIcon icon="file-import" />
-      class="btn button-default palette-export-button"
+        {{ $t('settings.style.themes3.palette.import') }}
-      @click="exportPalette"
+      </button>
-    >
+      <button
-      <FAIcon icon="file-export" />
+        class="btn button-default"
-      {{ $t('settings.style.themes3.palette.export') }}
+        @click="exportPalette"
-    </button>
+      >
+        <FAIcon icon="file-export" />
+        {{ $t('settings.style.themes3.palette.export') }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -102,23 +106,18 @@ const updatePalette = (paletteKey, value) => {
 
 <style lang="scss">
 .PaletteEditor {
-  display: grid;
+  .colors {
-  justify-content: space-around;
+    display: grid;
-  grid-template-columns: repeat(4, 1fr);
+    justify-content: space-around;
-  grid-template-rows: repeat(3, 1fr) auto;
+    grid-template-columns: repeat(4, min-content);
-  grid-gap: 0.5em;
+    grid-template-rows: repeat(auto-fit, min-content);
-  align-items: space-between;
+    grid-gap: 0.5em;
-
-  .palette-import-button {
-    grid-column: 1 / span 2;
   }
 
-  .palette-export-button {
+  .controls {
-    grid-column: 3 / span 2;
+    display: grid;
-  }
+    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

@@ -2,7 +2,6 @@ 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'
@@ -43,7 +42,6 @@ library.add(
 export default {
   components: {
     Select,
-    SelectMotion,
     Checkbox,
     Tooltip,
     StringSetting,
@@ -72,9 +70,8 @@ export default {
     })
 
     // ### Palette stuff
-    const palettes = reactive([
+    const palettes = reactive({
-      {
+      light: {
-        name: 'light',
         bg: '#f2f6f9',
         fg: '#d6dfed',
         text: '#304055',
@@ -86,8 +83,7 @@ export default {
         cOrange: '#ffa500',
         border: '#d8e6f9'
       },
-      {
+      dark: {
-        name: 'dark',
         bg: '#121a24',
         fg: '#182230',
         text: '#b9b9ba',
@@ -98,11 +94,10 @@ export default {
         cGreen: '#0fa00f',
         cOrange: '#ffa500'
       }
-    ])
+    })
 
     const palettesOut = computed(() => {
-      console.log('WORK DAMN', palettes)
+      return Object.entries(palettes).map(([name, palette]) => {
-      return palettes.map(({ name, ...palette }) => {
         const entries = Object
           .entries(palette)
           .map(([slot, data]) => `  ${slot}: ${data};`)
@@ -112,10 +107,9 @@ export default {
       }).join('\n\n')
     })
 
-    const editedPalette = ref(0)
+    const editedPalette = ref('dark')
     const palette = computed({
       get () {
-        console.log(palettes, editedPalette.value)
         return palettes[editedPalette.value]
       },
       set (newPalette) {
@@ -123,19 +117,6 @@ 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}`
@@ -439,12 +420,10 @@ export default {
 
     const updatePreview = () => {
       try {
-        const { name, ...paletteData } = palette.value
-        console.log('WORK', paletteData)
         const rules = init({
           inputRuleset: editorFriendlyToOriginal.value,
           initialStaticVars: {
-            ...paletteData
+            ...palette.value
           },
           ultimateBackgroundColor: '#000000',
           rootComponentName: selectedComponentName.value,
@@ -535,9 +514,7 @@ export default {
       license,
       website,
       palette,
-      palettes,
       editedPalette,
-      getNewPalette,
       componentKeys,
       componentsMap,
       selectedComponent,

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

@@ -88,35 +88,9 @@
   }
 
   .palette-editor {
-    display: grid;
+    > .label:not(.Select) {
-    grid-template-areas:
+      font-weight: bold;
-      "label    editor"
+      justify-self: right;
-      "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

@@ -260,38 +260,30 @@
         :label="$t('settings.style.themes3.editor.palette_tab')"
         class="setting-item palette-editor"
       >
-          <label
+        <div class="label">
-            class="palette-selector-label"
+          <label for="palette-selector">
-            for="palette-selector"
-          >
             {{ $t('settings.style.themes3.palette.label') }}
             {{ ' ' }}
           </label>
           <Select
             id="palette-selector"
             v-model="editedPalette"
-            class="palette-list"
-            size="9"
           >
             <option
-              v-for="(p, index) in palettes"
+              key="dark"
-              :key="p.name"
+              value="dark"
-              :value="index"
             >
-              {{ p.name }}
+              {{ $t('settings.style.themes3.palette.dark') }}
+            </option>
+            <option
+              key="light"
+              value="light"
+            >
+              {{ $t('settings.style.themes3.palette.light') }}
             </option>
           </Select>
-          <SelectMotion
+        </div>
-            class="palette-list-movement"
+        <PaletteEditor v-model="palette" />
-            v-model="palettes"
-            :selected-id="editedPalette"
-            :get-add-value="getNewPalette"
-            @update:selectedId="e => editedPalette = e"
-          />
-        <PaletteEditor
-          class="palette-editor-edit"
-          v-model="palette"
-        />
       </div>
     </tab-switcher>
   </div>

src/i18n/en.json

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