From f0cb6fe03faa1994fb667255d4051fe611b2afbc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Sep 2019 01:16:54 +0300 Subject: [PATCH 1/2] 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 570ace13f..8c60916b0 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 472db35b7..8c07fd276 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 5c139d0e2..8bc7c3825 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -46,6 +46,7 @@
Date: Sun, 15 Sep 2019 02:14:40 +0300 Subject: [PATCH 2/2] update status/user card to use same gradient mask fading effect instead of background hack --- src/components/status/status.vue | 16 ++++++++------ src/components/user_card/user_card.js | 11 +--------- src/components/user_card/user_card.vue | 30 ++++++++++++++++++++++---- 3 files changed, 37 insertions(+), 20 deletions(-) diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 771615f39..93f37a492 100644 --- a/src/components/status/status.vue +++ b/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 { diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 82d3b8359..e41a31807 100644 --- a/src/components/user_card/user_card.js +++ b/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(', ') } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index fc18e240f..c26262603 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -2,8 +2,9 @@
+
+