diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 70 | ||||
| -rw-r--r-- | src/Components/Notification.vue | 33 |
2 files changed, 63 insertions, 40 deletions
diff --git a/src/App.vue b/src/App.vue index 5bf698c..912f507 100644 --- a/src/App.vue +++ b/src/App.vue @@ -30,9 +30,11 @@ <!-- Notifications list content --> <div ref="container" class="notification-container"> - <transition name="fade"> - <ul v-if="notifications.length > 0" class="notification-wrapper"> - <transition-group name="fade-collapse" tag="li"> + <transition name="fade" mode="out-in"> + <div v-if="notifications.length > 0"> + <transition-group class="notification-wrapper" + name="list" + tag="ul"> <Notification v-for="(n, index) in notifications" :key="n.notification_id" v-bind="n" @@ -44,20 +46,20 @@ </transition-group> <!-- Dismiss all --> - <li v-if="notifications.length > 0"> - <div class="dismiss-all" @click="onDismissAll"> - <Button type="tertiary" - @click="onDismissAll"> - <template #icon> - <Close decorative - title="" - :size="20" /> - </template> - {{ t('notifications', 'Dismiss all notifications') }} - </Button> - </div> - </li> - </ul> + <span v-if="notifications.length > 0" + class="dismiss-all" + @click="onDismissAll"> + <Button type="tertiary" + @click="onDismissAll"> + <template #icon> + <Close decorative + :size="20" + title="" /> + </template> + {{ t('notifications', 'Dismiss all notifications') }} + </Button> + </span> + </div> <!-- No notifications --> <EmptyContent v-else> @@ -411,26 +413,40 @@ export default { } </script> -<style scoped> +<style scoped lang="scss"> +.notification-container { + /* Prevent slide animation to go out of the div */ + overflow: hidden; +} + .empty-content { margin: 12vh 0; } .fade-enter-active, -.fade-leave-active, -.fade-collapse-enter-active, -.fade-collapse-leave-active { - transition: opacity var(--animation-quick), max-height var(--animation-quick); +.fade-leave-active { + transition: opacity var(--animation-quick) ease; } -.fade-collapse-enter, -.fade-collapse-leave-to { +.fade-enter-from, +.fade-leave-to { opacity: 0; - max-height: 0; } -.fade-enter, -.fade-leave-to { +.list-move, +.list-enter-active, +.list-leave-active { + transition: all var(--animation-quick) ease; +} + +.list-enter-from, +.list-leave-to { opacity: 0; + transform: translateX(30px); +} + +.list-leave-active { + width: 100%; } + </style> diff --git a/src/Components/Notification.vue b/src/Components/Notification.vue index e49fffe..5928546 100644 --- a/src/Components/Notification.vue +++ b/src/Components/Notification.vue @@ -1,5 +1,5 @@ <template> - <div class="notification" :data-id="notificationId" :data-timestamp="timestamp"> + <li class="notification" :data-id="notificationId" :data-timestamp="timestamp"> <div class="notification-heading"> <span v-tooltip.bottom="absoluteDate" class="notification-time live-relative-timestamp" @@ -10,10 +10,11 @@ <template #icon> <Close decorative title="" - size="20" /> + :size="20" /> </template> </Button> </div> + <a v-if="useLink" :href="link" class="notification-subject full-subject-link"> <span v-if="icon" class="image"><img :src="icon" class="notification-icon"></span> <RichText v-if="subjectRich" @@ -28,6 +29,7 @@ :arguments="preparedSubjectParameters" /> <span v-else class="subject">{{ subject }}</span> </div> + <div v-if="message" class="notification-message" @click="onClickMessage"> <div class="message-container" :class="{ collapsed: isCollapsedMessage }"> <RichText v-if="messageRich" @@ -38,10 +40,11 @@ </div> <div v-if="isCollapsedMessage" class="notification-overflow" /> </div> + <div v-if="actions.length" class="notification-actions"> <Action v-for="(a, i) in actions" :key="i" v-bind="a" /> </div> - </div> + </li> </template> <script> @@ -320,16 +323,20 @@ export default { </script> <style lang="scss" scoped> -.notification::v-deep { - img.notification-icon { - display: flex; - width: 32px; - height: 32px; - filter: var(--background-invert-if-dark); - } - .rich-text--wrapper { - white-space: pre-wrap; - word-break: break-word; +.notification { + background-color: var(--color-main-background); + + &::v-deep { + img.notification-icon { + display: flex; + width: 32px; + height: 32px; + filter: var(--background-invert-if-dark); + } + .rich-text--wrapper { + white-space: pre-wrap; + word-break: break-word; + } } } |