fix for zero-state for shadow-control

This commit is contained in:
Henry Jameson 2018-11-22 03:55:45 +03:00
parent cd6c5b3e33
commit 379144f4ab
4 changed files with 23 additions and 23 deletions

View file

@ -4,13 +4,17 @@ import { getCssShadow } from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
export default { export default {
// 'Value' and 'Fallback' can be undefined, but if they are
// initially vue won't detect it when they become something else
// therefore i'm using "ready" which should be passed as true when
// data becomes available
props: [ props: [
'value', 'fallback' 'value', 'fallback', 'ready'
], ],
data () { data () {
return { return {
selectedId: 0, selectedId: 0,
cValue: this.value || this.fallback cValue: this.value || this.fallback || []
} }
}, },
components: { components: {
@ -42,7 +46,10 @@ export default {
}, },
computed: { computed: {
selected () { selected () {
return this.isReady && this.cValue[this.selectedId] || { if (this.ready && this.cValue.length > 0) {
return this.cValue[this.selectedId]
} else {
return {
x: 0, x: 0,
y: 0, y: 0,
blur: 0, blur: 0,
@ -51,18 +58,16 @@ export default {
color: '#000000', color: '#000000',
alpha: 1 alpha: 1
} }
}
}, },
moveUpValid () { moveUpValid () {
return this.isReady && this.selectedId > 0 return this.ready && this.selectedId > 0
}, },
moveDnValid () { moveDnValid () {
return this.isReady && this.selectedId < this.cValue.length - 1 return this.ready && this.selectedId < this.cValue.length - 1
},
isReady () {
return typeof this.cValue !== 'undefined'
}, },
present () { present () {
return this.isReady && return this.ready &&
typeof this.cValue[this.selectedId] !== 'undefined' && typeof this.cValue[this.selectedId] !== 'undefined' &&
!this.usingFallback !this.usingFallback
}, },
@ -73,7 +78,7 @@ export default {
return hex2rgb(this.selected.color) return hex2rgb(this.selected.color)
}, },
style () { style () {
return this.isReady ? { return this.ready ? {
boxShadow: getCssShadow(this.cValue) boxShadow: getCssShadow(this.cValue)
} : {} } : {}
} }

View file

@ -182,7 +182,6 @@ export default {
}, },
previewTheme () { previewTheme () {
if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} } if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
console.log(this.preview.theme.radii)
return this.preview.theme return this.preview.theme
}, },
// This needs optimization maybe // This needs optimization maybe
@ -382,8 +381,6 @@ export default {
normalizeLocalState (input, version = 0) { normalizeLocalState (input, version = 0) {
const colors = input.colors || input const colors = input.colors || input
const radii = input.radii || input const radii = input.radii || input
console.log('Benis')
console.log(JSON.stringify(radii, null, 2))
const opacity = input.opacity || input const opacity = input.opacity || input
const shadows = input.shadows || {} const shadows = input.shadows || {}

View file

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

View file

@ -107,7 +107,6 @@ const getCssShadow = (input) => {
} }
const getCssColor = (input, a) => { const getCssColor = (input, a) => {
console.log(input)
let rgb = {} let rgb = {}
if (typeof input === 'object') { if (typeof input === 'object') {
rgb = input rgb = input
@ -120,7 +119,6 @@ const getCssColor = (input, a) => {
return input return input
} }
} }
console.log(rgb2rgba({ ...rgb, a }))
return rgb2rgba({ ...rgb, a }) return rgb2rgba({ ...rgb, a })
} }