From bc85e5f0c1b000d5aea2c90b6ca6d3a873e13626 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 07:26:55 +0300
Subject: Further usercard readibility. Made it visible which "tab" is
 actiavated - should be enough to hint user that you can click "following" /
 "followers". Fixes #77

---
 src/components/user_card_content/user_card_content.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/user_card_content/user_card_content.js')

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 1e8c91de..a6e44d90 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -2,7 +2,7 @@ import StillImage from '../still-image/still-image.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 export default {
-  props: [ 'user', 'switcher', 'hideBio' ],
+  props: [ 'user', 'switcher', 'selected', 'hideBio' ],
   computed: {
     headingStyle () {
       const color = this.$store.state.config.colors.bg
-- 
cgit v1.2.3-70-g09d2


From 15a7151ade2cfb0a69216cac13e34ed255099aff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 08:04:16 +0300
Subject: Entire area around user counters are clickable now, not just the
 header-link

---
 .../user_card_content/user_card_content.js         |  6 +++--
 .../user_card_content/user_card_content.vue        | 27 ++++++++++++++--------
 2 files changed, 21 insertions(+), 12 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.js')

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index a6e44d90..4ee84b0e 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -61,8 +61,10 @@ export default {
       store.state.api.backendInteractor.setUserMute(this.user)
     },
     setProfileView (v) {
-      const store = this.$store
-      store.commit('setProfileView', { v })
+      if (this.switcher) {
+        const store = this.$store
+        store.commit('setProfileView', { v })
+      }
     }
   }
 }
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 90b5c5cf..5c139dca 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -74,20 +74,17 @@
       </div>
     </div>
     <div class="panel-body profile-panel-body">
-      <div class="user-counts">
-        <div class="user-count" :class="{selected: selected === 'statuses'}">
-          <a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5>{{ $t('user_card.statuses') }}</h5></a>
-          <h5 v-else>{{ $t('user_card.statuses') }}</h5>
+      <div class="user-counts" :class="{clickable: switcher}">
+        <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
+          <h5>{{ $t('user_card.statuses') }}</h5>
           <span>{{user.statuses_count}} <br></span>
         </div>
-        <div class="user-count" :class="{selected: selected === 'friends'}">
-          <a href="#" v-on:click.prevent="setProfileView('friends')" v-if="switcher"><h5>{{ $t('user_card.followees') }}</h5></a>
-          <h5 v-else>{{ $t('user_card.followees') }}</h5>
+        <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
+          <h5>{{ $t('user_card.followees') }}</h5>
           <span>{{user.friends_count}}</span>
         </div>
-        <div class="user-count" :class="{selected: selected === 'followers'}">
-          <a href="#" v-on:click.prevent="setProfileView('followers')" v-if="switcher"><h5>{{ $t('user_card.followers') }}</h5></a>
-          <h5 v-else>{{ $t('user_card.followers') }}</h5>
+        <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
+          <h5>{{ $t('user_card.followers') }}</h5>
           <span>{{user.followers_count}}</span>
         </div>
       </div>
@@ -239,6 +236,16 @@
   text-align: center;
   justify-content: space-between;
   text-shadow: $usercard-text-shadow;
+
+  &.clickable {
+    .user-count {
+      cursor: pointer;
+
+      &:hover:not(.selected) {
+        background-color: rgba(0,0,0,.1);
+      }
+    }
+  }
 }
 
 .user-count {
-- 
cgit v1.2.3-70-g09d2


From dc33c0aaacd56d0854418829fdbc1c32a70ef0f7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 May 2018 16:07:18 +0300
Subject: alternate usercard

---
 src/_variables.scss                                | 11 ----------
 .../user_card_content/user_card_content.js         | 12 +++++++++--
 .../user_card_content/user_card_content.vue        | 25 ++++++++++++----------
 src/services/style_setter/style_setter.js          |  2 +-
 4 files changed, 25 insertions(+), 25 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.js')

diff --git a/src/_variables.scss b/src/_variables.scss
index 0e46489c..b5222a6a 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -27,14 +27,3 @@ $fallback--tooltipRadius: 5px;
 $fallback--avatarRadius: 4px;
 $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;
-
-$usercard-text-shadow-color: #666;
-$usercard-text-shadow: 0px 1px 5px rgba(0, 0, 0, .7),
-0 1px 0px $usercard-text-shadow-color,
-0 -1px 0px $usercard-text-shadow-color,
-1px 0 0px $usercard-text-shadow-color,
--1px 0 0px $usercard-text-shadow-color,
-1px -1px 0px $usercard-text-shadow-color,
--1px 1px 0px $usercard-text-shadow-color,
-1px 1px 0px $usercard-text-shadow-color,
--1px -1px 0px $usercard-text-shadow-color;
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 4ee84b0e..4d4266cb 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -8,10 +8,18 @@ export default {
       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[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
-          backgroundImage: `url(${this.user.cover_photo})`
+          backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
+          backgroundImage: [
+            `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
+            `url(${this.user.cover_photo})`
+          ].join(', ')
         }
       }
     },
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ce860926..c120df9a 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -116,7 +116,8 @@
 }
 
 .user-info {
-  color: white;
+  color: $fallback--lightFg;
+  color: var(--lightFg, $fallback--lightFg);
   padding: 0 16px;
 
   .container {
@@ -149,10 +150,9 @@
     }
   }
 
-  text-shadow: $usercard-text-shadow;
-
   .usersettings {
-    color: #fff;
+    color: $fallback--lightFg;
+    color: var(--lightFg, $fallback--lightFg);
     opacity: .8;
   }
 
@@ -166,13 +166,13 @@
   }
 
   .user-name{
-    color: white;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
   .user-screen-name {
-    color: white;
+    color: $fallback--lightFg;
+    color: var(--lightFg, $fallback--lightFg);
     display: inline-block;
     font-weight: light;
     font-size: 15px;
@@ -189,7 +189,6 @@
     }
 
     .following {
-      color: white;
       font-size: 14px;
       flex: 0 0 100%;
       margin: 0 0 .4em 0;
@@ -235,15 +234,17 @@
   padding: .5em 1.5em 0em 1.5em;
   text-align: center;
   justify-content: space-between;
-  text-shadow: $usercard-text-shadow;
-  color: #fff;
+  color: $fallback--lightFg;
+  color: var(--lightFg, $fallback--lightFg);
 
   &.clickable {
     .user-count {
       cursor: pointer;
 
       &:hover:not(.selected) {
-        background-color: rgba(0,0,0,.1);
+        transition: border-bottom 100ms;
+        border-bottom: 3px solid $fallback--link;
+        border-bottom: 3px solid var(--link, $fallback--link);
       }
     }
   }
@@ -255,7 +256,9 @@
   margin: 0 .5em;
 
   &.selected {
-    background-color: rgba(0,0,0,.35);
+    transition: none;
+    border-bottom: 5px solid $fallback--link;
+    border-bottom: 5px solid var(--link, $fallback--link);
     border-radius: $fallback--btnRadius;
     border-radius: var(--btnRadius, $fallback--btnRadius);
   }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b9af9140..493d444e 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -75,7 +75,7 @@ const setColors = (col, commit) => {
   colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod)       // borders
   colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
   colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text
-  colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
+  colors.lightFg = rgb2hex(col.text.r - mod * 5, col.text.g - mod * 5, col.text.b - mod * 5) // strong text
 
   colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
 
-- 
cgit v1.2.3-70-g09d2