mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2025-07-18 11:18:28 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

web/settings/debug: use the section heading component, fix padding

Browse Source
This commit is contained in:
wukko 2024-10-11 22:59:52 +06:00
parent 02024ca7fc
commit 002e642c51
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
1 changed files with 15 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/routes/settings/debug/+page.svelte
View File

@ -1,16 +1,13 @@
<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 CopyIcon from "$components/misc/CopyIcon.svelte";
import { t } from "$lib/i18n/translations";
import { copyURL } from "$lib/download";
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 = [ $: sections = [
{ title: "device", data: device }, { title: "device", data: device },
{ title: "app", data: app }, { title: "app", data: app },
@ -18,15 +15,6 @@
{ title: "version", data: $version }, { title: "version", data: $version },
]; ];
let lastCopiedSection: number | null = null;
let lastCopiedSectionResetTimeout: ReturnType<typeof setTimeout>;
$: if (lastCopiedSection !== null) {
lastCopiedSectionResetTimeout = setTimeout(() => {
lastCopiedSection = null;
}, 1500);
}
onMount(() => { onMount(() => {
if (!$settings.advanced.debug) { if (!$settings.advanced.debug) {
goto(defaultNavPage("settings"), { replaceState: true }); goto(defaultNavPage("settings"), { replaceState: true });
@ -37,27 +25,16 @@
{#if $settings.advanced.debug} {#if $settings.advanced.debug}
<div id="debug-page"> <div id="debug-page">
{#each sections as { title, data }, i} {#each sections as { title, data }, i}
<div id="debug-section-title"> <div class="debug-section">
<h3>{title}</h3> <SectionHeading
sectionId={title}
<button {title}
id="debug-section-copy-button" copyData={JSON.stringify(data)}
aria-label={lastCopiedSection === i />
? $t("button.copied")
: $t("button.copy")}
on:click={() => {
clearTimeout(lastCopiedSectionResetTimeout);
lastCopiedSection = i;
copyURL(JSON.stringify(data));
}}
>
<CopyIcon regularIcon check={lastCopiedSection === i} />
</button>
</div>
<div class="json-block subtext"> <div class="json-block subtext">
{JSON.stringify(data, null, 2)} {JSON.stringify(data, null, 2)}
</div> </div>
</div>
{/each} {/each}
</div> </div>
{/if} {/if}
@ -66,30 +43,14 @@
#debug-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);
} }
#debug-section-title { .debug-section {
display: flex; display: flex;
flex-direction: start; flex-direction: column;
align-items: center; gap: var(--padding);
gap: 0.4rem;
}
#debug-section-copy-button {
background: transparent;
padding: 2px;
box-shadow: none;
border-radius: 5px;
transition: opacity 0.2s;
opacity: 0.7;
}
#debug-section-copy-button :global(.copy-animation),
#debug-section-copy-button :global(.copy-animation *) {
width: 17px;
height: 17px;
} }
.json-block { .json-block {