blisstown/campfire
blisstown/campfire
2
0
Fork 0
Code Issues 20 Pull requests Projects 1 Releases Activity

prefer content warnings in notifications

Browse source
This commit is contained in:
ari melody 2024-07-05 15:10:25 +01:00
parent d1d3b16cbf
commit b064a90753
Signed by: ari
GPG key ID: CF99829C92678188
1 changed files with 28 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/lib/ui/Notification.svelte
View file

@ -57,12 +57,12 @@
goto(`/post/${data.status.id}`); goto(`/post/${data.status.id}`);
} }
let aria_label = function () { let aria_label = function (data) {
if (accounts.length == 1) if (data.accounts.length == 1)
return activity_text.replace("%1", account.username) + ' ' + new Date(data.created_at); return activity_text.replace("%1", account.username) + ' ' + new Date(data.created_at);
else else
return activity_text.replace("%1", `${account.username} and ${accounts.length - 1} others`) + ' ' + new Date(data.created_at); return activity_text.replace("%1", `${account.username} and ${data.accounts.length - 1} others`) + ' ' + new Date(data.created_at);
} }(data);
</script> </script>
<article <article
@ -101,7 +101,13 @@
</header> </header>
{#if data.status} {#if data.status}
<div class="notif-content"> <div class="notif-content">
{@html data.status.html} {#if data.status.warning}
<div class="warning">
{data.status.warning}
</div>
{:else}
{@html data.status.html}
{/if}
</div> </div>
{#if data.type === "mention"} {#if data.type === "mention"}
{#if data.status.reactions} {#if data.status.reactions}
@ -247,4 +253,21 @@
margin-right: 4px; margin-right: 4px;
border-radius: 4px; border-radius: 4px;
} }
.notif-content .warning {
width: 100%;
margin-bottom: 10px;
padding: 4px 8px;
--warn-bg: color-mix(in srgb, var(--bg-700), var(--accent) 1%);
background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
font-family: inherit;
font-size: inherit;
color: inherit;
text-align: left;
border: none;
border-radius: 8px;
cursor: pointer;
outline-color: var(--warn-bg);
transition: outline .05s, box-shadow .05s;
}
</style> </style>