From 9cb36662b301c734e7317991c7581052b2ac3c77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= Date: Tue, 5 Nov 2024 02:03:08 +0100 Subject: [PATCH] polish --- src/i18n/de/index.ts | 10 +- src/i18n/en/index.ts | 12 +- src/lib/components/Tooltip.svelte | 6 + src/lib/components/layout/Layout.svelte | 1 - src/routes/(app)/BackupPopup.svelte | 97 ------- src/routes/(app)/ConnectionPopup.svelte | 256 ------------------ src/routes/(app)/Footer.svelte | 122 +++++++-- src/routes/(app)/Sidebar.svelte | 97 ++++--- src/routes/(app)/config/ConfigTabs.svelte | 60 ---- src/routes/(app)/config/Navigation.svelte | 20 +- src/routes/(app)/config/PageTransition.svelte | 6 +- src/routes/(app)/config/settings/+page.svelte | 108 ++++++-- .../{ota-update => firmware}/+layout.svelte | 3 +- .../{ota-update => firmware}/+page.svelte | 0 .../(app)/{ota-update => firmware}/+page.ts | 0 .../(app)/{ota-update => firmware}/OTA.svelte | 0 .../[device]/+page.svelte | 0 .../[device]/+page.ts | 0 .../[device]/[version]/+page.svelte | 0 .../[device]/[version]/+page.ts | 0 .../(app)/{ota-update => firmware}/listing.ts | 0 21 files changed, 287 insertions(+), 511 deletions(-) delete mode 100644 src/routes/(app)/BackupPopup.svelte delete mode 100644 src/routes/(app)/ConnectionPopup.svelte delete mode 100644 src/routes/(app)/config/ConfigTabs.svelte rename src/routes/(app)/{ota-update => firmware}/+layout.svelte (71%) rename src/routes/(app)/{ota-update => firmware}/+page.svelte (100%) rename src/routes/(app)/{ota-update => firmware}/+page.ts (100%) rename src/routes/(app)/{ota-update => firmware}/OTA.svelte (100%) rename src/routes/(app)/{ota-update => firmware}/[device]/+page.svelte (100%) rename src/routes/(app)/{ota-update => firmware}/[device]/+page.ts (100%) rename src/routes/(app)/{ota-update => firmware}/[device]/[version]/+page.svelte (100%) rename src/routes/(app)/{ota-update => firmware}/[device]/[version]/+page.ts (100%) rename src/routes/(app)/{ota-update => firmware}/listing.ts (100%) diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts index c6cba085..2c9c515a 100644 --- a/src/i18n/de/index.ts +++ b/src/i18n/de/index.ts @@ -17,11 +17,11 @@ const de = { RELOAD: "Neu laden", }, backup: { - TITLE: "Lokale Kopie", - INDIVIDUAL: "Einzeldateien", + TITLE: "Backup", + AUTO_BACKUP: "Auto-backup", DISCLAIMER: "Das Backup in diesem Browser gespeichert und bleibt nur auf diesem Computer.", - DOWNLOAD: "Alles herunterladen", + DOWNLOAD: "Alles", RESTORE: "Wiederherstellen", }, modal: { @@ -109,7 +109,7 @@ const de = { }, configure: { chords: { - TITLE: "Akkorde", + TITLE: "Bibliothek", HOLD_KEYS: "Akkord halten", NEW_CHORD: "Neuer Akkord", DUPLICATE: "Akkord existiert bereits", @@ -131,7 +131,7 @@ const de = { TITLE: "Layout", }, settings: { - TITLE: "Einstellungen", + TITLE: "Gerät", }, }, plugin: { diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts index 60d6159a..83906923 100644 --- a/src/i18n/en/index.ts +++ b/src/i18n/en/index.ts @@ -13,11 +13,11 @@ const en = { TITLE: "Update your device", }, backup: { - TITLE: "Local backup", - INDIVIDUAL: "Individual backups", + TITLE: "Backup", + AUTO_BACKUP: "Auto-backup", DISCLAIMER: - "A backup is made and stored in this browser, and always remains only on your computer.", - DOWNLOAD: "Download Everything", + "Whenever you connect this device to browser, a backup is made locally and kept only on your computer.", + DOWNLOAD: "Everything", RESTORE: "Restore", }, sync: { @@ -108,7 +108,7 @@ const en = { }, configure: { chords: { - TITLE: "Chords", + TITLE: "Library", HOLD_KEYS: "Hold chord", NEW_CHORD: "New chord", DUPLICATE: "Chord already exists", @@ -130,7 +130,7 @@ const en = { TITLE: "Layout", }, settings: { - TITLE: "Settings", + TITLE: "Device", }, }, plugin: { diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte index 94a6f2f2..1ad3c8ac 100644 --- a/src/lib/components/Tooltip.svelte +++ b/src/lib/components/Tooltip.svelte @@ -17,5 +17,11 @@ diff --git a/src/lib/components/layout/Layout.svelte b/src/lib/components/layout/Layout.svelte index 07aa73b0..bf12f4c6 100644 --- a/src/lib/components/layout/Layout.svelte +++ b/src/lib/components/layout/Layout.svelte @@ -70,7 +70,6 @@ width: 100%; height: 100%; - margin-bottom: 96px; } fieldset { diff --git a/src/routes/(app)/BackupPopup.svelte b/src/routes/(app)/BackupPopup.svelte deleted file mode 100644 index 0b7f5b67..00000000 --- a/src/routes/(app)/BackupPopup.svelte +++ /dev/null @@ -1,97 +0,0 @@ - - -
-

- -

-

- {$LL.backup.DISCLAIMER()} -

-
- {$LL.backup.INDIVIDUAL()} - - - -
-
- - -
-
- - diff --git a/src/routes/(app)/ConnectionPopup.svelte b/src/routes/(app)/ConnectionPopup.svelte deleted file mode 100644 index e4c2ffc9..00000000 --- a/src/routes/(app)/ConnectionPopup.svelte +++ /dev/null @@ -1,256 +0,0 @@ - - -
-
-

{$LL.deviceManager.TITLE()}

- -
- - {#if $serialPort} -

- {$serialPort.company} - {$serialPort.device} - {$serialPort.chipset} -
- Version {$serialPort.version} -

- {#if $serialPort.version.toString() !== import.meta.env.VITE_LATEST_FIRMWARE} - Firmware Update Instructions - {/if} - - {/if} - - {#if browser} - {#if navigator.userAgent.includes("Linux") && !$serialPort} -
-

{@html $LL.deviceManager.LINUX_PERMISSIONS()}

-

- In most cases you can simply follow the Arduino Guide on serial port permissions. -

-

Special systems:

- -
- {/if} - {#if rebootInfo} -

- {$LL.deviceManager.bootMenu.POWER_WARNING()} -

- {/if} -
- {#if $serialPort} - - {:else} - - {/if} -
- (terminal = !terminal)}>terminal - -
-
- {#if powerDialog} -
(powerDialog = !powerDialog)} - onkeypress={(event) => { - if (event.key === "Enter") powerDialog = !powerDialog; - }} - >
- -

{$LL.deviceManager.bootMenu.TITLE()}

- - - - {/if} - {/if} -
- - diff --git a/src/routes/(app)/Footer.svelte b/src/routes/(app)/Footer.svelte index 179c4326..b54e8d9a 100644 --- a/src/routes/(app)/Footer.svelte +++ b/src/routes/(app)/Footer.svelte @@ -8,11 +8,25 @@ import { loadLocaleAsync } from "$i18n/i18n-util.async"; import { tick } from "svelte"; import SyncOverlay from "./SyncOverlay.svelte"; - import { serialPort } from "$lib/serial/connection"; + import { + initSerial, + serialPort, + sync, + syncProgress, + syncStatus, + } from "$lib/serial/connection"; + import { fade, slide } from "svelte/transition"; let locale = $state( (browser && (localStorage.getItem("locale") as Locales)) || detectLocale(), ); + + let currentDevice = $derived( + $serialPort + ? `${$serialPort.device.toLowerCase()}_${$serialPort.chipset.toLowerCase()}` + : undefined, + ); + $effect(() => { if (!browser) return; localStorage.setItem("locale", locale); @@ -33,6 +47,26 @@ } } + async function connect() { + try { + await initSerial(true); + } catch (error) { + console.error(error); + alert( + "Connection failed. Is your device maybe pre-CCOS? Refer to the doc link in the bottom left for more information on your device.", + ); + } + } + + function disconnect(event: MouseEvent) { + if (event.shiftKey) { + sync(); + } else { + $serialPort?.forget(); + $serialPort = undefined; + } + } + let languageSelect: HTMLSelectElement; @@ -40,39 +74,58 @@ -
+
{#if !$serialPort} -
- warning{$LL.deviceManager.NO_DEVICE()} -
+ + {:else} + + {/if} + + {#if $syncStatus !== "done"} + {/if} -
@@ -126,6 +179,37 @@ opacity: 0; } + .sync-box { + display: flex; + align-items: center; + justify-content: center; + position: relative; + + button { + text-wrap: nowrap; + } + } + + progress { + position: absolute; + z-index: -1; + bottom: 0; + left: 16px; + right: 16px; + overflow: hidden; + width: calc(100% - 32px); + height: 8px; + border-radius: 4px; + } + + progress::-webkit-progress-bar { + background: var(--md-sys-color-background); + } + + progress::-webkit-progress-value { + background: var(--md-sys-color-primary); + } + .warning { color: var(--md-sys-color-error); gap: 8px; diff --git a/src/routes/(app)/Sidebar.svelte b/src/routes/(app)/Sidebar.svelte index 07714288..4710cb59 100644 --- a/src/routes/(app)/Sidebar.svelte +++ b/src/routes/(app)/Sidebar.svelte @@ -1,12 +1,7 @@ @@ -39,10 +57,18 @@ -
    -
  • - -
    • -
  • - -
    • -
diff --git a/src/routes/(app)/config/Navigation.svelte b/src/routes/(app)/config/Navigation.svelte index b4c1a140..4b5a1af3 100644 --- a/src/routes/(app)/config/Navigation.svelte +++ b/src/routes/(app)/config/Navigation.svelte @@ -3,8 +3,8 @@ import { canShare, triggerShare } from "$lib/share"; import { action } from "$lib/title"; import LL from "$i18n/i18n-svelte"; - import ConfigTabs from "./ConfigTabs.svelte"; import EditActions from "./EditActions.svelte"; + import { sync, syncStatus } from "$lib/serial/connection";