diff options
Diffstat (limited to 'src/components/update_notification')
3 files changed, 156 insertions, 31 deletions
diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js index 6b8665dd..1dd771eb 100644 --- a/src/components/update_notification/update_notification.js +++ b/src/components/update_notification/update_notification.js @@ -10,15 +10,49 @@ library.add( faTimes ) -const SettingsModal = { +const CURRENT_UPDATE_COUNTER = 1 + +const UpdateNotification = { data () { return { - pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox + pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox, + showingMore: true, + contentHeight: 0 } }, components: { Modal + }, + computed: { + pleromaTanStyles () { + return { + 'shape-outside': 'url(' + this.pleromaTanVariant + ')' + } + }, + shouldShow () { + return this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER && + !this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs + } + }, + methods: { + toggleShow () { + this.showingMore = !this.showingMore + }, + neverShowAgain () { + this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER }) + this.$store.commit('setFlag', { flag: 'dontShowUpdateNotifs', value: 1 }) + this.$store.dispatch('pushServerSideStorage') + }, + dismiss () { + this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER }) + this.$store.dispatch('pushServerSideStorage') + } + }, + mounted () { + setTimeout(() => { + this.contentHeight = this.$refs.content.offsetHeight + }, 10) } } -export default SettingsModal +export default UpdateNotification diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss index 5fd9eb9b..594f4c6b 100644 --- a/src/components/update_notification/update_notification.scss +++ b/src/components/update_notification/update_notification.scss @@ -1,5 +1,13 @@ @import 'src/_variables.scss'; +.UpdateNotification { + overflow: hidden; +} .UpdateNotificationModal { + --__top-fringe: 18em; // how much pleroma-tan should stick her head above + --__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant + --__right-fringe: 8em; + + font-size: 15px; /* Explanation: * Modal is positioned vertically centered. * 100vh - 100% = Distance between modal's top+bottom boundaries and screen @@ -8,27 +16,90 @@ * bottom of the screen * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible */ - transform: translateY(calc(((100vh - 100%) / 2 + 5%))); - max-width: 90vh; - width: 30em; position: relative; + transition: transform; + transition-timing-function: ease-in-out; + transition-duration: 500ms; + + .text { + width: 40em; + padding-left: 1em; + } @media all and (max-width: 800px) { /* For mobile, the modal takes 100% of the available screen. This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. */ - transform: translateY(calc(100% - 50px)); + width: 100vw; + } + + @media all and (max-height: 600px) { + display: none; } - .panel-body > p { - width: calc(100% - 10em) + + .content { + overflow: hidden; + margin-top: calc(-1 * var(--__top-fringe)); + margin-bottom: calc(-1 * var(--__bottom-fringe)); + margin-right: calc(-1 * var(--__right-fringe)); + } + + .panel-body { + border-width: 0 0 1px 0; + border-style: solid; + border-color: var(--border, $fallback--border); + } + + .panel-footer { + z-index: 22; + position: relative; + border-width: 0; + grid-template-columns: auto; } .pleroma-tan { - max-width: 20em; - max-height: 40em; - position: absolute; - right: -5em; - top: -10em; - z-index: 10; + object-fit: cover; + object-position: top; + transition: position, left, right, top, bottom, max-width, max-height; + transition-timing-function: ease-in-out; + transition-duration: 500ms; + width: 25em; + float: right; + z-index: 20; + position: relative; + shape-margin: 0.5em; + } + + .spacer-top { + min-height: var(--__top-fringe); + } + + .spacer-bottom { + min-height: var(--__bottom-fringe); + } + + .extra-info { + transition: max-height, padding, height; + transition-timing-function: ease-in-out; + transition-duration: 500ms; + max-height: auto; + height: auto; + } + + &.-peek { + transform: translateY(calc(((100vh - 100%) / 2))); + + .pleroma-tan { + float: right; + z-index: 10; + shape-image-threshold: 0.7; + } + + .extra-info { + max-height: 0; + height: 0; + display: none; + overflow: hidden; + } } } diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue index e7118d81..793966eb 100644 --- a/src/components/update_notification/update_notification.vue +++ b/src/components/update_notification/update_notification.vue @@ -1,36 +1,56 @@ <template> <Modal - :is-open="true" + :is-open="shouldShow" class="UpdateNotification" - :class="{ peek: modalPeeked }" :no-background="true" > - <div class="UpdateNotificationModal panel"> + <div + class="UpdateNotificationModal panel" + :class="{ '-peek': !showingMore }" + > <div class="panel-heading"> <span class="title"> {{ $t('update.big_update_title') }} </span> </div> <div class="panel-body"> - <p> - {{ $t('update.big_update_content') }} - </p> - <p> + <div class="content" ref="content"> + <img class="pleroma-tan" :src="pleromaTanVariant" :style="pleromaTanStyles"/> + <div class="spacer-top"/> + <div class="text"> + <p> + {{ $t('update.big_update_content') }} + </p> + <p class="extra-info"> + {{ $t('update.update_bugs') }} + </p> + <p class="extra-info"> + {{ $t('update.update_changelog') }} + </p> + </div> + <div class="spacer-bottom"/> + </div> + </div> + <div class="panel-footer"> + <button + class="button-default" + @click.prevent="neverShowAgain" + > + {{ $t("general.never_show_again") }} + </button> <button - class="button-unstyled -link tall-status-hider" + class="button-default" @click.prevent="toggleShowMore" - > + v-if="!showingMore" + > {{ $t("general.show_more") }} </button> - {{ ' ' }} <button - class="button-unstyled -link tall-status-hider" - @click.prevent="toggleShowMore" - > - {{ $t("general.never_show_again") }} + class="button-default" + @click.prevent="dismiss" + > + {{ $t("general.dismiss") }} </button> - </p> - <img class="pleroma-tan" :src="pleromaTanVariant"/> </div> </div> </Modal> |