akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 15:47:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make version switcher more obvious

Browse Source
This commit is contained in:
Misode
2022-06-12 20:51:54 +02:00
parent 01a95dd9d4
commit f944f4b617
11 changed files with 85 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/pages/Generator.tsx
View File

@@ -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) {
<BtnMenu icon="archive" label={locale('presets')} relative={false}>
<SearchList searchPlaceholder={locale('search')} noResults={locale('no_presets')} values={presets} onSelect={selectPreset}/>
</BtnMenu>
<BtnMenu icon="tag" label={version} tooltip={locale('switch_version')} data-cy="version-switcher">
{allowedVersions.map(v =>
<Btn label={v} active={v === version} onClick={() => selectVersion(v)} />
)}
</BtnMenu>
<VersionSwitcher value={version} onChange={selectVersion} allowed={allowedVersions} />
<BtnMenu icon="kebab_horizontal" tooltip={locale('more')}>
<Btn icon="history" label={locale('reset')} onClick={reset} />
<Btn icon="arrow_left" label={locale('undo')} onClick={undo} />

9
src/app/pages/Guide.tsx
View File

@@ -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')}
</a>
<Btn icon={shareActive ? 'check' : 'link'} label={locale('share')} onClick={onShare} active={shareActive} tooltip={locale(shareActive ? 'copied' : 'copy_share')} class="guide-share" />
{allowedVersions && <BtnMenu icon="tag" label={guideVersion} tooltip={locale('switch_version')}>
{allowedVersions.map((v: string) =>
<Btn label={v} active={v === guideVersion} onClick={() => changeVersion(v as VersionId)} />)}
</BtnMenu>}
{allowedVersions && <VersionSwitcher value={guideVersion} allowed={allowedVersions} onChange={changeVersion} />}
</div>
{(frontMatter?.tags && frontMatter.tags.length > 0) && <div class="guide-tags">
{frontMatter.tags.map((tag: string) =>

11
src/app/pages/Guides.tsx
View File

@@ -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) {
<div class="guides">
<div class="changelog-query">
<TextInput class="btn btn-input changelog-search" placeholder={locale('guides.search')} value={search} onChange={setSearch} />
<BtnMenu icon="tag" label={versionFilter ? version : locale('any_version')} tooltip={locale('switch_version')}>
<Btn label={locale('any_version')} active={!versionFilter} onClick={() => setVersionFiler(!versionFilter)} />
{config.versions.slice().reverse().map(v =>
<Btn label={v.id} active={versionFilter && v.id === version} onClick={() => {changeVersion(v.id as VersionId); setVersionFiler(true)}} />
)}
</BtnMenu>
<VersionSwitcher value={versionFilter ? version : undefined} onChange={v => {changeVersion(v); setVersionFiler(true)}} hasAny onAny={() => setVersionFiler(false)} />
</div>
{activeTags.length > 0 && <div class="changelog-tags">
{activeTags.map(tag => <ChangelogTag label={tag} onClick={() => toggleTag(tag)} />)}

10
src/app/pages/Sounds.tsx
View File

@@ -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 && <Btn icon="play" label={ locale('sounds.play_all')} class="play-all-sounds" onClick={playAll} />}
<div class="spacer"></div>
<Btn icon="download" label={locale('download')} tooltip={locale('sounds.download_function')} tooltipLoc="se" class="download-sounds" onClick={downloadFunction} />
<BtnMenu icon="tag" label={version} tooltip={locale('switch_version')}>
{config.versions.slice().reverse().map(v =>
<Btn label={v.id} active={v.id === version} onClick={() => changeVersion(v.id as VersionId)} />
)}
</BtnMenu>
<VersionSwitcher value={version} onChange={changeVersion} />
</div>
<div class="sounds">
{sounds && howler && configs.map(c =>