Clean up, use translations, persist theme, add more presets.

src/components/settings/settings.js

@@ -10,7 +10,7 @@ const settings = {
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
       autoLoadLocal: this.$store.state.config.autoLoad,
       streamingLocal: this.$store.state.config.streaming,
-      hoverPreviewLocal: this.$store.state.config.hoverPreview,
+      hoverPreviewLocal: this.$store.state.config.hoverPreview
     }
   },
   components: {
@@ -21,8 +21,6 @@ const settings = {
       return this.$store.state.users.currentUser
     }
   },
-
-
   watch: {
     hideAttachmentsLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachments', value })

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 })
     }
   }
 }

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>