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

border-radii moved to variables, made rgbo colors use theme data, customizable

Browse source 
from settings screen.
This commit is contained in:
Henry Jameson 2018-04-01 22:07:25 +03:00
parent acdb5e5c7a
commit 33b1d85921
21 changed files with 309 additions and 188 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,11 @@ export default {
bgColorLocal: '',
fgColorLocal: '',
textColorLocal: '',
linkColorLocal: ''
linkColorLocal: '',
redColorLocal: '#ff0000',
blueColorLocal: '#0095ff',
greenColorLocal: '#0fa00f',
orangeColorLocal: '#E3FF00'
}
},
created () {
@ -25,6 +29,11 @@ export default {
this.fgColorLocal = 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)
this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed || this.redColorLocal)
this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue || this.blueColorLocal)
this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen || this.greenColorLocal)
this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange || this.orangeColorLocal)
},
methods: {
setCustomTheme () {
@ -43,6 +52,12 @@ export default {
const fgRgb = rgb(this.fgColorLocal)
const textRgb = rgb(this.textColorLocal)
const linkRgb = rgb(this.linkColorLocal)
const redRgb = rgb(this.redColorLocal)
const blueRgb = rgb(this.blueColorLocal)
const greenRgb = rgb(this.greenColorLocal)
const orangeRgb = rgb(this.orangeColorLocal)
if (bgRgb && fgRgb && linkRgb) {
this.$store.dispatch('setOption', {
name: 'customTheme',
@ -50,7 +65,11 @@ export default {
fg: fgRgb,
bg: bgRgb,
text: textRgb,
link: linkRgb
link: linkRgb,
cRed: redRgb,
cBlue: blueRgb,
cGreen: greenRgb,
cOrange: orangeRgb
}})
}
}
@ -61,6 +80,10 @@ export default {
this.fgColorLocal = 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.orangeColorLocal = this.selected[8]
}
}
}

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

@ -27,6 +27,28 @@
<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">
<input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal">
</div>
<div class="color-item">
<label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label>
<input id="bluecolor" class="theme-color-cl" type="color" v-model="blueColorLocal">
<input id="bluecolor-t" class="theme-color-in" type="text" v-model="blueColorLocal">
</div>
<div class="color-item">
<label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label>
<input id="greencolor" class="theme-color-cl" type="color" v-model="greenColorLocal">
<input id="greencolor-t" class="theme-color-in" type="green" v-model="greenColorLocal">
</div>
<div class="color-item">
<label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label>
<input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal">
<input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
</div>
</div>
<div>
<div class="panel">
<div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
@ -79,7 +101,6 @@
.theme-color-cl,
.theme-color-in {
margin-left: 4px;
border-radius: 2px;
}
.theme-color-in {