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 updates

pull/3171/head
braks 2 years ago
parent
6edd9b41c3
commit
fa667077f1
8 changed files with 149 additions and 94 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. 41
      packages/nc-gui-v2/assets/style-v2.scss
  2. 1
      packages/nc-gui-v2/components.d.ts
  3. 5
      packages/nc-gui-v2/components/general/PreviewAs.vue
  4. 4
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  5. 2
      packages/nc-gui-v2/pages/forgot-password.vue
  6. 186
      packages/nc-gui-v2/pages/index/index.vue
  7. 2
      packages/nc-gui-v2/pages/signin.vue
  8. 2
      packages/nc-gui-v2/pages/signup/[[token]].vue

41
packages/nc-gui-v2/assets/style-v2.scss
Unescape View File

@ -17,6 +17,10 @@ main {
@apply m-0 h-full w-full bg-white dark:(bg-black text-white); @apply m-0 h-full w-full bg-white dark:(bg-black text-white);
} }
html {
overflow-y: auto !important;
}
main { main {
@apply flex-0 w-full relative scrollbar-thin-dull; @apply flex-0 w-full relative scrollbar-thin-dull;
overflow-x: hidden; overflow-x: hidden;
@ -43,16 +47,21 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
@apply color-transition; @apply color-transition;
} }
html {
overflow-y: auto !important;
}
// menu item styling // menu item styling
.nc-menu-item { .nc-menu-item {
@apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5)); @apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
} }
.nc-project-menu-item {
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
&:hover {
.nc-icon {
@apply text-pink-500;
}
}
}
.nc-sidebar-right-item { .nc-sidebar-right-item {
@apply relative flex items-center; @apply relative flex items-center;
@ -136,9 +145,9 @@ html {
@apply transition-opacity duration-300 ease-in-out; @apply transition-opacity duration-300 ease-in-out;
} }
.page-enter, .page-enter-active,
.page-leave-active, .page-leave-active,
.layout-enter, .layout-enter-active,
.layout-leave-active { .layout-leave-active {
@apply opacity-0; @apply opacity-0;
} }
@ -167,3 +176,21 @@ html {
.glow-leave-active { .glow-leave-active {
@apply opacity-0; @apply opacity-0;
} }
.scaling-btn {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-pink-500;
}
&:active::after {
@apply ring ring-pink-500;
}
}

1
packages/nc-gui-v2/components.d.ts vendored
Unescape View File

@ -155,6 +155,7 @@ declare module '@vue/runtime-core' {
MdiPlus: typeof import('~icons/mdi/plus')['default'] MdiPlus: typeof import('~icons/mdi/plus')['default']
MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default'] MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default'] MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
MdiPlusRoundedOutline: typeof import('~icons/mdi/plus-rounded-outline')['default']
MdiRefresh: typeof import('~icons/mdi/refresh')['default'] MdiRefresh: typeof import('~icons/mdi/refresh')['default']
MdiReload: typeof import('~icons/mdi/reload')['default'] MdiReload: typeof import('~icons/mdi/reload')['default']
MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default'] MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']

5
packages/nc-gui-v2/components/general/PreviewAs.vue
Unescape View File

