update to palettes GUI + disable theme-setting stuff while change is in progress

src/components/palette_editor/palette_editor.vue

@@ -30,6 +30,8 @@
       v-if="apply"
       class="btn button-default palette-apply-button"
       @click="applyPalette"
+      :disabled="disabled"
+      :class="{ disabled }"
     >
       {{ $t('settings.style.themes3.palette.apply') }}
     </button>
@@ -67,7 +69,7 @@ const paletteKeys = [
   'wallpaper'
 ]
 
-const props = defineProps(['modelValue', 'compact', 'apply'])
+const props = defineProps(['modelValue', 'compact', 'apply', 'disabled'])
 const emit = defineEmits(['update:modelValue', 'applyPalette'])
 const getExportedObject = () => paletteKeys.reduce((acc, key) => {
   const value = props.modelValue[key]

src/components/settings_modal/tabs/appearance_tab.js

@@ -186,6 +186,9 @@ const AppearanceTab = {
     }
   },
   computed: {
+    switchInProgress () {
+      return this.$store.state.interface.themeChangeInProgress
+    },
     paletteDataUsed () {
       return this.$store.state.interface.paletteDataUsed
     },

src/components/settings_modal/tabs/appearance_tab.scss

@@ -20,14 +20,25 @@
     }
   }
 
+  h4 {
+    margin: 0.5em 0;
+  }
+
   .palettes {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 0.5em;
+    height: 15em;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    margin: -0.5em;
+    padding: 0.5em;
 
-    h4,
-    .unsupported-theme-v2,
-    .userPalette {
+    h4 {
+      margin: 0;
       grid-column: 1 / span 2;
     }
   }
@@ -37,6 +48,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 0.5em;
+    height: 2.5em;
 
     .palette-label label {
       text-align: center;
@@ -73,13 +85,13 @@
       margin-top: 0.5em;
       width: 100%;
     }
+  }
 
   .palette-preview {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-template-rows: 1em 1em;
-      margin-bottom: 0.5em;
-    }
+    margin: 0.5em 0;
   }
 
   .theme-list {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -12,8 +12,9 @@
         <button
           class="button-default theme-preview"
           data-theme-key="stock"
-          :class="{ toggled: isStyleActive('stock') }"
           @click="resetTheming"
+          :class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
+          :disabled="switchInProgress"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <!-- eslint-disable vue/no-v-html -->
@@ -56,8 +57,9 @@
           :key="style.key"
           :data-theme-key="style.key"
           class="button-default theme-preview"
-          :class="{ toggled: isStyleActive(style.key) }"
+          :class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
+          :disabled="switchInProgress"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <!-- eslint-disable vue/no-v-html -->
@@ -80,6 +82,8 @@
         <button
           class="btn button-default"
           @click="importFile"
+          :class="{ disabled: switchInProgress }"
+          :disabled="switchInProgress"
         >
           <FAIcon icon="folder-open" />
           {{ $t('settings.style.themes3.editor.load_style') }}
@@ -87,30 +91,10 @@
       </div>
       <div class="setting-item">
         <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
-        <div class="palettes">
-          <template v-if="customThemeVersion === 'v3'">
-            <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
-            <button
-              v-for="p in bundledPalettes"
-              :key="p.name"
-              class="btn button-default palette-entry"
-              :class="{ toggled: isPaletteActive(p.key) }"
-              @click="() => setPalette(p.key, p)"
+        <div
+          v-if="customThemeVersion === 'v3'"
+          class="palettes"
         >
-              <div class="palette-label">
-                <label>
-                  {{ p.name }}
-                </label>
-              </div>
-              <div class="palette-preview">
-                <span
-                  v-for="c in palettesKeys"
-                  :key="c"
-                  class="palette-square"
-                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-                />
-              </div>
-            </button>
           <h4 v-if="stylePalettes?.length > 0">
             {{ $t('settings.style.themes3.palette.style') }}
           </h4>
@@ -118,7 +102,8 @@
             v-for="p in stylePalettes || []"
             :key="p.name"
             class="btn button-default palette-entry"
-              :class="{ toggled: isPaletteActive(p.key) }"
+            :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+            :disabled="switchInProgress"
             @click="() => setPalette(p.key, p)"
           >
             <div class="palette-label">
@@ -135,6 +120,32 @@
               />
             </div>
           </button>
+          <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
+          <button
+            v-for="p in bundledPalettes"
+            :key="p.name"
+            class="btn button-default palette-entry"
+            :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+            :disabled="switchInProgress"
+            @click="() => setPalette(p.key, p)"
+          >
+            <div class="palette-label">
+              <label>
+                {{ p.name }}
+              </label>
+            </div>
+            <div class="palette-preview">
+              <span
+                v-for="c in palettesKeys"
+                :key="c"
+                class="palette-square"
+                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+              />
+            </div>
+          </button>
+        </div>
+        <div>
+          <template v-if="customThemeVersion === 'v3'">
             <h4 v-if="expertLevel > 0">
               {{ $t('settings.style.themes3.palette.user') }}
             </h4>
@@ -145,6 +156,7 @@
               :compact="true"
               :apply="true"
               @applyPalette="data => setPaletteCustom(data)"
+              :disabled="switchInProgress"
             />
           </template>
           <template v-else-if="customThemeVersion === 'v2'">

src/modules/interface.js

@@ -10,6 +10,7 @@ const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
 const defaultState = {
   localFonts: null,
   themeApplied: false,
+  themeChangeInProgress: false,
   themeVersion: 'v3',
   styleNameUsed: null,
   styleDataUsed: null,
@@ -556,11 +557,13 @@ const interfaceMod = {
         themeDebug,
         theme3hacks
       } = rootState.config
+      state.themeChangeInProgress = true
       // If we're not not forced to recompile try using
       // cache (tryLoadCache return true if load successful)
 
       const forceRecompile = forceThemeRecompilation || recompile
       if (!forceRecompile && !themeDebug && await tryLoadCache()) {
+        state.themeChangeInProgress = false
         return commit('setThemeApplied')
       }
       window.splashUpdate('splash.theme')
@@ -669,7 +672,9 @@ const interfaceMod = {
         return applyTheme(
           rulesetArray.flat(),
           () => commit('setThemeApplied'),
-          () => {},
+          () => {
+            state.themeChangeInProgress = false
+          },
           themeDebug
         )
       } catch (e) {