therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

<select> styling (abeit somewhat not pretty code-wise), default colors for

Browse source 
default schemes.
This commit is contained in:
Henry Jameson 2018-04-07 21:58:29 +03:00
parent 529643d35a
commit 65f82cf294
22 changed files with 193 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/style_switcher/style_switcher.js
View file

@ -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]
}
}

30
src/components/style_switcher/style_switcher.vue
View file

@ -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>
<button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
<br>
<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>