@ -7,6 +7,7 @@ import MdiEyeOutline from '~icons/mdi/eye-outline'
import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline' import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
const { float } = defineProps<{ float?: boolean }>() const { float } = defineProps<{ float?: boolean }>()
const position = useState('preview-as-position', () => ({ const position = useState('preview-as-position', () => ({
y: `${window.innerHeight - 100}px`, y: `${window.innerHeight - 100}px`,
x: `${window.innerWidth / 2 - 250}px`, x: `${window.innerWidth / 2 - 250}px`,
@ -98,10 +99,6 @@ watch(previewAs, () => window.location.reload())
</template> </template>
<style scoped> <style scoped>
.nc-project-menu-item {
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
}
.floating-reset-btn { .floating-reset-btn {
@apply z-1000 index-100 fixed text-white @apply z-1000 index-100 fixed text-white
@apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md; @apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md;

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

@ -279,10 +279,6 @@ const copyAuthToken = async () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.nc-project-menu-item {
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
}
:deep(.ant-dropdown-menu-item-group-title) { :deep(.ant-dropdown-menu-item-group-title) {
@apply border-b-1; @apply border-b-1;
} }

2
packages/nc-gui-v2/pages/forgot-password.vue
Unescape View File

@ -129,7 +129,7 @@ function resetError() {
} }
.submit { .submit {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary; @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
&::after { &::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary; @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;

186
packages/nc-gui-v2/pages/index/index.vue
Unescape View File

@ -69,103 +69,119 @@ onMounted(() => {
</div> </div>
<div class="min-w-2/4 flex-auto"> <div class="min-w-2/4 flex-auto">
<a-card :loading="isLoading" class="!rounded-lg shadow"> <a-card class="transition-all duration-300 ease-out !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"> <h1 class="flex items-center justify-center gap-2 leading-8 mb-8">
<!-- My Projects --> <!-- My Projects -->
<b>{{ $t('title.myProject') }}</b> <span class="text-4xl">{{ $t('title.myProject') }}</span>
<MdiRefresh <a-tooltip title="Reload projects">
v-t="['a:project:refresh']" <span
class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer" class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-pink-500) rounded-full mt-1"
@click="loadProjects" :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
/> >
<MdiRefresh
v-t="['a:project:refresh']"
class="text-xl text-gray-500 group-hover:text-pink-500 cursor-pointer"
:class="isLoading ? '!text-primary' : ''"
@click="loadProjects"
/>
</span>
</a-tooltip>
</h1> </h1>
<div class="order-1 flex mb-6"> <div class="order-1 flex mb-6">
<a-input-search <a-input-search
v-model:value="filterQuery" v-model:value="filterQuery"
class="max-w-[200px] nc-project-page-search" class="max-w-[250px] nc-project-page-search rounded"
:placeholder="$t('activity.searchProject')" :placeholder="$t('activity.searchProject')"
/> />
<div class="flex-grow" /> <div class="flex-grow" />
<a-dropdown v-if="isUIAllowed('projectCreate', true)" @click.stop> <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']">
<a-button class="nc-new-project-menu !shadow"> <button class="nc-new-project-menu">
<div class="flex align-center"> <div class="flex items-center w-full">
{{ $t('title.newProj') }} {{ $t('title.newProj') }}
<MdiMenuDown class="menu-icon" /> <MdiMenuDown class="menu-icon" />
</div> </div>
</a-button> </button>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<div <a-menu-item>
v-t="['c:project:create:xcdb']" <div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project" v-t="['c:project:create:xcdb']"
@click="navigateTo('/project/create')" class="nc-project-menu-item gap-4"
> @click="navigateTo('/project/create')"
<MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" /> >
<MdiPlusOutline class="text-lg" />
<div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
</div> <div>{{ $t('activity.createProject') }}</div>
</div>
<div </a-menu-item>
v-t="['c:project:create:extdb']"
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project" <a-menu-item>
@click="navigateTo('/project/create-external')" <div
> v-t="['c:project:create:extdb']"
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" /> class="nc-project-menu-item gap-4"
@click="navigateTo('/project/create-external')"
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" /> >
</div> <MdiDatabaseOutline class="text-lg" />
<div v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
</div> </div>
<div v-if="isLoading"> <TransitionGroup name="layout" mode="out-in">
<a-skeleton /> <div v-if="isLoading">
</div> <a-skeleton />
</div>
<a-table
v-else <a-table
:custom-row=" v-else
(record) => ({ :custom-row="
onClick: () => { (record) => ({
$e('a:project:open') onClick: () => {
navigateTo(`/nc/${record.id}`) $e('a:project:open')
}, navigateTo(`/nc/${record.id}`)
}) },
" class: ['group'],
:data-source="filteredProjects" })
:pagination="{ position: ['bottomCenter'] }" "
> :data-source="filteredProjects"
<!-- Title --> :pagination="{ position: ['bottomCenter'] }"
<a-table-column key="title" :title="$t('general.title')" data-index="title"> >
<template #default="{ text }"> <!-- Title -->
<div <a-table-column key="title" :title="$t('general.title')" data-index="title">
class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row" <template #default="{ text }">
:title="text" <div
> class="capitalize color-transition group-hover:text-pink-500 !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
{{ text }} >
</div> {{ text }}
</template> </div>
</a-table-column> </template>
<!-- Actions --> </a-table-column>
<a-table-column key="id" :title="$t('labels.actions')" data-index="id"> <!-- Actions -->
<template #default="{ text, record }">
<div class="flex align-center"> <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
<MdiEditOutline <template #default="{ text, record }">
v-t="['c:project:edit:rename']" <div class="flex items-center gap-2">
class="nc-action-btn" <MdiEditOutline
@click.stop="navigateTo(`/project/${text}`)" v-t="['c:project:edit:rename']"
/> class="nc-action-btn"
<MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" /> @click.stop="navigateTo(`/project/${text}`)"
</div> />
</template>
</a-table-column> <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
</a-table> </div>
</template>
</a-table-column>
</a-table>
</TransitionGroup>
</a-card> </a-card>
</div> </div>
@ -182,7 +198,25 @@ onMounted(() => {
<style scoped> <style scoped>
.nc-action-btn { .nc-action-btn {
@apply text-gray-500 hover:text-primary mr-2 cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full; @apply text-gray-500 hover:(text-pink-500 ring) active:(ring ring-pink-500) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
}
.nc-new-project-menu {
@apply cursor-pointer z-1 relative color-transition rounded-md px-3 py-2 text-white;
&::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
content: '';
z-index: -1;
}
&:hover::after {
@apply transform scale-110 ring ring-pink-500;
}
&:active::after {
@apply ring ring-pink-500;
}
} }
:deep(.ant-table-cell) { :deep(.ant-table-cell) {

2
packages/nc-gui-v2/pages/signin.vue
Unescape View File

@ -167,7 +167,7 @@ function resetError() {
} }
.submit { .submit {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary; @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
&::after { &::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary; @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;

2
packages/nc-gui-v2/pages/signup/[[token]].vue
Unescape View File

@ -186,7 +186,7 @@ function resetError() {
} }
.submit { .submit {
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary; @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 text-white;
&::after { &::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary; @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;

Write Preview
Loading…
Cancel
Save