From f0cb6fe03faa1994fb667255d4051fe611b2afbc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Sep 2019 01:16:54 +0300
Subject: [PATCH] Fixed scrollability not being obvious, added fade effect

---
 src/components/emoji_picker/emoji_picker.js   |  8 ++++++++
 src/components/emoji_picker/emoji_picker.scss | 18 +++++++++++++++++-
 src/components/emoji_picker/emoji_picker.vue  |  1 +
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 570ace13..8c60916b 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/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]
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 472db35b..8c07fd27 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/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 {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 5c139d0e..8bc7c382 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -46,6 +46,7 @@
         <div
           ref="emoji-groups"
           class="emoji-groups"
+          :class="groupsScrolledClass"
           @scroll="scrolledGroup"
         >
           <div