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

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

pull/3159/head
braks 2 years ago
parent
3474ccff30
commit
e8de580842
9 changed files with 143 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save