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:
commit
d8730cad60
BIN
src/assets/pleromatan_apology_fox_mask.png
Normal file
BIN
src/assets/pleromatan_apology_fox_mask.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/pleromatan_apology_mask.png
Normal file
BIN
src/assets/pleromatan_apology_mask.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user