blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/debug: add a copy button, fix page padding, refactor (#782)

Browse source 
Co-authored-by: wukko <me@wukko.me>
This commit is contained in:
Alec Armbruster 2024-10-11 10:04:19 -07:00 committed by GitHub
parent 1e26788a1e
commit dc12d6acad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/src/components/misc/SectionHeading.svelte
View file

@ -8,6 +8,9 @@
export let title: string; export let title: string;
export let sectionId: string; export let sectionId: string;
export let beta = false; export let beta = false;
export let copyData = "";
const sectionURL = `${$page.url.origin}${$page.url.pathname}#${sectionId}`;
let copied = false; let copied = false;
@ -19,19 +22,27 @@
</script> </script>
<div class="heading-container"> <div class="heading-container">
<h3 class="content-title">{title}</h3> <h3 class="content-title">
{title}
</h3>
{#if beta} {#if beta}
<div class="beta-label">{$t("general.beta")}</div> <div class="beta-label">
{$t("general.beta")}
</div>
{/if} {/if}
<button <button
class="link-copy" class="link-copy"
aria-label={copied ? $t("button.copied") : $t("button.copy.section")} aria-label={copied
? $t("button.copied")
: $t(`button.copy${copyData ? "" : ".section"}`)}
on:click={() => { on:click={() => {
copied = true; copied = true;
copyURL(`${$page.url.origin}${$page.url.pathname}#${sectionId}`); copyURL(copyData || sectionURL);
}} }}
> >
<CopyIcon check={copied} /> <CopyIcon check={copied} regularIcon={!!copyData} />
</button> </button>
</div> </div>

55
web/src/routes/settings/debug/+page.svelte
View file

@ -1,12 +1,20 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { version } from "$lib/version"; import { version } from "$lib/version";
import { device, app } from "$lib/device"; import { device, app } from "$lib/device";
import { defaultNavPage } from "$lib/subnav"; import { defaultNavPage } from "$lib/subnav";
import settings, { storedSettings } from "$lib/state/settings"; import settings, { storedSettings } from "$lib/state/settings";
import SectionHeading from "$components/misc/SectionHeading.svelte";
$: sections = [
{ title: "device", data: device },
{ title: "app", data: app },
{ title: "settings", data: $storedSettings },
{ title: "version", data: $version },
];
onMount(() => { onMount(() => {
if (!$settings.advanced.debug) { if (!$settings.advanced.debug) {
goto(defaultNavPage("settings"), { replaceState: true }); goto(defaultNavPage("settings"), { replaceState: true });
@ -15,38 +23,37 @@
</script> </script>
{#if $settings.advanced.debug} {#if $settings.advanced.debug}
<div id="advanced-page"> <div id="debug-page">
<h3>device:</h3> {#each sections as { title, data }, i}
<div class="message-container subtext"> <div class="debug-section">
{JSON.stringify(device, null, 2)} <SectionHeading
</div> sectionId={title}
{title}
<h3>app:</h3> copyData={JSON.stringify(data)}
<div class="message-container subtext"> />
{JSON.stringify(app, null, 2)} <div class="json-block subtext">
</div> {JSON.stringify(data, null, 2)}
</div>
<h3>settings:</h3> </div>
<div class="message-container subtext"> {/each}
{JSON.stringify($storedSettings, null, 2)}
</div>
<h3>version:</h3>
<div class="message-container subtext">
{JSON.stringify($version, null, 2)}
</div>
</div> </div>
{/if} {/if}
<style> <style>
#advanced-page { #debug-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--padding); padding: calc(var(--subnav-padding) / 2);
gap: var(--padding); gap: var(--padding);
} }
.message-container { .debug-section {
display: flex;
flex-direction: column;
gap: var(--padding);
}
.json-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
line-break: anywhere; line-break: anywhere;