refactor(gui-v2): project list page style fixes

2 years ago · e8de580842
9 changed files with 143 additions and 118 deletions
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@ -31,31 +31,6 @@ nav .v-list {
  @apply dark:bg-white
 }

-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
-  @apply transition-opacity duration-300 ease-in-out;
-}
-
-.page-enter,
-.page-leave-active,
-.layout-enter,
-.layout-leave-active {
-  @apply opacity-0;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  @apply transition-all duration-200 ease-in-out;
-  transform: translate(100%, 0);
-}
-
-.slide-enter,
-.slide-leave-active {
-  transform: translate(-100%, 0);
-}
-
 a {
  @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
 }
@ -153,3 +128,42 @@ html {
    background-position: 0% 22%
  }
 }
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  @apply transition-opacity duration-300 ease-in-out;
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+  @apply opacity-0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  @apply transition-all duration-200 ease-in-out;
+  transform: translate(100%, 0);
+}
+
+.slide-enter,
+.slide-leave-active {
+  transform: translate(-100%, 0);
+}
+
+.glow-enter-active,
+.glow-leave-active {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+.glow-enter-active {
+  @apply ring ring-xl;
+}
+
+.glow-enter,
+.glow-leave-active {
+  @apply opacity-0;
+}
--- a/packages/nc-gui-v2/components/general/SocialCard.vue
+++ b/packages/nc-gui-v2/components/general/SocialCard.vue
@ -7,67 +7,75 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
 </script>

 <template>
-  <a-list class="w-[300px] pa-3 elevation-4 rounded-xl mr-10" dense>
-    <a-list-item class="cursor-pointer">
-      <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
-        <div class="flex items-center text-sm">
-          <mdi-github class="mx-3 text-lg" />
-          <div v-if="isRtlLang">
-            <!-- us on Github -->
-            {{ $t('labels.community.starUs2') }}
-            <!-- Star -->
-            {{ $t('labels.community.starUs1') }}
-            <mdi-star-outline />
+  <a-card :body-style="{ padding: '0' }" class="w-[300px] shadow-sm rounded-lg">
+    <a-list class="w-full" dense>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-github class="mx-3 text-lg" />
+            <div v-if="isRtlLang">
+              <!-- us on Github -->
+              {{ $t('labels.community.starUs2') }}
+              <!-- Star -->
+              {{ $t('labels.community.starUs1') }}
+              <mdi-star-outline />
+            </div>
+            <div v-else class="flex items-center">
+              <!-- Star -->
+              {{ $t('labels.community.starUs1') }}
+              <mdi-star-outline class="mx-1" />
+              <!-- us on Github -->
+              {{ $t('labels.community.starUs2') }}
+            </div>
          </div>
-          <div v-else class="flex items-center">
-            <!-- Star -->
-            {{ $t('labels.community.starUs1') }}
-            <mdi-star-outline class="mx-1" />
-            <!-- us on Github -->
-            {{ $t('labels.community.starUs2') }}
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
+            <!-- Book a Free DEMO -->
+            <div>
+              {{ $t('labels.community.bookDemo') }}
+            </div>
          </div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-    <a-list-item>
-      <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
-        <div class="flex items-center text-sm">
-          <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
-          <!-- Book a Free DEMO -->
-          <div>
-            {{ $t('labels.community.bookDemo') }}
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
+            <!-- Get your questions answered -->
+            <div>
+              {{ $t('labels.community.getAnswered') }}
+            </div>
          </div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-    <a-list-item>
-      <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
-        <div class="flex items-center text-sm">
-          <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
-          <!-- Get your questions answered -->
-          <div>
-            {{ $t('labels.community.getAnswered') }}
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
+            <!-- Follow NocoDB -->
+            <div>
+              {{ $t('labels.community.followNocodb') }}
+            </div>
          </div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-    <a-list-item>
-      <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
-        <div class="flex items-center text-sm">
-          <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
-          <!-- Follow NocoDB -->
-          <div>
-            {{ $t('labels.community.followNocodb') }}
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item v-t="['e:hiring']">
+        <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
+          <div class="flex items-center text-sm">
+            <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
          </div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-    <a-list-item v-t="['e:hiring']">
-      <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
-        <div class="flex items-center text-sm">
-          <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-  </a-list>
+        </nuxt-link>
+      </a-list-item>
+    </a-list>
+  </a-card>
 </template>
+
+<style scoped>
+:deep(.ant-list-item) {
+  @apply hover:(bg-gray-100 !text-primary);
+}
+</style>
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@ -7,9 +7,9 @@ const { nav = false } = defineProps<Props>()
 </script>

 <template>
-  <a-card class="w-[300px] ma-10 shadow-lg rounded-lg">
+  <a-card class="w-[300px] shadow-sm rounded-lg">
    <template #cover>
-      <img class="max-h-[180px]" alt="cover" src="/ants-leaf-cutter.jpeg" />
+      <img class="max-h-[180px] rounded-t-lg" alt="cover" src="/ants-leaf-cutter.jpeg" />
    </template>

    <a-card-meta>
@ -26,7 +26,7 @@ const { nav = false } = defineProps<Props>()

    <div class="flex justify-center">
      <nuxt-link href="https://github.com/sponsors/nocodb" target="_blank">
-        <a-button class="!shadow" size="large">
+        <a-button class="!shadow rounded" size="large">
          <div class="flex items-center">
            <mdi-cards-heart class="text-red-500 mr-2" />
            {{ $t('activity.sponsorUs') }}
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@ -46,7 +46,7 @@ function onOpenModal(type: ViewTypes, title = '') {
        class="group !flex !items-center !my-0 !h-[30px] nc-create-3-view"
        @click="onOpenModal(ViewTypes.GRID)"
      >
-        <a-tooltip mouse-enter-delay="1000" placement="left">
+        <a-tooltip :mouse-enter-delay="1" placement="left">
          <template #title>
            {{ $t('msg.info.addView.grid') }}
          </template>
@ -68,7 +68,7 @@ function onOpenModal(type: ViewTypes, title = '') {
        class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view"
        @click="onOpenModal(ViewTypes.GALLERY)"
      >
-        <a-tooltip mouse-enter-delay="1000" placement="left">
+        <a-tooltip :mouse-enter-delay="1" placement="left">
          <template #title>
            {{ $t('msg.info.addView.gallery') }}
          </template>
@ -91,7 +91,7 @@ function onOpenModal(type: ViewTypes, title = '') {
        class="group !flex !items-center !my-0 !h-[30px] nc-create-1-view"
        @click="onOpenModal(ViewTypes.FORM)"
      >
-        <a-tooltip mouse-enter-delay="1000" placement="left">
+        <a-tooltip :mouse-enter-delay="1" placement="left">
          <template #title>
            {{ $t('msg.info.addView.form') }}
          </template>
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@ -2,7 +2,7 @@
 import type { ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import { viewIcons } from '~/utils'
-import { onKeyStroke, useDebounceFn, useNuxtApp, useVModel } from '#imports'
+import { onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel } from '#imports'

 interface Props {
  view: Record<string, any>
@ -163,6 +163,7 @@ function onStopEdit() {
      </div>

      <a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel" @keydown="onKeyDown($event)" />
+
      <div v-else>{{ vModel.alias || vModel.title }}</div>

      <div class="flex-1" />
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@ -87,10 +87,10 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
    class="relative shadow-md h-full"
    theme="light"
  >
-    <a-tooltip mouse-enter-delay="1000" placement="left">
+    <a-tooltip :mouse-enter-delay="1" placement="left">
      <template #title> Toggle sidebar </template>

-      <Transition name="layout">
+      <Transition name="glow">
        <div
          v-show="sidebarCollapsed || isHovered"
          class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@ -1,14 +1,15 @@
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { USER_PROJECT_ROLES, useNuxtApp, useState } from '#imports'
+import { USER_PROJECT_ROLES, useGlobal, useState } from '#imports'

 export function useUIPermission() {
-  const { $state } = useNuxtApp()
+  const { user, previewAs } = useGlobal()
+
  const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))

-  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    const user = $state.user
-    let userRoles = user?.value?.roles || {}
+  const getRoles = (skipPreviewAs = false) => {
+    let userRoles = user.value?.roles || {}
+
    // if string populate key-value paired object
    if (typeof userRoles === 'string') {
      userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
@ -20,16 +21,20 @@ export function useUIPermission() {
    // merge user role and project specific user roles
    let roles = {
      ...userRoles,
-      ...(projectRoles?.value || {}),
+      ...projectRoles.value,
    }

-    if ($state.previewAs.value && !skipPreviewAs) {
+    if (previewAs.value && !skipPreviewAs) {
      roles = {
-        [$state.previewAs.value]: true,
+        [previewAs.value]: true,
      }
    }

-    return Object.entries<boolean>(roles).some(([role, hasRole]) => {
+    return roles
+  }
+
+  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
+    return Object.entries<boolean>(getRoles(skipPreviewAs)).some(([role, hasRole]) => {
      const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>

      return hasRole && (rolePermission === '*' || rolePermission?.[permission as Permission])
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@ -235,10 +235,10 @@ const isHovered = useElementHover(sidebar)
          </a-dropdown>
        </div>

-        <a-tooltip mouse-enter-delay="1000" placement="right">
+        <a-tooltip :mouse-enter-delay="1" placement="right">
          <template #title> Toggle table list </template>

-          <Transition name="layout">
+          <Transition name="glow">
            <div
              v-show="!isOpen || isHovered"
              class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@ -54,11 +54,10 @@ onMounted(() => {

 <template>
  <NuxtLayout>
-    <a-row>
-      <a-col :span="8"></a-col>
-      <a-col :span="8" class="!bg-red">
-        <a-card :loading="isLoading" class="mx-auto mt-10 !max-w-[600px] shadow-lg">
-          <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
+    <div class="flex p-12">
+      <div class="w-2/3 flex-auto">
+        <a-card :loading="isLoading" class="!rounded-lg shadow">
+          <h1 class="text-center text-4xl p-2 nc-project-page-title flex items-center justify-center gap-2 text-gray-600">
            <!-- My Projects -->
            <b>{{ $t('title.myProject') }}</b>

@ -151,16 +150,14 @@ onMounted(() => {
            </a-table-column>
          </a-table>
        </a-card>
-      </a-col>
-      <a-col :span="8" class="">
-        <div class="justify-end flex">
-          <GeneralSponsors />
-        </div>
-        <div class="justify-end flex">
-          <GeneralSocialCard />
-        </div>
-      </a-col>
-    </a-row>
+      </div>
+
+      <div class="w-1/3 flex-auto flex flex-col justify-center items-center gap-4">
+        <GeneralSponsors />
+
+        <GeneralSocialCard />
+      </div>
+    </div>
  </NuxtLayout>
 </template>