From 2e71974503ed0e7a7a9714772ed49dd9d726f0f2 Mon Sep 17 00:00:00 2001 From: mirgb <83551660+mirgb@users.noreply.github.com> Date: Sat, 10 Dec 2022 12:11:17 -0500 Subject: [PATCH] feat: brand new Modal component (#41) * feat: brand new Modal component * Apply suggestions from code review Co-authored-by: Ax333l --- src/app.css | 17 +++ src/data/api/cache.ts | 67 +++++----- src/data/api/settings.ts | 3 +- .../components/atoms/ApiSettingsButton.svelte | 126 ++++++++++++++++++ src/lib/components/atoms/Button.svelte | 6 +- src/lib/components/atoms/Modal.svelte | 71 ++++++++++ src/lib/components/molecules/NavHost.svelte | 27 ++-- src/routes/api-settings/+page.svelte | 26 ---- static/icons/reset.svg | 1 + 9 files changed, 264 insertions(+), 80 deletions(-) create mode 100644 src/lib/components/atoms/ApiSettingsButton.svelte create mode 100644 src/lib/components/atoms/Modal.svelte delete mode 100644 src/routes/api-settings/+page.svelte create mode 100644 static/icons/reset.svg diff --git a/src/app.css b/src/app.css index b331611..e05ca14 100644 --- a/src/app.css +++ b/src/app.css @@ -33,6 +33,17 @@ body { margin-top: 7rem; } +.button-reset { + background-color: transparent; + border: none; + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + padding: 0; +} + :root { --main-font: "Manrope", sans-serif; --mono-font: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; @@ -100,6 +111,12 @@ h6 { font-size: 0.85rem; } +p { + color: var(--grey-five); + font-weight: 400; + font-size: 1rem; +} + /*---------------*/ ::-webkit-scrollbar { diff --git a/src/data/api/cache.ts b/src/data/api/cache.ts index edc61fa..269e7ac 100644 --- a/src/data/api/cache.ts +++ b/src/data/api/cache.ts @@ -1,51 +1,56 @@ -import { browser } from "$app/environment"; +import { browser } from '$app/environment'; -import { dev_log } from "$lib/utils"; +import { dev_log } from '$lib/utils'; -const CACHE_KEY_PREFIX = "revanced_api_cache_l1"; +const CACHE_KEY_PREFIX = 'revanced_api_cache_l1'; const L1_CACHE_VALIDITY = 5 * 60 * 1000; // 5 minutes function l1_key_name(endpoint: string) { - return `${CACHE_KEY_PREFIX}:${endpoint}`; + return `${CACHE_KEY_PREFIX}:${endpoint}`; } // Get item from the cache export function get(endpoint: string) { - if (!browser) { - return null; - } + if (!browser) { + return null; + } - const key_name = l1_key_name(endpoint); - const ls_data: { valid_until: number; data: any } | null = JSON.parse(localStorage.getItem(key_name)); + const key_name = l1_key_name(endpoint); + const ls_data: { valid_until: number; data: any } | null = JSON.parse( + localStorage.getItem(key_name) as string + ); - if (ls_data === null || ls_data.valid_until <= Date.now()) { - dev_log("Cache", `missed "${endpoint}"`); - localStorage.removeItem(key_name); - return null; - } + if (ls_data === null || ls_data.valid_until <= Date.now()) { + dev_log('Cache', `missed "${endpoint}"`); + localStorage.removeItem(key_name); + return null; + } - - dev_log("Cache", `hit "${endpoint}"`); - return ls_data.data; + dev_log('Cache', `hit "${endpoint}"`); + return ls_data.data; } // Update the cache export function update(endpoint: string, data: any) { - if (!browser) { - return; - } + if (!browser) { + return; + } - localStorage.setItem(l1_key_name(endpoint), JSON.stringify({ - data, - valid_until: Date.now() + L1_CACHE_VALIDITY - })); + localStorage.setItem( + l1_key_name(endpoint), + JSON.stringify({ + data, + valid_until: Date.now() + L1_CACHE_VALIDITY + }) + ); } -// Clear the cache -export function clear() { - for (const key of Object.keys(localStorage)) { - if (key.startsWith(CACHE_KEY_PREFIX)) { - localStorage.removeItem(key); - } - } +// Clear the cache and reload +export function clear_and_reload() { + for (const key of Object.keys(localStorage)) { + if (key.startsWith(CACHE_KEY_PREFIX)) { + localStorage.removeItem(key); + } + } + location.reload(); } diff --git a/src/data/api/settings.ts b/src/data/api/settings.ts index 6760c20..986636d 100644 --- a/src/data/api/settings.ts +++ b/src/data/api/settings.ts @@ -2,9 +2,10 @@ import { browser } from "$app/environment"; const URL_KEY = "revanced_api_url"; +export const default_base_url = "https://releases.revanced.app"; + // Get base URL export function api_base_url(): string { - const default_base_url = "https://releases.revanced.app"; if (browser) { return localStorage.getItem(URL_KEY) || default_base_url; } diff --git a/src/lib/components/atoms/ApiSettingsButton.svelte b/src/lib/components/atoms/ApiSettingsButton.svelte new file mode 100644 index 0000000..2285978 --- /dev/null +++ b/src/lib/components/atoms/ApiSettingsButton.svelte @@ -0,0 +1,126 @@ + + + +
+

Configure the backend

+
+

API URL:

+
+ + +
+
+
+ + +
+
+ + + diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte index 5a30766..6f0f191 100644 --- a/src/lib/components/atoms/Button.svelte +++ b/src/lib/components/atoms/Button.svelte @@ -9,7 +9,9 @@
- {icon} + {#if icon} + {icon} + {/if}
@@ -46,8 +48,6 @@ filter: brightness(85%); } - - div, .button-secondary { display: flex; diff --git a/src/lib/components/atoms/Modal.svelte b/src/lib/components/atoms/Modal.svelte new file mode 100644 index 0000000..7a26eba --- /dev/null +++ b/src/lib/components/atoms/Modal.svelte @@ -0,0 +1,71 @@ + + +
+ + {#if modalOpen} +
+ + {/if} +
+ + diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte index 9e191da..8fc69f2 100644 --- a/src/lib/components/molecules/NavHost.svelte +++ b/src/lib/components/molecules/NavHost.svelte @@ -1,10 +1,10 @@ - -
- - -
-
- -
- - diff --git a/static/icons/reset.svg b/static/icons/reset.svg new file mode 100644 index 0000000..29ce566 --- /dev/null +++ b/static/icons/reset.svg @@ -0,0 +1 @@ + \ No newline at end of file