working, somewhat

src/components/status/status.js

@@ -6,6 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import StillImage from '../still-image/still-image.vue'
 import { filter, find } from 'lodash'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 const Status = {
   name: 'Status',
@@ -34,12 +35,21 @@ const Status = {
     muteWords () {
       return this.$store.state.config.muteWords
     },
+    repeaterClass () {
+      const user = this.statusoid.user
+      return this.highlightClass(user)
+    },
     userClass () {
-      console.log(this.statusoid.user)
-      console.log(this.statusoid.user.screen_name)
-      return 'USER____' + this.statusoid.user.screen_name
-        .replace(/\./g,'_')
-        .replace(/\@/g,'_AT_')
+      const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
+      return this.highlightClass(user)
+    },
+    repeaterStyle () {
+      const user = this.statusoid.user
+      return this.highlightStyle(user)
+    },
+    userStyle () {
+      const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
+      return this.highlightStyle(user)
     },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
@@ -172,6 +182,28 @@ const Status = {
     },
     replyLeave () {
       this.showPreview = false
+    },
+    highlightStyle (user) {
+      const color = this.$store.state.config.highlight[user.screen_name]
+      if (!color) 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)`
+      return {
+        backgroundImage: [
+          'repeating-linear-gradient(-45deg,',
+          tintColor, ',',
+          tintColor, '20px,',
+          tintColor2, '20px,',
+          tintColor2, '40px',
+        ].join(' '),
+        backgroundPosition: '0 0'
+      }
+    },
+    highlightClass (user) {
+      return 'USER____' + user.screen_name
+        .replace(/\./g,'_')
+        .replace(/\@/g,'_AT_')
     }
   },
   watch: {

src/components/status/status.vue

@@ -8,7 +8,7 @@
       </div>
     </template>
     <template v-else>
-      <div v-if="retweet && !noHeading" :class="[userClass]" class="media container retweet-info">
+      <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
           <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
@@ -17,7 +17,7 @@
         </div>
       </div>
 
-      <div :class="[userClass]" class="media status">
+      <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
         <div v-if="!noHeading" class="media-left">
           <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
             <StillImage class='avatar' :class="{'avatar-compact': compact}"  :src="status.user.profile_image_url_original"/>
@@ -315,7 +315,7 @@
 
   .retweet-info {
     padding: 0.4em 0.6em 0 0.6em;
-    margin: 0 0 -0.5em 0;
+    margin: 0;
     .avatar {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@@ -427,6 +427,9 @@
 .status {
   display: flex;
   padding: 0.6em;
+  &.is-retweet {
+    padding-top: 0.1em;
+  }
 }
 
 .status-conversation:last-child {