Merge branch 'emoji-selector-update' into shigusegubu

* emoji-selector-update:
  update status/user card to use same gradient mask fading effect instead of background hack
  Fixed scrollability not being obvious, added fade effect

src/components/emoji_picker/emoji_picker.js

@@ -17,6 +17,7 @@ const EmojiPicker = {
       keyword: '',
       activeGroup: 'custom',
       showingStickers: false,
+      groupsScrolledClass: 'scrolled-top',
       spamMode: false
     }
   },
@@ -40,6 +41,13 @@ const EmojiPicker = {
     scrolledGroup (e) {
       const target = (e && e.target) || this.$refs['emoji-groups']
       const top = target.scrollTop + 5
+      if (target.scrollTop <= 5) {
+        this.groupsScrolledClass = 'scrolled-top'
+      } else if (target.scrollTop >= target.scrollTopMax - 5) {
+        this.groupsScrolledClass = 'scrolled-bottom'
+      } else {
+        this.groupsScrolledClass = 'scrolled-middle'
+      }
       this.$nextTick(() => {
         this.emojisView.forEach(group => {
           const ref = this.$refs['group-' + group.id]

src/components/emoji_picker/emoji_picker.scss

@@ -6,7 +6,7 @@
   position: absolute;
   right: 0;
   left: 0;
-  height: 300px;
+  height: 320px;
   margin: 0 !important;
   z-index: 1;
 
@@ -104,6 +104,22 @@
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
+      mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+            linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+            linear-gradient(to top, white, white);
+      transition: mask-size 150ms;
+      mask-size: 100% 20px, 100% 20px, auto;
+      // Autoprefixed seem to ignore this one, and also syntax is different
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      &.scrolled {
+        &-top {
+          mask-size: 100% 20px, 100% 0, auto;
+        }
+        &-bottom {
+          mask-size: 100% 0, 100% 20px, auto;
+        }
+      }
     }
 
     &-group {

src/components/emoji_picker/emoji_picker.vue

@@ -46,6 +46,7 @@
         <div
           ref="emoji-groups"
           class="emoji-groups"
+          :class="groupsScrolledClass"
           @scroll="scrolledGroup"
         >
           <div

src/components/status/status.vue

@@ -665,6 +665,15 @@ $status-margin: 0.75em;
     height: 220px;
     overflow-x: hidden;
     overflow-y: hidden;
+    z-index: 1;
+    .status-content {
+      height: 100%;
+      mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+            linear-gradient(to top, white, white);
+      // Autoprefixed seem to ignore this one, and also syntax is different
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
   }
 
   .tall-status-hider {
@@ -676,12 +685,7 @@ $status-margin: 0.75em;
     width: 100%;
     text-align: center;
     line-height: 110px;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
-    &_focused {
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%);
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%);
-    }
+    z-index: 2;
   }
 
   .status-unhider, .cw-status-hider {

src/components/user_card/user_card.js

@@ -38,19 +38,10 @@ export default {
         const rgb = (typeof color === 'string') ? hex2rgb(color) : color
         const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
 
-        const gradient = [
-          [tintColor, this.hideBio ? '60%' : ''],
-          this.hideBio ? [
-            color, '100%'
-          ] : [
-            tintColor, ''
-          ]
-        ].map(_ => _.join(' ')).join(', ')
-
         return {
           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, ${gradient})`,
+            `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
             `url(${this.user.cover_photo})`
           ].join(', ')
         }

src/components/user_card/user_card.vue

@@ -2,8 +2,9 @@
   <div
     class="user-card"
     :class="classes"
-    :style="style"
   >
+    <div :class="{ 'hide-bio': hideBio }" :style="style" class="background-image">
+    </div>
     <div class="panel-heading">
       <div class="user-info">
         <div class="container">
@@ -298,7 +299,7 @@
 @import '../../_variables.scss';
 
 .user-card {
-  background-size: cover;
+  position: relative;
 
   .panel-heading {
     padding: .5em 0;
@@ -307,14 +308,35 @@
     background: transparent;
     flex-direction: column;
     align-items: stretch;
+    // create new stacking context
+    position: relative;
   }
 
   .panel-body {
     word-wrap: break-word;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
     border-bottom-right-radius: inherit;
     border-bottom-left-radius: inherit;
+    // create new stacking context
+    position: relative;
+  }
+
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
+          linear-gradient(to top, white, white);
+    // Autoprefixed seem to ignore this one, and also syntax is different
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    background-size: cover;
+    mask-size: 100% 60%;
+
+    &.hide-bio {
+      mask-size: 100% 40px;
+    }
   }
 
   p {