Merge remote-tracking branch 'origin/develop' into scrolltotop

* origin/develop: (89 commits)
  Update dependency @vuelidate/validators to v2.0.0
  Remove lolex package
  Remove diff package
  Pin dependencies
  Update dependency sass to v1.55.0
  Make suggestor suggest according to cldr annotations
  Make chunks named
  Use import() for emoji.json
  Add regional indicators
  Support filtering by keywords from cldr
  Display localized unicode emoji names
  Load unicode emoji annotations
  Extract language list to its own file
  using the half-shit approach since proper approach is full-shit
  Make unicode emoji phrases match with _
  Use console.info
  Fix non-square emojis being truncated
  Fix emoji picker lint
  Fix emoji picker lint
  Tweak efficiency when changing filter keywords in emoji picker
  ...

3 files changed, 28 insertions, 16 deletions

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index 609842c4..ddf379f5 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -2,6 +2,8 @@ import Modal from 'src/components/modal/modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import pleromaTan from 'src/assets/pleromatan_apology.png'
 import pleromaTanFox from 'src/assets/pleromatan_apology_fox.png'
+import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
+import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
 
 import {
   faTimes
@@ -15,9 +17,9 @@ export const CURRENT_UPDATE_COUNTER = 1
 const UpdateNotification = {
   data () {
     return {
+      showingImage: false,
       pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
-      showingMore: false,
-      contentHeight: 0
+      showingMore: false
     }
   },
   components: {
@@ -25,13 +27,9 @@ const UpdateNotification = {
   },
   computed: {
     pleromaTanStyles () {
+      const mask = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
       return {
-        'shape-outside': 'url(' + this.pleromaTanVariant + ')'
-      }
-    },
-    dynamicStyles () {
-      return {
-        '--____extraInfoGroupHeight': this.contentHeight + 'px'
+        'shape-outside': 'url(' + mask + ')'
       }
     },
     shouldShow () {
@@ -57,9 +55,14 @@ const UpdateNotification = {
     }
   },
   mounted () {
-    setTimeout(() => {
-      this.contentHeight = this.$refs.animatedText.scrollHeight
-    }, 1000)
+    this.contentHeightNoImage = this.$refs.animatedText.scrollHeight
+
+    // Workaround to get the text height only after mask loaded. A bit hacky.
+    const newImg = new Image()
+    newImg.onload = () => {
+      setTimeout(() => { this.showingImage = true }, 100)
+    }
+    newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
   }
 }
 
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index 8cad1bc7..ce8129d0 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -35,6 +35,12 @@
     margin-top: calc(-1 * var(--__top-fringe));
     margin-bottom: calc(-1 * var(--__bottom-fringe));
     margin-right: calc(-1 * var(--__right-fringe));
+
+    &.-noImage {
+      .text {
+        padding-right: var(--__right-fringe);
+      }
+    }
   }
 
   .panel-body {
@@ -75,9 +81,9 @@
 
   .extra-info-group {
     transition: max-height, padding, height;
-    transition-timing-function: ease-in-out;
-    transition-duration: 500ms;
-    max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding
+    transition-timing-function: ease-in;
+    transition-duration: 700ms;
+    max-height: 70vh;
     mask:
       linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
       linear-gradient(to top, white, white);
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 00841af2..78e70a74 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -7,7 +7,6 @@
     <div
       class="UpdateNotificationModal panel"
       :class="{ '-peek': !showingMore }"
-      :style="dynamicStyles"
     >
       <div class="panel-heading">
         <span class="title">
@@ -15,8 +14,12 @@
         </span>
       </div>
       <div class="panel-body">
-        <div class="content">
+        <div
+          class="content"
+          :class="{ '-noImage': !showingImage }"
+        >
           <img
+            v-if="showingImage"
             class="pleroma-tan"
             :src="pleromaTanVariant"
             :style="pleromaTanStyles"