From 4143f65cf5f3a238cd141a011bb028fef7cbc1b8 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 6 Jul 2022 20:32:10 +0200
Subject: [PATCH] feat(gui-v2): add page transitions

# What's changed?

* transition on page/layout change
* move v2 styles to separate file
* refactor layouts

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/nc-gui-v2/app.vue                    | 70 ++++++++++++++-
 packages/nc-gui-v2/assets/style-v2.css        | 24 +++++
 packages/nc-gui-v2/assets/style.css           | 11 ---
 .../nc-gui-v2/components/general/Sponsors.vue | 18 ++--
 packages/nc-gui-v2/layouts/default.vue        | 89 ++-----------------
 packages/nc-gui-v2/nuxt.config.ts             |  1 +
 6 files changed, 108 insertions(+), 105 deletions(-)
 create mode 100644 packages/nc-gui-v2/assets/style-v2.css

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 8f62b8bf92..2cb5c5ac81 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -1,3 +1,71 @@
+<script lang="ts" setup>
+import MdiAt from '~icons/mdi/at'
+import MdiLogout from '~icons/mdi/logout'
+import MdiDotsVertical from '~icons/mdi/dots-vertical'
+</script>
+
 <template>
-  <NuxtPage />
+  <v-app>
+    <v-app-bar class="elevation-1" color="primary" app clipped-left dense dark height="48">
+      <div class="d-flex align-center" style="flex: 1">
+        <v-toolbar-title>
+          <v-tooltip bottom>
+            {{ $t('general.home') }}
+            <span class="caption font-weight-light pointer">(version)</span>
+          </v-tooltip>
+
+          <span class="body-1" @click="navigateTo('/projects')">NocoDB</span>
+        </v-toolbar-title>
+
+        <!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading
+        <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
+          {{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon>
+        </span>
+
+
+        todo: replace shortkey?
+        <span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" />
+         -->
+      </div>
+
+      <div class="flex justify-end">
+        <v-toolbar-items class="flex gap-4 hidden-sm-and-down nc-topright-menu">
+          <!-- todo: implement components
+          <release-info />
+          -->
+
+          <general-language class="mr-3" />
+
+          <v-menu>
+            <template #activator="{ props }">
+              <MdiDotsVertical class="md:text-xl cursor-pointer" @click="props.onClick" />
+            </template>
+            <v-list class="!py-0 nc-user-menu min-w-32">
+              <nuxt-link
+                v-t="['c:navbar:user:email']"
+                class="flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                to="/user/settings"
+              >
+                <MdiAt />&nbsp;
+                <span class="font-bold">{{ $state.user }}</span>
+              </nuxt-link>
+
+              <v-divider />
+
+              <div
+                v-t="['a:navbar:user:sign-out']"
+                class="group flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                @click.stop
+              >
+                <MdiLogout class="transition-colors duration-150 ease-in group-hover:text-red-500" />&nbsp;
+                <span class="text-sm font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
+              </div>
+            </v-list>
+          </v-menu>
+        </v-toolbar-items>
+      </div>
+    </v-app-bar>
+
+    <NuxtPage />
+  </v-app>
 </template>
diff --git a/packages/nc-gui-v2/assets/style-v2.css b/packages/nc-gui-v2/assets/style-v2.css
new file mode 100644
index 0000000000..e6392d4b5d
--- /dev/null
+++ b/packages/nc-gui-v2/assets/style-v2.css
@@ -0,0 +1,24 @@
+html,
+body,
+#__nuxt {
+    margin: 0;
+    height: 100%;
+}
+
+html, body {
+    @apply scrollbar-thin-primary;
+}
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+    transition: opacity .5s
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+    opacity: 0
+}
diff --git a/packages/nc-gui-v2/assets/style.css b/packages/nc-gui-v2/assets/style.css
index 4a6a40e352..687e15b9c6 100644
--- a/packages/nc-gui-v2/assets/style.css
+++ b/packages/nc-gui-v2/assets/style.css
@@ -1,14 +1,3 @@
-html,
-body,
-#__nuxt {
-  margin: 0;
-  height: 100%;
-}
-
-html, body {
-  @apply scrollbar-thin-primary;
-}
-
 .shake-btn {
   color: red !important;
   animation: shake .4s;
diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue
index 7c0718c99d..6ee6c03d25 100644
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import MdiHeartsCard from '~icons/mdi/cards-heart'
+
 interface Props {
   nav?: boolean
 }
@@ -9,20 +11,18 @@ const { nav = false } = defineProps<Props>()
 <template>
   <v-card :rounded="0" max-width="300" class="pb-3" href="https://github.com/sponsors/nocodb" target="_blank">
     <v-img src="/ants-leaf-cutter.jpeg" :cover="true" :aspect-ratio="1" :height="nav ? 80 : ''" class="mt-0" />
-    <!-- You can help us! -->
-    <v-card-title v-if="!nav" class="pb-2" :class="{ 'body-2 justify-center mt-n2': nav }">
+
+    <v-card-title v-if="!nav" class="pb-2">
       {{ $t('msg.info.sponsor.header') }}
     </v-card-title>
+
     <v-card-text v-if="!nav" class="pb-0">
-      <p class="caption text-left body-1 textColor--text text--lighten-1">
-        <!-- We are a tiny team working full time to make NocoDB open source. We believe a tool like NocoDB should be
-         available freely to every problem solver on internet. -->
-        {{ $t('msg.info.sponsor.message') }}
-      </p>
+      {{ $t('msg.info.sponsor.message') }}
     </v-card-text>
+
     <v-card-actions class="justify-center">
-      <v-btn color="primary" :class="{ 'mt-n2': !nav, 'mt-2 mb-n1': nav }" small outlined>
-        <v-icon small color="red" class="mr-2"> mdi-cards-heart </v-icon>
+      <v-btn color="primary" class="mt-2">
+        <MdiHeartsCard class="text-red-500 mr-2" />
         {{ $t('activity.sponsorUs') }}
       </v-btn>
     </v-card-actions>
diff --git a/packages/nc-gui-v2/layouts/default.vue b/packages/nc-gui-v2/layouts/default.vue
index 3e3abb0699..1c2315c962 100644
--- a/packages/nc-gui-v2/layouts/default.vue
+++ b/packages/nc-gui-v2/layouts/default.vue
@@ -1,21 +1,3 @@
-<script lang="ts" setup>
-import { navigateTo } from '#app'
-import MdiAt from '~icons/mdi/at'
-import MdiLogout from '~icons/mdi/logout'
-import MdiDotsVertical from '~icons/mdi/dots-vertical'
-
-const route = useRoute()
-const { $state } = useNuxtApp()
-
-const openDiscord = () => {
-  //   shell.openExternal('https://discord.gg/5RgZmkW')
-}
-
-const isDashboard = computed(() => {
-  return route.path && (route.path === '/nc' || route.path === '/nc/' || route.path.startsWith('/nc/'))
-})
-</script>
-
 <script lang="ts">
 export default {
   name: 'Default',
@@ -23,72 +5,11 @@ export default {
 </script>
 
 <template>
-  <v-app>
-    <slot name="header">
-      <v-app-bar class="elevation-1" color="primary" app clipped-left dense dark height="48">
-        <div class="d-flex align-center" style="flex: 1">
-          <v-toolbar-title>
-            <v-tooltip bottom>
-              {{ $t('general.home') }}
-              <span class="caption font-weight-light pointer">(version)</span>
-            </v-tooltip>
-
-            <span class="body-1" @click="navigateTo('/projects')">NocoDB</span>
-          </v-toolbar-title>
-
-          <!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading
-          <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
-            {{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon>
-          </span>
-
-
-          todo: replace shortkey?
-          <span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" />
-           -->
-        </div>
-
-        <div class="flex justify-end">
-          <v-toolbar-items class="flex gap-4 hidden-sm-and-down nc-topright-menu">
-            <!-- todo: implement components
-            <release-info />
-            -->
-
-            <general-language class="mr-3" />
-
-            <v-menu>
-              <template #activator="{ props }">
-                <MdiDotsVertical class="md:text-xl cursor-pointer" @click="props.onClick" />
-              </template>
-              <v-list class="!py-0 nc-user-menu min-w-32">
-                <nuxt-link
-                  v-t="['c:navbar:user:email']"
-                  class="flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                  to="/user/settings"
-                >
-                  <MdiAt />&nbsp;
-                  <span class="font-bold">{{ $state.user }}</span>
-                </nuxt-link>
-
-                <v-divider />
-
-                <div
-                  v-t="['a:navbar:user:sign-out']"
-                  class="group flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
-                  @click.stop
-                >
-                  <MdiLogout class="transition-colors duration-150 ease-in group-hover:text-red-500" />&nbsp;
-                  <span class="text-sm font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
-                </div>
-              </v-list>
-            </v-menu>
-          </v-toolbar-items>
-        </div>
-      </v-app-bar>
+  <v-main>
+    <slot name="sidebar">
+      <div id="sidebar" />
     </slot>
 
-    <slot name="sidebar" />
-    <v-main>
-      <slot />
-    </v-main>
-  </v-app>
+    <slot />
+  </v-main>
 </template>
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 6acdd629a7..2cc288a48a 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -17,6 +17,7 @@ export default defineNuxtConfig({
     '~/assets/css/global.css',
     '~/assets/style/style.css',
     '~/assets/style.css',
+    '~/assets/style-v2.css',
   ],
 
   build: {