Browse Source

Merge pull request #3107 from nocodb/refactor/gui-v2-ui-updates

refactor: remove group class from tr
pull/3110/head
Pranav C 2 years ago committed by GitHub
parent
commit
b9c1be076f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 57
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  2. 2
      packages/nc-gui-v2/composables/useViewData.ts

57
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -291,13 +291,13 @@ const expandForm = (row: Row, state: Record<string, any>) => {
<a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']"> <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
<table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true"> <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
<thead> <thead>
<tr> <tr class="nc-grid-header">
<th> <th>
<div class="w-full h-full bg-gray-100 flex w-[80px] px-1 items-center"> <div class="w-full h-full bg-gray-100 flex w-[80px] px-1 items-center">
<div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div> <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
<div <div
:class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }" :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
class="group-hover:flex w-full align-center" class="nc-check-all w-full align-center"
> >
<a-checkbox v-model:checked="selectedAllRecords" /> <a-checkbox v-model:checked="selectedAllRecords" />
@ -338,24 +338,29 @@ const expandForm = (row: Row, state: Record<string, any>) => {
<tbody> <tbody>
<SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row"> <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
<template #default="{ state }"> <template #default="{ state }">
<tr class="nc-grid-row group"> <tr class="nc-grid-row">
<td key="row-index" class="caption nc-grid-cell"> <td key="row-index" class="caption nc-grid-cell">
<div class="align-center flex w-[80px]"> <div class="align-center flex w-[80px]">
<div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div> <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
<div <div
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
class="group-hover:flex w-full items-center justify-between p-1" class="nc-row-expand-and-checkbox"
> >
<a-checkbox v-model:checked="row.rowMeta.selected" /> <a-checkbox v-model:checked="row.rowMeta.selected" />
<span class="flex-1" /> <span class="flex-1" />
<div class="nc-expand">
<span <span
v-if="row.rowMeta?.commentCount" v-if="row.rowMeta?.commentCount"
class="py-1 px-3 rounded-full text-xs" class="py-1 px-3 rounded-full text-xs"
:style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }" :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
@click="expandForm(row, state)" @click="expandForm(row, state)"
>{{ row.rowMeta.commentCount }}</span
> >
<div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10"> {{ row.rowMeta.commentCount }}
</span>
<div
v-else
class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10"
>
<MdiArrowExpand <MdiArrowExpand
class="select-none transform hover:(text-pink-500 scale-120)" class="select-none transform hover:(text-pink-500 scale-120)"
@click="expandForm(row, state)" @click="expandForm(row, state)"
@ -363,6 +368,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
</div> </div>
</div> </div>
</div> </div>
</div>
</td> </td>
<td <td
v-for="(columnObj, colIndex) of fields" v-for="(columnObj, colIndex) of fields"
@ -519,4 +525,39 @@ const expandForm = (row: Row, state: Record<string, any>) => {
cursor: col-resize; cursor: col-resize;
} }
} }
.nc-grid-row {
.nc-row-expand-and-checkbox {
@apply w-full items-center justify-between p-1;
}
.nc-expand {
@apply hidden;
}
&:hover {
.nc-row-no {
@apply hidden;
}
.nc-expand {
@apply flex;
}
.nc-row-expand-and-checkbox {
@apply flex;
}
}
}
.nc-grid-header {
&:hover {
.nc-no-label {
@apply hidden;
}
.nc-check-all {
@apply flex;
}
}
}
</style> </style>

2
packages/nc-gui-v2/composables/useViewData.ts

@ -44,7 +44,7 @@ export function useViewData(
const selectedAllRecords = computed({ const selectedAllRecords = computed({
get() { get() {
return formattedData.value.every((row: Row) => row.rowMeta.selected) return !!formattedData.value.length && formattedData.value.every((row: Row) => row.rowMeta.selected)
}, },
set(selected: boolean) { set(selected: boolean) {
formattedData.value.forEach((row: Row) => (row.rowMeta.selected = selected)) formattedData.value.forEach((row: Row) => (row.rowMeta.selected = selected))

Loading…
Cancel
Save