Skip to content

Commit

Permalink
Add page transition for desktop app
Browse files Browse the repository at this point in the history
  • Loading branch information
@HuakunShen
HuakunShen committed Sep 24, 2024
1 parent 5612043 commit 9446953
Show file tree
Hide file tree
Showing 12 changed files with 279 additions and 1,430 deletions.
11 changes: 11 additions & 0 deletions apps/desktop/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,14 @@
<NuxtPage />
</NuxtLayout>
</template>
<style>
.page-enter-active,
.page-leave-active {
transition: all 0.2s;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>
24 changes: 13 additions & 11 deletions apps/desktop/components/cmd-palette/Footer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,19 @@ onUnmounted(() => {
<div data-tauri-drag-region class="z-50 flex h-12 items-center justify-between border p-2">
<img class="h-6 w-6 invert dark:invert-0" src="/img/logo-w-bg.png" alt="logo" />
<span class="flex gap-2">
<Tooltip>
<TooltipTrigger>
<Button variant="ghost" size="icon" @click="onReload">
<RefreshCcw class="w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<span v-if="_platform === 'macos'">Command + R</span>
<span v-else>Control + R</span>
</TooltipContent>
</Tooltip>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button variant="ghost" size="icon" @click="onReload">
<RefreshCcw class="w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<span v-if="_platform === 'macos'">Command + R</span>
<span v-else>Control + R</span>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button v-if="appUiStore.defaultAction" variant="ghost" class="gap-2">
{{ appUiStore.defaultAction }}
<Kbd><Icon icon="tdesign:enter" /></Kbd>
Expand Down
14 changes: 7 additions & 7 deletions apps/desktop/layouts/default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,13 @@ onMounted(async () => {
</script>

<template>
<TooltipProvider>
<main class="z-10 h-screen">
<Toaster :rich-colors="true" :expand="true" />
<Toaster2 />
<slot />
</main>
</TooltipProvider>
<!-- <TooltipProvider> -->
<main class="z-10 h-screen flex flex-col">
<!-- <Toaster :rich-colors="true" :expand="true" />
<Toaster2 /> -->
<slot />
</main>
<!-- </TooltipProvider> -->
</template>

<style>
Expand Down
3 changes: 3 additions & 0 deletions apps/desktop/nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,5 +62,8 @@ export default defineNuxtConfig({
},
colorMode: {
classSuffix: ""
},
app: {
pageTransition: { name: "page", mode: "out-in" }
}
})
52 changes: 27 additions & 25 deletions apps/desktop/pages/extension-store.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,29 +180,31 @@ function goBack() {
}
</script>
<template>
<Command
:filterFunction="(val, searchTerm) => filterFunc(val as ExtItem[], searchTerm)"
v-model:searchTerm="searchTerm"
>
<CommandInput placeholder="Type to search..." class="text-md h-12" :searchTerm="searchTerm">
<Button size="icon" variant="outline" @click="goBack">
<ArrowLeftIcon class="h-5 w-5 shrink-0" />
</Button>
</CommandInput>
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Extensions">
<ExtListItem
v-for="item in sortedExtList"
:data="item"
@upgrade="upgrade(item)"
:upgradeable="isUpgradeable(item)"
:installedVersion="getInstalledVersion(item.identifier)"
:installed="!!getInstalledVersion(item.identifier)"
@select="select(item)"
/>
</CommandGroup>
</CommandList>
<CmdPaletteFooter />
</Command>
<div class="grow h-full">
<Command
:filterFunction="(val, searchTerm) => filterFunc(val as ExtItem[], searchTerm)"
v-model:searchTerm="searchTerm"
>
<CommandInput placeholder="Type to search..." class="text-md h-12" :searchTerm="searchTerm">
<Button size="icon" variant="outline" @click="goBack">
<ArrowLeftIcon class="h-5 w-5 shrink-0" />
</Button>
</CommandInput>
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Extensions">
<ExtListItem
v-for="item in sortedExtList"
:data="item"
@upgrade="upgrade(item)"
:upgradeable="isUpgradeable(item)"
:installedVersion="getInstalledVersion(item.identifier)"
:installed="!!getInstalledVersion(item.identifier)"
@select="select(item)"
/>
</CommandGroup>
</CommandList>
<CmdPaletteFooter />
</Command>
</div>
</template>
50 changes: 26 additions & 24 deletions apps/desktop/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,28 +172,30 @@ function handleQuicklinkEnter() {
}
</script>
<template>
<CmdPaletteCommand
class=""
v-model:searchTerm="searchTermSyncProxy"
:identity-filter="true"
v-model:selected-value="highlightedItemValue"
>
<CmdPaletteMainSearchBar @quicklink-enter="handleQuicklinkEnter" />
<CommandList class="h-full max-h-screen">
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup
v-for="extLoader in extLoaders"
:heading="extLoader.extensionName"
:key="extLoader.id"
>
<ListItem
v-for="(item, idx) in extLoader.$filteredListItems"
:item="item"
:isDevExt="extLoader.extensionName === 'Dev Extensions'"
@select="extLoader.onSelect(item)"
/>
</CommandGroup>
</CommandList>
<CmdPaletteFooter />
</CmdPaletteCommand>
<div class="grow h-full">
<CmdPaletteCommand
class=""
v-model:searchTerm="searchTermSyncProxy"
:identity-filter="true"
v-model:selected-value="highlightedItemValue"
>
<CmdPaletteMainSearchBar @quicklink-enter="handleQuicklinkEnter" />
<CommandList class="h-full max-h-screen">
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup
v-for="extLoader in extLoaders"
:heading="extLoader.extensionName"
:key="extLoader.id"
>
<ListItem
v-for="(item, idx) in extLoader.$filteredListItems"
:item="item"
:isDevExt="extLoader.extensionName === 'Dev Extensions'"
@select="extLoader.onSelect(item)"
/>
</CommandGroup>
</CommandList>
<CmdPaletteFooter />
</CmdPaletteCommand>
</div>
</template>
4 changes: 3 additions & 1 deletion apps/desktop/pages/init-page.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,7 @@ onMounted(async () => {
})
</script>
<template>
<FunDance />
<div class="h-full grow">
<FunDance />
</div>
</template>
10 changes: 6 additions & 4 deletions apps/desktop/pages/onboarding.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ const next = () => {
}
</script>
<template>
<div class="h-8 border absolute" data-tauri-drag-region></div>
<h1 class="text-2xl font-bold text-center pt-4">Onboarding</h1>
<GeneralTab />
<Button size="sm" class="fixed bottom-4 right-4" @click="next">Next</Button>
<div class="h-full grow">
<div class="absolute h-8 border" data-tauri-drag-region></div>
<h1 class="pt-4 text-center text-2xl font-bold">Onboarding</h1>
<GeneralTab />
<Button size="sm" class="fixed bottom-4 right-4" @click="next">Next</Button>
</div>
</template>
66 changes: 34 additions & 32 deletions apps/desktop/pages/settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,36 +16,38 @@ onMounted(() => {
})
</script>
<template>
<Tabs default-value="general" class="flex h-full w-full flex-col px-1">
<TabsList class="grid w-full select-none grid-cols-4">
<TabsTrigger value="general">
<CogIcon class="mr-2 h-5 w-5" />
{{ $t("general") }}
</TabsTrigger>
<TabsTrigger value="extensions">
<Icon name="fluent:developer-board-lightning-20-regular" class="mr-2 h-5 w-5" />
{{ $t("extensions") }}
</TabsTrigger>
<TabsTrigger value="developer">
<SquareTerminalIcon class="mr-2 h-5 w-5" />
{{ $t("developer") }}
</TabsTrigger>
<TabsTrigger value="about">
<InfoIcon class="mr-2 h-5 w-5" />
{{ $t("about") }}
</TabsTrigger>
</TabsList>
<TabsContent value="general" class="min-h-0 grow">
<GeneralTab />
</TabsContent>
<TabsContent value="extensions" class="min-h-0 grow">
<ExtensionsTab />
</TabsContent>
<TabsContent value="developer" class="min-h-0 grow">
<DeveloperTab />
</TabsContent>
<TabsContent value="about" class="min-h-0 grow">
<AboutTab class="" />
</TabsContent>
</Tabs>
<div class="h-full grow">
<Tabs default-value="general" class="flex h-full w-full flex-col px-1">
<TabsList class="grid w-full select-none grid-cols-4">
<TabsTrigger value="general">
<CogIcon class="mr-2 h-5 w-5" />
{{ $t("general") }}
</TabsTrigger>
<TabsTrigger value="extensions">
<Icon name="fluent:developer-board-lightning-20-regular" class="mr-2 h-5 w-5" />
{{ $t("extensions") }}
</TabsTrigger>
<TabsTrigger value="developer">
<SquareTerminalIcon class="mr-2 h-5 w-5" />
{{ $t("developer") }}
</TabsTrigger>
<TabsTrigger value="about">
<InfoIcon class="mr-2 h-5 w-5" />
{{ $t("about") }}
</TabsTrigger>
</TabsList>
<TabsContent value="general" class="min-h-0 grow">
<GeneralTab />
</TabsContent>
<TabsContent value="extensions" class="min-h-0 grow">
<ExtensionsTab />
</TabsContent>
<TabsContent value="developer" class="min-h-0 grow">
<DeveloperTab />
</TabsContent>
<TabsContent value="about" class="min-h-0 grow">
<AboutTab class="" />
</TabsContent>
</Tabs>
</div>
</template>
Loading

0 comments on commit 9446953

Please sign in to comment.