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 +++++++++++++++++-----
 4 files changed, 39 insertions(+), 20 deletions(-)

(limited to 'src/components')

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
   }
-- 
cgit v1.2.3-70-g09d2