moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
parent 2bea5d8128 6e1639cc1e
commit d8730cad60
3 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/pleromatan_apology_fox_mask.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/pleromatan_apology_mask.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

16
src/components/update_notification/update_notification.js
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 () {
setTimeout(() => { // Workaround to get the text height only after mask loaded. A bit hacky.
this.contentHeight = this.$refs.animatedText.scrollHeight const newImg = new Image()
}, 1000) newImg.onload = () => {
setTimeout(() => {
this.contentHeight = this.$refs.animatedText.scrollHeight
}, 100)
}
newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
} }
} }