From 97df1dc65bc6364f7d974ba490463cbd6f2cd588 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 9 Aug 2024 16:24:38 +0200 Subject: [PATCH] UX: usersetting visual cleanup, add 'clear caches'-option, version bump --- assets/layers/usersettings/usersettings.json | 26 +++++++++++++++++++- package.json | 2 +- public/css/index-tailwind-output.css | 23 ++++++++++------- src/UI/Base/DynLink.svelte | 5 ++++ src/UI/Base/LogoutButton.svelte | 1 - src/UI/Base/ToSvelte.svelte | 19 +++++++++----- src/UI/Base/WeblateLink.svelte | 5 ++-- src/UI/InputElement/LanguagePicker.svelte | 2 +- src/UI/Popup/ClearCaches.svelte | 16 ++++++++++++ src/UI/SpecialVisualizations.ts | 22 +++++++++++++++-- src/UI/ThemeViewGUI.svelte | 2 +- src/index.css | 2 +- src/service-worker.ts | 10 ++++++-- 13 files changed, 108 insertions(+), 27 deletions(-) create mode 100644 src/UI/Popup/ClearCaches.svelte diff --git a/assets/layers/usersettings/usersettings.json b/assets/layers/usersettings/usersettings.json index 1d0feb47c..f7005a925 100644 --- a/assets/layers/usersettings/usersettings.json +++ b/assets/layers/usersettings/usersettings.json @@ -617,12 +617,14 @@ }, { "id": "mangrove-keys", - "classes": "flex flex-col", + "classes": "link-no-underline low-interaction p-2", "render": { "special": { "type": "link", "href": "data:application/json,{mangroveidentity}", "download": "mangrove_private_key_{_name}", + "class": "button", + "text": { "en": "Download the private key for your Mangrove Account", "de": "Laden Sie den privaten Schlüssel für Ihr Mangrove-Konto herunter", @@ -645,6 +647,7 @@ }, { "id": "mangrove-key-import", + "classes": "low-interaction p-2", "render": { "special": { "type": "import_mangrove_key", @@ -901,6 +904,27 @@ } ] }, + { + "id": "debug-title", + "render": { + "en": "

Debugging options

" + } + }, + { + "id": "clear_cache", + "classes": "low-interaction p-2", + "render": { + "special": { + "type": "clear_caches", + "text": { + "en": "Clear caches" + } + }, + "after": { + "en": "Clearing the caches will delete locally downloaded data and code. You will remain logged in and your settings will be preserved. No data should be lost" + } + } + }, { "id": "pending_changes", "render": { diff --git a/package.json b/package.json index d0383e0ba..1c6541649 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mapcomplete", - "version": "0.44.14", + "version": "0.45.0", "repository": "https://github.com/pietervdvn/MapComplete", "description": "A small website to edit OSM easily", "bugs": "https://github.com/pietervdvn/MapComplete/issues", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 4ff2caa99..a79a1a60f 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -993,6 +993,10 @@ video { margin-right: 4rem; } +.mb-4 { + margin-bottom: 1rem; +} + .mt-4 { margin-top: 1rem; } @@ -1025,10 +1029,6 @@ video { margin-right: 0.25rem; } -.mb-4 { - margin-bottom: 1rem; -} - .ml-1 { margin-left: 0.25rem; } @@ -1221,14 +1221,14 @@ video { height: 6rem; } -.h-full { - height: 100%; -} - .h-screen { height: 100vh; } +.h-full { + height: 100%; +} + .h-fit { height: -webkit-fit-content; height: -moz-fit-content; @@ -3353,6 +3353,11 @@ video { padding-right: 0.25rem; } +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -4858,7 +4863,7 @@ a.link-underline { -webkit-text-decoration: underline; } -.link-no-underline a { +.link-no-underline a, a.link-no-underline { text-decoration: none; } diff --git a/src/UI/Base/DynLink.svelte b/src/UI/Base/DynLink.svelte index 68cb6a9b6..ce109c2db 100644 --- a/src/UI/Base/DynLink.svelte +++ b/src/UI/Base/DynLink.svelte @@ -1,5 +1,6 @@ + {#if $icon} + + {/if} {@html $text} diff --git a/src/UI/Base/LogoutButton.svelte b/src/UI/Base/LogoutButton.svelte index 2b99623e1..6ca1d1c0d 100644 --- a/src/UI/Base/LogoutButton.svelte +++ b/src/UI/Base/LogoutButton.svelte @@ -9,7 +9,6 @@ diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts index cbb72b890..c1d037674 100644 --- a/src/UI/SpecialVisualizations.ts +++ b/src/UI/SpecialVisualizations.ts @@ -96,8 +96,8 @@ import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch" import { And } from "../Logic/Tags/And" import CloseNoteButton from "./Popup/Notes/CloseNoteButton.svelte" import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte" -import Loading from "./Base/Loading" import QrCode from "./Popup/QrCode.svelte" +import ClearCaches from "./Popup/ClearCaches.svelte" class NearbyImageVis implements SpecialVisualization { // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests @@ -1304,6 +1304,10 @@ export default class SpecialVisualizations { { name: "arialabel", doc: "If set, this text will be used as aria-label" + }, + { + name: "icon", + doc: "If set, show this icon next to the link. You might want to combine this with `class: button`" } ], @@ -1312,7 +1316,7 @@ export default class SpecialVisualizations { tagSource: UIEventSource>, args: string[] ): BaseUIElement { - let [text, href, classnames, download, ariaLabel] = args + let [text, href, classnames, download, ariaLabel, icon] = args if (download === "") { download = undefined } @@ -1979,6 +1983,20 @@ export default class SpecialVisualizations { constr(state: SpecialVisualizationState, tagSource: UIEventSource>, argument: string[], feature: Feature, layer: LayerConfig): BaseUIElement { return new SvelteUIElement(PendingChangesIndicator, {state, compact: false}) } + }, + { + funcName: "clear_caches", + docs: "A button which clears the locally downloaded data and the service worker. Login status etc will be kept", + args:[ + { + name: "text", + required: true, + doc: "The text to show on the button" + } + ], + constr(state: SpecialVisualizationState, tagSource: UIEventSource>, argument: string[], feature: Feature, layer: LayerConfig): SvelteUIElement { + return new SvelteUIElement(ClearCaches, {msg: argument[0] ?? "Clear local caches"}) + } } ] diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte index 23a6ba53c..417d8f628 100644 --- a/src/UI/ThemeViewGUI.svelte +++ b/src/UI/ThemeViewGUI.svelte @@ -620,7 +620,7 @@ -
+
diff --git a/src/index.css b/src/index.css index c5fd888de..c689714bf 100644 --- a/src/index.css +++ b/src/index.css @@ -508,7 +508,7 @@ a.link-underline { -webkit-text-decoration: underline; } -.link-no-underline a { +.link-no-underline a, a.link-no-underline { text-decoration: none; } diff --git a/src/service-worker.ts b/src/service-worker.ts index 0d12d2475..d46c90d59 100644 --- a/src/service-worker.ts +++ b/src/service-worker.ts @@ -44,7 +44,7 @@ const cacheFirst = async (event, attemptUpdate: boolean = false) => { return cacheResponse } return fetchAndCache(event) - }) + }), ) } @@ -57,10 +57,16 @@ self.addEventListener("fetch", async (e) => { if (requestUrl.pathname.endsWith("service-worker-version")) { console.log("Sending version number...") await event.respondWith( - new Response(JSON.stringify({ "service-worker-version": version })) + new Response(JSON.stringify({ "service-worker-version": version })), ) return } + if (requestUrl.pathname.endsWith("/service-worker-clear")) { + const keys = await caches.keys() + await Promise.all(keys.map(k => caches.delete(k))) + console.log("Cleared caches") + return + } const shouldBeCached = origin.host === requestUrl.host && origin.hostname !== "127.0.0.1" &&