Using Tippy.js for directive tooltips.

This commit is contained in:
DebaucheryLibrarian
2021-04-27 03:56:38 +02:00
parent 8bf9fff7dc
commit 3b91493995
7 changed files with 73 additions and 13 deletions

View File

@@ -148,12 +148,14 @@
/>Notify me in traxxx
</label>
<!--
<label class="alert-label">
<Checkbox
:checked="email"
@change="checked => email = checked"
/>Send me an e-mail
</label>
-->
<div class="stashes-container">
<ul class="stashes nolist">

View File

@@ -91,6 +91,13 @@
</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'"
@@ -193,9 +200,18 @@ export default {
border-right: solid .5rem var(--primary);
}
.icon {
padding: 1rem;
fill: var(--shadow-weak);
&:hover {
fill: var(--primary);
}
}
&:not(:last-child) {
.notification-body,
.notification-check {
.icon {
border-bottom: solid 1px var(--shadow-hint);
}
}
@@ -263,15 +279,6 @@ export default {
font-weight: bold;
}
.notification-check {
padding: 1rem;
fill: var(--shadow-weak);
&:hover {
fill: var(--primary);
}
}
.poster {
width: 5rem;
height: 3rem;