validity checks, no longer exploding when something is invalid
This commit is contained in:
parent
2f1070deb6
commit
883a76147a
|
@ -27,6 +27,14 @@ export default {
|
||||||
selected: this.$store.state.config.theme,
|
selected: this.$store.state.config.theme,
|
||||||
invalidThemeImported: false,
|
invalidThemeImported: false,
|
||||||
|
|
||||||
|
previewShadows: {},
|
||||||
|
previewColors: {},
|
||||||
|
previewRadii: {},
|
||||||
|
|
||||||
|
shadowsInvalid: true,
|
||||||
|
colorsInvalid: true,
|
||||||
|
radiiInvalid: true,
|
||||||
|
|
||||||
keepShadows: false,
|
keepShadows: false,
|
||||||
keepOpacity: false,
|
keepOpacity: false,
|
||||||
keepRoundness: false,
|
keepRoundness: false,
|
||||||
|
@ -167,22 +175,6 @@ export default {
|
||||||
attachment: this.attachmentRadiusLocal
|
attachment: this.attachmentRadiusLocal
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
previewColors () {
|
|
||||||
if (this.currentColors.bg) {
|
|
||||||
return generateColors({
|
|
||||||
opacity: this.currentOpacity,
|
|
||||||
colors: this.currentColors
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
previewRadii () {
|
|
||||||
return generateRadii({ radii: this.currentRadii })
|
|
||||||
},
|
|
||||||
previewShadows () {
|
|
||||||
return generateShadows({ shadows: this.shadowsLocal })
|
|
||||||
},
|
|
||||||
preview () {
|
preview () {
|
||||||
return composePreset(this.previewColors, this.previewRadii, this.previewShadows)
|
return composePreset(this.previewColors, this.previewRadii, this.previewShadows)
|
||||||
},
|
},
|
||||||
|
@ -288,6 +280,9 @@ export default {
|
||||||
set (v) {
|
set (v) {
|
||||||
set(this.shadowsLocal, this.shadowSelected, v)
|
set(this.shadowsLocal, this.shadowSelected, v)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
themeValid () {
|
||||||
|
return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
@ -475,6 +470,46 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
currentRadii () {
|
||||||
|
try {
|
||||||
|
this.previewRadii = generateRadii({ radii: this.currentRadii })
|
||||||
|
this.radiiInvalid = false
|
||||||
|
} catch (e) {
|
||||||
|
this.radiiInvalid = true
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
shadowsLocal () {
|
||||||
|
try {
|
||||||
|
this.previewShadows = generateShadows({ shadows: this.shadowsLocal })
|
||||||
|
this.shadowsInvalid = false
|
||||||
|
} catch (e) {
|
||||||
|
this.shadowsInvalid = true
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
currentColors () {
|
||||||
|
try {
|
||||||
|
this.previewColors = generateColors({
|
||||||
|
opacity: this.currentOpacity,
|
||||||
|
colors: this.currentColors
|
||||||
|
})
|
||||||
|
this.colorsInvalid = false
|
||||||
|
} catch (e) {
|
||||||
|
this.colorsInvalid = true
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
currentOpacity () {
|
||||||
|
try {
|
||||||
|
this.previewColors = generateColors({
|
||||||
|
opacity: this.currentOpacity,
|
||||||
|
colors: this.currentColors
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
selected () {
|
selected () {
|
||||||
if (this.selectedVersion === 1) {
|
if (this.selectedVersion === 1) {
|
||||||
if (!this.keepRoundness) {
|
if (!this.keepRoundness) {
|
||||||
|
|
|
@ -218,7 +218,7 @@
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
|
|
||||||
<div class="apply-container">
|
<div class="apply-container">
|
||||||
<button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button>
|
<button class="btn submit" :disabled="!themeValid" @click="setCustomTheme">{{$t('general.apply')}}</button>
|
||||||
<button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
|
<button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue