Improved notifications design.
This commit is contained in:
DebaucheryLibrarian
parent
3b91493995
commit
4806b0aa41
|
|
@ -55,12 +55,14 @@
|
|||
<div class="notification-row notification-title">
|
||||
<img
|
||||
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`"
|
||||
class="notification-favicon"
|
||||
>
|
||||
|
||||
<img
|
||||
v-else
|
||||
v-tooltip="notification.scene.entity.name"
|
||||
:src="`/img/logos/${notification.scene.entity.parent.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`"
|
||||
class="notification-favicon"
|
||||
>
|
||||
|
|
@ -77,7 +79,9 @@
|
|||
</ul>scene
|
||||
</div>
|
||||
|
||||
<div class="notification-row">
|
||||
<div class="notification-row notification-details">
|
||||
<span class="notification-date">{{ formatDate(notification.scene.date, 'MMM D') }}</span>
|
||||
|
||||
<ul
|
||||
v-if="notification.scene.actors.length > 0"
|
||||
class="nolist notification-actors"
|
||||
|
|
@ -91,13 +95,6 @@
|
|||
</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
|
||||
v-if="!notification.seen"
|
||||
v-tooltip="'Mark as seen'"
|
||||
|
|
@ -105,6 +102,13 @@
|
|||
class="notification-check"
|
||||
@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>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -166,6 +170,10 @@ export default {
|
|||
padding: .5rem;
|
||||
fill: var(--shadow);
|
||||
|
||||
&:last-child {
|
||||
padding: .5rem 1rem .5rem .5rem;
|
||||
}
|
||||
|
||||
:hover {
|
||||
fill: var(--primary);
|
||||
cursor: pointer;
|
||||
|
|
@ -193,6 +201,7 @@ export default {
|
|||
|
||||
.notification {
|
||||
display: block;
|
||||
border-right: solid .5rem var(--shadow-touch);
|
||||
margin: 0 0 -1px 0;
|
||||
color: var(--text);
|
||||
|
||||
|
|
@ -201,23 +210,28 @@ export default {
|
|||
}
|
||||
|
||||
.icon {
|
||||
padding: 1rem;
|
||||
padding: 1.3rem .5rem;
|
||||
fill: var(--shadow-weak);
|
||||
|
||||
&:last-child {
|
||||
padding: 1.3rem 1rem 1.3rem .5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
.notification-body,
|
||||
.icon {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
}
|
||||
|
||||
&: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 {
|
||||
flex-grow: 1;
|
||||
padding: .4rem 1rem .25rem .5rem;
|
||||
padding: .4rem 0 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notification-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin: 0 0 .1rem 0;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
margin: .15rem .5rem .3rem .5rem;
|
||||
}
|
||||
|
||||
.notification-favicon {
|
||||
|
|
@ -250,14 +263,26 @@ export default {
|
|||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
|
||||
.notification-tags {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notification-actors {
|
||||
height: 1.1rem;
|
||||
padding: 0 .5rem;
|
||||
height: 1.25rem;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notification-tags {
|
||||
white-space: nowrap;
|
||||
.notification-date {
|
||||
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,
|
||||
|
|
@ -271,6 +296,7 @@ export default {
|
|||
}
|
||||
|
||||
.notification-actor {
|
||||
padding: .25rem .15rem .35rem 0;
|
||||
color: var(--shadow-strong);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
|
@ -280,8 +306,7 @@ export default {
|
|||
}
|
||||
|
||||
.poster {
|
||||
width: 5rem;
|
||||
height: 3rem;
|
||||
width: 6rem;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ export default {
|
|||
|
||||
.tooltip-inner {
|
||||
position: relative;
|
||||
box-shadow: 0 0 3px var(--darken-weak);
|
||||
box-shadow: 0 0 .5rem var(--darken);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
|
|
|||
|
|
@ -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 |
Loading…
Reference in New Issue