From f0cb6fe03faa1994fb667255d4051fe611b2afbc Mon Sep 17 00:00:00 2001 From: Henry Jameson 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 @@