diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 18 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 30 |
2 files changed, 28 insertions, 20 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 5e5ba266..e6b80ac9 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -6,7 +6,7 @@ export default { availableStyles: [], selected: this.$store.state.config.theme, bgColorLocal: '', - fgColorLocal: '', + btnColorLocal: '', textColorLocal: '', linkColorLocal: '', redColorLocal: '#ff0000', @@ -26,7 +26,7 @@ export default { }, mounted () { this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg) - this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg) + this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg) this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg) this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link) @@ -37,7 +37,7 @@ export default { }, methods: { setCustomTheme () { - if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) { + if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) { // reset to picked themes } const rgb = (hex) => { @@ -49,7 +49,7 @@ export default { } : null } const bgRgb = rgb(this.bgColorLocal) - const fgRgb = rgb(this.fgColorLocal) + const btnRgb = rgb(this.btnColorLocal) const textRgb = rgb(this.textColorLocal) const linkRgb = rgb(this.linkColorLocal) @@ -58,11 +58,11 @@ export default { const greenRgb = rgb(this.greenColorLocal) const orangeRgb = rgb(this.orangeColorLocal) - if (bgRgb && fgRgb && linkRgb) { + if (bgRgb && btnRgb && linkRgb) { this.$store.dispatch('setOption', { name: 'customTheme', value: { - fg: fgRgb, + fg: btnRgb, bg: bgRgb, text: textRgb, link: linkRgb, @@ -77,12 +77,12 @@ export default { watch: { selected () { this.bgColorLocal = this.selected[1] - this.fgColorLocal = this.selected[2] + this.btnColorLocal = this.selected[2] this.textColorLocal = this.selected[3] this.linkColorLocal = this.selected[4] this.redColorLocal = this.selected[5] - this.blueColorLocal = this.selected[6] - this.greenColorLocal = this.selected[7] + this.greenColorLocal = this.selected[6] + this.blueColorLocal = this.selected[7] this.orangeColorLocal = this.selected[8] } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 6bdd4391..2ebf2b90 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,11 +1,15 @@ <template> <div> - <p>{{$t('settings.presets')}}</p> - <select v-model="selected" class="style-switcher"> - <option v-for="style in availableStyles" :value="style">{{style[0]}}</option> - </select> - <p>{{$t('settings.theme_help')}}</p> + <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[0]}}</option> + </select> + <i class="icon-down-open"/> + </label> + </div> <div class="color-container"> + <p>{{$t('settings.theme_help')}}</p> <div class="color-item"> <label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label> <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal"> @@ -13,8 +17,8 @@ </div> <div class="color-item"> <label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label> - <input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal"> - <input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal"> + <input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal"> + <input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal"> </div> <div class="color-item"> <label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label> @@ -26,8 +30,6 @@ <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal"> <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal"> </div> - </div> - <div class="color-container additional colors"> <div class="color-item"> <label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label> <input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal"> @@ -51,14 +53,20 @@ </div> <div> <div class="panel"> - <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div> + <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div> <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }"> <h4>Content</h4> <br> A bunch of more content and <a :style="{ 'color': linkColorLocal }">a nice lil' link</a> + <i :style="{ 'color': blueColorLocal }" class="icon-reply"/> + <i :style="{ 'color': greenColorLocal }" class="icon-retweet"/> + <i :style="{ 'color': redColorLocal }" class="icon-cancel"/> + <i :style="{ 'color': orangeColorLocal }" class="icon-star"/> + <br> <br> - <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button> + <div class="finder-error" :style="{ 'background-color': redColorLocal }">And a scary alert</div> + <button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button> </div> </div> </div> |