diff --git a/src/App.scss b/src/App.scss
index 8fb3c488..19c069ed 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -313,6 +313,7 @@ main-router {
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+ box-shadow: var(--panel-shadow);
}
.panel-body:empty::before {
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index c357581d..a6992999 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -9,6 +9,8 @@ export default {
'value', 'fallback'
],
data () {
+ console.log('sdsa')
+ console.log(this.value, this.fallback)
return {
selectedId: 0,
cValue: this.value || this.fallback
@@ -36,6 +38,9 @@ export default {
const movable = this.cValue.splice(this.selectedId, 1)[0]
this.cValue.splice(this.selectedId + 1, 0, movable)
this.selectedId += 1
+ },
+ update () {
+ this.$emit('input', this.cValue)
}
},
computed: {
@@ -67,7 +72,6 @@ export default {
return hex2rgb(this.selected.color)
},
style () {
- console.log(StyleSetter.generateShadow(this.cValue))
return {
boxShadow: StyleSetter.generateShadow(this.cValue)
}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 24439449..614de76a 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -5,6 +5,7 @@
<input
v-model="selected.y"
:disabled="!present"
+ @input="update"
class="input-number"
type="number">
<div class="wrap">
@@ -182,15 +183,15 @@
}
.preview-window {
flex: 1;
- background-color: white;
+ background-color: #999999;
display: flex;
align-items: center;
justify-content: center;
background-image:
- linear-gradient(45deg, #808080 25%, transparent 25%),
- linear-gradient(-45deg, #808080 25%, transparent 25%),
- linear-gradient(45deg, transparent 75%, #808080 75%),
- linear-gradient(-45deg, transparent 75%, #808080 75%);
+ linear-gradient(45deg, #666666 25%, transparent 25%),
+ linear-gradient(-45deg, #666666 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, #666666 75%),
+ linear-gradient(-45deg, transparent 75%, #666666 75%);
background-size: 20px 20px;
background-position:0 0, 0 10px, 10px -10px, -10px 0;
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 8e344eb1..b40511df 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,4 +1,5 @@
import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
+import { set, delete as del } from 'vue'
import ColorInput from '../color_input/color_input.vue'
import ShadowControl from '../shadow_control/shadow_control.vue'
import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
@@ -155,7 +156,7 @@ export default {
}
},
previewTheme () {
- if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} }
+ if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
return this.preview.theme
},
previewContrast () {
@@ -231,14 +232,30 @@ export default {
return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
},
shadowsAvailable () {
- return Object.keys(this.preview.theme.shadows)
+ return Object.keys(this.previewTheme.shadows)
},
- currentShadow () {
- const fallback = this.preview.theme.shadows[this.shadowSelected];
- return fallback ? {
- fallback,
- value: this.shadowsLocal[this.shadowSelected]
- } : undefined
+ currentShadowOverriden: {
+ get () {
+ return this.currentShadow
+ },
+ set (val) {
+ if (val) {
+ set(this.shadowsLocal, this.shadowSelected, Object.assign({}, this.currentShadowFallback))
+ } else {
+ del(this.shadowsLocal, this.shadowSelected)
+ }
+ }
+ },
+ currentShadowFallback () {
+ return this.previewTheme.shadows[this.shadowSelected]
+ },
+ currentShadow: {
+ get () {
+ return this.shadowsLocal[this.shadowSelected]
+ },
+ set (v) {
+ set(this.shadowsLocal, this.shadowSelected, v)
+ }
}
},
components: {
@@ -305,7 +322,10 @@ export default {
setCustomTheme () {
this.$store.dispatch('setOption', {
name: 'customTheme',
- value: this.currentTheme
+ value: {
+ ...this.currentTheme,
+ shadows: this.shadowsLocal
+ }
})
},
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 0352f546..af816a23 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,49 +1,49 @@
<template>
-<div>
- <div class="presets-container">
- <div>
- {{$t('settings.presets')}}
- <label for="style-switcher" class='select'>
- <select id="style-switcher" v-model="selected" class="style-switcher">
- <option v-for="style in availableStyles"
- :value="style"
- :style="{
- backgroundColor: style[1],
- color: style[3]
- }">
- {{style[0]}}
- </option>
- </select>
- <i class="icon-down-open"/>
- </label>
- </div>
- <div class="import-export">
- <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
- <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
- <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
- </div>
- </div>
-
- <div class="preview-container">
- <div class="panel dummy" :style="previewRules">
- <div class="panel-heading">Preview</div>
- <div class="panel-body theme-preview-content">
- <div class="avatar">
- ( ͡° ͜ʖ ͡°)
- </div>
- <h4>Content</h4>
- <br>
- A bunch of more content and
- <a style="color: var(--link)">a nice lil' link</a>
- <i style="color: var(--cBlue)" class="icon-reply"/>
- <i style="color: var(--cGreen)" class="icon-retweet"/>
- <i style="color: var(--cRed)" class="icon-cancel"/>
- <i style="color: var(--cOrange)" class="icon-star"/>
- <br>
- <button class="btn">Button</button>
+ <div>
+ <div class="presets-container">
+ <div>
+ {{$t('settings.presets')}}
+ <label for="style-switcher" class='select'>
+ <select id="style-switcher" v-model="selected" class="style-switcher">
+ <option v-for="style in availableStyles"
+ :value="style"
+ :style="{
+ backgroundColor: style[1],
+ color: style[3]
+ }">
+ {{style[0]}}
+ </option>
+ </select>
+ <i class="icon-down-open"/>
+ </label>
+ </div>
+ <div class="import-export">
+ <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
+ <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
+ <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
+ </div>
+ </div>
+
+ <div class="preview-container">
+ <div class="panel dummy" :style="previewRules">
+ <div class="panel-heading">Preview</div>
+ <div class="panel-body theme-preview-content">
+ <div class="avatar">
+ ( ͡° ͜ʖ ͡°)
+ </div>
+ <h4>Content</h4>
+ <br>
+ A bunch of more content and
+ <a style="color: var(--link)">a nice lil' link</a>
+ <i style="color: var(--cBlue)" class="icon-reply"/>
+ <i style="color: var(--cGreen)" class="icon-retweet"/>
+ <i style="color: var(--cRed)" class="icon-cancel"/>
+ <i style="color: var(--cOrange)" class="icon-star"/>
+ <br>
+ <button class="btn">Button</button>
+ </div>
</div>
</div>
- </div>
<p>{{$t('settings.theme_help')}}</p>
<tab-switcher>
@@ -171,15 +171,29 @@
</div>
</div>
<div label="Shadow Realm" class="shadow-container">
- <div class="shadow-selector">
- <select id="style-switcher" v-model="shadowSelected" class="style-switcher">
- <option v-for="shadow in shadowsAvailable"
- :value="shadow">
- {{shadow}}
- </option>
- </select>
+ <div>
+ Shadow
+ <label for="shadow-switcher" class="shadow-selector select">
+ <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
+ <option v-for="shadow in shadowsAvailable"
+ :value="shadow">
+ {{shadow}}
+ </option>
+ </select>
+ <i class="icon-down-open"/>
+ </label>
+ <label for="override" class="label">
+ Override
+ </label>
+ <input
+ v-model="currentShadowOverriden"
+ name="override"
+ id="override"
+ class="input-override"
+ type="checkbox">
+ <label class="checkbox-label" for="override"></label>
</div>
- <shadow-control v-if="currentShadow" :value="currentShadow.value" :fallback="currentShadow.fallback"/>
+ <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
</div>
</tab-switcher>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3840e215..aac04055 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -72,7 +72,7 @@ const getTextColor = function (bg, text, preserve) {
}
const setColors = (input, commit) => {
- const { colorRules, radiiRules, theme } = generatePreset(input)
+ const { colorRules, radiiRules, shadowRules, theme } = generatePreset(input)
const head = document.head
const body = document.body
body.style.display = 'none'
@@ -84,6 +84,7 @@ const setColors = (input, commit) => {
styleSheet.toString()
styleSheet.insertRule(`body { ${colorRules} }`, 'index-max')
styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
+ styleSheet.insertRule(`body { ${shadowRules} }`, 'index-max')
body.style.display = 'initial'
// commit('setOption', { name: 'colors', value: htmlColors })