diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/shadow_control/shadow_control.js | 19 | ||||
| -rw-r--r-- | src/components/shadow_control/shadow_control.vue | 7 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 4 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 2 | ||||
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.jsx | 2 |
5 files changed, 23 insertions, 11 deletions
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 54813685..b4f48668 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -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) - } + } : {} } } } diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index cd774d32..f8066947 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -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; diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 7cb6197c..acb1764d 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -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 diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 5f0c2566..5cf75636 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -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> diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 3fff38f6..ea582450 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -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', { |