Merge branch 'been-awhile' into shigusegubu-vue3
* been-awhile: move pleroma-tan just a tiny bit lower art credit lint proper animation don't let function access `this` lint proper links and fix user detection don't show to anons, make it possible to disable notification instance-wide Apply 2 suggestion(s) to 1 file(s) Apply 2 suggestion(s) to 1 file(s) lint unit test + some refactoring refactoring shadow debug handlers for now server-side storage for flags Update dependency vue-i18n to v9.2.0 initial scratch
This commit is contained in:
Henry Jameson
commit
bfb3b4d8dc
20 changed files with 745 additions and 41 deletions
|
|
@ -20,11 +20,11 @@
|
|||
<QuickFilterSettings
|
||||
v-if="!collapsable"
|
||||
:conversation="true"
|
||||
/>
|
||||
/>
|
||||
<QuickViewSettings
|
||||
v-if="!collapsable"
|
||||
:conversation="true"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<div class="conversation-body panel-body">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
|
||||
/><FAIcon icon="folder-tree"/> {{ $t('settings.conversation_display_tree_quick') }}
|
||||
/><FAIcon icon="folder-tree" /> {{ $t('settings.conversation_display_tree_quick') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<span
|
||||
class="menu-checkbox -radio"
|
||||
:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
|
||||
/><FAIcon icon="list"/> {{ $t('settings.conversation_display_linear_quick') }}
|
||||
/><FAIcon icon="list" /> {{ $t('settings.conversation_display_linear_quick') }}
|
||||
</button>
|
||||
<div
|
||||
role="separator"
|
||||
|
|
|
|||
66
src/components/update_notification/update_notification.js
Normal file
66
src/components/update_notification/update_notification.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
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 {
|
||||
faTimes
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
library.add(
|
||||
faTimes
|
||||
)
|
||||
|
||||
export const CURRENT_UPDATE_COUNTER = 1
|
||||
|
||||
const UpdateNotification = {
|
||||
data () {
|
||||
return {
|
||||
pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
|
||||
showingMore: false,
|
||||
contentHeight: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Modal
|
||||
},
|
||||
computed: {
|
||||
pleromaTanStyles () {
|
||||
return {
|
||||
'shape-outside': 'url(' + this.pleromaTanVariant + ')'
|
||||
}
|
||||
},
|
||||
dynamicStyles () {
|
||||
return {
|
||||
'--____extraInfoGroupHeight': this.contentHeight + 'px'
|
||||
}
|
||||
},
|
||||
shouldShow () {
|
||||
return !this.$store.state.instance.disableUpdateNotification &&
|
||||
this.$store.state.users.currentUser &&
|
||||
this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
|
||||
!this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleShow () {
|
||||
this.showingMore = !this.showingMore
|
||||
},
|
||||
neverShowAgain () {
|
||||
this.toggleShow()
|
||||
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.animatedText.scrollHeight
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
export default UpdateNotification
|
||||
107
src/components/update_notification/update_notification.scss
Normal file
107
src/components/update_notification/update_notification.scss
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
@import 'src/_variables.scss';
|
||||
.UpdateNotification {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.UpdateNotificationModal {
|
||||
--__top-fringe: 15em; // 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;
|
||||
position: relative;
|
||||
transition: transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 500ms;
|
||||
|
||||
.text {
|
||||
max-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.
|
||||
*/
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
@media all and (max-height: 600px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spacer-top {
|
||||
min-height: var(--__top-fringe);
|
||||
}
|
||||
|
||||
.spacer-bottom {
|
||||
min-height: var(--__bottom-fringe);
|
||||
}
|
||||
|
||||
.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
|
||||
mask:
|
||||
linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
}
|
||||
|
||||
.art-credit {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.-peek {
|
||||
/* Explanation:
|
||||
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
|
||||
* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
|
||||
*/
|
||||
transform: translateY(calc(((100vh - 100%) / 2)));
|
||||
|
||||
.pleroma-tan {
|
||||
float: right;
|
||||
z-index: 10;
|
||||
shape-image-threshold: 0.7;
|
||||
}
|
||||
|
||||
.extra-info-group {
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
src/components/update_notification/update_notification.vue
Normal file
100
src/components/update_notification/update_notification.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<Modal
|
||||
:is-open="!!shouldShow"
|
||||
class="UpdateNotification"
|
||||
:no-background="true"
|
||||
>
|
||||
<div
|
||||
class="UpdateNotificationModal panel"
|
||||
:class="{ '-peek': !showingMore }"
|
||||
:style="dynamicStyles"
|
||||
>
|
||||
<div class="panel-heading">
|
||||
<span class="title">
|
||||
{{ $t('update.big_update_title') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="content">
|
||||
<img
|
||||
class="pleroma-tan"
|
||||
:src="pleromaTanVariant"
|
||||
:style="pleromaTanStyles"
|
||||
>
|
||||
<div class="spacer-top" />
|
||||
<div class="text">
|
||||
<p>
|
||||
{{ $t('update.big_update_content') }}
|
||||
</p>
|
||||
<div
|
||||
ref="animatedText"
|
||||
class="extra-info-group"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="update.update_bugs"
|
||||
tag="p"
|
||||
>
|
||||
<template #pleromaGitlab>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://git.pleroma.social/"
|
||||
>{{ $t('update.update_bugs_gitlab') }}</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
keypath="update.update_changelog"
|
||||
tag="p"
|
||||
>
|
||||
<template #theFullChangelog>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://pleroma.social/announcements/"
|
||||
>{{ $t('update.update_changelog_here') }}</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<p class="art-credit">
|
||||
<i18n-t
|
||||
keypath="update.art_by"
|
||||
tag="small"
|
||||
>
|
||||
<template #linkToArtist>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://post.ebin.club/pipivovott"
|
||||
>pipivovott</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</p>
|
||||
</div>
|
||||
</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
|
||||
v-if="!showingMore"
|
||||
class="button-default"
|
||||
@click.prevent="toggleShow"
|
||||
>
|
||||
{{ $t("general.show_more") }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default"
|
||||
@click.prevent="dismiss"
|
||||
>
|
||||
{{ $t("general.dismiss") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script src="./update_notification.js"></script>
|
||||
|
||||
<style src="./update_notification.scss" lang="scss"></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue