pleroma-fe

commit: d8730cad602fe5ba7faf7cefc4a1a67cd0896d9d
parent 2bea5d81288dcf4e231d557b5f1ef338fc1f78f6
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date:   Wed, 14 Sep 2022 15:11:18 +0000

Merge branch 'apology-fixes' into 'develop'

add a mask to load shape to flow text around quicker

Closes #1183

See merge request pleroma/pleroma-fe!1618
Diffstat:
A
src/assets/pleromatan_apology_fox_mask.png
0

A
src/assets/pleromatan_apology_mask.png
0

M
src/components/update_notification/update_notification.js
16
++++++++++++----

3 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/src/assets/pleromatan_apology_fox_mask.png b/src/assets/pleromatan_apology_fox_mask.png
Binary files differ.
diff --git a/src/assets/pleromatan_apology_mask.png b/src/assets/pleromatan_apology_mask.png
Binary files differ.
diff --git 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
@@ -25,8 +27,9 @@ const UpdateNotification = {
   },
   computed: {
     pleromaTanStyles () {
+      const mask = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
       return {
-        'shape-outside': 'url(' + this.pleromaTanVariant + ')'
+        'shape-outside': 'url(' + mask + ')'
       }
     },
     dynamicStyles () {
@@ -57,9 +60,14 @@ const UpdateNotification = {
     }
   },
   mounted () {
-    setTimeout(() => {
-      this.contentHeight = this.$refs.animatedText.scrollHeight
-    }, 1000)
+    // Workaround to get the text height only after mask loaded. A bit hacky.
+    const newImg = new Image()
+    newImg.onload = () => {
+      setTimeout(() => {
+        this.contentHeight = this.$refs.animatedText.scrollHeight
+      }, 100)
+    }
+    newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
   }
 }