diff --git a/src/assets/pleromatan_apology_fox_mask.png b/src/assets/pleromatan_apology_fox_mask.png new file mode 100644 index 0000000000..4d1990d522 Binary files /dev/null and b/src/assets/pleromatan_apology_fox_mask.png differ diff --git a/src/assets/pleromatan_apology_mask.png b/src/assets/pleromatan_apology_mask.png new file mode 100644 index 0000000000..18adafff4b Binary files /dev/null and b/src/assets/pleromatan_apology_mask.png differ diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js index 609842c43d..06241688f1 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 @@ -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 } }