github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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>
pull/2716/head
Braks 2 years ago committed by Pranav C
parent
1d04b8dd29
commit
4143f65cf5
6 changed files with 108 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      packages/nc-gui-v2/app.vue
  2. 24
      packages/nc-gui-v2/assets/style-v2.css
  3. 11
      packages/nc-gui-v2/assets/style.css
  4. 18
      packages/nc-gui-v2/components/general/Sponsors.vue
  5. 89
      packages/nc-gui-v2/layouts/default.vue
  6. 1
      packages/nc-gui-v2/nuxt.config.ts

70
packages/nc-gui-v2/app.vue
Unescape View File

@ -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>

24
packages/nc-gui-v2/assets/style-v2.css
Unescape View File

@ -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
}

11
packages/nc-gui-v2/assets/style.css
Unescape View File

@ -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;

18
packages/nc-gui-v2/components/general/Sponsors.vue
Unescape View File

@ -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>

89
packages/nc-gui-v2/layouts/default.vue
Unescape View File

@ -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>

1
packages/nc-gui-v2/nuxt.config.ts
Unescape View File

@ -17,6 +17,7 @@ export default defineNuxtConfig({
'~/assets/css/global.css',
'~/assets/style/style.css',
'~/assets/style.css',
'~/assets/style-v2.css',
],
build: {

Write Preview
Loading…
Cancel
Save