feat: add notifications to settings
This is currently a mock as we have no notification mechanism in place. Also, I need to figure out how to talk to Vervis' API first. That being said, this step allows for translations at least. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch
parent
119b681d4d
commit
e95bb2e117
10 changed files with 549 additions and 272 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "anvil",
|
||||
"version": "0.0.13",
|
||||
"version": "0.0.14",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "anvil",
|
||||
"version": "0.0.13",
|
||||
"version": "0.0.14",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "1.6.8",
|
||||
"@fontsource/spline-sans-mono": "5.0.20",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "anvil",
|
||||
"version": "0.0.13",
|
||||
"version": "0.0.14",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
import SettingsAccount from './SettingsAccount.svelte';
|
||||
import SettingsAppearance from './SettingsAppearance.svelte';
|
||||
import SettingsKeys from './SettingsKeys.svelte';
|
||||
import SettingsNotifications from './SettingsNotifications.svelte';
|
||||
import SettingsSidebar from '../atoms/SettingsSidebar.svelte';
|
||||
import SettingsProfile from './SettingsProfile.svelte';
|
||||
|
||||
|
|
@ -36,5 +37,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
<SettingsKeys />
|
||||
{:else if activeSetting === 'appearance'}
|
||||
<SettingsAppearance />
|
||||
{:else if activeSetting === 'notifications'}
|
||||
<SettingsNotifications />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
98
src/lib/components/molecules/SettingsNotifications.svelte
Normal file
98
src/lib/components/molecules/SettingsNotifications.svelte
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<!--
|
||||
SettingsNotifications molecule.
|
||||
Copyright (C) 2024 André Jaenisch
|
||||
SPDX-FileCopyrightText: 2024 André Jaenisch
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { SlideToggle } from '@skeletonlabs/skeleton';
|
||||
import { _ } from 'svelte-i18n';
|
||||
import { Eye24, EyeClosed24, Mention24 } from 'svelte-octicons';
|
||||
|
||||
const username = 'jane';
|
||||
const instance = 'server.com';
|
||||
let defaultNofication = 'mentioned';
|
||||
let isNotifiedOnMention = false;
|
||||
let labelYes = 'On';
|
||||
let labelNo = 'Off';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col flex-1 gap-6 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
|
||||
<div class="text-surface-500-400-token text-xl font-semibold">
|
||||
{$_('settings.notifications.headline')}
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="text-surface-500-400-token font-semibold py-1">
|
||||
{$_('settings.notifications.mentions.headline')}
|
||||
</div>
|
||||
<p class="text-sm leading-tight">
|
||||
{@html $_('settings.notifications.mentions.intro', {
|
||||
values: { blockElementOpen: '<strong>', blockElementClose: '</strong>', instance, username }
|
||||
})}
|
||||
</p>
|
||||
<SlideToggle
|
||||
class="flex gap-8"
|
||||
name="mentions"
|
||||
active="bg-primary-500"
|
||||
size="sm"
|
||||
bind:checked={isNotifiedOnMention}
|
||||
>
|
||||
{#if isNotifiedOnMention}
|
||||
{$_('settings.notifications.mentions.labelYes')}
|
||||
{:else}
|
||||
{$_('settings.notifications.mentions.labelNo')}
|
||||
{/if}
|
||||
</SlideToggle>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="text-surface-500-400-token font-semibold py-1">
|
||||
{$_('settings.notifications.default.headline')}
|
||||
</div>
|
||||
<p class="text-sm text-surface-500-400-token leading-tight">
|
||||
{$_('settings.notifications.default.intro')}
|
||||
</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="label flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
class="me-2"
|
||||
name="theme"
|
||||
value="light"
|
||||
checked={defaultNofication === 'all'}
|
||||
/>
|
||||
<Eye24 fill="currentColor" />
|
||||
{$_('settings.notifications.default.notification.all')}
|
||||
</label>
|
||||
<label class="label flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
class="me-2"
|
||||
name="theme"
|
||||
value="dark"
|
||||
checked={defaultNofication === 'off'}
|
||||
/>
|
||||
<EyeClosed24 fill="currentColor" />
|
||||
{$_('settings.notifications.default.notification.off')}
|
||||
</label>
|
||||
<label class="label flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
class="me-2"
|
||||
name="theme"
|
||||
value="auto"
|
||||
checked={defaultNofication === 'mentioned'}
|
||||
/>
|
||||
<Mention24 fill="currentColor" />
|
||||
{$_('settings.notifications.default.notification.mentioned')}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -206,7 +206,23 @@
|
|||
}
|
||||
},
|
||||
"notifications": {
|
||||
"label": ""
|
||||
"default": {
|
||||
"headline": "",
|
||||
"intro": "",
|
||||
"notification": {
|
||||
"all": "",
|
||||
"off": "",
|
||||
"mentioned": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"mentions": {
|
||||
"headline": "",
|
||||
"intro": "",
|
||||
"labelNo": "",
|
||||
"labelYes": ""
|
||||
}
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
|
|
|
|||
|
|
@ -1,268 +1,284 @@
|
|||
{
|
||||
"overlay": {
|
||||
"avatar": {
|
||||
"about_anvil": "Über Anvil",
|
||||
"dark_mode": "Nachtmodus",
|
||||
"profile": "Profil",
|
||||
"settings": "Einstellungen",
|
||||
"sign_out": "Ausloggen"
|
||||
}
|
||||
},
|
||||
"page": {
|
||||
"import_project": {
|
||||
"form": {
|
||||
"avatar": "Avatar",
|
||||
"components": "Komponenten",
|
||||
"fields": {
|
||||
"avatar": {
|
||||
"label": "Bild hochladen"
|
||||
},
|
||||
"description": {
|
||||
"label": "Beschreibung",
|
||||
"placeholder": "Beschreibe das Projekt in unter 100 Zeichen..."
|
||||
},
|
||||
"issues": {
|
||||
"label": "Issues"
|
||||
},
|
||||
"name": {
|
||||
"error": "Dieses Feld ist erforderlich",
|
||||
"label": "Name",
|
||||
"placeholder": "Name des Projekts..."
|
||||
},
|
||||
"pr": {
|
||||
"label": "Pullrequest"
|
||||
},
|
||||
"repository": {
|
||||
"hint": "optional: von Git-Repository importieren",
|
||||
"label": "Repository",
|
||||
"placeholder": "URL des Git-Repositorys"
|
||||
}
|
||||
},
|
||||
"submit": "Projekt erstellen"
|
||||
},
|
||||
"heading": "Projekt erstellen",
|
||||
"intro": "Neues F2-Projekt zu Anvil hinzufügen."
|
||||
},
|
||||
"login": {
|
||||
"form": {
|
||||
"fields": {
|
||||
"account": {
|
||||
"label": "Accountname"
|
||||
},
|
||||
"passphrase": {
|
||||
"label": "Passwort",
|
||||
"placeholder": "Passwort"
|
||||
},
|
||||
"server": {
|
||||
"label": "F2-Server"
|
||||
}
|
||||
},
|
||||
"reset": "Passwort zurücksetzen",
|
||||
"submit": "Einloggen",
|
||||
"validation": {
|
||||
"incorrect": "Accountname oder Kennwort sind falsch.",
|
||||
"missing": "Das Account-Feld ist verbindlich."
|
||||
}
|
||||
},
|
||||
"heading": "Einloggen",
|
||||
"intro": "Die Einwahldaten ausfüllen um Anvil mit deinem F2-Account zu benutzen."
|
||||
},
|
||||
"profile": {
|
||||
"activities": {
|
||||
"block_or_report": "{blockElementOpen}blockieren{blockElementClose} oder {reportElementOpen}melden{reportElementClose}",
|
||||
"like": "Gefällt mir"
|
||||
},
|
||||
"heading": "Profil für",
|
||||
"history": {
|
||||
"activities": {
|
||||
"commits": {
|
||||
"actions": {
|
||||
"browse": "",
|
||||
"copy": "Kopieren"
|
||||
},
|
||||
"number": "",
|
||||
"relative_time": ""
|
||||
},
|
||||
"setup": {
|
||||
"description": "Das F2-Konto @{username}@{instance} wurde erfolgreich innerhalb von {created_with} erstellt",
|
||||
"summary": "Kontoeinstellungen"
|
||||
}
|
||||
},
|
||||
"heading": "Aktivitäten"
|
||||
},
|
||||
"menu": {
|
||||
"actions": {
|
||||
"fork": "",
|
||||
"star": "",
|
||||
"watch": ""
|
||||
},
|
||||
"buttons": {
|
||||
"avatar": "",
|
||||
"issues": "",
|
||||
"notifications": "Benachrichtigungen",
|
||||
"prs": ""
|
||||
},
|
||||
"details": {
|
||||
"branches": "",
|
||||
"commits": "Commits",
|
||||
"files": "Dateien",
|
||||
"issues": "",
|
||||
"merge_requests": "",
|
||||
"moderation": "Moderation",
|
||||
"overview": "Übersicht",
|
||||
"people": "",
|
||||
"repository": "",
|
||||
"roles": "Rollen",
|
||||
"tags": "Schlagworte"
|
||||
}
|
||||
},
|
||||
"projects": {
|
||||
"actions": {
|
||||
"fork": "Fork",
|
||||
"star": "Favorisieren",
|
||||
"watch": "Beobachten"
|
||||
},
|
||||
"add_or_import": "{addElementOpen}Ein Projekt hinzufügen{addElementClose} oder {importElementOpen}Ein Projekt importieren{importElementClose}.",
|
||||
"empty": "Bisher keine Projekte hinzugefügt.",
|
||||
"heading": "Projekte"
|
||||
},
|
||||
"repositories": {
|
||||
"heading": ""
|
||||
}
|
||||
},
|
||||
"projects": {
|
||||
"file_table": {
|
||||
"updated": "Aktualisiert: {relativeTime}"
|
||||
},
|
||||
"form": {
|
||||
"fields": {
|
||||
"more_filters": {
|
||||
"submit": "Weitere Filter"
|
||||
},
|
||||
"projects": {
|
||||
"submit": "Meine Projekte"
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Suchen oder filtern",
|
||||
"submit": "Absenden"
|
||||
},
|
||||
"starred": {
|
||||
"submit": "Favorisiert"
|
||||
}
|
||||
}
|
||||
},
|
||||
"nav": {
|
||||
"next": "Weiter",
|
||||
"previous": "Zurück"
|
||||
},
|
||||
"table": {
|
||||
"heading": {
|
||||
"last_updated": "Letzte Aktualisierung",
|
||||
"name": "Name"
|
||||
}
|
||||
}
|
||||
},
|
||||
"welcome": {
|
||||
"create": "",
|
||||
"intro": "",
|
||||
"headline": "Willkommen bei Anvil",
|
||||
"login": "",
|
||||
"logo": {
|
||||
"alt": ""
|
||||
},
|
||||
"reset": ""
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"headline": "",
|
||||
"account": {
|
||||
"delete": "",
|
||||
"f2": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"password": {
|
||||
"label": "",
|
||||
"reset": ""
|
||||
},
|
||||
"verification": {
|
||||
"label": ""
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"tab_indent": {
|
||||
"headline": "",
|
||||
"intro": ""
|
||||
},
|
||||
"theme": {
|
||||
"auto": "",
|
||||
"dark": "",
|
||||
"headline": "",
|
||||
"light": ""
|
||||
}
|
||||
},
|
||||
"notifications": {
|
||||
"label": ""
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
"headline": "",
|
||||
"remove": "",
|
||||
"upload": ""
|
||||
},
|
||||
"bio": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"extra": {
|
||||
"content": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"headline": "",
|
||||
"hint": "",
|
||||
"label": {
|
||||
"placeholder": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"name": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"pronouns": {
|
||||
"label": ""
|
||||
}
|
||||
},
|
||||
"ssh_gpg_keys": {
|
||||
"gpg": {
|
||||
"add": "",
|
||||
"headline": "",
|
||||
"key": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"remove": "",
|
||||
"title": {
|
||||
"placeholder": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"ssh": {
|
||||
"add": "",
|
||||
"headline": "",
|
||||
"key": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"remove": "",
|
||||
"title": {
|
||||
"placeholder": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
"overlay": {
|
||||
"avatar": {
|
||||
"about_anvil": "Über Anvil",
|
||||
"dark_mode": "Nachtmodus",
|
||||
"profile": "Profil",
|
||||
"settings": "Einstellungen",
|
||||
"sign_out": "Ausloggen"
|
||||
}
|
||||
},
|
||||
"page": {
|
||||
"import_project": {
|
||||
"form": {
|
||||
"avatar": "Avatar",
|
||||
"components": "Komponenten",
|
||||
"fields": {
|
||||
"avatar": {
|
||||
"label": "Bild hochladen"
|
||||
},
|
||||
"description": {
|
||||
"label": "Beschreibung",
|
||||
"placeholder": "Beschreibe das Projekt in unter 100 Zeichen..."
|
||||
},
|
||||
"issues": {
|
||||
"label": "Issues"
|
||||
},
|
||||
"name": {
|
||||
"error": "Dieses Feld ist erforderlich",
|
||||
"label": "Name",
|
||||
"placeholder": "Name des Projekts..."
|
||||
},
|
||||
"pr": {
|
||||
"label": "Pullrequest"
|
||||
},
|
||||
"repository": {
|
||||
"hint": "optional: von Git-Repository importieren",
|
||||
"label": "Repository",
|
||||
"placeholder": "URL des Git-Repositorys"
|
||||
}
|
||||
},
|
||||
"submit": "Projekt erstellen"
|
||||
},
|
||||
"heading": "Projekt erstellen",
|
||||
"intro": "Neues F2-Projekt zu Anvil hinzufügen."
|
||||
},
|
||||
"login": {
|
||||
"form": {
|
||||
"fields": {
|
||||
"account": {
|
||||
"label": "Accountname"
|
||||
},
|
||||
"passphrase": {
|
||||
"label": "Passwort",
|
||||
"placeholder": "Passwort"
|
||||
},
|
||||
"server": {
|
||||
"label": "F2-Server"
|
||||
}
|
||||
},
|
||||
"reset": "Passwort zurücksetzen",
|
||||
"submit": "Einloggen",
|
||||
"validation": {
|
||||
"incorrect": "Accountname oder Kennwort sind falsch.",
|
||||
"missing": "Das Account-Feld ist verbindlich."
|
||||
}
|
||||
},
|
||||
"heading": "Einloggen",
|
||||
"intro": "Die Einwahldaten ausfüllen um Anvil mit deinem F2-Account zu benutzen."
|
||||
},
|
||||
"profile": {
|
||||
"activities": {
|
||||
"block_or_report": "{blockElementOpen}blockieren{blockElementClose} oder {reportElementOpen}melden{reportElementClose}",
|
||||
"like": "Gefällt mir"
|
||||
},
|
||||
"heading": "Profil für",
|
||||
"history": {
|
||||
"activities": {
|
||||
"commits": {
|
||||
"actions": {
|
||||
"browse": "",
|
||||
"copy": "Kopieren"
|
||||
},
|
||||
"number": "",
|
||||
"relative_time": ""
|
||||
},
|
||||
"setup": {
|
||||
"description": "Das F2-Konto @{username}@{instance} wurde erfolgreich innerhalb von {created_with} erstellt",
|
||||
"summary": "Kontoeinstellungen"
|
||||
}
|
||||
},
|
||||
"heading": "Aktivitäten"
|
||||
},
|
||||
"menu": {
|
||||
"actions": {
|
||||
"fork": "",
|
||||
"star": "",
|
||||
"watch": ""
|
||||
},
|
||||
"buttons": {
|
||||
"avatar": "",
|
||||
"issues": "",
|
||||
"notifications": "Benachrichtigungen",
|
||||
"prs": ""
|
||||
},
|
||||
"details": {
|
||||
"branches": "",
|
||||
"commits": "Commits",
|
||||
"files": "Dateien",
|
||||
"issues": "",
|
||||
"merge_requests": "",
|
||||
"moderation": "Moderation",
|
||||
"overview": "Übersicht",
|
||||
"people": "",
|
||||
"repository": "",
|
||||
"roles": "Rollen",
|
||||
"tags": "Schlagworte"
|
||||
}
|
||||
},
|
||||
"projects": {
|
||||
"actions": {
|
||||
"fork": "Fork",
|
||||
"star": "Favorisieren",
|
||||
"watch": "Beobachten"
|
||||
},
|
||||
"add_or_import": "{addElementOpen}Ein Projekt hinzufügen{addElementClose} oder {importElementOpen}Ein Projekt importieren{importElementClose}.",
|
||||
"empty": "Bisher keine Projekte hinzugefügt.",
|
||||
"heading": "Projekte"
|
||||
},
|
||||
"repositories": {
|
||||
"heading": ""
|
||||
}
|
||||
},
|
||||
"projects": {
|
||||
"file_table": {
|
||||
"updated": "Aktualisiert: {relativeTime}"
|
||||
},
|
||||
"form": {
|
||||
"fields": {
|
||||
"more_filters": {
|
||||
"submit": "Weitere Filter"
|
||||
},
|
||||
"projects": {
|
||||
"submit": "Meine Projekte"
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Suchen oder filtern",
|
||||
"submit": "Absenden"
|
||||
},
|
||||
"starred": {
|
||||
"submit": "Favorisiert"
|
||||
}
|
||||
}
|
||||
},
|
||||
"nav": {
|
||||
"next": "Weiter",
|
||||
"previous": "Zurück"
|
||||
},
|
||||
"table": {
|
||||
"heading": {
|
||||
"last_updated": "Letzte Aktualisierung",
|
||||
"name": "Name"
|
||||
}
|
||||
}
|
||||
},
|
||||
"welcome": {
|
||||
"create": "",
|
||||
"intro": "",
|
||||
"headline": "Willkommen bei Anvil",
|
||||
"login": "",
|
||||
"logo": {
|
||||
"alt": ""
|
||||
},
|
||||
"reset": ""
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"headline": "",
|
||||
"account": {
|
||||
"delete": "",
|
||||
"f2": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"password": {
|
||||
"label": "",
|
||||
"reset": ""
|
||||
},
|
||||
"verification": {
|
||||
"label": ""
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"tab_indent": {
|
||||
"headline": "",
|
||||
"intro": ""
|
||||
},
|
||||
"theme": {
|
||||
"auto": "",
|
||||
"dark": "",
|
||||
"headline": "",
|
||||
"light": ""
|
||||
}
|
||||
},
|
||||
"notifications": {
|
||||
"default": {
|
||||
"headline": "",
|
||||
"intro": "",
|
||||
"notification": {
|
||||
"all": "",
|
||||
"off": "",
|
||||
"mentioned": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"mentions": {
|
||||
"headline": "",
|
||||
"intro": "",
|
||||
"labelNo": "",
|
||||
"labelYes": ""
|
||||
}
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
"headline": "",
|
||||
"remove": "",
|
||||
"upload": ""
|
||||
},
|
||||
"bio": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"extra": {
|
||||
"content": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"headline": "",
|
||||
"hint": "",
|
||||
"label": {
|
||||
"placeholder": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"name": {
|
||||
"label": "",
|
||||
"placeholder": ""
|
||||
},
|
||||
"pronouns": {
|
||||
"label": ""
|
||||
}
|
||||
},
|
||||
"ssh_gpg_keys": {
|
||||
"gpg": {
|
||||
"add": "",
|
||||
"headline": "",
|
||||
"key": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"remove": "",
|
||||
"title": {
|
||||
"placeholder": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"ssh": {
|
||||
"add": "",
|
||||
"headline": "",
|
||||
"key": {
|
||||
"placeholder": ""
|
||||
},
|
||||
"remove": "",
|
||||
"title": {
|
||||
"placeholder": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -206,7 +206,23 @@
|
|||
}
|
||||
},
|
||||
"notifications": {
|
||||
"label": "Notifications"
|
||||
"default": {
|
||||
"headline": "Default notification",
|
||||
"intro": "The default notification setting for starred projects",
|
||||
"notification": {
|
||||
"all": "All activity",
|
||||
"off": "Turn off",
|
||||
"mentioned": "Mentions only"
|
||||
}
|
||||
},
|
||||
"headline": "Notifications",
|
||||
"label": "Notifications",
|
||||
"mentions": {
|
||||
"headline": "Mentions",
|
||||
"intro": "Receive notifications when {blockElementOpen}@{username}@{instance}{blockElementClose} is mentioned.",
|
||||
"labelNo": "Off",
|
||||
"labelYes": "On"
|
||||
}
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
|
|
|
|||
|
|
@ -206,7 +206,23 @@
|
|||
}
|
||||
},
|
||||
"notifications": {
|
||||
"label": ""
|
||||
"default": {
|
||||
"headline": "",
|
||||
"intro": "",
|
||||
"notification": {
|
||||
"all": "",
|
||||
"off": "",
|
||||
"mentioned": ""
|
||||
}
|
||||
},
|
||||
"headline": "",
|
||||
"label": "",
|
||||
"mentions": {
|
||||
"headline": "",
|
||||
"intro": "",
|
||||
"labelNo": "",
|
||||
"labelYes": ""
|
||||
}
|
||||
},
|
||||
"profile": {
|
||||
"avatar": {
|
||||
|
|
|
|||
26
stories/molecules/SettingsNotifications.stories.ts
Normal file
26
stories/molecules/SettingsNotifications.stories.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* Stories for SettingsNotifications molecule.
|
||||
* Copyright (C) 2024 André Jaenisch
|
||||
* SPDX-FileCopyrightText: 2024 André Jaenisch
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||
|
||||
import SettingsNotifications from '$lib/components/molecules/SettingsNotifications.svelte';
|
||||
|
||||
const meta = {
|
||||
title: 'Molecules/SettingsNotifications',
|
||||
component: SettingsNotifications,
|
||||
tags: ['autodocs']
|
||||
} satisfies Meta<SettingsNotifications>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Plain: Story = {};
|
||||
86
tests/components/molecules/SettingsNotifications.test.ts
Normal file
86
tests/components/molecules/SettingsNotifications.test.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
/* Component test for SettingsNotifications molecule.
|
||||
* Copyright (C) 2024 André Jaenisch
|
||||
* SPDX-FileCopyrightText: 2024 André Jaenisch
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen } from '@testing-library/svelte';
|
||||
import { init, locale, register } from 'svelte-i18n';
|
||||
|
||||
import SettingsNotifications from '../../../src/lib/components/molecules/SettingsNotifications.svelte';
|
||||
import enMessages from '../../../src/lib/i18n/locales/en.json';
|
||||
|
||||
describe('SettingsNotifications.svelte', () => {
|
||||
beforeEach(() => {
|
||||
register('en', () => import('../../../src/lib/i18n/locales/en.json'));
|
||||
init({ fallbackLocale: 'en', initialLocale: 'en' });
|
||||
locale.set('en');
|
||||
});
|
||||
|
||||
it('should mount', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
const { container } = render(SettingsNotifications);
|
||||
|
||||
// Assert
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should have a slide toggle', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
render(SettingsNotifications);
|
||||
|
||||
// Assert
|
||||
expect(
|
||||
screen.getByLabelText(enMessages.settings.notifications.mentions.labelNo)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe('when slide is toggled', () => {
|
||||
it('should update the label', async () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
render(SettingsNotifications);
|
||||
const slideToggle = screen.getByLabelText(enMessages.settings.notifications.mentions.labelNo);
|
||||
await slideToggle.click();
|
||||
|
||||
// Assert
|
||||
expect(
|
||||
screen.getByLabelText(enMessages.settings.notifications.mentions.labelYes)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have a default notification radio group', () => {
|
||||
// Arrange
|
||||
// Nothing to prepare
|
||||
|
||||
// Act
|
||||
render(SettingsNotifications);
|
||||
|
||||
// Assert
|
||||
expect(
|
||||
screen.getByLabelText(enMessages.settings.notifications.default.notification.all)
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByLabelText(enMessages.settings.notifications.default.notification.off)
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByLabelText(enMessages.settings.notifications.default.notification.mentioned)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue