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

refactor(gui-v2): ui corrections 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2819/head
Pranav C 2 years ago
parent
06d635aab4
commit
f0bcafae2a
8 changed files with 189 additions and 160 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. 2
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 17
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
  3. 19
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
  4. 16
      packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
  5. 246
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  6. 20
      packages/nc-gui-v2/components/smartsheet/Pagination.vue
  7. 24
      packages/nc-gui-v2/components/tabs/Smartsheet.vue
  8. 5
      packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue

2
packages/nc-gui-v2/components/dashboard/TreeView.vue
Unescape View File

@ -208,7 +208,7 @@ const addTableTab = (table: TableType) => {
</div> </div>
<a-dropdown :trigger="['contextmenu']"> <a-dropdown :trigger="['contextmenu']">
<div class="p-1 flex-1 overflow-y-auto flex flex-column"> <div class="p-1 flex-1 overflow-y-auto flex flex-column scrollbar-thin-primary">
<div <div
class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer" class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
@click="showTableList = !showTableList" @click="showTableList = !showTableList"

17
packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
Unescape View File

@ -19,23 +19,24 @@ const applyChanges = () => {}
<v-menu offset-y eager transition="slide-y-transition"> <v-menu offset-y eager transition="slide-y-transition">
<template #activator="{ props }"> <template #activator="{ props }">
<v-badge :value="filters.length" color="primary" dot overlap> <v-badge :value="filters.length" color="primary" dot overlap>
<v-btn <a-button
v-t="['c:filter']" v-t="['c:filter']"
class="nc-filter-menu-btn px-2 nc-remove-border" class="nc-filter-menu-btn px-2 nc-remove-border"
:disabled="isLocked" :disabled="isLocked"
outlined outlined
small size="small"
text text
:class="{ :class="{
'primary lighten-5 grey--text text--darken-3': filters.length, 'primary lighten-5 grey--text text--darken-3': filters.length,
}" }"
v-bind="props" v-bind="props"
> ><div class="flex align-center gap-1 text-sm">
<MdiFilterIcon class="mr-1 text-grey" /> <MdiFilterIcon class="text-grey" />
<!-- Filter --> <!-- Filter -->
<span class="text-capitalize">{{ $t('activity.filter') }}</span> <span class="text-capitalize">{{ $t('activity.filter') }}</span>
<MdiMenuDownIcon class="text-grey" /> <MdiMenuDownIcon class="text-grey" />
</v-btn> </div>
</a-button>
</v-badge> </v-badge>
</template> </template>
<SmartsheetToolbarColumnFilter> <SmartsheetToolbarColumnFilter>

19
packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
Unescape View File

@ -315,23 +315,24 @@ export default {
<v-menu> <v-menu>
<template #activator="{ props }"> <template #activator="{ props }">
<v-badge :value="isAnyFieldHidden" color="primary" dot overlap v-bind="props"> <v-badge :value="isAnyFieldHidden" color="primary" dot overlap v-bind="props">
<v-btn <a-button
v-t="['c:fields']" v-t="['c:fields']"
class="nc-fields-menu-btn px-2 nc-remove-border" class="nc-fields-menu-btn px-2 nc-remove-border"
:disabled="isLocked" :disabled="isLocked"
outlined outlined
small size="small"
text text
:class="{ :class="{
'primary lighten-5 grey--text text--darken-3': isAnyFieldHidden, 'primary lighten-5 grey--text text--darken-3': isAnyFieldHidden,
}" }"
> ><div class="flex align-center gap-1 text-sm">
<!-- <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> --> <!-- <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
<MdiEyeIcon class="mr-1 text-grey"></MdiEyeIcon> <MdiEyeIcon class="text-grey"></MdiEyeIcon>
<!-- Fields --> <!-- Fields -->
<span class="text-sm text-capitalize">{{ $t('objects.fields') }}</span> <span class="text-capitalize">{{ $t('objects.fields') }}</span>
<MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon> <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
</v-btn> </div>
</a-button>
</v-badge> </v-badge>
</template> </template>

16
packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
Unescape View File

@ -29,8 +29,9 @@ watch(
<v-menu offset-y transition="slide-y-transition"> <v-menu offset-y transition="slide-y-transition">
<template #activator="{ props }"> <template #activator="{ props }">
<v-badge :value="sorts && sorts.length" color="primary" dot overlap> <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
<v-btn <a-button
v-t="['c:sort']" v-t="['c:sort']"
size="small"
class="nc-sort-menu-btn px-2 nc-remove-border" class="nc-sort-menu-btn px-2 nc-remove-border"
:disabled="isLocked" :disabled="isLocked"
small small
@ -40,12 +41,13 @@ watch(
'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': sorts && sorts.length, 'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': sorts && sorts.length,
}" }"
v-bind="props" v-bind="props"
> ><div class="flex align-center gap-1 text-sm">
<MdiSortIcon class="mr-1 text-grey" /> <MdiSortIcon class="text-grey" />
<!-- Sort --> <!-- Sort -->
<span class="text-capitalize">{{ $t('activity.sort') }}</span> <span class="text-capitalize">{{ $t('activity.sort') }}</span>
<MdiMenuDownIcon class="text-grey" /> <MdiMenuDownIcon class="text-grey" />
</v-btn> </div>
</a-button>
</v-badge> </v-badge>
</template> </template>
<div class="backgroundColor pa-2 menu-filter-dropdown bg-background min-w-[400px]"> <div class="backgroundColor pa-2 menu-filter-dropdown bg-background min-w-[400px]">

246
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -65,129 +65,131 @@ defineExpose({
</script> </script>
<template> <template>
<div class="nc-grid-wrapper"> <div class="flex flex-col h-100 min-h-0 w-100">
<table class="xc-row-table nc-grid backgroundColorDefault"> <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
<thead> <table class="xc-row-table nc-grid backgroundColorDefault">
<tr> <thead>
<th>#</th> <tr>
<th v-for="col in fields" :key="col.title"> <th>#</th>
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" /> <th v-for="col in fields" :key="col.title">
<SmartsheetHeaderCell v-else :column="col" /> <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
</th> <SmartsheetHeaderCell v-else :column="col" />
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr v-for="({ row }, rowIndex) in data" :key="rowIndex" class="nc-grid-row"> <tbody>
<td key="row-index" style="width: 65px" class="caption nc-grid-cell"> <tr v-for="({ row }, rowIndex) in data" :key="rowIndex" class="nc-grid-row">
<div class="d-flex align-center"> <td key="row-index" style="width: 65px" class="caption nc-grid-cell">
{{ rowIndex + 1 }} <div class="d-flex align-center">
</div> {{ rowIndex + 1 }}
</td> </div>
<td </td>
v-for="(columnObj, colIndex) in fields" <td
:key="rowIndex + columnObj.title" v-for="(columnObj, colIndex) in fields"
class="cell pointer nc-grid-cell" :key="rowIndex + columnObj.title"
:class="{ class="cell pointer nc-grid-cell"
active: !isPublicView && selected.col === colIndex && selected.row === rowIndex, :class="{
// 'primary-column': primaryValueColumn === columnObj.title, active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
// 'text-center': isCentrallyAligned(columnObj), // 'primary-column': primaryValueColumn === columnObj.title,
// 'required': isRequired(columnObj, rowObj), // 'text-center': isCentrallyAligned(columnObj),
}" // 'required': isRequired(columnObj, rowObj),
:data-col="columnObj.title" }"
@click="selectCell(rowIndex, colIndex)" :data-col="columnObj.title"
@dblclick="editEnabled = true" @click="selectCell(rowIndex, colIndex)"
> @dblclick="editEnabled = true"
<!-- @contextmenu=" --> >
<!-- showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) --> <!-- @contextmenu=" -->
<!-- " --> <!-- showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) -->
<!-- > --> <!-- " -->
<!-- <virtual-cell --> <!-- > -->
<!-- v-if="isVirtualCol(columnObj)" --> <!-- <virtual-cell -->
<!-- :password="password" --> <!-- v-if="isVirtualCol(columnObj)" -->
<!-- :is-public="isPublicView" --> <!-- :password="password" -->
<!-- :metas="metas" --> <!-- :is-public="isPublicView" -->
<!-- :is-locked="isLocked" --> <!-- :metas="metas" -->
<!-- :column="columnObj" --> <!-- :is-locked="isLocked" -->
<!-- :row="rowObj" --> <!-- :column="columnObj" -->
<!-- :nodes="nodes" --> <!-- :row="rowObj" -->
<!-- :meta="meta" --> <!-- :nodes="nodes" -->
<!-- :api="api" --> <!-- :meta="meta" -->
<!-- :active="selected.col === col && selected.row === row" --> <!-- :api="api" -->
<!-- :sql-ui="sqlUi" --> <!-- :active="selected.col === col && selected.row === row" -->
<!-- :is-new="rowMeta.new" --> <!-- :sql-ui="sqlUi" -->
<!-- v-on="$listeners" --> <!-- :is-new="rowMeta.new" -->
<!-- @updateCol=" --> <!-- v-on="$listeners" -->
<!-- (...args) => --> <!-- @updateCol=" -->
<!-- updateCol( --> <!-- (...args) => -->
<!-- ...args, --> <!-- updateCol( -->
<!-- columnObj.bt --> <!-- ...args, -->
<!-- && meta.columns.find( --> <!-- columnObj.bt -->
<!-- (c) => c.column_name === columnObj.bt.column_name, --> <!-- && meta.columns.find( -->
<!-- ), --> <!-- (c) => c.column_name === columnObj.bt.column_name, -->
<!-- col, --> <!-- ), -->
<!-- row, --> <!-- col, -->
<!-- ) --> <!-- row, -->
<!-- " --> <!-- ) -->
<!-- @saveRow="onCellValueChange(col, row, columnObj, true)" --> <!-- " -->
<!-- /> --> <!-- @saveRow="onCellValueChange(col, row, columnObj, true)" -->
<!-- /> -->
<!-- <editable-cell -->
<!-- v-else-if=" --> <!-- <editable-cell -->
<!-- ((isPkAvail || rowMeta.new) --> <!-- v-else-if=" -->
<!-- && !isView --> <!-- ((isPkAvail || rowMeta.new) -->
<!-- && !isLocked --> <!-- && !isView -->
<!-- && !isPublicView --> <!-- && !isLocked -->
<!-- && editEnabled.col === col --> <!-- && !isPublicView -->
<!-- && editEnabled.row === row) --> <!-- && editEnabled.col === col -->
<!-- || enableEditable(columnObj) --> <!-- && editEnabled.row === row) -->
<!-- " --> <!-- || enableEditable(columnObj) -->
<!-- v-model="rowObj[columnObj.title]" --> <!-- " -->
<!-- :column="columnObj" --> <!-- v-model="rowObj[columnObj.title]" -->
<!-- :meta="meta" --> <!-- :column="columnObj" -->
<!-- :active="selected.col === col && selected.row === row" --> <!-- :meta="meta" -->
<!-- :sql-ui="sqlUi" --> <!-- :active="selected.col === col && selected.row === row" -->
<!-- :db-alias="nodes.dbAlias" --> <!-- :sql-ui="sqlUi" -->
<!-- :is-locked="isLocked" --> <!-- :db-alias="nodes.dbAlias" -->
<!-- :is-public="isPublicView" --> <!-- :is-locked="isLocked" -->
<!-- :view-id="viewId" --> <!-- :is-public="isPublicView" -->
<!-- @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" --> <!-- :view-id="viewId" -->
<!-- @cancel="editEnabled = {}" --> <!-- @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" -->
<!-- @update="onCellValueChange(col, row, columnObj, false)" --> <!-- @cancel="editEnabled = {}" -->
<!-- @blur="onCellValueChange(col, row, columnObj, true)" --> <!-- @update="onCellValueChange(col, row, columnObj, false)" -->
<!-- @input="unsaved = true" --> <!-- @blur="onCellValueChange(col, row, columnObj, true)" -->
<!-- @navigateToNext="navigateToNext" --> <!-- @input="unsaved = true" -->
<!-- @navigateToPrev="navigateToPrev" --> <!-- @navigateToNext="navigateToNext" -->
<!-- /> --> <!-- @navigateToPrev="navigateToPrev" -->
<!-- /> -->
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
<SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
<SmartsheetCell
v-else <SmartsheetCell
v-model="row[columnObj.title]" v-else
:column="columnObj" v-model="row[columnObj.title]"
:edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex" :column="columnObj"
@update:model-value="updateRowProperty(row, columnObj.title)" :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
/> @update:model-value="updateRowProperty(row, columnObj.title)"
/>
<!-- <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
<!-- :selected="selected.col === col && selected.row === row" --> <!-- <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
<!-- :is-locked="isLocked" --> <!-- :selected="selected.col === col && selected.row === row" -->
<!-- :column="columnObj" --> <!-- :is-locked="isLocked" -->
<!-- :meta="meta" --> <!-- :column="columnObj" -->
<!-- :db-alias="nodes.dbAlias" --> <!-- :meta="meta" -->
<!-- :value="rowObj[columnObj.title]" --> <!-- :db-alias="nodes.dbAlias" -->
<!-- :sql-ui="sqlUi" --> <!-- :value="rowObj[columnObj.title]" -->
<!-- @enableedit=" --> <!-- :sql-ui="sqlUi" -->
<!-- makeSelected(col, row); --> <!-- @enableedit=" -->
<!-- makeEditable(col, row, columnObj.ai, rowMeta); --> <!-- makeSelected(col, row); -->
<!-- " --> <!-- makeEditable(col, row, columnObj.ai, rowMeta); -->
<!-- /> --> <!-- " -->
</td> <!-- /> -->
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
<SmartsheetPagination />
</div> </div>
<SmartsheetPagination />
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">

20
packages/nc-gui-v2/components/smartsheet/Pagination.vue
Unescape View File

@ -48,7 +48,7 @@ export default {
<div class="d-flex align-center"> <div class="d-flex align-center">
<span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span> <span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
<v-spacer /> <v-spacer />
<v-pagination <!-- <v-pagination
v-if="count !== Infinity" v-if="count !== Infinity"
v-model="page" v-model="page"
style="max-width: 100%" style="max-width: 100%"
@ -56,6 +56,17 @@ export default {
:total-visible="8" :total-visible="8"
color="primary lighten-2" color="primary lighten-2"
class="nc-pagination" class="nc-pagination"
/> -->
<a-pagination
v-if="count !== Infinity"
v-model:current="page"
size="small"
class="!text-xs !m-1"
:total="count"
:page-size="size"
show-less-items
:show-size-changer="false"
/> />
<div v-else class="mx-auto d-flex align-center mt-n1" style="max-width: 250px"> <div v-else class="mx-auto d-flex align-center mt-n1" style="max-width: 250px">
<span class="caption" style="white-space: nowrap"> Change page:</span> <span class="caption" style="white-space: nowrap"> Change page:</span>
@ -79,3 +90,10 @@ export default {
<v-spacer /> <v-spacer />
</div> </div>
</template> </template>
<style scoped>
:deep(.ant-pagination-item a) {
line-height: 21px !important;
@apply text-sm;
}
</style>

24
packages/nc-gui-v2/components/tabs/Smartsheet.vue
Unescape View File

@ -37,17 +37,21 @@ watch(
</script> </script>
<template> <template>
<div class="overflow-auto nc-container"> <div class="nc-container flex h-full">
<SmartsheetToolbar /> <div class="flex flex-col h-full flex-1 min-w-0">
<template v-if="meta"> <SmartsheetToolbar />
<div class="d-flex"> <template v-if="meta">
<div v-if="activeView" class="flex-grow-1 min-w-0"> <div class="flex flex-1 min-h-0">
<SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" :ref="el" /> <div v-if="activeView" class="h-full flex-grow min-w-0 min-h-0">
<SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" /> <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" :ref="el" />
<SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" /> <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
<SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" />
</div>
</div> </div>
<SmartsheetSidebar /> </template>
</div> </div>
<template v-if="meta">
<SmartsheetSidebar />
</template> </template>
</div> </div>
</template> </template>

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

@ -15,7 +15,7 @@ provide(TabMetaInj, activeTab)
<a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" /> <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
</a-tabs> </a-tabs>
</div> </div>
<div class="flex-1"> <div class="flex-1 min-h-0">
<NuxtPage /> <NuxtPage />
</div> </div>
</div> </div>
@ -23,7 +23,8 @@ provide(TabMetaInj, activeTab)
<style scoped> <style scoped>
.nc-container { .nc-container {
height: calc(100vh - var(--header-height)); height: calc(calc(100vh - var(--header-height)));
@apply overflow-hidden;
} }
:deep(.ant-tabs-nav) { :deep(.ant-tabs-nav) {

Write Preview
Loading…
Cancel
Save