forked from DebaucheryLibrarian/traxxx
Improved notifications design.
This commit is contained in:
parent
3b91493995
commit
4806b0aa41
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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