validity checks, no longer exploding when something is invalid

This commit is contained in:
Henry Jameson 2018-11-25 19:12:38 +03:00
parent 2f1070deb6
commit 883a76147a
2 changed files with 52 additions and 17 deletions

View File

@ -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) {

View File

@ -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>