local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix notification styling

Browse source
This commit is contained in:
kolaente 2021-04-18 17:21:14 +02:00
parent 747a9fe505
commit adc0f23b49
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/notifications/notifications.vue
View file

@ -16,16 +16,22 @@
<div class="read-indicator" :class="{'read': n.readAt !== null}"></div> <div class="read-indicator" :class="{'read': n.readAt !== null}"></div>
<user <user
:user="n.notification.doer" :user="n.notification.doer"
:show-username="true" :show-username="false"
:avatar-size="16" :avatar-size="16"
v-if="n.notification.doer"/> v-if="n.notification.doer"/>
<span class="detail"> <span class="detail">
<p>
<span class="has-text-weight-bold" v-if="n.notification.doer">
{{ n.notification.doer.getDisplayName() }}
</span>
<a @click="() => to(n, index)()"> <a @click="() => to(n, index)()">
{{ n.toText(userInfo) }} {{ n.toText(userInfo) }}
</a> </a>
<span class="created" v-tooltip="formatDate(n.created)"> </p>
<div class="created" v-tooltip="formatDate(n.created)">
{{ formatDateSince(n.created) }} {{ formatDateSince(n.created) }}
</span> </div>
</span> </span>
</div> </div>
<p class="nothing" v-if="notifications.length === 0"> <p class="nothing" v-if="notifications.length === 0">
@ -52,7 +58,7 @@ export default {
data() { data() {
return { return {
notificationService: NotificationService, notificationService: NotificationService,
notifications: [], allNotifications: [],
showNotifications: false, showNotifications: false,
interval: null, interval: null,
} }
@ -73,6 +79,9 @@ export default {
unreadNotifications() { unreadNotifications() {
return this.notifications.filter(n => n.readAt === null).length return this.notifications.filter(n => n.readAt === null).length
}, },
notifications() {
return this.allNotifications.filter(n => n.name !== '')
},
...mapState({ ...mapState({
userInfo: state => state.auth.info, userInfo: state => state.auth.info,
}), }),
@ -86,7 +95,7 @@ export default {
loadNotifications() { loadNotifications() {
this.notificationService.getAll() this.notificationService.getAll()
.then(r => { .then(r => {
this.$set(this, 'notifications', r) this.$set(this, 'allNotifications', r)
}) })
.catch(e => { .catch(e => {
this.error(e, this) this.error(e, this)
@ -125,7 +134,7 @@ export default {
n.read = true n.read = true
this.notificationService.update(n) this.notificationService.update(n)
.then(r => { .then(r => {
this.$set(this.notifications, index, r) this.$set(this.allNotifications, index, r)
}) })
.catch(e => this.error(e, this)) .catch(e => this.error(e, this))
} }

11
src/styles/components/notifications.scss
View file

@ -49,6 +49,7 @@
.single-notification { .single-notification {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.25rem 0;
transition: background-color $transition; transition: background-color $transition;
@ -70,10 +71,10 @@
} }
.user { .user {
display: flex; display: inline-flex;
align-items: center; align-items: center;
width: auto; width: auto;
margin-right: .25rem; margin: 0 .5rem;
span { span {
font-family: $family-sans-serif; font-family: $family-sans-serif;
@ -82,9 +83,13 @@
.avatar { .avatar {
height: 16px; height: 16px;
} }
img {
margin-right: 0;
}
} }
.detail .created { .created {
color: $grey-400; color: $grey-400;
} }