Merge branch 'themes3-grand-finale-maybe' into shigusegubu-themes3

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>

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,
@@ -70,8 +72,9 @@ export default {
     })
 
     // ### Palette stuff
-    const palettes = reactive({
-      light: {
+    const palettes = reactive([
+      {
+        name: 'light',
         bg: '#f2f6f9',
         fg: '#d6dfed',
         text: '#304055',
@@ -83,7 +86,8 @@ export default {
         cOrange: '#ffa500',
         border: '#d8e6f9'
       },
-      dark: {
+      {
+        name: 'dark',
         bg: '#121a24',
         fg: '#182230',
         text: '#b9b9ba',
@@ -94,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};`)
@@ -107,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) {
@@ -117,6 +123,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}`
@@ -420,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,
@@ -514,7 +535,9 @@ export default {
       license,
       website,
       palette,
+      palettes,
       editedPalette,
+      getNewPalette,
       componentKeys,
       componentsMap,
       selectedComponent,

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

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

@@ -260,30 +260,38 @@
         :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="9"
           >
             <option
-              key="dark"
-              value="dark"
+              v-for="(p, index) in palettes"
+              :key="p.name"
+              :value="index"
             >
-              {{ $t('settings.style.themes3.palette.dark') }}
-            </option>
-            <option
-              key="light"
-              value="light"
-            >
-              {{ $t('settings.style.themes3.palette.light') }}
+              {{ p.name }}
             </option>
           </Select>
-        </div>
-        <PaletteEditor v-model="palette" />
+          <SelectMotion
+            class="palette-list-movement"
+            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,8 +760,6 @@
           "label": "Palette",
           "import": "Import",
           "export": "Export",
-          "dark": "Dark mode",
-          "light": "Light mode",
           "bg": "Panel background",
           "fg": "Buttons etc.",
           "text": "Text",