commit: 81d9537f9d00ab18cab4305344d7563fb6418ddd
parent 13838a75a9b5b0f2b59fa5b10675952e1b7cae11
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Oct 2024 23:03:33 +0300
show warning about palettes being unsupported when using v2 theme
Diffstat:
5 files changed, 49 insertions(+), 26 deletions(-)
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
@@ -34,7 +34,7 @@ const AppearanceTab = {
return {
availableStyles: [],
availablePalettes: [],
- themeImporter: newImporter({
+ fileImporter: newImporter({
accept: '.json, .piss',
validator: this.importValidator,
onImport: this.onImport,
@@ -179,6 +179,10 @@ const AppearanceTab = {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
}
},
+ customThemeVersion () {
+ const { themeVersion } = this.$store.state.interface
+ return themeVersion
+ },
isCustomThemeUsed () {
const { theme } = this.mergedConfig
return theme === 'custom'
@@ -202,8 +206,8 @@ const AppearanceTab = {
}
})
},
- importTheme () {
- this.themeImporter.importData()
+ importFile () {
+ this.fileImporter.importData()
},
onImport (parsed, filename) {
if (filename.endsWith('.json')) {
@@ -234,14 +238,18 @@ const AppearanceTab = {
const { palette } = this.mergedConfig
return key === palette
},
- importStyle () {
-
+ setStyle (name) {
+ this.$store.dispatch('resetThemeV2')
+ this.$store.dispatch('setTheme', name)
+ this.$store.dispatch('applyTheme')
},
setTheme (name) {
+ this.$store.dispatch('resetThemeV3')
this.$store.dispatch('setTheme', name)
this.$store.dispatch('applyTheme')
},
setPalette (name) {
+ this.$store.dispatch('resetThemeV2')
this.$store.dispatch('setPalette', name)
this.$store.dispatch('applyTheme')
},
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -24,6 +24,10 @@
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
+
+ .unsupported-theme-v2 {
+ grid-column: 1 / span 2;
+ }
}
.palette-entry {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -7,7 +7,7 @@
<h2>{{ $t('settings.theme') }}</h2>
<button
class="btn button-default"
- @click="importTheme"
+ @click="importFile"
>
<FAIcon icon="folder-open" />
{{ $t('settings.style.themes3.editor.load_style') }}
@@ -30,7 +30,7 @@
v-html="previewTheme('stock')"
/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
- <preview />
+ <preview id="theme-preview-stock" />
<h4 class="theme-name">
{{ $t('settings.style.stock_theme_used') }}
<span class="alert neutral version">v3</span>
@@ -71,23 +71,30 @@
</ul>
<h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
<div class="palettes">
- <button
- v-for="p in availablePalettes"
- :key="p.name"
- class="btn button-default palette-entry"
- :class="{ toggled: isPaletteActive(p.key) }"
- @click="() => setPalette(p.key)"
- >
- <label>
- {{ p.name }}
- </label>
- <span
- v-for="c in palettesKeys"
- :key="c"
- class="palette-square"
- :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
- />
- </button>
+ <template v-if="customThemeVersion === 'v3'">
+ <button
+ v-for="p in availablePalettes"
+ :key="p.name"
+ class="btn button-default palette-entry"
+ :class="{ toggled: isPaletteActive(p.key) }"
+ @click="() => setPalette(p.key)"
+ >
+ <label>
+ {{ p.name }}
+ </label>
+ <span
+ v-for="c in palettesKeys"
+ :key="c"
+ class="palette-square"
+ :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+ />
+ </button>
+ </template>
+ <template v-else-if="customThemeVersion === 'v2'">
+ <div class="alert neutral theme-notice unsupported-theme-v2">
+ {{$t('settings.style.themes3.palette.v2_unsupported')}}
+ </div>
+ </template>
</div>
</div>
<div class="alert neutral theme-notice">
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -771,7 +771,8 @@
"cOrange": "Orange color",
"extra1": "Extra 1",
"extra2": "Extra 2",
- "extra3": "Extra 3"
+ "extra3": "Extra 3",
+ "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
},
"editor": {
"title": "Style",
diff --git a/src/modules/interface.js b/src/modules/interface.js
@@ -5,6 +5,7 @@ import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
const defaultState = {
localFonts: null,
themeApplied: false,
+ themeVersion: 'v3',
temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
temporaryChangesConfirm: () => {}, // used for applying temporary options
temporaryChangesRevert: () => {}, // used for reverting temporary options
@@ -307,7 +308,7 @@ const interfaceMod = {
commit('setOption', { name: 'customThemeSource', value: null })
},
async applyTheme (
- { dispatch, commit, rootState },
+ { dispatch, commit, rootState, state },
{ recompile = true } = {}
) {
// If we're not not forced to recompile try using
@@ -398,6 +399,8 @@ const interfaceMod = {
majorVersionUsed = 'v3'
}
+ state.themeVersion = majorVersionUsed
+
let styleDataUsed = null
let styleNameUsed = null
let paletteDataUsed = null
