Browse Source

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

pull/3159/head
braks 2 years ago
parent
commit
e8de580842
  1. 64
      packages/nc-gui-v2/assets/style-v2.scss
  2. 124
      packages/nc-gui-v2/components/general/SocialCard.vue
  3. 6
      packages/nc-gui-v2/components/general/Sponsors.vue
  4. 6
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
  5. 3
      packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
  6. 4
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  7. 23
      packages/nc-gui-v2/composables/useUIPermission/index.ts
  8. 4
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  9. 27
      packages/nc-gui-v2/pages/index/index.vue

64
packages/nc-gui-v2/assets/style-v2.scss

@ -31,31 +31,6 @@ nav .v-list {
@apply dark:bg-white @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 { a {
@apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75); @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
} }
@ -153,3 +128,42 @@ html {
background-position: 0% 22% 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;
}

124
packages/nc-gui-v2/components/general/SocialCard.vue

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

6
packages/nc-gui-v2/components/general/Sponsors.vue

@ -7,9 +7,9 @@ const { nav = false } = defineProps<Props>()
</script> </script>
<template> <template>
<a-card class="w-[300px] ma-10 shadow-lg rounded-lg"> <a-card class="w-[300px] shadow-sm rounded-lg">
<template #cover> <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> </template>
<a-card-meta> <a-card-meta>
@ -26,7 +26,7 @@ const { nav = false } = defineProps<Props>()
<div class="flex justify-center"> <div class="flex justify-center">
<nuxt-link href="https://github.com/sponsors/nocodb" target="_blank"> <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"> <div class="flex items-center">
<mdi-cards-heart class="text-red-500 mr-2" /> <mdi-cards-heart class="text-red-500 mr-2" />
{{ $t('activity.sponsorUs') }} {{ $t('activity.sponsorUs') }}

6
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" class="group !flex !items-center !my-0 !h-[30px] nc-create-3-view"
@click="onOpenModal(ViewTypes.GRID)" @click="onOpenModal(ViewTypes.GRID)"
> >
<a-tooltip mouse-enter-delay="1000" placement="left"> <a-tooltip :mouse-enter-delay="1" placement="left">
<template #title> <template #title>
{{ $t('msg.info.addView.grid') }} {{ $t('msg.info.addView.grid') }}
</template> </template>
@ -68,7 +68,7 @@ function onOpenModal(type: ViewTypes, title = '') {
class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view" class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view"
@click="onOpenModal(ViewTypes.GALLERY)" @click="onOpenModal(ViewTypes.GALLERY)"
> >
<a-tooltip mouse-enter-delay="1000" placement="left"> <a-tooltip :mouse-enter-delay="1" placement="left">
<template #title> <template #title>
{{ $t('msg.info.addView.gallery') }} {{ $t('msg.info.addView.gallery') }}
</template> </template>
@ -91,7 +91,7 @@ function onOpenModal(type: ViewTypes, title = '') {
class="group !flex !items-center !my-0 !h-[30px] nc-create-1-view" class="group !flex !items-center !my-0 !h-[30px] nc-create-1-view"
@click="onOpenModal(ViewTypes.FORM)" @click="onOpenModal(ViewTypes.FORM)"
> >
<a-tooltip mouse-enter-delay="1000" placement="left"> <a-tooltip :mouse-enter-delay="1" placement="left">
<template #title> <template #title>
{{ $t('msg.info.addView.form') }} {{ $t('msg.info.addView.form') }}
</template> </template>

3
packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue

@ -2,7 +2,7 @@
import type { ViewTypes } from 'nocodb-sdk' import type { ViewTypes } from 'nocodb-sdk'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { viewIcons } from '~/utils' import { viewIcons } from '~/utils'
import { onKeyStroke, useDebounceFn, useNuxtApp, useVModel } from '#imports' import { onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel } from '#imports'
interface Props { interface Props {
view: Record<string, any> view: Record<string, any>
@ -163,6 +163,7 @@ function onStopEdit() {
</div> </div>
<a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel" @keydown="onKeyDown($event)" /> <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 v-else>{{ vModel.alias || vModel.title }}</div>
<div class="flex-1" /> <div class="flex-1" />

4
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" class="relative shadow-md h-full"
theme="light" theme="light"
> >
<a-tooltip mouse-enter-delay="1000" placement="left"> <a-tooltip :mouse-enter-delay="1" placement="left">
<template #title> Toggle sidebar </template> <template #title> Toggle sidebar </template>
<Transition name="layout"> <Transition name="glow">
<div <div
v-show="sidebarCollapsed || isHovered" 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" 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"

23
packages/nc-gui-v2/composables/useUIPermission/index.ts

@ -1,14 +1,15 @@
import type { Permission } from './rolePermissions' import type { Permission } from './rolePermissions'
import rolePermissions 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() { export function useUIPermission() {
const { $state } = useNuxtApp() const { user, previewAs } = useGlobal()
const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({})) const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => { const getRoles = (skipPreviewAs = false) => {
const user = $state.user let userRoles = user.value?.roles || {}
let userRoles = user?.value?.roles || {}
// if string populate key-value paired object // if string populate key-value paired object
if (typeof userRoles === 'string') { if (typeof userRoles === 'string') {
userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => { userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
@ -20,16 +21,20 @@ export function useUIPermission() {
// merge user role and project specific user roles // merge user role and project specific user roles
let roles = { let roles = {
...userRoles, ...userRoles,
...(projectRoles?.value || {}), ...projectRoles.value,
} }
if ($state.previewAs.value && !skipPreviewAs) { if (previewAs.value && !skipPreviewAs) {
roles = { 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> const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
return hasRole && (rolePermission === '*' || rolePermission?.[permission as Permission]) return hasRole && (rolePermission === '*' || rolePermission?.[permission as Permission])

4
packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@ -235,10 +235,10 @@ const isHovered = useElementHover(sidebar)
</a-dropdown> </a-dropdown>
</div> </div>
<a-tooltip mouse-enter-delay="1000" placement="right"> <a-tooltip :mouse-enter-delay="1" placement="right">
<template #title> Toggle table list </template> <template #title> Toggle table list </template>
<Transition name="layout"> <Transition name="glow">
<div <div
v-show="!isOpen || isHovered" 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" 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"

27
packages/nc-gui-v2/pages/index/index.vue

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

Loading…
Cancel
Save