commit: 6a1a3ebf13f1869d652669b424fbbf72749a4559
parent 6bf6d102ef56cafd880bdbe732ae3f2300464d9a
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 26 Dec 2024 23:45:43 +0200
update to palettes GUI + disable theme-setting stuff while change is in progress
Diffstat:
5 files changed, 94 insertions(+), 60 deletions(-)
diff --git a/src/components/palette_editor/palette_editor.vue b/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]
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/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
},
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/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;
- }
+ .palette-preview {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: 1em 1em;
+ margin: 0.5em 0;
}
.theme-list {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/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,54 +91,61 @@
</div>
<div class="setting-item">
<h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
- <div class="palettes">
+ <div
+ v-if="customThemeVersion === 'v3'"
+ class="palettes"
+ >
+ <h4 v-if="stylePalettes?.length > 0">
+ {{ $t('settings.style.themes3.palette.style') }}
+ </h4>
+ <button
+ v-for="p in stylePalettes || []"
+ :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 ?? $t('settings.style.themes3.palette.user') }}
+ </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>{{ $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>{{ $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 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>
- <button
- v-for="p in stylePalettes || []"
- :key="p.name"
- class="btn button-default palette-entry"
- :class="{ toggled: isPaletteActive(p.key) }"
- @click="() => setPalette(p.key, p)"
- >
- <div class="palette-label">
- <label>
- {{ p.name ?? $t('settings.style.themes3.palette.user') }}
- </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="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'">
diff --git a/src/modules/interface.js b/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) {
