mentioned bug in tab-switcher, made shadow-control work in zero-state

This commit is contained in:
Henry Jameson 2018-11-20 23:25:38 +03:00
parent 2609c0d0d2
commit d7af2c8419
5 changed files with 23 additions and 11 deletions

View file

@ -37,9 +37,12 @@ export default {
this.selectedId += 1
}
},
beforeUpdate () {
this.cValue = this.value || this.fallback
},
computed: {
selected () {
return this.cValue[this.selectedId] || {
return this.isReady && this.cValue[this.selectedId] || {
x: 0,
y: 0,
blur: 0,
@ -50,13 +53,17 @@ export default {
}
},
moveUpValid () {
return this.selectedId > 0
return this.isReady && this.selectedId > 0
},
moveDnValid () {
return this.selectedId < this.cValue.length - 1
return this.isReady && this.selectedId < this.cValue.length - 1
},
isReady () {
return typeof this.cValue !== 'undefined'
},
present () {
return typeof this.cValue[this.selectedId] !== 'undefined' &&
return this.isReady &&
typeof this.cValue[this.selectedId] !== 'undefined' &&
!this.usingFallback
},
usingFallback () {
@ -66,9 +73,9 @@ export default {
return hex2rgb(this.selected.color)
},
style () {
return {
return this.isReady ? {
boxShadow: getCssShadow(this.cValue)
}
} : {}
}
}
}

View file

@ -43,7 +43,7 @@
<label for="shadow-switcher" class="select">
<select
v-model="selectedId" class="shadow-switcher"
:disabled="usingFallback"
:disabled="!isReady || usingFallback"
id="shadow-switcher">
<option v-for="(shadow, index) in cValue" :value="index">
{{$t('settings.style.shadows.shadow_id', { value: index })}}
@ -51,7 +51,7 @@
</select>
<i class="icon-down-open"/>
</label>
<button class="btn btn-default" :disabled="!present" @click="del">
<button class="btn btn-default" :disabled="!isReady || !present" @click="del">
<i class="icon-cancel"/>
</button>
<button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
@ -60,7 +60,7 @@
<button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
<i class="icon-down-open"/>
</button>
<button class="btn btn-default" @click="add">
<button class="btn btn-default" :disabled="!isReady" @click="add">
<i class="icon-plus"/>
</button>
</div>
@ -137,7 +137,6 @@
flex-wrap: wrap;
justify-content: center;
.shadow-preview-container,
.shadow-tweak {
margin: 5px 6px 0 0;

View file

@ -93,6 +93,9 @@ export default {
},
mounted () {
this.normalizeLocalState(this.$store.state.config.customTheme)
if (typeof this.shadowSelected === 'undefined') {
this.shadowSelected = this.shadowsAvailable[0]
}
},
computed: {
selectedVersion () {
@ -180,6 +183,7 @@ export default {
if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
return this.preview.theme
},
// This needs optimization maybe
previewContrast () {
if (!this.previewTheme.colors.bg) return {}
const colors = this.previewTheme.colors

View file

@ -198,7 +198,7 @@
<label class="checkbox-label" for="override"></label>
</div>
</div>
<shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
<shadow-control :fallback="currentShadowFallback" v-model="currentShadow"/>
</div>
</tab-switcher>
</keep-alive>

View file

@ -1,5 +1,7 @@
import Vue from 'vue'
// FIXME: This doesn't like v-if directly inside the tab's contents, breaks vue really bad
import './tab_switcher.scss'
export default Vue.component('tab-switcher', {