Improved notifications design.

This commit is contained in:
DebaucheryLibrarian 2021-04-27 04:41:22 +02:00
parent 3b91493995
commit 4806b0aa41
3 changed files with 55 additions and 25 deletions

View File

@ -55,12 +55,14 @@
<div class="notification-row notification-title"> <div class="notification-row notification-title">
<img <img
v-if="notification.scene.entity.type === 'network' || notification.scene.entity.independent" v-if="notification.scene.entity.type === 'network' || notification.scene.entity.independent"
v-tooltip="notification.scene.entity.name"
:src="`/img/logos/${notification.scene.entity.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`" :src="`/img/logos/${notification.scene.entity.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`"
class="notification-favicon" class="notification-favicon"
> >
<img <img
v-else v-else
v-tooltip="notification.scene.entity.name"
:src="`/img/logos/${notification.scene.entity.parent.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`" :src="`/img/logos/${notification.scene.entity.parent.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`"
class="notification-favicon" class="notification-favicon"
> >
@ -77,7 +79,9 @@
</ul>scene </ul>scene
</div> </div>
<div class="notification-row"> <div class="notification-row notification-details">
<span class="notification-date">{{ formatDate(notification.scene.date, 'MMM D') }}</span>
<ul <ul
v-if="notification.scene.actors.length > 0" v-if="notification.scene.actors.length > 0"
class="nolist notification-actors" class="nolist notification-actors"
@ -91,13 +95,6 @@
</div> </div>
</div> </div>
<Icon
v-if="notification.alert"
v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> for <strong>${notification.alert.entity?.name || 'any channel'}</strong>`"
icon="question5"
@click.prevent
/>
<Icon <Icon
v-if="!notification.seen" v-if="!notification.seen"
v-tooltip="'Mark as seen'" v-tooltip="'Mark as seen'"
@ -105,6 +102,13 @@
class="notification-check" class="notification-check"
@click.prevent="checkNotification(notification.id)" @click.prevent="checkNotification(notification.id)"
/> />
<Icon
v-if="notification.alert"
v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> for <strong>${notification.alert.entity?.name || 'any channel'}</strong>`"
icon="question5"
@click.prevent
/>
</router-link> </router-link>
</li> </li>
</ul> </ul>
@ -166,6 +170,10 @@ export default {
padding: .5rem; padding: .5rem;
fill: var(--shadow); fill: var(--shadow);
&:last-child {
padding: .5rem 1rem .5rem .5rem;
}
:hover { :hover {
fill: var(--primary); fill: var(--primary);
cursor: pointer; cursor: pointer;
@ -193,6 +201,7 @@ export default {
.notification { .notification {
display: block; display: block;
border-right: solid .5rem var(--shadow-touch);
margin: 0 0 -1px 0; margin: 0 0 -1px 0;
color: var(--text); color: var(--text);
@ -201,23 +210,28 @@ export default {
} }
.icon { .icon {
padding: 1rem; padding: 1.3rem .5rem;
fill: var(--shadow-weak); fill: var(--shadow-weak);
&:last-child {
padding: 1.3rem 1rem 1.3rem .5rem;
}
&:hover { &:hover {
fill: var(--primary); fill: var(--primary);
} }
} }
&:not(:last-child) { &:not(:last-child) {
.notification-body, border-bottom: solid 1px var(--shadow-hint);
.icon {
border-bottom: solid 1px var(--shadow-hint);
}
} }
&:hover { &:hover {
color: var(--primary); background: var(--shadow-touch);
&:not(.unseen) {
border-right: solid .5rem var(--shadow-weak);
}
} }
} }
@ -230,18 +244,17 @@ export default {
.notification-body { .notification-body {
flex-grow: 1; flex-grow: 1;
padding: .4rem 1rem .25rem .5rem; padding: .4rem 0 0 0;
overflow: hidden; overflow: hidden;
} }
.notification-row { .notification-row {
display: flex; display: flex;
align-items: center;
overflow: hidden; overflow: hidden;
}
&:not(:last-child) { .notification-title {
margin: 0 0 .1rem 0; margin: .15rem .5rem .3rem .5rem;
}
} }
.notification-favicon { .notification-favicon {
@ -250,14 +263,26 @@ export default {
margin: 0 .5rem 0 0; margin: 0 .5rem 0 0;
} }
.notification-tags {
white-space: nowrap;
}
.notification-actors { .notification-actors {
height: 1.1rem; padding: 0 .5rem;
height: 1.25rem;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
} }
.notification-tags { .notification-date {
white-space: nowrap; width: 3rem;
flex-shrink: 0;
padding: .25rem .25rem .35rem .25rem;
border-right: solid 1px var(--shadow-hint);
border-top: solid 1px var(--shadow-hint);
color: var(--shadow-strong);
font-size: .8rem;
text-align: center;
} }
.notification-actor, .notification-actor,
@ -271,6 +296,7 @@ export default {
} }
.notification-actor { .notification-actor {
padding: .25rem .15rem .35rem 0;
color: var(--shadow-strong); color: var(--shadow-strong);
font-size: .9rem; font-size: .9rem;
} }
@ -280,8 +306,7 @@ export default {
} }
.poster { .poster {
width: 5rem; width: 6rem;
height: 3rem;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }

View File

@ -155,7 +155,7 @@ export default {
.tooltip-inner { .tooltip-inner {
position: relative; position: relative;
box-shadow: 0 0 3px var(--darken-weak); box-shadow: 0 0 .5rem var(--darken);
} }
.tooltip { .tooltip {

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>notification2</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM9 13h-2v-2h2v2zM9 9h-2v-6h2v6z"></path>
</svg>

After

Width:  |  Height:  |  Size: 279 B