feat(desk): add page transitions

Author: zzhenryquezz

packages/desktop/app.ts

@@ -16,7 +16,8 @@ interface Plugin {
 window.clientConfig = {
     useCase: () => Promise.reject('Not implemented'),
     open: {
-        url: () => true,
+        url: () => Promise.reject('Not implemented'),
+        directory: () => Promise.reject('Not implemented'),
     },
 }
 

packages/desktop/components.d.ts

@@ -39,9 +39,9 @@ declare module '@vue/runtime-core' {
     VTab: typeof import('./components/v-tab.vue')['default']
     VTabItem: typeof import('./components/v-tab-item.vue')['default']
     VTable: typeof import('./components/v-table.vue')['default']
-    VTd: typeof import('./components/v-td.vue')['default']
+    VTd: typeof import('./components/VTd.vue')['default']
     VTextarea: typeof import('./components/v-textarea.vue')['default']
-    VTh: typeof import('./components/v-th.vue')['default']
-    VTr: typeof import('./components/v-tr.vue')['default']
+    VTh: typeof import('./components/VTh.vue')['default']
+    VTr: typeof import('./components/VTr.vue')['default']
   }
 }

packages/desktop/components/v-td.vue renamed to packages/desktop/components/VTd.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { toCssMeasurement } from '@composables/utils'
-import { computed } from 'vue'
 
 const props = defineProps({
     height: {

packages/desktop/components/v-th.vue renamed to packages/desktop/components/VTh.vue

@@ -227,8 +227,8 @@ function showActions(event: MouseEvent, id: string) {
                         v-model="columns"
                         handle=".drag"
                         item-key="id"
-                        tag="v-tr"
-                        :component-data="{ height: 41 }"
+                        tag="tr"
+                        :component-data="{ class: 'h-[41px]' }"
                     >
                         <template #item="{ element: c, index }">
                             <v-th
@@ -242,9 +242,9 @@ function showActions(event: MouseEvent, id: string) {
                             >
                                 <v-btn
                                     v-if="c.id === '_actions_right'"
-                                    size="h-8 w-8 text-xs"
+                                    size="sm"
                                     class="text-t-secondary"
-                                    text
+                                    mode="text"
                                     @click="store.column.create(collectionId)"
                                 >
                                     <v-icon name="plus" />
@@ -295,7 +295,7 @@ function showActions(event: MouseEvent, id: string) {
                                 class="flex justify-center opacity-0 group-hover/item:opacity-100"
                             >
                                 <v-btn
-                                    size="py-1 px-2 text-xs"
+                                    size="sm"
                                     color="b-secondary"
                                     :to="`/collections/${collectionId}/items/${data.item.id}`"
                                     data-test-id="actions-btn"

packages/desktop/components/v-tr.vue renamed to packages/desktop/components/VTr.vue

@@ -174,16 +174,11 @@ function isTable(id: string) {
                                     <template #activator="{ attrs, toggle }">
                                         <v-btn
                                             v-bind="attrs"
-                                            text
-                                            size="text-sm h-[45px]"
-                                            tile
-                                            color="hover:text-t-primary"
+                                            mode="text"
                                             class="drag overflow-hidden whitespace-pre"
                                             :class="[
-                                                isActive(id)
-                                                    ? 'text-t-primary'
-                                                    : 'text-t-secondary',
-                                                index === 0 ? 'pl-0 pr-4' : 'px-4',
+                                                isActive(id) ? '' : 'text-t-secondary',
+                                                index === 0 ? '-ml-4' : '',
                                             ]"
                                             @click="showMenu(id, toggle)"
                                         >
@@ -213,11 +208,9 @@ function isTable(id: string) {
                     <v-menu offset-y close-on-content-click>
                         <template #activator="{ attrs }">
                             <v-btn
-                                text
-                                size="text-sm px-4 h-[45px]"
-                                tile
-                                color="border-b border-transparent hover:bg-b-secondary/50 text-t-secondary overflow-hidden whitespace-pre"
+                                mode="text"
                                 :class="!view.viewIds.length ? 'min-w-[150px]' : ''"
+                                class="text-t-secondary overflow-hidden whitespace-pre"
                                 v-bind="attrs"
                             >
                                 <template v-if="!view.viewIds.length">

packages/desktop/modules/collection/components/CTable.vue

@@ -1,26 +1,9 @@
 import { Router } from 'vue-router'
 
 export default (router: Router) => {
-    router.addRoute({
-        path: '/collections/:collectionId',
-        component: () => import('./pages/CSingle.vue'),
-        props: true,
-    })
-
-    router.addRoute({
+    router.addRoute('main', {
         path: '/collections',
-        component: () => import('@modules/entry/ELayout.vue'),
-        children: [
-            {
-                path: '',
-                component: () => import('./pages/CList.vue'),
-                props: true,
-            },
-            {
-                path: ':collectionId',
-                component: () => import('./pages/CSingle.vue'),
-                props: true,
-            },
-        ],
+        name: 'collections',
+        component: () => import('./pages/CList.vue'),
     })
 }

packages/desktop/modules/collection/components/CViewGroup.vue

@@ -38,5 +38,9 @@ watch(() => props.entryId, check, {
 </script>
 
 <template>
-    <LLayout :hide-toolbar="!store.layout.toolbar" />
+    <v-layout use-percentage>
+        <v-layout-content>
+            <router-view />
+        </v-layout-content>
+    </v-layout>
 </template>

packages/desktop/modules/collection/pages/CSingle.vue

@@ -6,7 +6,7 @@ import DirectoryEntry from '@core/entities/directory-entry'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '../store'
 
-import VTr from '@components/v-tr.vue'
+import VTr from '@components/VTr.vue'
 import LToolbar from '@modules/layout/components/LToolbar.vue'
 import EEntryIcon from '../components/EEntryIcon.vue'
 import { onKeyStroke } from '@vueuse/core'
@@ -253,38 +253,35 @@ async function onEnter(item: DirectoryEntry) {
 
 <template>
     <v-layout use-percentage>
-        <l-toolbar>
-            <template #append-navigation>
-                <v-btn text size="sm" @click="setEntries">
-                    <v-icon name="rotate" />
-                </v-btn>
-                <v-menu v-model="menu" offset-y>
-                    <template #activator="{ attrs }">
-                        <v-btn text size="sm" v-bind="attrs">
-                            <v-icon name="plus" />
-                        </v-btn>
-                    </template>
-
-                    <v-card color="b-secondary">
-                        <v-list-item @click="addFile">
-                            {{ $t('addEntity', [$t('file')]) }}
-                        </v-list-item>
-                        <v-list-item @click="addFolder">
-                            {{ $t('addEntity', [$t('folder')]) }}
-                        </v-list-item>
-                    </v-card>
-                </v-menu>
-            </template>
-
-            <template #append-links>
-                <v-input
-                    v-model="search"
-                    :placeholder="$t('search') + '...'"
-                    flat
-                    class="ml-auto w-full max-w-[300px] mr-4"
-                />
-            </template>
-        </l-toolbar>
+        <v-layout-toolbar class="px-7 border-b border-lines">
+            <v-btn mode="text" size="sm" @click="setEntries">
+                <v-icon name="rotate" />
+            </v-btn>
+
+            <v-menu v-model="menu" offset-y>
+                <template #activator="{ attrs }">
+                    <v-btn mode="text" size="sm" v-bind="attrs">
+                        <v-icon name="plus" />
+                    </v-btn>
+                </template>
+
+                <v-card color="b-secondary">
+                    <v-list-item @click="addFile">
+                        {{ $t('addEntity', [$t('file')]) }}
+                    </v-list-item>
+                    <v-list-item @click="addFolder">
+                        {{ $t('addEntity', [$t('folder')]) }}
+                    </v-list-item>
+                </v-card>
+            </v-menu>
+
+            <v-input
+                v-model="search"
+                :placeholder="$t('search') + '...'"
+                class="ml-2 w-full max-w-[300px] mr-4"
+                size="sm"
+            />
+        </v-layout-toolbar>
 
         <v-layout-content class="overflow-auto h-[calc(100vh_-_45px)]">
             <div v-if="loading" class="flex w-full h-full items-center justify-center">
@@ -333,7 +330,7 @@ async function onEnter(item: DirectoryEntry) {
                                 />
 
                                 <v-btn
-                                    text
+                                    mode="text"
                                     size="sm"
                                     color="info"
                                     class="ml-auto text-t-secondary opacity-0 group-hover:opacity-100"
@@ -343,7 +340,7 @@ async function onEnter(item: DirectoryEntry) {
                                 </v-btn>
 
                                 <v-btn
-                                    text
+                                    mode="text"
                                     size="sm"
                                     color="danger"
                                     class="text-t-secondary opacity-0 group-hover:opacity-100"

packages/desktop/modules/collection/router.ts

@@ -118,7 +118,7 @@ const modeLabels: Record<typeof mode.value, string> = {
 </script>
 <template>
     <v-layout :id="path" use-percentage v-bind="bindings.root">
-        <v-layout-toolbar v-if="!hideActions" class="border-b border-b-lines">
+        <v-layout-toolbar class="border-b border-b-lines">
             <div class="flex pl-6 pr-7 w-full">
                 <v-menu offset-y :close-on-content-click="true">
                     <template #activator="{ attrs }">
@@ -139,13 +139,15 @@ const modeLabels: Record<typeof mode.value, string> = {
                 </v-menu>
 
                 <template v-if="['edit', 'side-by-side'].includes(mode)">
-                    <v-btn size="sm" text @click="setPreview">
+                    <v-btn size="sm" mode="text" @click="setPreview">
                         <v-icon name="arrows-rotate" />
                     </v-btn>
-                    <v-btn size="sm" text @click="save">
+                    <v-btn size="sm" mode="text" @click="save">
                         <v-icon name="save" />
                     </v-btn>
                 </template>
+
+                <slot name="append-actions" />
             </div>
         </v-layout-toolbar>
 

packages/desktop/modules/entry/ELayout.vue

@@ -1,7 +1,7 @@
 import { Router } from 'vue-router'
 
 export default (router: Router) => {
-    router.addRoute({
+    router.addRoute('main', {
         path: '/entries',
         component: () => import('./ELayout.vue'),
         props: true,

packages/desktop/modules/entry/pages/EFolder.vue

@@ -81,33 +81,29 @@ watch(() => props.itemId, setContentPath, {
 })
 </script>
 <template>
-    <l-layout hide-toolbar>
-        <l-toolbar>
-            <template #append-links>
-                <v-btn text size="sm" class="ml-auto" @click="drawer = !drawer">
-                    <v-icon name="cog" />
-                </v-btn>
-            </template>
-        </l-toolbar>
-
-        <v-layout v-if="item" use-percentage>
-            <v-layout-drawer v-model="drawer" class="border-l border-lines px-4 py-4" right>
-                <i-value
-                    v-for="c in columns"
-                    :key="c.id"
-                    :column-id="c.id"
-                    :collection-id="collectionId"
-                    :item-id="item.id"
-                    :label="c.label"
-                    :type="c.type"
-                    edit
-                    class="mb-4 last:mb-0"
-                />
-            </v-layout-drawer>
-
-            <v-layout-content v-if="contentPath">
-                <e-markdown ref="editorRef" :path="contentPath" :doc:scope="{ item }" />
-            </v-layout-content>
-        </v-layout>
-    </l-layout>
+    <v-layout use-percentage>
+        <v-layout-drawer v-if="item" v-model="drawer" class="border-l border-lines px-4 py-4" right>
+            <i-value
+                v-for="c in columns"
+                :key="c.id"
+                :column-id="c.id"
+                :collection-id="collectionId"
+                :item-id="item.id"
+                :label="c.label"
+                :type="c.type"
+                edit
+                class="mb-4 last:mb-0"
+            />
+        </v-layout-drawer>
+
+        <v-layout-content v-if="contentPath">
+            <e-markdown ref="editorRef" :path="contentPath" :doc:scope="{ item }">
+                <template #append-actions>
+                    <v-btn mode="text" size="sm" @click="drawer = !drawer">
+                        <v-icon name="cog" />
+                    </v-btn>
+                </template>
+            </e-markdown>
+        </v-layout-content>
+    </v-layout>
 </template>