aboutsummaryrefslogtreecommitdiff
path: root/src/components/style_switcher
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/style_switcher')
-rw-r--r--src/components/style_switcher/style_switcher.js31
-rw-r--r--src/components/style_switcher/style_switcher.vue14
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>