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),
+          r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
+          g: parseInt(result[2], 16),
-            b: parseInt(result[3], 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: {
+        this.$store.dispatch('setOption', {
-          fg: fgRgb,
+          name: 'customTheme',
-          bg: bgRgb,
+          value: {
-          text: textRgb,
+            fg: fgRgb,
-          link: linkRgb
+            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>{{$t('settings.theme_help')}}</p>
-    <p>Enter hex color codes (#aabbcc) into the text fields.</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>
 

src/i18n/messages.js

@@ -122,6 +122,12 @@ const fi = {
     set_new_profile_background: 'Aseta uusi taustakuva',
     settings: 'Asetukset',
     theme: 'Teema',
+    presets: 'Valmiit teemat',
+    theme_help: 'Käytä heksadesimaalivärejä muokataksesi väriteemaasi.',
+    background: 'Tausta',
+    foreground: 'Korostus',
+    text: 'Teksti',
+    links: 'Linkit',
     filtering: 'Suodatus',
     filtering_explanation: 'Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.',
     attachments: 'Liitteet',
@@ -160,7 +166,8 @@ const fi = {
     error_fetching_user: 'Virhe hakiessa käyttäjää'
   },
   general: {
-    submit: 'Lähetä'
+    submit: 'Lähetä',
+    apply: 'Aseta'
   }
 }
 
@@ -206,6 +213,12 @@ const en = {
     set_new_profile_background: 'Set new profile background',
     settings: 'Settings',
     theme: 'Theme',
+    presets: 'Presets',
+    theme_help: 'Use hex color codes (#aabbcc) to customize your color theme.',
+    background: 'Background',
+    foreground: 'Foreground',
+    text: 'Text',
+    links: 'Links',
     filtering: 'Filtering',
     filtering_explanation: 'All statuses containing these words will be muted, one per line',
     attachments: 'Attachments',
@@ -244,7 +257,8 @@ const en = {
     error_fetching_user: 'Error fetching user'
   },
   general: {
-    submit: 'Submit'
+    submit: 'Submit',
+    apply: 'Apply'
   }
 }
 

src/lib/persisted_state.js

@@ -51,6 +51,15 @@ export default function createPersistedState ({
             merge({}, store.state, savedState)
           )
         }
+        if (store.state.config.customTheme) {
+          // This is a hack to deal with async loading of config.json and themes
+          // See: style_setter.js, setPreset()
+          window.themeLoaded = true
+          store.dispatch('setOption', {
+            name: 'customTheme',
+            value: store.state.config.customTheme
+          })
+        }
         if (store.state.users.lastLoginName) {
           store.dispatch('loginUser', {username: store.state.users.lastLoginName, password: 'xxx'})
         }

src/main.js

@@ -47,6 +47,7 @@ const persistedStateOptions = {
     'config.hoverPreview',
     'config.streaming',
     'config.muteWords',
+    'config.customTheme',
     'users.lastLoginName'
   ]
 }

src/services/style_setter/style_setter.js

@@ -98,13 +98,14 @@ const setColors = (col, commit) => {
     styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max')
   })
 
-  commit('setOption', { name: 'colors', value: colors })
-
   styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
   styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
   styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max')
   styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
   body.style.display = 'initial'
+
+  commit('setOption', { name: 'colors', value: colors })
+  commit('setOption', { name: 'customTheme', value: col })
 }
 
 const hex2rgb = (hex) => {
@@ -131,8 +132,15 @@ const setPreset = (val, commit) => {
         text: textRgb,
         link: linkRgb
       }
-      console.log(col)
+      // This is a hack, this function is only called during initial load.
-      setColors(col, commit)
+      // We want to cancel loading the theme from config.json if we're already
+      // loading a theme from the persisted state.
+      // Needed some way of dealing with the async way of things.
+      // load config -> set preset -> wait for styles.json to load ->
+      // load persisted state -> set colors -> styles.json loaded -> set colors
+      if (!window.themeLoaded) {
+        setColors(col, commit)
+      }
     })
 }
 

static/styles.json

@@ -1,4 +1,9 @@
 {
   "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070" ],
-  "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#d0d6db", "#304055", "#e46f0f" ]
+  "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f" ],
+  "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c" ],
+  "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8"],
+  "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60" ],
+  "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672" ],
+  "mammal": [ "Mammal", "#272c37", "#444b5d", "#f8f8f8", "#9bacc8" ]
 }