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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,7 @@
import Vue from 'vue' 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' import './tab_switcher.scss'
export default Vue.component('tab-switcher', { export default Vue.component('tab-switcher', {