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
This commit is contained in:
HJ 2022-09-14 15:11:18 +00:00
commit d8730cad60
3 changed files with 12 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -2,6 +2,8 @@ import Modal from 'src/components/modal/modal.vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import pleromaTan from 'src/assets/pleromatan_apology.png' import pleromaTan from 'src/assets/pleromatan_apology.png'
import pleromaTanFox from 'src/assets/pleromatan_apology_fox.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 { import {
faTimes faTimes
@ -25,8 +27,9 @@ const UpdateNotification = {
}, },
computed: { computed: {
pleromaTanStyles () { pleromaTanStyles () {
const mask = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
return { return {
'shape-outside': 'url(' + this.pleromaTanVariant + ')' 'shape-outside': 'url(' + mask + ')'
} }
}, },
dynamicStyles () { dynamicStyles () {
@ -57,9 +60,14 @@ const UpdateNotification = {
} }
}, },
mounted () { mounted () {
// Workaround to get the text height only after mask loaded. A bit hacky.
const newImg = new Image()
newImg.onload = () => {
setTimeout(() => { setTimeout(() => {
this.contentHeight = this.$refs.animatedText.scrollHeight this.contentHeight = this.$refs.animatedText.scrollHeight
}, 1000) }, 100)
}
newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
} }
} }