Browse Source

chore : create project small changes + shadow to button

pull/2812/head
Naveen MR 2 years ago
parent
commit
8c22c30c86
  1. 3
      packages/nc-gui-v2/assets/style-v2.scss
  2. 71
      packages/nc-gui-v2/pages/index/index.vue
  3. 9
      packages/nc-gui-v2/pages/project/index/create-external.vue

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

@ -61,3 +61,6 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
--header-height: 64px; --header-height: 64px;
} }
.ant-btn{
@apply !shadow;
}

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

@ -1,10 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Modal } from 'ant-design-vue' import {Modal} from 'ant-design-vue'
import type { ProjectType } from 'nocodb-sdk' import type {ProjectType} from 'nocodb-sdk'
import { useToast } from 'vue-toastification' import {useToast} from 'vue-toastification'
import { navigateTo } from '#app' import {navigateTo} from '#app'
import { computed, onMounted } from '#imports' import {computed, onMounted} from '#imports'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' import {extractSdkResponseErrorMsg} from '~/utils/errorUtils'
import MdiDeleteOutline from '~icons/mdi/delete-outline' import MdiDeleteOutline from '~icons/mdi/delete-outline'
import MdiEditOutline from '~icons/mdi/edit-outline' import MdiEditOutline from '~icons/mdi/edit-outline'
@ -13,7 +13,7 @@ import MdiMenuDown from '~icons/mdi/menu-down'
import MdiPlus from '~icons/mdi/plus' import MdiPlus from '~icons/mdi/plus'
import MdiDatabaseOutline from '~icons/mdi/database-outline' import MdiDatabaseOutline from '~icons/mdi/database-outline'
const { $api, $state, $e } = useNuxtApp() const {$api, $state, $e} = useNuxtApp()
const toast = useToast() const toast = useToast()
const filterQuery = ref('') const filterQuery = ref('')
@ -29,7 +29,7 @@ const loadProjects = async () => {
const filteredProjects = computed(() => { const filteredProjects = computed(() => {
return projects.value.filter( return projects.value.filter(
(project) => !filterQuery.value || project.title?.toLowerCase?.().includes(filterQuery.value.toLowerCase()), (project) => !filterQuery.value || project.title?.toLowerCase?.().includes(filterQuery.value.toLowerCase()),
) )
}) })
@ -68,45 +68,45 @@ $state.sidebarOpen.value = false
<b>{{ $t('title.myProject') }}</b> <b>{{ $t('title.myProject') }}</b>
<MdiRefresh <MdiRefresh
v-t="['a:project:refresh']" v-t="['a:project:refresh']"
class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer" class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
@click="loadProjects" @click="loadProjects"
></MdiRefresh> ></MdiRefresh>
</h1> </h1>
<div class="flex mb-6"> <div class="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-[200px] nc-project-page-search"
:placeholder="$t('activity.searchProject')" :placeholder="$t('activity.searchProject')"
></a-input-search> ></a-input-search>
<div class="flex-grow"></div> <div class="flex-grow"></div>
<a-dropdown @click.stop> <a-dropdown @click.stop>
<a-button class="nc-new-project-menu"> <a-button class="nc-new-project-menu !shadow btn-primary">
<div class="flex align-center"> <div class="flex align-center">
{{ $t('title.newProj') }} {{ $t('title.newProj') }}
<MdiMenuDown class="menu-icon" /> <MdiMenuDown class="menu-icon"/>
</div> </div>
</a-button> </a-button>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<div <div
v-t="['c:project:create:xcdb']" v-t="['c:project:create:xcdb']"
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project" class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
@click="navigateTo('/project/create')" @click="navigateTo('/project/create')"
> >
<MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" /> <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg"/>
<div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div> <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
</div> </div>
<div <div
v-t="['c:project:create:extdb']" 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" class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
@click="navigateTo('/project/create-external')" @click="navigateTo('/project/create-external')"
> >
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" /> <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg"/>
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" /> <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')"/>
</div> </div>
</a-menu> </a-menu>
</template> </template>
@ -114,12 +114,12 @@ $state.sidebarOpen.value = false
</div> </div>
<div v-if="loading"> <div v-if="loading">
<a-skeleton /> <a-skeleton/>
</div> </div>
<a-table <a-table
v-else v-else
:custom-row=" :custom-row="
(record) => ({ (record) => ({
onClick: () => { onClick: () => {
$e('a:project:open') $e('a:project:open')
@ -127,13 +127,14 @@ $state.sidebarOpen.value = false
}, },
}) })
" "
:data-source="filteredProjects" :data-source="filteredProjects"
:pagination="{ position: ['bottomCenter'] }" :pagination="{ position: ['bottomCenter'] }"
> >
<!-- Title --> <!-- Title -->
<a-table-column key="title" :title="$t('general.title')" data-index="title"> <a-table-column key="title" :title="$t('general.title')" data-index="title">
<template #default="{ text }"> <template #default="{ text }">
<div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row" :title="text"> <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row"
:title="text">
{{ text }} {{ text }}
</div> </div>
</template> </template>
@ -143,11 +144,11 @@ $state.sidebarOpen.value = false
<template #default="{ text, record }"> <template #default="{ text, record }">
<div class="flex align-center"> <div class="flex align-center">
<MdiEditOutline <MdiEditOutline
v-t="['c:project:edit:rename']" v-t="['c:project:edit:rename']"
class="nc-action-btn" class="nc-action-btn"
@click.stop="navigateTo(`/project/${text}`)" @click.stop="navigateTo(`/project/${text}`)"
/> />
<MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" /> <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)"/>
</div> </div>
</template> </template>
</a-table-column> </a-table-column>

9
packages/nc-gui-v2/pages/project/index/create-external.vue

@ -216,7 +216,7 @@ onMounted(() => {
<template> <template>
<a-card <a-card
class="max-w-[600px] mx-auto !mt-5 !mb-5" class="max-w-[600px] mx-auto !mt-15 !mb-5 !shadow-md"
:title="$t('activity.createProject')" :title="$t('activity.createProject')"
:head-style="{ textAlign: 'center', fontWeight: '700' }" :head-style="{ textAlign: 'center', fontWeight: '700' }"
> >
@ -227,6 +227,7 @@ onMounted(() => {
layout="horizontal" layout="horizontal"
:label-col="{ span: 8 }" :label-col="{ span: 8 }"
:wrapper-col="{ span: 18 }" :wrapper-col="{ span: 18 }"
class="!pr-5"
> >
<a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title"> <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" size="small" class="nc-extdb-proj-name" /> <a-input v-model:value="formState.title" size="small" class="nc-extdb-proj-name" />
@ -360,7 +361,7 @@ onMounted(() => {
<a-form-item class="flex justify-center mt-5"> <a-form-item class="flex justify-center mt-5">
<div class="flex justify-center gap-2"> <div class="flex justify-center gap-2">
<a-button type="primary" class="nc-extdb-btn-test-connection" @click="testConnection"> <a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection">
{{ $t('activity.testDbConn') }} {{ $t('activity.testDbConn') }}
</a-button> </a-button>
<a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit" @click="createProject"> Submit </a-button> <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit" @click="createProject"> Submit </a-button>
@ -396,4 +397,8 @@ onMounted(() => {
:deep(.ant-form-item-with-help .ant-form-item-explain) { :deep(.ant-form-item-with-help .ant-form-item-explain) {
@apply !min-h-0; @apply !min-h-0;
} }
:deep(.ant-card-head-title){
@apply !text-3xl
}
</style> </style>

Loading…
Cancel
Save