DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Improved alerts overview.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-05-28 05:49:28 +02:00
parent cb5d931309
commit 2dbfd556e1
4 changed files with 257 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
pages/users/@username/+Page.vue
View File

@@ -89,44 +89,129 @@
:key="`alert-${alert.id}`"
class="alert"
>
<div class="alert-details">
<div class="alert-triggers">
<Icon
icon="bell2"
:title="alert.notify ? 'Notify in traxxx' : undefined"
:class="{ trigger: alert.notify }"
/>
<Icon
v-if="alert.stashes.some((stash) => !stash.isPrimary)"
icon="folder-heart"
:title="`Add to ${alert.stashes.map((stash) => stash.name).join(', ')}`"
class="trigger"
/>
<Icon
v-else
icon="heart7"
:title="alert.stashes.length > 0 ? 'Add to Favorites' : undefined"
:class="{ trigger: alert.stashes.length > 0 }"
/>
<!--
<Icon
icon="envelop5"
title="E-mail me"
:class="{ trigger: alert.email }"
/>
-->
</div>
<div
class="alert-details"
:class="{ and: alert.and.fields, or: !alert.and.fields }"
>
<span
v-if="alert.tags.length > 0"
class="alert-tags"
><a
v-for="tag in alert.tags"
:key="`tag-${alert.id}-${tag.id}`"
:href="`/tag/${tag.slug}`"
class="link"
>{{ tag.name }}</a>&nbsp;</span>
class="alert-detail alert-tags"
:class="{ and: alert.and.tags, or: !alert.and.tags }"
>
<span class="alert-values">
<span
v-for="tag in alert.tags"
:key="`tag-${alert.id}-${tag.id}`"
class="alert-key"
>
<a
:href="`/tag/${tag.slug}`"
class="alert-value link"
>{{ tag.name }}</a>
</span>
</span>
</span>
<span
v-if="alert.actors.length > 0"
class="alert-actors"
>with <a
v-for="actor in alert.actors"
:key="`actor-${alert.id}-${actor.id}`"
:href="`/actor/${actor.id}/${actor.slug}`"
class="link"
>{{ actor.name }}</a>&nbsp;</span>
class="alert-detail alert-actors"
:class="{ and: alert.and.actors, or: !alert.and.actors }"
>
<span class="alert-values">with
<span
v-for="actor in alert.actors"
:key="`actor-${alert.id}-${actor.id}`"
class="alert-key"
>
<a
:href="`/actor/${actor.id}/${actor.slug}`"
class="alert-value link"
>{{ actor.name }}</a>
</span>
</span>
</span>
<span
v-if="alert.entities.length > 0"
class="alert-entities"
>for <a
v-for="entity in alert.entities"
:key="`entity-${alert.id}-${entity.id}`"
:href="`/${entity.type}/${entity.slug}`"
class="link"
>{{ entity.name }}</a>&nbsp;</span>
class="alert-detail alert-entities or"
>
<span class="alert-values">for
<span
v-for="entity in alert.entities"
:key="`entity-${alert.id}-${entity.id}`"
class="alert-key"
>
<a
:href="`/${entity.type}/${entity.slug}`"
class="alert-value link"
>
<Icon
v-if="entity.type === 'network'"
icon="device_hub"
/>{{ entity.name }}
</a>
</span>
</span>
</span>
<span
v-if="alert.matches.length > 0"
class="alert-entities"
>matching {{ alert.matches.map((match) => match.expression).join(', ') }}</span>
class="alert-detail alert-matches"
:class="{ and: alert.and.matches, or: !alert.and.matches }"
>
<span class="alert-values">matching
<span
v-for="match in alert.matches"
:key="`match-${alert.id}-${match.id}`"
class="alert-key"
>
<span class="alert-value">{{ match.property }}:
<span
class="alert-regex"
title="If your original expression was not a /regular expression/, it was converted, and new characters may have been added for syntactical purposes. These characters do not alter the function of the expression; they ensure it."
>{{ match.expression }}</span>
</span>
</span>
</span>
</span>
</div>
<div class="alert-actions">
<span
class="alert-id"
title="Alert ID"
>#{{ alert.id }}</span>
<Icon
icon="bin"
@click="removeAlert(alert)"
@@ -310,36 +395,90 @@ async function removeAlert(alert) {
}
.alert {
padding: 0 0 0 .5rem;
display: flex;
align-items: stretch;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-40);
}
border-bottom: solid 1px var(--shadow-weak-40);
&:hover {
background: var(--shadow-weak-40);
border-color: var(--shadow-weak-30);
}
}
.alert-triggers {
display: flex;
align-items: center;
gap: .5rem;
margin-right: 1rem;
.icon {
fill: var(--shadow-weak-40);
}
.link:not(:last-child):after {
content: ', ';
.icon.trigger {
fill: var(--shadow-weak-10);
}
}
.alert-details {
padding: .5rem 1rem;
padding: .75rem 0;
flex-grow: 1;
line-height: 1.5;
color: var(--shadow);
.link {
color: inherit;
&.and .alert-detail:not(:last-child):after {
content: ' and ';
}
&.or .alert-detail:not(:last-child):after {
content: ' or ';
}
}
.alert-value {
color: var(--text);
.icon {
margin-right: .25rem;
fill: var(--shadow);
transform: translateY(2px);
}
}
.alert-values {
padding: .5rem .5rem;
border-bottom: solid 1px var(--primary-light-20);
border-radius: .3rem;
}
.alert-detail {
&.and .alert-key:not(:last-child):after {
content: ' and ';
}
&.or .alert-key:not(:last-child):after {
content: ' or ';
}
}
.alert-regex {
&:before,
&:after {
content: '╱';
padding: 0 .1rem;
color: var(--primary-light-20);
}
}
.alert-actions {
display: flex;
align-items: center;
font-size: .9rem;
color: var(--shadow-weak-10);
.icon {
height: 100%;
padding: 0 .5rem;
padding: 0 .75rem;
fill: var(--shadow);
&:hover {
@@ -369,6 +508,10 @@ async function removeAlert(alert) {
.stashes {
padding: 0 1rem 1rem 1rem;
}
.alert {
padding: 0 .5rem 0 1rem;
}
}
@media(--small-30) {