diff options
Diffstat (limited to 'src/components/update_notification')
3 files changed, 28 insertions, 16 deletions
diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js index 609842c4..ddf379f5 100644 --- a/src/components/update_notification/update_notification.js +++ b/src/components/update_notification/update_notification.js @@ -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 @@ -15,9 +17,9 @@ export const CURRENT_UPDATE_COUNTER = 1 const UpdateNotification = { data () { return { + showingImage: false, pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox, - showingMore: false, - contentHeight: 0 + showingMore: false } }, components: { @@ -25,13 +27,9 @@ const UpdateNotification = { }, computed: { pleromaTanStyles () { + const mask = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask return { - 'shape-outside': 'url(' + this.pleromaTanVariant + ')' - } - }, - dynamicStyles () { - return { - '--____extraInfoGroupHeight': this.contentHeight + 'px' + 'shape-outside': 'url(' + mask + ')' } }, shouldShow () { @@ -57,9 +55,14 @@ const UpdateNotification = { } }, mounted () { - setTimeout(() => { - this.contentHeight = this.$refs.animatedText.scrollHeight - }, 1000) + this.contentHeightNoImage = this.$refs.animatedText.scrollHeight + + // Workaround to get the text height only after mask loaded. A bit hacky. + const newImg = new Image() + newImg.onload = () => { + setTimeout(() => { this.showingImage = true }, 100) + } + newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask } } diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss index 8cad1bc7..ce8129d0 100644 --- a/src/components/update_notification/update_notification.scss +++ b/src/components/update_notification/update_notification.scss @@ -35,6 +35,12 @@ margin-top: calc(-1 * var(--__top-fringe)); margin-bottom: calc(-1 * var(--__bottom-fringe)); margin-right: calc(-1 * var(--__right-fringe)); + + &.-noImage { + .text { + padding-right: var(--__right-fringe); + } + } } .panel-body { @@ -75,9 +81,9 @@ .extra-info-group { transition: max-height, padding, height; - transition-timing-function: ease-in-out; - transition-duration: 500ms; - max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding + transition-timing-function: ease-in; + transition-duration: 700ms; + max-height: 70vh; mask: linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat, linear-gradient(to top, white, white); diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue index 00841af2..78e70a74 100644 --- a/src/components/update_notification/update_notification.vue +++ b/src/components/update_notification/update_notification.vue @@ -7,7 +7,6 @@ <div class="UpdateNotificationModal panel" :class="{ '-peek': !showingMore }" - :style="dynamicStyles" > <div class="panel-heading"> <span class="title"> @@ -15,8 +14,12 @@ </span> </div> <div class="panel-body"> - <div class="content"> + <div + class="content" + :class="{ '-noImage': !showingImage }" + > <img + v-if="showingImage" class="pleroma-tan" :src="pleromaTanVariant" :style="pleromaTanStyles" |