From 81f1742289e2f24668c1a855d676e5c0f1eb92f7 Mon Sep 17 00:00:00 2001 From: Shiba <44804845+DeepDoge@users.noreply.github.com> Date: Fri, 22 Apr 2022 20:42:57 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=99=20updating=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/common.css | 61 +++++++++++++++++++++ src/popup/popup.css | 69 ++++++++++++++++++++++++ src/popup/popup.html | 4 +- src/popup/popup.sass | 23 -------- src/popup/popup.tsx | 123 ++++++++++++++++++------------------------ 5 files changed, 184 insertions(+), 96 deletions(-) create mode 100644 src/common/common.css create mode 100644 src/popup/popup.css delete mode 100644 src/popup/popup.sass diff --git a/src/common/common.css b/src/common/common.css new file mode 100644 index 0000000..3cfe324 --- /dev/null +++ b/src/common/common.css @@ -0,0 +1,61 @@ +:root { + --color-master: #488e77; + --color-slave: #458593; + --color-error: rgb(245, 81, 69); + --color-gradient-0: linear-gradient(130deg, var(--color-master), var(--color-slave)); + --color-gradient-1: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%); + --color-dark: #0e1117; + --color-light: rgb(235, 237, 241); + --gradient-animation: gradient-animation 5s linear infinite alternate; +} + +:root { + letter-spacing: .2ch; +} + +body { + background: linear-gradient(to left top, var(--color-master), var(--color-slave)); + background-attachment: fixed; + color: var(--color-light); + padding: 0; + margin: 0; +} + +*, +*::before, +*::after { + box-sizing: border-box; + position: relative; +} + +.button { + display: inline-flex; + justify-content: center; + align-items: center; + padding: .5em 1em; + + background: var(--color-dark); + color: var(--color-light); + + cursor: pointer; + border-radius: .5em; +} + +.button.active { + background: var(--color-gradient-0); +} + +.button.active::before { + content: ""; + position: absolute; + inset: 0; + background: var(--color-gradient-0); + filter: blur(.5em); + z-index: -1; + border-radius: .5em; +} + +.button.disabled { + filter: saturate(0); + pointer-events: none; +} \ No newline at end of file diff --git a/src/popup/popup.css b/src/popup/popup.css new file mode 100644 index 0000000..66cc6a6 --- /dev/null +++ b/src/popup/popup.css @@ -0,0 +1,69 @@ +.popup { + width: 35em; + max-width: 100%; + overflow: hidden; +} + +label { + font-size: 2em; + font-weight: bold; + text-align: center; +} + +header { + display: grid; + position: sticky; + top: 0; + justify-content: end; + background: rgba(19, 19, 19, 0.95); + padding: .5em .2em; +} + +.profile { + display: grid; + grid-template-columns: auto auto; + align-items: center; + gap: .25em; +} + +.profile .name { + display: inline-block; + width: 10em; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; +} + +.profile::before { + content: ''; + display: inline-block; + width: 4ch; + aspect-ratio: 1/1; + background: var(--color-gradient-0); + border-radius: 100000%; +} + +main { + display: grid; + gap: 1em; + padding: .25em; +} + +section { + display: grid; + justify-items: center; + gap: .75em; + background: rgba(19, 19, 19, 0.75); + border-radius: 1em; + padding: .5em; +} + +.options { + display: grid; + width: 100%; + grid-template-columns: repeat(auto-fit, minmax(3em, 1fr)); + justify-content: center; + gap: .25em; +} \ No newline at end of file diff --git a/src/popup/popup.html b/src/popup/popup.html index d419cc8..1312995 100644 --- a/src/popup/popup.html +++ b/src/popup/popup.html @@ -6,9 +6,7 @@ -
-
-
+
\ No newline at end of file diff --git a/src/popup/popup.sass b/src/popup/popup.sass deleted file mode 100644 index 656878b..0000000 --- a/src/popup/popup.sass +++ /dev/null @@ -1,23 +0,0 @@ -.radio-label - font-size: 1.1rem - display: block - -.container - display: grid - grid-auto-flow: row - gap: 1.5em - -.container section - display: grid - grid-auto-flow: row - gap: 1em - -button - cursor: pointer - -.container .options - display: flex - gap: .25em - white-space: nowrap - flex-wrap: wrap - justify-content: center diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx index 31819fe..54dd406 100644 --- a/src/popup/popup.tsx +++ b/src/popup/popup.tsx @@ -1,88 +1,71 @@ import { h, render } from 'preact' import { useState } from 'preact/hooks' -import ButtonRadio, { SelectionOption } from '../common/components/ButtonRadio' -import { loginAndSetNickname } from '../common/crypto' -import { getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries, TargetPlatformName, YTUrlResolverName } from '../common/settings' +import { getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries } from '../common/settings' import { setSetting, useLbrySettings } from '../common/useSettings' +import '../common/common.css' +import './popup.css' import { LbryPathnameCache } from '../common/yt/urlCache' -import './popup.sass' +import { loginAndSetNickname } from '../common/crypto' /** Gets all the options for redirect destinations as selection options */ -const platformOptions: SelectionOption[] = getTargetPlatfromSettingsEntiries() - .map(([value, { displayName: display }]) => ({ value, display })) +const targetPlatforms = getTargetPlatfromSettingsEntiries() -const ytUrlResolverOptions: SelectionOption[] = getYtUrlResolversSettingsEntiries() - .map(([value, { name: display }]) => ({ value, display })) +const ytUrlResolverOptions = getYtUrlResolversSettingsEntiries() function WatchOnLbryPopup() { const { redirect, targetPlatform, urlResolver, privateKey, publicKey } = useLbrySettings() let [clearingCache, updateClearingCache] = useState(() => false) - return
-
- - setSetting('redirect', redirect.toLowerCase() === 'yes')} /> -
-
- - setSetting('targetPlatform', platform)} /> -
-
- - setSetting('urlResolver', urlResolver)} /> -
-
- { - await LbryPathnameCache.clearAll() - alert('Cleared Cache.') - }}> - - -
-
- - - - -
-
- - {(!privateKey || !publicKey) ? - - loginAndSetNickname()} target='_blank'> - + return +
+
+ +
+ {targetPlatforms.map(([name, value]) => + setSetting('targetPlatform', name)} className={`button ${targetPlatform === name ? 'active' : ''}`}> + {value.displayName} + + )} +
+
+
+ +
+ {ytUrlResolverOptions.map(([name, value]) => + setSetting('urlResolver', name)} className={`button ${urlResolver === name ? 'active' : ''}`}> + {value.name} + + )} +
+ { + updateClearingCache(true) + await LbryPathnameCache.clearAll() + updateClearingCache(false) + alert("Cleared Cache!") + }} className={`button active ${clearingCache ? 'disabled' : ''}`}> + Clear Resolver Cache + +
+
}