Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
3.3 kB · 148 lines
Svelte
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149<script lang="ts"> import { settings } from '../models/settings.svelte.js'; import DialogPanel from './DialogPanel.svelte';
let { onClose = undefined }: { onClose?: () => void } = $props(); let dateLocale = $state(settings.dateLocale ?? ''); let blueskyHost = $state(settings.blueskyHost ?? ''); let showInfohazards = $state(settings.biohazardsEnabled !== false);
function updateDateLocale() { let value = dateLocale.trim(); settings.dateLocale = value || undefined; }
function updateBlueskyHost() { let value = blueskyHost.trim(); settings.blueskyHost = value || undefined; }
function updateShowInfohazards() { settings.biohazardsEnabled = showInfohazards; }
function applyOnEnter(applyChanges: () => void) { return (e: KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); applyChanges(); } }; }</script>
<DialogPanel id="settings" {onClose}> <form method="get"> <i class="close fa-circle-xmark fa-regular" onclick={onClose}></i>
<h2>Settings</h2>
<div class="setting"> <div class="label"><label for="settings_date_locale">Locale:</label></div> <div class="field"> <input type="text" id="settings_date_locale" autofocus placeholder="E.g. "fr-CA"" bind:value={dateLocale} onchange={updateDateLocale} onkeydown={applyOnEnter(updateDateLocale)}>
<small>Used for date and text formatting</small> </div> </div>
<div class="setting"> <div class="label"><label for="settings_bluesky_host">Bluesky app:</label></div> <div class="field"> <input type="text" id="settings_bluesky_host" placeholder="bsky.app" bind:value={blueskyHost} onchange={updateBlueskyHost} onkeydown={applyOnEnter(updateBlueskyHost)}>
<small>Hostname to use in links</small> </div> </div>
<div class="setting checkbox-setting"> <div class="label"> <input type="checkbox" id="settings_show_infohazards" bind:checked={showInfohazards} onchange={updateShowInfohazards}> </div> <div class="field"> <label for="settings_show_infohazards">Show infohazards</label>
<small>E.g. links to blocked or hidden replies</small> </div> </div> </form></DialogPanel>
<style> :global(.dialog) form { padding: 15px 25px 30px; }
.setting { display: grid; grid-template-columns: 105px auto; align-items: baseline; }
.setting + .setting { margin-top: 18px; }
.label { margin-right: 15px; text-align: right; white-space: nowrap; }
.field input[type="text"] { margin-left: 0; }
small { display: block; color: #888; font-size: 9pt; margin: 4px 0 0; }
.checkbox-setting { .label { margin-right: 5px; }
input { width: 14px; height: 14px; }
.field { margin-top: 1px; }
.field label { white-space: nowrap; }
small { margin-left: 1px; } }
@media (prefers-color-scheme: dark) { small { color: #aaa; } }</style>