diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 31 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 14 |
2 files changed, 22 insertions, 23 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 8b769494..8bed17cc 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,5 +1,3 @@ -import { map, compose } from 'lodash' - export default { data () { return { @@ -21,10 +19,11 @@ export default { self.availableStyles = themes }) }, - mounted() { + mounted () { const rgbstr2hex = (rgb) => { - if (rgb[0] === '#') + if (rgb[0] === '#') { return rgb + } rgb = rgb.match(/\d+/g) return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` } @@ -41,11 +40,11 @@ export default { // reset to picked themes } const rgb = (hex) => { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) } : null } const bgRgb = rgb(this.bgColorLocal) @@ -54,23 +53,23 @@ export default { const linkRgb = rgb(this.linkColorLocal) if (bgRgb && fgRgb && linkRgb) { console.log('all colors ok') - this.$store.dispatch('setOption', { name: 'customTheme', value: { - fg: fgRgb, - bg: bgRgb, - text: textRgb, - link: linkRgb - }}) + this.$store.dispatch('setOption', { + name: 'customTheme', + value: { + fg: fgRgb, + bg: bgRgb, + text: textRgb, + link: linkRgb + }}) } } }, watch: { selected () { - console.log(this.selected) this.bgColorLocal = this.selected[1] this.fgColorLocal = this.selected[2] this.textColorLocal = this.selected[3] this.linkColorLocal = this.selected[4] - //this.$store.dispatch('setOption', { name: 'theme', value: this.selected }) } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 074b3830..30dfdf8d 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,25 +1,25 @@ <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> - <h3>Custom theme</h3> - <p>Enter hex color codes (#aabbcc) into the text fields.</p> + <p>{{$t('settings.theme_help')}}</p> <div class="color-container"> <div class="color-item"> - <label for="bgcolor" class="base04">Background</label> + <label for="bgcolor" class="base04">{{$t('settings.background')}}</label> <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal"> </div> <div class="color-item"> - <label for="fgcolor" class="base04">Foreground</label> + <label for="fgcolor" class="base04">{{$t('settings.foreground')}}</label> <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal"> </div> <div class="color-item"> - <label for="textcolor" class="base04">Text</label> + <label for="textcolor" class="base04">{{$t('settings.text')}}</label> <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal"> </div> <div class="color-item"> - <label for="linkcolor" class="base04">Links</label> + <label for="linkcolor" class="base04">{{$t('settings.links')}}</label> <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal"> </div> </div> @@ -36,7 +36,7 @@ </div> </div> </div> - <button class="btn base02-background base04" @click="setCustomTheme">Submit</button> + <button class="btn base02-background base04" @click="setCustomTheme">{{$t('general.apply')}}</button> </div> </template> |
