Fix usercard from breaking with certain colors, clean up code structure a bit.

src/components/style_switcher/style_switcher.js

@@ -1,3 +1,5 @@
+import { rgbstr2hex } from '../../services/color_convert/color_convert.js'
+
 export default {
   data () {
     return {
@@ -19,13 +21,6 @@ export default {
       })
   },
   mounted () {
-    const rgbstr2hex = (rgb) => {
-      if (rgb[0] === '#') {
-        return rgb
-      }
-      rgb = rgb.match(/\d+/g)
-      return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
-    }
     this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
     this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
     this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])

src/components/user_card_content/user_card_content.js

@@ -0,0 +1,64 @@
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+export default {
+  props: [ 'user', 'switcher' ],
+  computed: {
+    headingStyle () {
+      const color = this.$store.state.config.colors['base00']
+      if (color) {
+        const rgb = hex2rgb(color)
+        console.log(rgb)
+        return {
+          backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
+          backgroundImage: `url(${this.user.cover_photo})`
+        }
+      }
+    },
+    bodyStyle () {
+      return {
+        background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
+      }
+    },
+    isOtherUser () {
+      return this.user.id !== this.$store.state.users.currentUser.id
+    },
+    loggedIn () {
+      return this.$store.state.users.currentUser
+    },
+    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)
+    }
+  },
+  methods: {
+    followUser () {
+      const store = this.$store
+      store.state.api.backendInteractor.followUser(this.user.id)
+        .then((followedUser) => store.commit('addNewUsers', [followedUser]))
+    },
+    unfollowUser () {
+      const store = this.$store
+      store.state.api.backendInteractor.unfollowUser(this.user.id)
+        .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
+    },
+    blockUser () {
+      const store = this.$store
+      store.state.api.backendInteractor.blockUser(this.user.id)
+        .then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
+    },
+    unblockUser () {
+      const store = this.$store
+      store.state.api.backendInteractor.unblockUser(this.user.id)
+        .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
+    },
+    toggleMute () {
+      const store = this.$store
+      store.commit('setMuted', {user: this.user, muted: !this.user.muted})
+      store.state.api.backendInteractor.setUserMute(this.user)
+    },
+    setProfileView (v) {
+      const store = this.$store
+      store.commit('setProfileView', { v })
+    }
+  }
+}

src/components/user_card_content/user_card_content.vue

@@ -84,69 +84,7 @@
   </div>
 </template>
 
-<script>
+<script src="./user_card_content.js"></script>
-  export default {
-    props: [ 'user', 'switcher' ],
-    computed: {
-      headingStyle () {
-        let color = this.$store.state.config.colors['base00']
-        if (color) {
-          let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
-          return {
-            backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
-            backgroundImage: `url(${this.user.cover_photo})`
-          }
-        }
-      },
-      bodyStyle () {
-        return {
-          background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
-        }
-      },
-      isOtherUser () {
-        return this.user.id !== this.$store.state.users.currentUser.id
-      },
-      loggedIn () {
-        return this.$store.state.users.currentUser
-      },
-      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)
-      }
-    },
-    methods: {
-      followUser () {
-        const store = this.$store
-        store.state.api.backendInteractor.followUser(this.user.id)
-          .then((followedUser) => store.commit('addNewUsers', [followedUser]))
-      },
-      unfollowUser () {
-        const store = this.$store
-        store.state.api.backendInteractor.unfollowUser(this.user.id)
-          .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
-      },
-      blockUser () {
-        const store = this.$store
-        store.state.api.backendInteractor.blockUser(this.user.id)
-          .then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
-      },
-      unblockUser () {
-        const store = this.$store
-        store.state.api.backendInteractor.unblockUser(this.user.id)
-          .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
-      },
-      toggleMute () {
-        const store = this.$store
-        store.commit('setMuted', {user: this.user, muted: !this.user.muted})
-        store.state.api.backendInteractor.setUserMute(this.user)
-      },
-      setProfileView (v) {
-        const store = this.$store
-        store.commit('setProfileView', { v })
-      }
-    }
-  }
-</script>
 
 <style lang="scss">
 @import '../../_variables.scss';

src/services/color_convert/color_convert.js

@@ -0,0 +1,34 @@
+import { map } from 'lodash'
+
+const rgb2hex = (r, g, b) => {
+  [r, g, b] = map([r, g, b], (val) => {
+    val = Math.ceil(val)
+    val = val < 0 ? 0 : val
+    val = val > 255 ? 255 : val
+    return val
+  })
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+}
+
+const hex2rgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null
+}
+
+const rgbstr2hex = (rgb) => {
+  if (rgb[0] === '#') {
+    return rgb
+  }
+  rgb = rgb.match(/\d+/g)
+  return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
+}
+
+export {
+  rgb2hex,
+  hex2rgb,
+  rgbstr2hex
+}

src/services/style_setter/style_setter.js

@@ -1,4 +1,5 @@
-import { times, map } from 'lodash'
+import { times } from 'lodash'
+import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
@@ -56,16 +57,6 @@ const setStyle = (href, commit) => {
   cssEl.addEventListener('load', setDynamic)
 }
 
-const rgb2hex = (r, g, b) => {
-  [r, g, b] = map([r, g, b], (val) => {
-    val = Math.ceil(val)
-    val = val < 0 ? 0 : val
-    val = val > 255 ? 255 : val
-    return val
-  })
-  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
-}
-
 const setColors = (col, commit) => {
   const head = document.head
   const body = document.body
@@ -108,15 +99,6 @@ const setColors = (col, commit) => {
   commit('setOption', { name: 'customTheme', value: col })
 }
 
-const hex2rgb = (hex) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null
-}
-
 const setPreset = (val, commit) => {
   window.fetch('/static/styles.json')
     .then((data) => data.json())