using the half-shit approach since proper approach is full-shit
This commit is contained in:
parent
d8730cad60
commit
fa1d9f3fb4
@ -17,9 +17,9 @@ export const CURRENT_UPDATE_COUNTER = 1
|
|||||||
const UpdateNotification = {
|
const UpdateNotification = {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
showingImage: false,
|
||||||
pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
|
pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
|
||||||
showingMore: false,
|
showingMore: false
|
||||||
contentHeight: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
@ -32,11 +32,6 @@ const UpdateNotification = {
|
|||||||
'shape-outside': 'url(' + mask + ')'
|
'shape-outside': 'url(' + mask + ')'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dynamicStyles () {
|
|
||||||
return {
|
|
||||||
'--____extraInfoGroupHeight': this.contentHeight + 'px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
shouldShow () {
|
shouldShow () {
|
||||||
return !this.$store.state.instance.disableUpdateNotification &&
|
return !this.$store.state.instance.disableUpdateNotification &&
|
||||||
this.$store.state.users.currentUser &&
|
this.$store.state.users.currentUser &&
|
||||||
@ -60,12 +55,12 @@ const UpdateNotification = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
this.contentHeightNoImage = this.$refs.animatedText.scrollHeight
|
||||||
|
|
||||||
// Workaround to get the text height only after mask loaded. A bit hacky.
|
// Workaround to get the text height only after mask loaded. A bit hacky.
|
||||||
const newImg = new Image()
|
const newImg = new Image()
|
||||||
newImg.onload = () => {
|
newImg.onload = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => { this.showingImage = true }, 100)
|
||||||
this.contentHeight = this.$refs.animatedText.scrollHeight
|
|
||||||
}, 100)
|
|
||||||
}
|
}
|
||||||
newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
|
newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
|
||||||
}
|
}
|
||||||
|
@ -35,6 +35,12 @@
|
|||||||
margin-top: calc(-1 * var(--__top-fringe));
|
margin-top: calc(-1 * var(--__top-fringe));
|
||||||
margin-bottom: calc(-1 * var(--__bottom-fringe));
|
margin-bottom: calc(-1 * var(--__bottom-fringe));
|
||||||
margin-right: calc(-1 * var(--__right-fringe));
|
margin-right: calc(-1 * var(--__right-fringe));
|
||||||
|
|
||||||
|
&.-noImage {
|
||||||
|
.text {
|
||||||
|
padding-right: var(--__right-fringe);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-body {
|
.panel-body {
|
||||||
@ -75,9 +81,9 @@
|
|||||||
|
|
||||||
.extra-info-group {
|
.extra-info-group {
|
||||||
transition: max-height, padding, height;
|
transition: max-height, padding, height;
|
||||||
transition-timing-function: ease-in-out;
|
transition-timing-function: ease-in;
|
||||||
transition-duration: 500ms;
|
transition-duration: 700ms;
|
||||||
max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding
|
max-height: 70vh;
|
||||||
mask:
|
mask:
|
||||||
linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
|
linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
|
||||||
linear-gradient(to top, white, white);
|
linear-gradient(to top, white, white);
|
||||||
|
@ -7,7 +7,6 @@
|
|||||||
<div
|
<div
|
||||||
class="UpdateNotificationModal panel"
|
class="UpdateNotificationModal panel"
|
||||||
:class="{ '-peek': !showingMore }"
|
:class="{ '-peek': !showingMore }"
|
||||||
:style="dynamicStyles"
|
|
||||||
>
|
>
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<span class="title">
|
<span class="title">
|
||||||
@ -15,8 +14,12 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="content">
|
<div
|
||||||
|
class="content"
|
||||||
|
:class="{ '-noImage': !showingImage }"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
|
v-if="showingImage"
|
||||||
class="pleroma-tan"
|
class="pleroma-tan"
|
||||||
:src="pleromaTanVariant"
|
:src="pleromaTanVariant"
|
||||||
:style="pleromaTanStyles"
|
:style="pleromaTanStyles"
|
||||||
|
Loading…
Reference in New Issue
Block a user