added ability to pick the style of highlighting

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

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

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

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;
   }
 
-  .userHighlightChk + label::before {
+  .userHighlightText {
+    width: 70px;
+  }
+
+  .userHighlightCl,
+  .userHighlightText,
+  .userHighlightSel,
+  .userHighlightSel.select {
+    height: 22px;
     vertical-align: top;
     margin-right: 0
   }

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

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'
+    }
   }
 }