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

chore : create project small changes + shadow to button

pull/2812/head
Naveen MR 2 years ago
parent
b2e4be8691
commit
8c22c30c86
3 changed files with 46 additions and 37 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. 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
Unescape View File

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

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

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

Write Preview
Loading…
Cancel
Save