hk/kunkun
1
0
Fork 0
mirror of https://github.com/kunkunsh/kunkun.git synced 2025-07-09 01:21:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add cross-page transition for ext store back button with gasp Flip

Browse Source
This commit is contained in:
Huakun Shen 2024-11-04 16:14:47 -05:00
parent be07e16b36
commit 0c7c1e8612
No known key found for this signature in database
GPG Key ID: 967DBC3ECBD63A70
5 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/desktop/src/routes/extension/store/+layout.svelte
View File

@ -8,7 +8,9 @@
let flipState: Flip.FlipState let flipState: Flip.FlipState
beforeNavigate(() => { beforeNavigate(() => {
flipState = Flip.getState(`.${Constants.CLASSNAMES.EXT_LOGO}`) flipState = Flip.getState(
`.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`
)
}) })
afterNavigate(() => { afterNavigate(() => {
@ -17,7 +19,7 @@
} }
Flip.from(flipState, { Flip.from(flipState, {
targets: ".kk-ext-logo", targets: `.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`,
duration: 0.5, duration: 0.5,
absolute: true, absolute: true,
scale: true, scale: true,

7
apps/desktop/src/routes/extension/store/+page.svelte
View File

@ -2,18 +2,13 @@
import { getExtensionsFolder } from "@/constants" import { getExtensionsFolder } from "@/constants"
import { appState, extensions } from "@/stores" import { appState, extensions } from "@/stores"
import { supabaseAPI } from "@/supabase" import { supabaseAPI } from "@/supabase"
import { goBackOnEscape, goBackOnEscapeClearSearchTerm } from "@/utils/key" import { goBackOnEscapeClearSearchTerm } from "@/utils/key"
import { goBack } from "@/utils/route" import { goBack } from "@/utils/route"
import { isCompatible } from "@kksh/api"
import { SBExt } from "@kksh/api/supabase" import { SBExt } from "@kksh/api/supabase"
import { isUpgradable } from "@kksh/extension" import { isUpgradable } from "@kksh/extension"
import { Command } from "@kksh/svelte5"
import { StoreListing } from "@kksh/ui/extension" import { StoreListing } from "@kksh/ui/extension"
import { greaterThan, parse as parseSemver } from "@std/semver"
import { goto } from "$app/navigation" import { goto } from "$app/navigation"
import { onMount } from "svelte"
import { toast } from "svelte-sonner" import { toast } from "svelte-sonner"
import { get } from "svelte/store"
import { type PageData } from "./$types" import { type PageData } from "./$types"
let { data }: { data: PageData } = $props() let { data }: { data: PageData } = $props()

10
apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
View File

@ -4,6 +4,8 @@
import { supabaseAPI } from "@/supabase" import { supabaseAPI } from "@/supabase"
import { goBack } from "@/utils/route.js" import { goBack } from "@/utils/route.js"
import { Button } from "@kksh/svelte5" import { Button } from "@kksh/svelte5"
import { cn } from "@kksh/svelte5/utils"
import { Constants } from "@kksh/ui"
import { StoreExtDetail } from "@kksh/ui/extension" import { StoreExtDetail } from "@kksh/ui/extension"
import { greaterThan, parse as parseSemver } from "@std/semver" import { greaterThan, parse as parseSemver } from "@std/semver"
import { error } from "@tauri-apps/plugin-log" import { error } from "@tauri-apps/plugin-log"
@ -139,7 +141,13 @@
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
<Button variant="outline" size="icon" class="fixed left-3 top-3" onclick={goBack}> <Button
variant="outline"
size="icon"
class={cn("fixed left-3 top-3", Constants.CLASSNAMES.BACK_BUTTON)}
data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
onclick={goBack}
>
<ArrowLeftIcon /> <ArrowLeftIcon />
</Button> </Button>
<StoreExtDetail <StoreExtDetail

11
packages/ui/src/components/extension/StoreListing.svelte
View File

@ -2,11 +2,10 @@
import { SBExt } from "@kksh/api/supabase" import { SBExt } from "@kksh/api/supabase"
import { Button, Command } from "@kksh/svelte5" import { Button, Command } from "@kksh/svelte5"
import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main" import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main"
import { cn } from "@kksh/ui/utils"
import { afterNavigate, beforeNavigate } from "$app/navigation"
import { type Snippet } from "svelte" import { type Snippet } from "svelte"
import ArrowLeft from "svelte-radix/ArrowLeft.svelte" import ArrowLeft from "svelte-radix/ArrowLeft.svelte"
import type { Writable } from "svelte/store" import type { Writable } from "svelte/store"
import { CLASSNAMES } from "../../constants"
import ExtListItem from "./ExtListItem.svelte" import ExtListItem from "./ExtListItem.svelte"
let { let {
@ -35,7 +34,13 @@
</script> </script>
{#snippet leftSlot()} {#snippet leftSlot()}
<Button variant="outline" size="icon" onclick={onGoBack}> <Button
variant="outline"
size="icon"
onclick={onGoBack}
class={CLASSNAMES.BACK_BUTTON}
data-flip-id={CLASSNAMES.BACK_BUTTON}
>
<ArrowLeft class="size-4" /> <ArrowLeft class="size-4" />
</Button> </Button>
{/snippet} {/snippet}

3
packages/ui/src/constants.ts
View File

@ -1,3 +1,4 @@
export const CLASSNAMES = { export const CLASSNAMES = {
EXT_LOGO: "kk-ext-logo" EXT_LOGO: "kk-ext-logo",
BACK_BUTTON: "kk-back-button"
} }