working, somewhat

src/components/user_card_content/user_card_content.js

@@ -3,17 +3,22 @@ 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
       if (color) {
         const rgb = hex2rgb(color)
         const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
-        console.log(rgb)
-        console.log([
-          `url(${this.user.cover_photo})`,
-          `linear-gradient(to bottom, ${tintColor}, ${tintColor})`
-        ].join(', '))
         return {
           backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
           backgroundImage: [
@@ -37,6 +42,33 @@ export default {
     dailyAvg () {
       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: {
+      get () {
+        return this.userHighlightLocal
+      },
+      set (value) {
+        const config = this.$store.state.config
+        config.highlight = config.highlight || {}
+        if (value) {
+          this.userHighlightLocal = config.highlight[this.user.screen_name] = '#FFFFFF'
+        } else {
+          this.userHighlightLocal = undefined
+          delete config.highlight[this.user.screen_name]
+        }
+      }
+    },
+    userHighlightColor: {
+      get () {
+        const config = this.$store.state.config
+        config.highlight = config.highlight || {}
+        return 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
+      }
     }
   },
   components: {

src/components/user_card_content/user_card_content.vue

@@ -5,9 +5,14 @@
         <router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
           <i class="icon-cog usersettings"></i>
         </router-link>
-        <a :href="user.statusnet_profile_url" target="_blank" style="float: right; margin-top:16px;" v-if="isOtherUser">
+        <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
           <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"/>
+        </div>
         <div class='container'>
           <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
             <StillImage class="avatar" :src="user.profile_image_url_original"/>
@@ -278,4 +283,8 @@
   font-size: 0.7em;
   color: #CCC;
 }
+.floater {
+  float: right;
+  margin-top: 16px;
+}
 </style>