{
bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
let palette
@@ -142,6 +140,10 @@ const AppearanceTab = {
palette = { key, ...v }
}
this.bundledPalettes.push(palette)
+
+ if (this.isPaletteActive(key)) {
+ this.userPalette = palette
+ }
}))
})
@@ -167,15 +169,7 @@ const AppearanceTab = {
})
})
},
- watch: {
- paletteDataUsed () {
- this.userPalette = this.paletteDataUsed || {}
- }
- },
computed: {
- paletteDataUsed () {
- return this.$store.state.interface.paletteDataUsed
- },
availableStyles () {
return [
...this.availableThemesV3,
@@ -190,6 +184,11 @@ const AppearanceTab = {
},
stylePalettes () {
const ruleset = this.$store.state.interface.styleDataUsed || []
+ console.log(
+ 'ASR',
+ this.$store.state.interface.paletteDataUsed,
+ this.$store.state.interface.styleDataUsed
+ )
if (!ruleset && ruleset.length === 0) return
const meta = ruleset.find(x => x.component === '@meta')
const result = ruleset.filter(x => x.component.startsWith('@palette'))
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
index 596c674fa..ede4b3424 100644
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -35,11 +35,9 @@
.palette-entry {
display: flex;
align-items: center;
- justify-content: space-between;
- padding: 0 0.5em;
- .palette-label label {
- text-align: center;
+ > label {
+ flex: 1 0 auto;
}
.palette-square {
@@ -62,26 +60,6 @@
margin-top: 0.5em;
}
- .modal-view.-mobile & {
- .palette-entry {
- flex-wrap: wrap;
- justify-content: center;
- }
-
- .palette-label {
- line-height: 1.5em;
- 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;
- }
- }
-
.theme-list {
list-style: none;
display: flex;
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index be05fae09..5c1c46fe3 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -93,19 +93,15 @@
:class="{ toggled: isPaletteActive(p.key) }"
@click="() => setPalette(p.key, p)"
>
-
-
-
-
-
-
+
+
{{ $t('settings.style.themes3.palette.style') }}
@@ -117,25 +113,20 @@
:class="{ toggled: isPaletteActive(p.key) }"
@click="() => setPaletteCustom(p)"
>
-
-
-
-
-
-
+
+
-
+
{{ $t('settings.style.themes3.palette.user') }}