From 79efe0646cb6fc88952e33e13a8ce61205d3aad6 Mon Sep 17 00:00:00 2001
From: jared <jaredrmain@gmail.com>
Date: Tue, 2 Apr 2019 10:53:33 -0400
Subject: merge develop

---
 src/components/status/status.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1f415534..690e8318 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -98,16 +98,16 @@
           </div>
 
           <div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
-            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">Show more</a>
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
-            <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">Show less</a>
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">{{$t("general.show_more")}}</a>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml"></div>
+            <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">{{$t("general.show_less")}}</a>
           </div>
           <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else>
-            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a>
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideSubjectStatus"></div>
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml" v-if="!hideSubjectStatus"></div>
             <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
-            <a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a>
-            <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
+            <a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
+            <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">{{$t("general.show_less")}}</a>
           </div>
 
           <div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body">
-- 
cgit v1.2.3-70-g09d2


From 14df84d89bfc58f564697b7d72d7c66134c64697 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 8 Sep 2019 15:51:17 +0300
Subject: fixed some bugs, added spam mode, minor collateral fixes

---
 src/components/emoji_input/emoji_input.js          | 28 +++++++++++++-----
 src/components/emoji_picker/emoji_picker.js        |  7 +++--
 src/components/emoji_picker/emoji_picker.scss      | 33 +++++++++++++++++-----
 src/components/emoji_picker/emoji_picker.vue       | 16 +++++++++--
 .../post_status_form/post_status_form.js           |  2 +-
 .../post_status_form/post_status_form.vue          |  2 +-
 src/components/status/status.vue                   |  2 +-
 src/components/user_panel/user_panel.vue           |  2 +-
 src/i18n/en.json                                   |  1 +
 9 files changed, 69 insertions(+), 24 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 5ff27b20..b1640753 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -77,7 +77,9 @@ const EmojiInput = {
       caret: 0,
       focused: false,
       blurTimeout: null,
-      showPicker: false
+      showPicker: false,
+      spamMode: false,
+      disableClickOutside: false
     }
   },
   components: {
@@ -100,7 +102,7 @@ const EmojiInput = {
         }))
     },
     showSuggestions () {
-      return this.focused && this.suggestions && this.suggestions.length > 0
+      return this.focused && this.suggestions && this.suggestions.length > 0 && !this.showPicker
     },
     textAtCaret () {
       return (this.wordAtCaret || {}).word || ''
@@ -142,6 +144,13 @@ const EmojiInput = {
   methods: {
     triggerShowPicker () {
       this.showPicker = true
+      // This temporarily disables "click outside" handler
+      // since external trigger also means click originates
+      // from outside, thus preventing picker from opening
+      this.disableClickOutside = true
+      setTimeout(() => {
+        this.disableClickOutside = false
+      }, 0)
     },
     togglePicker () {
       this.showPicker = !this.showPicker
@@ -151,12 +160,13 @@ const EmojiInput = {
       this.$emit('input', newValue)
       this.caret = 0
     },
-    insert (insertion) {
+    insert ({ insertion, spamMode }) {
       const newValue = [
         this.value.substring(0, this.caret),
         insertion,
         this.value.substring(this.caret)
       ].join('')
+      this.spamMode = spamMode
       this.$emit('input', newValue)
       const position = this.caret + insertion.length
 
@@ -191,7 +201,7 @@ const EmojiInput = {
     },
     cycleBackward (e) {
       const len = this.suggestions.length || 0
-      if (len > 0) {
+      if (len > 1) {
         this.highlighted -= 1
         if (this.highlighted < 0) {
           this.highlighted = this.suggestions.length - 1
@@ -203,7 +213,7 @@ const EmojiInput = {
     },
     cycleForward (e) {
       const len = this.suggestions.length || 0
-      if (len > 0) {
+      if (len > 1) {
         this.highlighted += 1
         if (this.highlighted >= len) {
           this.highlighted = 0
@@ -234,7 +244,10 @@ const EmojiInput = {
         this.blurTimeout = null
       }
 
-      this.showPicker = false
+      console.log(this.spamMode)
+      if (!this.spamMode) {
+        this.showPicker = false
+      }
       this.focused = true
       this.setCaret(e)
       this.resize()
@@ -280,7 +293,8 @@ const EmojiInput = {
       this.resize()
       this.$emit('input', e.target.value)
     },
-    onClickOutside () {
+    onClickOutside (e) {
+      if (this.disableClickOutside) return
       this.showPicker = false
     },
     onStickerUploaded (e) {
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 0a64f759..bce5026e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -13,9 +13,11 @@ const EmojiPicker = {
   },
   data () {
     return {
+      labelKey: String(Math.random() * 100000),
       keyword: '',
       activeGroup: 'custom',
-      showingStickers: false
+      showingStickers: false,
+      spamMode: false
     }
   },
   components: {
@@ -24,8 +26,7 @@ const EmojiPicker = {
   methods: {
     onEmoji (emoji) {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
-      this.$emit('emoji', ` ${value} `)
-      this.open = false
+      this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 6c13e82b..079eb362 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -10,29 +10,48 @@
   margin: 0 !important;
   z-index: 1;
 
-  .panel-body {
+  .spam-mode {
+    padding: 7px;
+    line-height: normal;
+  }
+  .spam-mode-label {
+    padding: 7px;
+  }
+
+  .heading {
+    display: flex;
+    height: 32px;
+    padding: 10px 7px 5px;
+  }
+
+  .content {
     display: flex;
     flex-direction: column;
     flex: 1 1 0;
     min-height: 0px;
   }
 
+  .emoji-tabs {
+    flex-grow: 1;
+  }
+
   .additional-tabs {
     border-left: 1px solid;
     border-left-color: $fallback--icon;
     border-left-color: var(--icon, $fallback--icon);
-    padding-left: 5px;
+    padding-left: 7px;
     flex: 0 0 0;
   }
 
-  .emoji-tabs {
-    flex: 1 1 0;
-  }
-
   .additional-tabs,
   .emoji-tabs {
+    display: block;
+    min-width: 0;
+    flex-basis: auto;
+    flex-shrink: 1;
+
     &-item {
-      padding: 0 5px;
+      padding: 0 7px;
       cursor: pointer;
       font-size: 24px;
 
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 12b1569e..901520aa 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="emoji-picker panel panel-default">
-    <div class="panel-heading">
+  <div class="emoji-picker panel panel-default panel-body">
+    <div class="heading">
       <span class="emoji-tabs">
         <span
           v-for="group in emojis"
@@ -30,7 +30,7 @@
         </span>
       </span>
     </div>
-    <div class="panel-body">
+    <div class="content">
       <div
         class="emoji-content"
         :class="{hidden: showingStickers}"
@@ -74,6 +74,16 @@
             </span>
           </div>
         </div>
+        <div
+          class="spam-mode"
+          >
+          <input
+            :id="labelKey + 'spam-mode'"
+            v-model="spamMode"
+            type="checkbox"
+            >
+          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">{{ $t('emoji.spam') }}</label>
+        </div>
       </div>
       <div
         v-if="showingStickers"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 1359e75a..d468be76 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -282,7 +282,7 @@ const PostStatusForm = {
         target.style.height = null
       }
     },
-    showEmoji () {
+    showEmojiPicker () {
       this.$refs['textarea'].focus()
       this.$refs['emoji-input'].triggerShowPicker()
     },
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index ad2c2218..026cb8fe 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -170,7 +170,7 @@
             <i
               :title="$t('emoji.add_emoji')"
               class="icon-smile btn btn-default"
-              @click.stop.prevent="showEmoji"
+              @click="showEmojiPicker"
             />
           </div>
           <div
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 64218f6e..771615f3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -413,7 +413,7 @@
         v-if="replying"
         class="container"
       >
-        <post-status-form
+        <PostStatusForm
           class="reply-body"
           :reply-to="status.id"
           :attentions="status.attentions"
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index c92630e3..5cdb2914 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -11,7 +11,7 @@
         rounded="top"
       />
       <div class="panel-footer">
-        <post-status-form v-if="user" />
+        <PostStatusForm v-if="user" />
       </div>
     </div>
     <auth-form
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 12920b92..e74469ed 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -109,6 +109,7 @@
   "emoji": {
     "stickers": "Stickers",
     "emoji": "Emoji",
+    "spam": "Keep open after adding emoji",
     "search_emoji": "Search for an emoji",
     "add_emoji": "Insert emoji",
     "custom": "Custom emoji",
-- 
cgit v1.2.3-70-g09d2


From 4f88bb4ea1ed6c4b9fa0ee6a388dd9ba19ee910e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 8 Sep 2019 17:01:28 +0300
Subject: scale emoji on hover

---
 src/components/status/status.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 771615f3..5e849dd7 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -705,6 +705,14 @@ $status-margin: 0.75em;
       &.emoji {
         width: 32px;
         height: 32px;
+        transition: transform 200ms;
+        transform: scale(1);
+        z-index: 1;
+
+        &:hover {
+          transform: scale(3);
+          z-index: 2;
+        }
       }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 9146bee7aa7229f041bcc77814d9fa40809329a6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 8 Sep 2019 21:18:05 +0300
Subject: better hitbox for status emoji

---
 src/components/status/status.vue                   | 23 ++++++++++++++++------
 .../entity_normalizer/entity_normalizer.service.js |  2 +-
 .../entity_normalizer/entity_normalizer.spec.js    |  4 ++--
 3 files changed, 20 insertions(+), 9 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5e849dd7..a0756ae4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -696,6 +696,22 @@ $status-margin: 0.75em;
     line-height: 1.4em;
     white-space: pre-wrap;
 
+    .emoji-container {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      z-index: 1;
+
+      &:hover {
+        z-index: 2;
+
+        .emoji {
+          transform: scale(3);
+          z-index: 2;
+        }
+      }
+    }
+
     img, video {
       max-width: 100%;
       max-height: 400px;
@@ -707,12 +723,7 @@ $status-margin: 0.75em;
         height: 32px;
         transition: transform 200ms;
         transform: scale(1);
-        z-index: 1;
-
-        &:hover {
-          transform: scale(3);
-          z-index: 2;
-        }
+        pointer-events: none;
       }
     }
 
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 6cc1851d..17b4a6e0 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -194,7 +194,7 @@ export const addEmojis = (string, emojis) => {
   return emojis.reduce((acc, emoji) => {
     return acc.replace(
       new RegExp(`:${emoji.shortcode}:`, 'g'),
-      `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
+      `<span class='emoji-container'><img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' /></span>`
     )
   }, string)
 }
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 20e03cb0..24aef5cd 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -323,9 +323,9 @@ describe('API Entities normalizer', () => {
 
   describe('MastoAPI emoji adder', () => {
     const emojis = makeMockEmojiMasto()
-    const imageHtml = '<img src="https://example.com/image.png" alt="image" title="image" class="emoji" />'
+    const imageHtml = '<span class="emoji-container"><img src="https://example.com/image.png" alt="image" title="image" class="emoji" /></span>'
       .replace(/"/g, '\'')
-    const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" />'
+    const thinkHtml = '<span class="emoji-container"><img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" /></span>'
       .replace(/"/g, '\'')
 
     it('correctly replaces shortcodes in supplied string', () => {
-- 
cgit v1.2.3-70-g09d2


From 0d8b68632b02565e5ba7a833e91e41daabb4a1dc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Sep 2019 19:15:22 +0300
Subject: Remove emoji zoom

---
 src/components/emoji_picker/emoji_picker.js          |  7 -------
 src/components/emoji_picker/emoji_picker.scss        | 19 -------------------
 src/components/emoji_picker/emoji_picker.vue         | 20 ++------------------
 src/components/status/status.vue                     | 19 -------------------
 .../entity_normalizer/entity_normalizer.service.js   |  2 +-
 .../entity_normalizer/entity_normalizer.spec.js      |  4 ++--
 6 files changed, 5 insertions(+), 66 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d9d41bf6..bce5026e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -17,7 +17,6 @@ const EmojiPicker = {
       keyword: '',
       activeGroup: 'custom',
       showingStickers: false,
-      zoomEmoji: false,
       spamMode: false
     }
   },
@@ -61,12 +60,6 @@ const EmojiPicker = {
     },
     onStickerUploadFailed (e) {
       this.$emit('sticker-upload-failed', e)
-    },
-    setZoomEmoji (e, emoji) {
-      this.zoomEmoji = emoji
-      const { x, y } = e.target.getBoundingClientRect()
-      this.$refs['zoom-portal'].style.left = (x - 32) + 'px'
-      this.$refs['zoom-portal'].style.top = (y - 32) + 'px'
     }
   },
   watch: {
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 7e76aa52..472db35b 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -10,21 +10,6 @@
   margin: 0 !important;
   z-index: 1;
 
-  .zoom-portal {
-    position: fixed;
-    pointer-events: none;
-    width: 96px;
-    height: 96px;
-    font-size: 96px;
-    line-height: 96px;
-    z-index: 10;
-    img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
   .spam-mode {
     padding: 7px;
     line-height: normal;
@@ -150,10 +135,6 @@
 
       cursor: pointer;
 
-      &:hover {
-        opacity: 0
-      }
-
       img {
         object-fit: contain;
         max-width: 100%;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 1c91c8b7..901520aa 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -65,16 +65,12 @@
               :title="emoji.displayText"
               class="emoji-item"
               @click.stop.prevent="onEmoji(emoji)"
-              @mouseenter="setZoomEmoji($event, emoji)"
-              @mouseleave="setZoomEmoji($event, false)"
             >
-              <span v-if="!emoji.imageUrl">
-                {{ emoji.replacement }}
-              </span>
+              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
               <img
                 v-else
                 :src="emoji.imageUrl"
-                >
+              >
             </span>
           </div>
         </div>
@@ -99,18 +95,6 @@
         />
       </div>
     </div>
-    <div ref="zoom-portal" class="zoom-portal">
-      <span v-if="zoomEmoji">
-        <span v-if="!zoomEmoji.imageUrl">
-          {{ zoomEmoji.replacement }}
-        </span>
-        <img
-          v-else
-          :key="zoomEmoji.imageUrl"
-          :src="zoomEmoji.imageUrl"
-          >
-      </span>
-    </div>
   </div>
 </template>
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a0756ae4..771615f3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -696,22 +696,6 @@ $status-margin: 0.75em;
     line-height: 1.4em;
     white-space: pre-wrap;
 
-    .emoji-container {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-      z-index: 1;
-
-      &:hover {
-        z-index: 2;
-
-        .emoji {
-          transform: scale(3);
-          z-index: 2;
-        }
-      }
-    }
-
     img, video {
       max-width: 100%;
       max-height: 400px;
@@ -721,9 +705,6 @@ $status-margin: 0.75em;
       &.emoji {
         width: 32px;
         height: 32px;
-        transition: transform 200ms;
-        transform: scale(1);
-        pointer-events: none;
       }
     }
 
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 17b4a6e0..6cc1851d 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -194,7 +194,7 @@ export const addEmojis = (string, emojis) => {
   return emojis.reduce((acc, emoji) => {
     return acc.replace(
       new RegExp(`:${emoji.shortcode}:`, 'g'),
-      `<span class='emoji-container'><img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' /></span>`
+      `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
     )
   }, string)
 }
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 24aef5cd..20e03cb0 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -323,9 +323,9 @@ describe('API Entities normalizer', () => {
 
   describe('MastoAPI emoji adder', () => {
     const emojis = makeMockEmojiMasto()
-    const imageHtml = '<span class="emoji-container"><img src="https://example.com/image.png" alt="image" title="image" class="emoji" /></span>'
+    const imageHtml = '<img src="https://example.com/image.png" alt="image" title="image" class="emoji" />'
       .replace(/"/g, '\'')
-    const thinkHtml = '<span class="emoji-container"><img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" /></span>'
+    const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" />'
       .replace(/"/g, '\'')
 
     it('correctly replaces shortcodes in supplied string', () => {
-- 
cgit v1.2.3-70-g09d2


From d2fe79782119c061173c1b07753f634f0766bae9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Sep 2019 02:14:40 +0300
Subject: 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(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 771615f3..93f37a49 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 82d3b835..e41a3180 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 fc18e240..c2626260 100644
--- a/src/components/user_card/user_card.vue
+++ b/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 {
-- 
cgit v1.2.3-70-g09d2

