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 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 () {
// 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
}, 1000)
}, 100)
}
newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
}
}