From f944f4b61744bb278e1a4fdf7fd3067736e054e4 Mon Sep 17 00:00:00 2001 From: Misode Date: Sun, 12 Jun 2022 20:51:54 +0200 Subject: [PATCH] Make version switcher more obvious --- src/app/Analytics.ts | 6 +++++ src/app/Store.ts | 10 ++++++++- src/app/components/BtnMenu.tsx | 2 +- src/app/components/VersionSwitcher.tsx | 31 ++++++++++++++++++++++++++ src/app/components/index.ts | 1 + src/app/contexts/Version.tsx | 3 ++- src/app/pages/Generator.tsx | 8 ++----- src/app/pages/Guide.tsx | 9 +++----- src/app/pages/Guides.tsx | 11 ++------- src/app/pages/Sounds.tsx | 10 ++------- src/styles/global.css | 26 +++++++++++++++++++++ 11 files changed, 85 insertions(+), 32 deletions(-) create mode 100644 src/app/components/VersionSwitcher.tsx diff --git a/src/app/Analytics.ts b/src/app/Analytics.ts index 11487d66..7a2e9001 100644 --- a/src/app/Analytics.ts +++ b/src/app/Analytics.ts @@ -76,6 +76,12 @@ export namespace Analytics { }) } + export function setSelectedVersion(selected_version: string) { + gtag('set', { + selected_version, + }) + } + export function changeVersion(prev_version: string, version: string) { setVersion(version) event(ID_GENERATOR, 'set-version', version) diff --git a/src/app/Store.ts b/src/app/Store.ts index 85b6de18..d2b07d8e 100644 --- a/src/app/Store.ts +++ b/src/app/Store.ts @@ -22,7 +22,7 @@ export namespace Store { return localStorage.getItem(ID_THEME) ?? 'dark' } - export function getVersion(): VersionId { + export function getVersionOrDefault(): VersionId { const version = localStorage.getItem(ID_VERSION) if (version && VersionIds.includes(version as VersionId)) { return version as VersionId @@ -30,6 +30,14 @@ export namespace Store { return '1.19' } + export function getVersion(): VersionId | null { + const version = localStorage.getItem(ID_VERSION) + if (version && VersionIds.includes(version as VersionId)) { + return version as VersionId + } + return null + } + export function getIndent() { return localStorage.getItem(ID_INDENT) ?? '2_spaces' } diff --git a/src/app/components/BtnMenu.tsx b/src/app/components/BtnMenu.tsx index c2294954..63b971f5 100644 --- a/src/app/components/BtnMenu.tsx +++ b/src/app/components/BtnMenu.tsx @@ -15,7 +15,7 @@ export function BtnMenu(props: BtnMenuProps) { const { icon, label, relative, tooltip, tooltipLoc, children } = props const [active, setActive] = useFocus() - return
+ return
{active &&
{children} diff --git a/src/app/components/VersionSwitcher.tsx b/src/app/components/VersionSwitcher.tsx new file mode 100644 index 00000000..29099843 --- /dev/null +++ b/src/app/components/VersionSwitcher.tsx @@ -0,0 +1,31 @@ +import { useMemo } from 'preact/hooks' +import config from '../../config.json' +import { useLocale } from '../contexts' +import type { VersionId } from '../services' +import { Store } from '../Store' +import { Btn } from './Btn' +import { BtnMenu } from './BtnMenu' + +interface Props { + value?: VersionId, + allowed?: VersionId[], + hasAny?: boolean, + onChange: (version: VersionId) => void, + onAny?: () => void, +} +export function VersionSwitcher({ value, allowed, hasAny, onChange, onAny }: Props) { + const { locale } = useLocale() + + const versions = useMemo(() => { + if (allowed) return allowed + return config.versions + .map(v => v.id as VersionId) + .reverse() + }, [allowed]) + + return + {hasAny && } + {versions.map((v: string) => + onChange(v as VersionId)} />)} + +} diff --git a/src/app/components/index.ts b/src/app/components/index.ts index 28e59053..ecbd18ed 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -16,3 +16,4 @@ export * from './sounds' export * from './ToolCard' export * from './TreeView' export * from './versions' +export * from './VersionSwitcher' diff --git a/src/app/contexts/Version.tsx b/src/app/contexts/Version.tsx index 710a81f1..32e9846b 100644 --- a/src/app/contexts/Version.tsx +++ b/src/app/contexts/Version.tsx @@ -25,7 +25,7 @@ export function useVersion() { } export function VersionProvider({ children }: { children: ComponentChildren }) { - const [version, setVersion] = useState(Store.getVersion()) + const [version, setVersion] = useState(Store.getVersionOrDefault()) const [targetVersion, changeTargetVersion] = useSearchParam(VERSION_PARAM) @@ -49,6 +49,7 @@ export function VersionProvider({ children }: { children: ComponentChildren }) { useEffect(() => { Analytics.setVersion(version) + Analytics.setSelectedVersion(Store.getVersion() ?? 'default') }, []) const value: Version = { diff --git a/src/app/pages/Generator.tsx b/src/app/pages/Generator.tsx index 018b6260..acb97774 100644 --- a/src/app/pages/Generator.tsx +++ b/src/app/pages/Generator.tsx @@ -3,7 +3,7 @@ import { getCurrentUrl, route } from 'preact-router' import { useEffect, useErrorBoundary, useMemo, useRef, useState } from 'preact/hooks' import config from '../../config.json' import { Analytics } from '../Analytics' -import { Ad, Btn, BtnMenu, ErrorPanel, Footer, HasPreview, Octicon, PreviewPanel, SearchList, SourcePanel, TextInput, Tree } from '../components' +import { Ad, Btn, BtnMenu, ErrorPanel, Footer, HasPreview, Octicon, PreviewPanel, SearchList, SourcePanel, TextInput, Tree, VersionSwitcher } from '../components' import { useLocale, useProject, useTitle, useVersion } from '../contexts' import { AsyncCancel, useActiveTimeout, useAsync, useModel, useSearchParam } from '../hooks' import { getOutput } from '../schema/transformOutput' @@ -363,11 +363,7 @@ export function Generator({}: Props) { - - {allowedVersions.map(v => - selectVersion(v)} /> - )} - + diff --git a/src/app/pages/Guide.tsx b/src/app/pages/Guide.tsx index 4232995a..9815808b 100644 --- a/src/app/pages/Guide.tsx +++ b/src/app/pages/Guide.tsx @@ -4,7 +4,7 @@ import { marked } from 'marked' import { route } from 'preact-router' import { useCallback, useEffect, useMemo, useState } from 'preact/hooks' import config from '../../config.json' -import { Ad, Btn, BtnMenu, ChangelogTag, Footer, Giscus, Octicon } from '../components' +import { Ad, Btn, ChangelogTag, Footer, Giscus, Octicon, VersionSwitcher } from '../components' import { useLocale, useTitle, useVersion } from '../contexts' import { useActiveTimeout, useAsync, useHash } from '../hooks' import type { VersionId } from '../services' @@ -50,7 +50,7 @@ export function Guide({ id }: Props) { const allowedVersions = useMemo(() => { const orderedVersions = config.versions.map(v => v.id) - return (frontMatter?.versions as string[]) + return (frontMatter?.versions as VersionId[]) ?.sort((a, b) => orderedVersions.indexOf(b) - orderedVersions.indexOf(a)) }, [frontMatter?.versions]) @@ -179,10 +179,7 @@ export function Guide({ id }: Props) { {locale('guides.all')} - {allowedVersions && - {allowedVersions.map((v: string) => - changeVersion(v as VersionId)} />)} - } + {allowedVersions && }
{(frontMatter?.tags && frontMatter.tags.length > 0) &&
{frontMatter.tags.map((tag: string) => diff --git a/src/app/pages/Guides.tsx b/src/app/pages/Guides.tsx index e8b13fd5..0343c24d 100644 --- a/src/app/pages/Guides.tsx +++ b/src/app/pages/Guides.tsx @@ -1,9 +1,7 @@ import { useMemo, useState } from 'preact/hooks' -import config from '../../config.json' -import { Btn, BtnMenu, ChangelogTag, Footer, GuideCard, TextInput } from '../components' +import { ChangelogTag, Footer, GuideCard, TextInput, VersionSwitcher } from '../components' import { useLocale, useTitle, useVersion } from '../contexts' import { useTags } from '../hooks/useTags' -import type { VersionId } from '../services' interface Guide { id: string, @@ -54,12 +52,7 @@ export function Guides({}: Props) {
- - setVersionFiler(!versionFilter)} /> - {config.versions.slice().reverse().map(v => - {changeVersion(v.id as VersionId); setVersionFiler(true)}} /> - )} - + {changeVersion(v); setVersionFiler(true)}} hasAny onAny={() => setVersionFiler(false)} />
{activeTags.length > 0 &&
{activeTags.map(tag => toggleTag(tag)} />)} diff --git a/src/app/pages/Sounds.tsx b/src/app/pages/Sounds.tsx index 051bbc96..5a7ffc92 100644 --- a/src/app/pages/Sounds.tsx +++ b/src/app/pages/Sounds.tsx @@ -1,10 +1,8 @@ import type { Howl, HowlOptions } from 'howler' import { useEffect, useMemo, useRef, useState } from 'preact/hooks' -import config from '../../config.json' -import { Btn, BtnMenu, ErrorPanel, Footer, SoundConfig, TextInput } from '../components' +import { Btn, ErrorPanel, Footer, SoundConfig, TextInput, VersionSwitcher } from '../components' import { useLocale, useTitle, useVersion } from '../contexts' import { useAsync } from '../hooks' -import type { VersionId } from '../services' import { fetchSounds } from '../services' import { hexId } from '../Utils' @@ -71,11 +69,7 @@ export function Sounds({}: Props) { {configs.length > 1 && }
- - {config.versions.slice().reverse().map(v => - changeVersion(v.id as VersionId)} /> - )} - +
{sounds && howler && configs.map(c => diff --git a/src/styles/global.css b/src/styles/global.css index c986d53d..13350096 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -654,6 +654,32 @@ main.has-preview { border-bottom-right-radius: 6px; } +.version-switcher > .btn { + background-color: #307328; +} + +.version-switcher > .btn:hover { + background-color: #296422; +} + +.version-switcher.attention > .btn { + outline: 2px solid transparent; + animation: outline-grow 2s ease-out 1s 4 forwards; +} + +@keyframes outline-grow { + 0% { + outline-offset: 0px; + outline-width: 2px; + outline-color: #307328; + } + 50%, 100% { + outline-offset: 10px; + outline-width: 0px; + outline-color: transparent; + } +} + .popup-actions { display: flex; position: fixed;