From 21b31cf599e3dd619694ca7b6b998494b18af770 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Fri, 17 Nov 2017 17:24:42 +0200
Subject: Move custom theming from settings to style-switcher, remove usage of
 custom .css files, use styles.json instead.

---
 src/components/style_switcher/style_switcher.vue | 64 ++++++++++++++++++++++--
 1 file changed, 61 insertions(+), 3 deletions(-)

(limited to 'src/components/style_switcher/style_switcher.vue')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index bfd8cf86..074b3830 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,7 +1,43 @@
 <template>
-  <select v-model="selected" class="style-switcher">
-    <option v-for="style in availableStyles" >{{style}}</option>
-  </select>
+  <div>
+    <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>
+    <div class="color-container">
+      <div class="color-item">
+        <label for="bgcolor" class="base04">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>
+        <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
+      </div>
+      <div class="color-item">
+        <label for="textcolor" class="base04">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>
+        <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
+      </div>
+    </div>
+    <div>
+      <div class="panel">
+        <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
+        <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
+          <h4>Content</h4>
+          <br>
+          A bunch of more content and
+          <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
+          <br>
+          <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
+        </div>
+      </div>
+    </div>
+    <button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
+  </div>
 </template>
 
 <script src="./style_switcher.js"></script>
@@ -10,4 +46,26 @@
  .style-switcher {
    margin-right: 1em;
  }
+
+ .color-container {
+   display: flex;
+ }
+
+ .color-item {
+   max-width: 7em;
+   display:flex;
+   flex-wrap:wrap;
+ }
+
+ .theme-color-in {
+   max-width: 6em;
+   border-radius: 2px;
+   border: 0;
+   padding: 5px;
+   margin: 5px 0 5px 0;
+ }
+
+ .theme-preview-content {
+   padding: 20px;
+ }
 </style>
-- 
cgit v1.2.3-70-g09d2


From d65d6e5da4c3be16791564910ea5461f4049e890 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Sat, 18 Nov 2017 13:13:51 +0200
Subject: Clean up, use translations, persist theme, add more presets.

---
 src/components/settings/settings.js              |  4 +--
 src/components/style_switcher/style_switcher.js  | 31 ++++++++++++------------
 src/components/style_switcher/style_switcher.vue | 14 +++++------
 src/i18n/messages.js                             | 18 ++++++++++++--
 src/lib/persisted_state.js                       |  9 +++++++
 src/main.js                                      |  1 +
 src/services/style_setter/style_setter.js        | 16 +++++++++---
 static/styles.json                               |  7 +++++-
 8 files changed, 67 insertions(+), 33 deletions(-)

(limited to 'src/components/style_switcher/style_switcher.vue')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 3f619572..b88937bb 100644
--- a/src/components/settings/settings.js
+++ b/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 })
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>
 
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 2b828f18..697eb659 100644
--- a/src/i18n/messages.js
+++ b/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'
   }
 }
 
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index 09b5e987..60811e65 100644
--- a/src/lib/persisted_state.js
+++ b/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'})
         }
diff --git a/src/main.js b/src/main.js
index 87a46ee9..b6544a5a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,6 +47,7 @@ const persistedStateOptions = {
     'config.hoverPreview',
     'config.streaming',
     'config.muteWords',
+    'config.customTheme',
     'users.lastLoginName'
   ]
 }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index bbb2c510..92ba9440 100644
--- a/src/services/style_setter/style_setter.js
+++ b/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)
-      setColors(col, commit)
+      // This is a hack, this function is only called during initial load.
+      // 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)
+      }
     })
 }
 
diff --git a/static/styles.json b/static/styles.json
index 229cde39..92715565 100644
--- a/static/styles.json
+++ b/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" ]
 }
-- 
cgit v1.2.3-70-g09d2


From a7500410ff17fbf742336d065a1dfedf87df587b Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Sat, 18 Nov 2017 17:41:43 +0200
Subject: Fix color inputs to wrap on mobile, fix timeline background color to
 not clash with panel headings.

---
 src/components/style_switcher/style_switcher.vue | 5 +++--
 src/components/timeline/timeline.vue             | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

(limited to 'src/components/style_switcher/style_switcher.vue')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 30dfdf8d..f92f7299 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -49,16 +49,17 @@
 
  .color-container {
    display: flex;
+   flex-wrap: wrap;
  }
 
  .color-item {
-   max-width: 7em;
+   max-width: 9em;
    display:flex;
    flex-wrap:wrap;
  }
 
  .theme-color-in {
-   max-width: 6em;
+   max-width: 8em;
    border-radius: 2px;
    border: 0;
    padding: 5px;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index ad741e3b..0e2ed92c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -14,7 +14,7 @@
         {{$t('timeline.up_to_date')}}
       </div>
     </div>
-    <div class="panel-body base02-background">
+    <div class="panel-body base01-background">
       <div class="timeline">
         <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
         <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
@@ -30,7 +30,7 @@
         {{$t('user_card.followers')}}
       </div>
     </div>
-    <div class="panel-body base02-background">
+    <div class="panel-body base01-background">
       <div class="timeline">
         <user-card v-for="follower in followers" :user="follower" :showFollows="false"></user-card>
       </div>
@@ -42,7 +42,7 @@
         {{$t('user_card.followees')}}
       </div>
     </div>
-    <div class="panel-body base02-background">
+    <div class="panel-body base01-background">
       <div class="timeline">
         <user-card v-for="friend in friends" :user="friend" :showFollows="true"></user-card>
       </div>
-- 
cgit v1.2.3-70-g09d2

