Settings in tabs: localization, filters, interface, data
- Tabbed settings dialog (side navigation, 4-column tabs on mobile); the last opened tab is remembered. - Interface: theme System/Light/Dark (System follows the OS preference), log font size (tiny, small, medium, large) and log font: system monospace or 12 free monospace fonts loaded from Bunny Fonts, with a live preview. Ligatures disabled in log rows. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
cedricandClaude Opus 5.5 committed
1 parent
e583ab4b87
commit
84e71f741c
4 files changed
+311
-49
No files matched your search
+96
-36
@@ -10,7 +10,7 @@
|
||||
// Apply the saved theme and language before first paint to avoid a flash.
|
||||
try {
|
||||
var t = localStorage.getItem('logstream.theme');
|
||||
if (t) document.documentElement.dataset.theme = t;
|
||||
if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
|
||||
var l = localStorage.getItem('logstream.lang');
|
||||
if (l) document.documentElement.lang = l;
|
||||
} catch (e) {}
|
||||
@@ -87,7 +87,7 @@
|
||||
<span id="stats" class="muted"></span>
|
||||
</footer>
|
||||
|
||||
<dialog id="settingsDlg" aria-labelledby="settingsTitle">
|
||||
<dialog id="settingsDlg" class="settings" aria-labelledby="settingsTitle">
|
||||
<div class="dlg">
|
||||
<header>
|
||||
<h2 id="settingsTitle" data-i18n="settings">Settings</h2>
|
||||
@@ -96,44 +96,104 @@
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="language">Language</h3>
|
||||
<div id="langSwitch" class="seg" role="radiogroup" data-i18n-aria="language">
|
||||
<button type="button" role="radio" data-lang="en">English</button>
|
||||
<button type="button" role="radio" data-lang="fr">Français</button>
|
||||
</div>
|
||||
</section>
|
||||
<div class="set-body">
|
||||
<nav id="setNav" class="set-nav" role="tablist" aria-orientation="vertical">
|
||||
<button type="button" role="tab" data-tab="locale">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
|
||||
<span data-i18n="tabLocale">Localization</span>
|
||||
</button>
|
||||
<button type="button" role="tab" data-tab="filters">
|
||||
<svg viewBox="0 0 24 24"><path d="M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z"/><circle cx="8" cy="8" r="1.5"/></svg>
|
||||
<span data-i18n="tabFilters">Filters</span>
|
||||
</button>
|
||||
<button type="button" role="tab" data-tab="interface">
|
||||
<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg>
|
||||
<span data-i18n="tabInterface">Interface</span>
|
||||
</button>
|
||||
<button type="button" role="tab" data-tab="data">
|
||||
<svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/></svg>
|
||||
<span data-i18n="tabData">Data</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="dateTime">Date & time</h3>
|
||||
<div class="field-grid">
|
||||
<label for="tzSelect" data-i18n="tzLabel">Time zone</label>
|
||||
<select id="tzSelect" class="field"></select>
|
||||
<label for="fmtSelect" data-i18n="fmtLabel">Reception time format</label>
|
||||
<select id="fmtSelect" class="field"></select>
|
||||
</div>
|
||||
<p id="timePreview" class="time-preview"></p>
|
||||
<p class="muted small" data-i18n="timeHelp"></p>
|
||||
</section>
|
||||
<div class="set-panels">
|
||||
<!-- Localization -->
|
||||
<div class="set-panel" role="tabpanel" data-panel="locale">
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="language">Language</h3>
|
||||
<div id="langSwitch" class="seg" role="radiogroup" data-i18n-aria="language">
|
||||
<button type="button" role="radio" data-lang="en">English</button>
|
||||
<button type="button" role="radio" data-lang="fr">Français</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="dateTime">Date & time</h3>
|
||||
<div class="field-grid">
|
||||
<label for="tzSelect" data-i18n="tzLabel">Time zone</label>
|
||||
<select id="tzSelect" class="field"></select>
|
||||
<label for="fmtSelect" data-i18n="fmtLabel">Reception time format</label>
|
||||
<select id="fmtSelect" class="field"></select>
|
||||
</div>
|
||||
<p id="timePreview" class="time-preview"></p>
|
||||
<p class="muted small" data-i18n="timeHelp"></p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="tagsTitle">Color tags</h3>
|
||||
<p class="muted small" data-i18n="tagsHelp"></p>
|
||||
<div id="tagList" class="tag-list"></div>
|
||||
<footer>
|
||||
<button id="addTag" class="btn primary" type="button" data-i18n="addTag">+ Add tag</button>
|
||||
<button id="resetTags" class="btn ghost" type="button" data-i18n="resetTags">Restore default tags</button>
|
||||
</footer>
|
||||
</section>
|
||||
<!-- Filters -->
|
||||
<div class="set-panel" role="tabpanel" data-panel="filters" hidden>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="tagsTitle">Color tags</h3>
|
||||
<p class="muted small" data-i18n="tagsHelp"></p>
|
||||
<div id="tagList" class="tag-list"></div>
|
||||
<footer>
|
||||
<button id="addTag" class="btn primary" type="button" data-i18n="addTag">+ Add tag</button>
|
||||
<button id="resetTags" class="btn ghost" type="button" data-i18n="resetTags">Restore default tags</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="set-section danger">
|
||||
<h3 data-i18n="dangerZone">Danger zone</h3>
|
||||
<p class="muted small" data-i18n="purgeHelp"></p>
|
||||
<div class="purge-row">
|
||||
<button id="purgeBtn" class="btn danger" type="button" data-i18n="purgeBtn">Delete all logs…</button>
|
||||
<span id="purgeStatus" class="purge-status muted" hidden></span>
|
||||
<!-- Interface -->
|
||||
<div class="set-panel" role="tabpanel" data-panel="interface" hidden>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="themeTitle">Theme</h3>
|
||||
<div id="themeSwitch" class="seg" role="radiogroup" data-i18n-aria="themeTitle">
|
||||
<button type="button" role="radio" data-theme-opt="system" data-i18n="themeSystem">System</button>
|
||||
<button type="button" role="radio" data-theme-opt="light" data-i18n="themeLight">Light</button>
|
||||
<button type="button" role="radio" data-theme-opt="dark" data-i18n="themeDark">Dark</button>
|
||||
</div>
|
||||
<p class="muted small hint" data-i18n="themeHelp"></p>
|
||||
</section>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="logDisplay">Log display</h3>
|
||||
<div class="field-grid">
|
||||
<span class="lbl" data-i18n="fontSize">Font size</span>
|
||||
<div id="sizeSwitch" class="seg" role="radiogroup" data-i18n-aria="fontSize">
|
||||
<button type="button" role="radio" data-size="tiny" data-i18n="sizeTiny">Tiny</button>
|
||||
<button type="button" role="radio" data-size="small" data-i18n="sizeSmall">Small</button>
|
||||
<button type="button" role="radio" data-size="medium" data-i18n="sizeMedium">Medium</button>
|
||||
<button type="button" role="radio" data-size="large" data-i18n="sizeLarge">Large</button>
|
||||
</div>
|
||||
<label for="fontSelect" data-i18n="fontLabel">Font</label>
|
||||
<select id="fontSelect" class="field"></select>
|
||||
</div>
|
||||
<div id="fontPreview" class="list preview-list" aria-hidden="true"></div>
|
||||
<p class="muted small" data-i18n="fontHelp"></p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Data -->
|
||||
<div class="set-panel" role="tabpanel" data-panel="data" hidden>
|
||||
<section class="set-section danger">
|
||||
<h3 data-i18n="dangerZone">Danger zone</h3>
|
||||
<p class="muted small" data-i18n="purgeHelp"></p>
|
||||
<div class="purge-row">
|
||||
<button id="purgeBtn" class="btn danger" type="button" data-i18n="purgeBtn">Delete all logs…</button>
|
||||
<span id="purgeStatus" class="purge-status muted" hidden></span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
Reference in new issue
Block a user