Merge branch 'master' into deployment-echo-current-configuration

This commit is contained in:
Ulf Gebhardt 2023-03-20 21:42:12 +01:00 committed by GitHub
commit cf4a5db6ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 15 deletions

View File

@ -30,7 +30,7 @@ export default {
/* dirty fix to override broken styleguide inline-styles */
.ds-grid {
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
gap: 32px 16px !important;
gap: 16px !important;
grid-auto-rows: 20px;
}

View File

@ -12,22 +12,27 @@
<counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</base-button>
</template>
<template #popover>
<template #popover="{ closeMenu }">
<div class="notifications-menu-popover">
<notification-list :notifications="notifications" @markAsRead="markAsRead" />
</div>
<ds-flex class="notifications-link-container">
<ds-flex-item :width="{ base: 'auto' }" centered>
<ds-flex-item class="notifications-link-container-item" :width="{ base: '100%' }" centered>
<nuxt-link :to="{ name: 'notifications' }">
<ds-button ghost primary>
<base-button ghost primary>
{{ $t('notifications.pageLink') }}
</ds-button>
</base-button>
</nuxt-link>
</ds-flex-item>
<ds-flex-item :width="{ base: 'auto' }" centered>
<ds-button ghost primary @click="markAllAsRead" data-test="markAllAsRead-button">
<ds-flex-item class="notifications-link-container-item" :width="{ base: '100%' }" centered>
<base-button
ghost
primary
@click="markAllAsRead(closeMenu)"
data-test="markAllAsRead-button"
>
{{ $t('notifications.markAllAsRead') }}
</ds-button>
</base-button>
</ds-flex-item>
</ds-flex>
</template>
@ -74,11 +79,12 @@ export default {
this.$toast.error(error.message)
}
},
async markAllAsRead() {
async markAllAsRead(closeMenu) {
if (!this.hasNotifications) {
return
}
closeMenu()
try {
await this.$apollo.mutate({
mutation: markAllAsReadMutation(this.$i18n),
@ -144,16 +150,15 @@ export default {
<style lang="scss">
.notifications-menu-popover {
max-width: 500px;
margin-bottom: $size-height-base;
}
.notifications-link-container {
background-color: $background-color-softer-active;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: $size-height-base;
padding: $space-x-small;
flex-direction: row;
}
.notifications-link-container-item {
justify-content: center;
display: flex;
}
</style>