From fa8c221f3a6f9b1421e29aa014304576810a08e6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 18 Jun 2018 12:09:14 +0300
Subject: moved style generator into separate file. notifications are
 highlighted too now.

---
 src/components/notification/notification.js | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'src/components/notification/notification.js')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 3a274374..d2dd91de 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,6 +1,7 @@
 import Status from '../status/status.vue'
 import StillImage from '../still-image/still-image.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 
 const Notification = {
   data () {
@@ -18,6 +19,14 @@ const Notification = {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     }
+  },
+  computed: {
+    userClass () {
+      return highlightClass(this.notification.action.user, this.$store)
+    },
+    userStyle () {
+      return highlightStyle(this.notification.action.user, this.$store)
+    },
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 8ccebbe1564fe76b376eee83ad985b934edcbfa9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Jun 2018 16:17:50 +0300
Subject: both bugs fixed. it's reactive and no more conflicting cards

---
 src/components/notification/notification.js        |  9 ++++--
 src/components/status/status.js                    | 12 +++++---
 .../user_card_content/user_card_content.js         | 33 ++++++----------------
 .../user_card_content/user_card_content.vue        |  7 +++--
 src/modules/config.js                              | 15 ++++++++--
 src/modules/users.js                               |  4 ---
 src/services/user_highlighter/user_highlighter.js  |  5 ++--
 7 files changed, 41 insertions(+), 44 deletions(-)

(limited to 'src/components/notification/notification.js')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index d2dd91de..33482891 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -22,11 +22,14 @@ const Notification = {
   },
   computed: {
     userClass () {
-      return highlightClass(this.notification.action.user, this.$store)
+      return highlightClass(this.notification.action.user)
     },
     userStyle () {
-      return highlightStyle(this.notification.action.user, this.$store)
-    },
+      const highlight = this.$store.state.config.highlight
+      const user = this.notification.action.user
+      const color = highlight[user.screen_name]
+      return highlightStyle(color)
+    }
   }
 }
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index fcdc6f61..2b5bcb55 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -38,19 +38,23 @@ const Status = {
     },
     repeaterClass () {
       const user = this.statusoid.user
-      return highlightClass(user, this.$store)
+      return highlightClass(user)
     },
     userClass () {
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
-      return highlightClass(user, this.$store)
+      return highlightClass(user)
     },
     repeaterStyle () {
       const user = this.statusoid.user
-      return highlightStyle(user, this.$store)
+      const highlight = this.$store.state.config.highlight
+      const color = highlight[user.screen_name]
+      return highlightStyle(color)
     },
     userStyle () {
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
-      return highlightStyle(user, this.$store)
+      const highlight = this.$store.state.config.highlight
+      const color = highlight[user.screen_name]
+      return highlightStyle(color)
     },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 7e0ea0da..48e0ea02 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -3,16 +3,6 @@ import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 export default {
   props: [ 'user', 'switcher', 'selected', 'hideBio' ],
-  data() {
-    return {
-      userHighlightLocal: ''
-    }
-  },
-  mounted () {
-    const config = this.$store.state.config
-    config.highlight = config.highlight || {}
-    this.userHighlightLocal = config.highlight[this.user.screen_name]
-  },
   computed: {
     headingStyle () {
       const color = this.$store.state.config.colors.bg
@@ -45,29 +35,22 @@ export default {
     },
     userHighlightEnabled: {
       get () {
-        return this.userHighlightLocal
+        return this.$store.state.config.highlight[this.user.screen_name]
       },
-      set (value) {
-        const config = this.$store.state.config
-        config.highlight = config.highlight || {}
-        if (value) {
-          this.userHighlightLocal = config.highlight[this.user.screen_name] = '#FFFFFF'
+      set (enabled) {
+        if (enabled) {
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: '#FFFFFF' })
         } else {
-          this.userHighlightLocal = undefined
-          delete config.highlight[this.user.screen_name]
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
         }
       }
     },
     userHighlightColor: {
       get () {
-        const config = this.$store.state.config
-        config.highlight = config.highlight || {}
-        return config.highlight[this.user.screen_name]
+        return this.$store.state.config.highlight[this.user.screen_name]
       },
-      set (value) {
-        const config = this.$store.state.config
-        config.highlight = config.highlight || {}
-        config.highlight[this.user.screen_name] = value
+      set (color) {
+        this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
       }
     }
   },
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 7d48870b..c7a270f1 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -9,9 +9,10 @@
           <i class="icon-link-ext usersettings"></i>
         </a>
         <div class="floater" v-if="switcher || isOtherUser">
-          <input type="checkbox" id="userHighlightCheck" v-model="userHighlightEnabled">
-          <label :title="$t('settings.highlight')" for="userHighlightCheck"></label>
-          <input type="color" id="userHighlightColor" v-if="userHighlightLocal" v-model="userHighlightColor"/>
+          <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+          <input type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/>
+          <input type="checkbox" class="button" :id="'userHighlightCheck'+user.id" v-model="userHighlightEnabled">
+          <label :title="$t('settings.highlight')" :for="'userHighlightCheck'+user.id"></label>
         </div>
         <div class='container'>
           <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
diff --git a/src/modules/config.js b/src/modules/config.js
index 9a62905e..20e58250 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,4 +1,4 @@
-import { set } from 'vue'
+import { set, delete as del } from 'vue'
 import StyleSetter from '../services/style_setter/style_setter.js'
 
 const defaultState = {
@@ -10,7 +10,8 @@ const defaultState = {
   autoLoad: true,
   streaming: false,
   hoverPreview: true,
-  muteWords: []
+  muteWords: [],
+  highlight: {}
 }
 
 const config = {
@@ -18,12 +19,22 @@ const config = {
   mutations: {
     setOption (state, { name, value }) {
       set(state, name, value)
+    },
+    setHighlight (state, { user, color }) {
+      if (color) {
+        set(state.highlight, user, color)
+      } else {
+        del(state.highlight, user)
+      }
     }
   },
   actions: {
     setPageTitle ({state}, option = '') {
       document.title = `${option} ${state.name}`
     },
+    setHighlight ({ commit, dispatch }, { user, color }) {
+      commit('setHighlight', {user, color})
+    },
     setOption ({ commit, dispatch }, { name, value }) {
       commit('setOption', {name, value})
       switch (name) {
diff --git a/src/modules/users.js b/src/modules/users.js
index 740ffdf6..ba548765 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -43,10 +43,6 @@ export const mutations = {
   setUserForStatus (state, status) {
     status.user = state.usersObject[status.user.id]
   },
-  setHighlighted (state, { user: {id}, color }) {
-    const user = state.usersObject[id]
-    set(user, 'color', color)
-  },
   setColor (state, { user: {id}, highlighted }) {
     const user = state.usersObject[id]
     set(user, 'highlight', highlighted)
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index 94bf2c40..e10ef3bd 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -1,7 +1,6 @@
 import { hex2rgb } from '../color_convert/color_convert.js'
-const highlightStyle = (user, store) => {
-  const color = store.state.config.highlight[user.screen_name]
-  if (!color) return
+const highlightStyle = (color) => {
+  if (typeof color !== 'string') return
   const rgb = hex2rgb(color)
   const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
   const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
-- 
cgit v1.2.3-70-g09d2


From 6a81aa274533b6af1f2514508f6f9fa3b0795c9f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 5 Aug 2018 05:18:04 +0300
Subject: added ability to pick the style of highlighting

---
 src/components/notification/notification.js        |  3 +-
 src/components/status/status.js                    |  6 ++--
 .../user_card_content/user_card_content.js         | 15 ++++----
 .../user_card_content/user_card_content.vue        | 35 +++++++++++++-----
 src/modules/config.js                              | 13 ++++---
 src/services/user_highlighter/user_highlighter.js  | 42 ++++++++++++++++------
 6 files changed, 79 insertions(+), 35 deletions(-)

(limited to 'src/components/notification/notification.js')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 33482891..c786f2cc 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -27,8 +27,7 @@ const Notification = {
     userStyle () {
       const highlight = this.$store.state.config.highlight
       const user = this.notification.action.user
-      const color = highlight[user.screen_name]
-      return highlightStyle(color)
+      return highlightStyle(highlight[user.screen_name])
     }
   }
 }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 2b5bcb55..3a9363ab 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -47,14 +47,12 @@ const Status = {
     repeaterStyle () {
       const user = this.statusoid.user
       const highlight = this.$store.state.config.highlight
-      const color = highlight[user.screen_name]
-      return highlightStyle(color)
+      return highlightStyle(highlight[user.screen_name])
     },
     userStyle () {
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
       const highlight = this.$store.state.config.highlight
-      const color = highlight[user.screen_name]
-      return highlightStyle(color)
+      return highlightStyle(highlight[user.screen_name])
     },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 48e0ea02..76a5577e 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -33,13 +33,15 @@ export default {
       const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
       return Math.round(this.user.statuses_count / days)
     },
-    userHighlightEnabled: {
+    userHighlightType: {
       get () {
-        return this.$store.state.config.highlight[this.user.screen_name]
+        const data = this.$store.state.config.highlight[this.user.screen_name]
+        return data && data.type || 'disabled'
       },
-      set (enabled) {
-        if (enabled) {
-          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: '#FFFFFF' })
+      set (type) {
+        const data = this.$store.state.config.highlight[this.user.screen_name]
+        if (type !== 'disabled') {
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
         } else {
           this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
         }
@@ -47,7 +49,8 @@ export default {
     },
     userHighlightColor: {
       get () {
-        return this.$store.state.config.highlight[this.user.screen_name]
+        const data = this.$store.state.config.highlight[this.user.screen_name]
+        return data && data.color
       },
       set (color) {
         this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index d3238b09..abdf0dfe 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -26,10 +26,16 @@
         </div>
         <div class="floater" v-if="switcher || isOtherUser">
           <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
-          <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/>
-          <input type="checkbox" class="userHighlightChk" :id="'userHighlightCheck'+user.id" v-model="userHighlightEnabled">
-          <label :title="$t('settings.highlight')" :for="'userHighlightCheck'+user.id">
-            <i class="icon-brush"></i>
+          <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
+          <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
+          <label for="style-switcher" class='userHighlightSel select'>
+            <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
+              <option value="disabled">No highlight</option>
+              <option value="solid">Solid bg</option>
+              <option value="striped">Striped bg</option>
+              <option value="side">Side stripe</option>
+            </select>
+            <i class="icon-down-open"/>
           </label>
         </div>
       </div>
@@ -307,12 +313,25 @@
 
   .userHighlightCl {
     padding: 2px 10px;
-    height: 22px;
-    vertical-align: top;
-    margin-right: 0
+  }
+  .userHighlightSel,
+  .userHighlightSel.select {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .userHighlightSel.select i {
+    line-height: 22px;
+  }
+
+  .userHighlightText {
+    width: 70px;
   }
 
-  .userHighlightChk + label::before {
+  .userHighlightCl,
+  .userHighlightText,
+  .userHighlightSel,
+  .userHighlightSel.select {
+    height: 22px;
     vertical-align: top;
     margin-right: 0
   }
diff --git a/src/modules/config.js b/src/modules/config.js
index 20e58250..2d597640 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -20,9 +20,12 @@ const config = {
     setOption (state, { name, value }) {
       set(state, name, value)
     },
-    setHighlight (state, { user, color }) {
-      if (color) {
-        set(state.highlight, user, color)
+    setHighlight (state, { user, color, type }) {
+      const data = this.state.config.highlight[user]
+      console.log(user, color, type, data)
+
+      if (color || type) {
+        set(state.highlight, user, { color: color || data.color, type: type || data.type })
       } else {
         del(state.highlight, user)
       }
@@ -32,8 +35,8 @@ const config = {
     setPageTitle ({state}, option = '') {
       document.title = `${option} ${state.name}`
     },
-    setHighlight ({ commit, dispatch }, { user, color }) {
-      commit('setHighlight', {user, color})
+    setHighlight ({ commit, dispatch }, { user, color, type }) {
+      commit('setHighlight', {user, color, type})
     },
     setOption ({ commit, dispatch }, { name, value }) {
       commit('setOption', {name, value})
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index e10ef3bd..31eba2c8 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -1,18 +1,40 @@
 import { hex2rgb } from '../color_convert/color_convert.js'
-const highlightStyle = (color) => {
+const highlightStyle = (prefs) => {
+  if (prefs === undefined) {
+    return
+  }
+  const {color, type} = prefs
+  console.log(arguments)
   if (typeof color !== 'string') return
   const rgb = hex2rgb(color)
+  const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`
   const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
   const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
-  return {
-    backgroundImage: [
-      'repeating-linear-gradient(-45deg,',
-      `${tintColor} ,`,
-      `${tintColor} 20px,`,
-      `${tintColor2} 20px,`,
-      `${tintColor2} 40px`
-    ].join(' '),
-    backgroundPosition: '0 0'
+  if (type === 'striped') {
+    return {
+      backgroundImage: [
+        'repeating-linear-gradient(-45deg,',
+        `${tintColor} ,`,
+        `${tintColor} 20px,`,
+        `${tintColor2} 20px,`,
+        `${tintColor2} 40px`
+      ].join(' '),
+      backgroundPosition: '0 0'
+    }
+  } else if (type === 'solid') {
+    return {
+      backgroundColor: tintColor2
+    }
+  } else if (type === 'side') {
+    return {
+      backgroundImage: [
+        'linear-gradient(to right,',
+        `${solidColor} ,`,
+        `${solidColor} 2px,`,
+        `transparent 6px`
+      ].join(' '),
+      backgroundPosition: '0 0'
+    }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2