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

Nc fix/expanded form bug fixes (#8501) 

* fix(nc-gui): reduce gap between username and comment

* fix(nc-gui): remove expanded form audit tab right padding

* fix(nc-gui): save record should be on left side

* fix(nc-gui): increase expanded form field gap

* expanded form box shadow

* fix(nc-gui): expanded form field alignment issue

* fix(nc-gui): update expanded form hover state style

* fix(nc-gui): update expanded form field hover and selected state style

* chore(nc-gui): lint

---------

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
pull/8528/head
Ramesh Mane 1 month ago committed by GitHub
parent
a816e96609
commit
95cd67cc4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 42 additions and 38 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. 6
      packages/nc-gui/components/project/AllTables.vue
  2. 4
      packages/nc-gui/components/project/View.vue
  3. 8
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  4. 52
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  5. 6
      packages/nc-gui/components/smartsheet/header/Cell.vue
  6. 4
      packages/nc-gui/components/smartsheet/header/VirtualCell.vue

6
packages/nc-gui/components/project/AllTables.vue
Unescape View File

@ -105,7 +105,7 @@ const onCreateBaseClick = () => {
<GeneralIcon icon="download" /> <GeneralIcon icon="download" />
<div class="label">{{ $t('activity.import') }} {{ $t('general.data') }}</div> <div class="label">{{ $t('activity.import') }} {{ $t('general.data') }}</div>
</div> </div>
<!-- <component :is="isDataSourceLimitReached ? NcTooltip : 'div'" v-if="isUIAllowed('sourceCreate')"> <!-- <component :is="isDataSourceLimitReached ? NcTooltip : 'div'" v-if="isUIAllowed('sourceCreate')">
<template #title> <template #title>
<div> <div>
{{ $t('tooltip.reachedSourceLimit') }} {{ $t('tooltip.reachedSourceLimit') }}
@ -124,7 +124,7 @@ const onCreateBaseClick = () => {
<GeneralIcon icon="dataSource" /> <GeneralIcon icon="dataSource" />
<div class="label">{{ $t('labels.connectDataSource') }}</div> <div class="label">{{ $t('labels.connectDataSource') }}</div>
</div> </div>
</component>--> </component> -->
</div> </div>
<div <div
v-if="base?.isLoading" v-if="base?.isLoading"
@ -191,7 +191,7 @@ const onCreateBaseClick = () => {
</div> </div>
<ProjectImportModal v-if="defaultBase" v-model:visible="isImportModalOpen" :source="defaultBase" /> <ProjectImportModal v-if="defaultBase" v-model:visible="isImportModalOpen" :source="defaultBase" />
<!-- <LazyDashboardSettingsDataSourcesCreateBase v-model:open="isNewBaseModalOpen" />--> <!-- <LazyDashboardSettingsDataSourcesCreateBase v-model:open="isNewBaseModalOpen" /> -->
</div> </div>
</template> </template>

4
packages/nc-gui/components/project/View.vue
Unescape View File

@ -162,7 +162,7 @@ watch(
</template> </template>
<ProjectAccessSettings :base-id="currentBase?.id" /> <ProjectAccessSettings :base-id="currentBase?.id" />
</a-tab-pane> </a-tab-pane>
<!-- <a-tab-pane v-if="isUIAllowed('sourceCreate')" key="data-source"> <!-- <a-tab-pane v-if="isUIAllowed('sourceCreate')" key="data-source">
<template #tab> <template #tab>
<div class="tab-title" data-testid="proj-view-tab__data-sources"> <div class="tab-title" data-testid="proj-view-tab__data-sources">
<GeneralIcon icon="database" /> <GeneralIcon icon="database" />
@ -180,7 +180,7 @@ watch(
</div> </div>
</template> </template>
<DashboardSettingsDataSources v-model:state="baseSettingsState" /> <DashboardSettingsDataSources v-model:state="baseSettingsState" />
</a-tab-pane>--> </a-tab-pane> -->
</a-tabs> </a-tabs>
</div> </div>
</div> </div>

8
packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
Unescape View File

@ -166,10 +166,10 @@ watch(commentsWrapperEl, () => {
<div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-1 nc-scrollbar-thin"> <div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-1 nc-scrollbar-thin">
<div v-for="log of comments" :key="log.id"> <div v-for="log of comments" :key="log.id">
<div class="group gap-3 overflow-hidden hover:bg-gray-200 flex items-start px-3 pt-3 pb-4"> <div class="group gap-3 overflow-hidden hover:bg-gray-200 flex items-start px-3 pt-3 pb-4">
<GeneralUserIcon size="medium" :name="log.display_name" :email="log.user" class="mt-0.5" /> <GeneralUserIcon size="medium" :name="log.display_name" :email="log.user" class="mt-0.7" />
<div class="flex-1 flex flex-col gap-1 max-w-[calc(100%_-_24px)]"> <div class="flex-1 flex flex-col gap-0.5 max-w-[calc(100%_-_24px)]">
<div class="w-full flex justify-between gap-3 min-h-7"> <div class="w-full flex justify-between gap-3 min-h-7">
<div class="flex items-start max-w-[calc(100%_-_40px)]"> <div class="flex items-center max-w-[calc(100%_-_40px)]">
<div class="w-full flex flex-wrap items-center"> <div class="w-full flex flex-wrap items-center">
<NcTooltip class="truncate max-w-42 mr-2" show-on-truncate-only> <NcTooltip class="truncate max-w-42 mr-2" show-on-truncate-only>
<template #title> <template #title>
@ -389,7 +389,7 @@ watch(commentsWrapperEl, () => {
.ant-tabs-nav { .ant-tabs-nav {
@apply px-3; @apply px-3;
.ant-tabs-nav-list { .ant-tabs-nav-list {
@apply w-[calc(100%_-_24px)] gap-6; @apply w-full gap-6;
.ant-tabs-tab { .ant-tabs-tab {
@apply flex-1 flex items-center justify-center pt-3 pb-2.5; @apply flex-1 flex items-center justify-center pt-3 pb-2.5;

52
packages/nc-gui/components/smartsheet/expanded-form/index.vue
Unescape View File

@ -562,7 +562,7 @@ export default {
<div <div
class="flex min-h-7 flex-shrink-0 w-full items-center nc-expanded-form-header relative p-4 xs:(px-2 py-0 min-h-[48px]) justify-between" class="flex min-h-7 flex-shrink-0 w-full items-center nc-expanded-form-header relative p-4 xs:(px-2 py-0 min-h-[48px]) justify-between"
> >
<div class="flex-1 flex gap-3 lg:w-100 <lg:max-w-[calc(100%_-_178px)] xs:(max-w-[calc(100%_-_44px)])"> <div class="flex-1 flex gap-4 lg:w-100 <lg:max-w-[calc(100%_-_178px)] xs:(max-w-[calc(100%_-_44px)])">
<div class="flex gap-2"> <div class="flex gap-2">
<NcTooltip v-if="props.showNextPrevIcons"> <NcTooltip v-if="props.showNextPrevIcons">
<template #title> {{ renderAltOrOptlKey() }} + ← </template> <template #title> {{ renderAltOrOptlKey() }} + ← </template>
@ -601,13 +601,13 @@ export default {
}" }"
> >
<div v-if="meta.title" class="flex items-center gap-2 px-2 py-1 rounded-lg bg-gray-100 text-gray-800"> <div v-if="meta.title" class="flex items-center gap-2 px-2 py-1 rounded-lg bg-gray-100 text-gray-800">
<GeneralTableIcon :meta="meta" class="!text-gray-800" /> <GeneralTableIcon :meta="meta" class="!text-gray-800 !mx-0" />
<NcTooltip class="truncate max-w-[100px] xs:(max-w-[82px]) h-5" show-on-truncate-only> <NcTooltip class="truncate text-sm max-w-[100px] xs:(max-w-[82px]) align-middle" show-on-truncate-only>
<template #title> <template #title>
{{ meta.title }} {{ meta.title }}
</template> </template>
<span class="font-weight-500 truncate text-sm"> {{ meta.title }} </span> <span class="font-weight-500 truncate text-sm">{{ meta.title }}</span>
</NcTooltip> </NcTooltip>
</div> </div>
<div <div
@ -627,6 +627,21 @@ export default {
</div> </div>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<NcTooltip v-if="!isMobileMode && isUIAllowed('dataEdit')">
<template #title> {{ renderAltOrOptlKey() }} + S </template>
<NcButton
v-e="['c:row-expand:save']"
:disabled="changedColumns.size === 0 && !isUnsavedFormExist"
:loading="isSaving"
class="nc-expand-form-save-btn !xs:(text-base) !h-7 !px-2"
data-testid="nc-expanded-form-save"
type="primary"
size="xsmall"
@click="save"
>
<div class="xs:px-1">{{ newRecordSubmitBtnText ?? 'Save Record' }}</div>
</NcButton>
</NcTooltip>
<NcButton <NcButton
v-if="!isNew && rowId && !isMobileMode" v-if="!isNew && rowId && !isMobileMode"
:disabled="isLoading" :disabled="isLoading"
@ -645,21 +660,6 @@ export default {
{{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }} {{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }}
</div> </div>
</NcButton> </NcButton>
<NcTooltip v-if="!isMobileMode && isUIAllowed('dataEdit')">
<template #title> {{ renderAltOrOptlKey() }} + S </template>
<NcButton
v-e="['c:row-expand:save']"
:disabled="changedColumns.size === 0 && !isUnsavedFormExist"
:loading="isSaving"
class="nc-expand-form-save-btn !xs:(text-base) !h-7 !px-2"
data-testid="nc-expanded-form-save"
type="primary"
size="xsmall"
@click="save"
>
<div class="xs:px-1">{{ newRecordSubmitBtnText ?? 'Save Record' }}</div>
</NcButton>
</NcTooltip>
<NcDropdown v-if="!isNew && rowId && !isMobileMode" placement="bottomRight"> <NcDropdown v-if="!isNew && rowId && !isMobileMode" placement="bottomRight">
<NcButton type="text" size="xsmall" class="nc-expand-form-more-actions !w-7 !h-7" :disabled="isLoading"> <NcButton type="text" size="xsmall" class="nc-expand-form-more-actions !w-7 !h-7" :disabled="isLoading">
<GeneralIcon icon="threeDotVertical" class="text-md" :class="isLoading ? 'text-gray-300' : 'text-gray-700'" /> <GeneralIcon icon="threeDotVertical" class="text-md" :class="isLoading ? 'text-gray-300' : 'text-gray-700'" />
@ -730,7 +730,7 @@ export default {
> >
<div <div
ref="expandedFormScrollWrapper" ref="expandedFormScrollWrapper"
class="flex flex-col flex-grow gap-3 h-full max-h-full nc-scrollbar-thin items-center w-full p-4 xs:(px-4 pt-4 pb-2 gap-6) children:max-w-[588px] <lg:(children:max-w-[450px])" class="flex flex-col flex-grow gap-4 h-full max-h-full nc-scrollbar-thin items-center w-full p-4 xs:(px-4 pt-4 pb-2 gap-6) children:max-w-[588px] <lg:(children:max-w-[450px])"
> >
<div <div
v-for="(col, i) of fields" v-for="(col, i) of fields"
@ -1024,14 +1024,18 @@ export default {
} }
.nc-data-cell { .nc-data-cell {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); @apply !rounded-lg;
&:hover, transition: all 0.3s;
&:hover {
@apply !border-1 !border-brand-400;
}
&:focus-within { &:focus-within {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) !important; box-shadow: 0px 0px 0px 2px rgba(51, 102, 255, 0.24) !important;
} }
} }
.nc-data-cell:focus-within { .nc-data-cell:focus-within {
@apply !border-1 !border-brand-500 !rounded-lg; @apply !border-1 !border-brand-500;
} }
:deep(.nc-system-field input) { :deep(.nc-system-field input) {

6
packages/nc-gui/components/smartsheet/header/Cell.vue
Unescape View File

@ -99,7 +99,7 @@ const onClick = (e: Event) => {
:class="{ :class="{
'h-full': column, 'h-full': column,
'!text-gray-400': isKanban, '!text-gray-400': isKanban,
'flex-col !items-start justify-center': isExpandedForm && !isMobileMode, 'flex-col !items-start justify-center pt-0.5': isExpandedForm && !isMobileMode,
'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'), 'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'),
'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false, 'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false,
}" }"
@ -138,7 +138,7 @@ const onClick = (e: Event) => {
<NcTooltip <NcTooltip
v-if="column" v-if="column"
:class="{ :class="{
'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu, 'cursor-pointer': !isForm && isUIAllowed('fieldEdit') && !hideMenu,
'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu, 'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
'truncate': !isForm, 'truncate': !isForm,
}" }"
@ -164,7 +164,7 @@ const onClick = (e: Event) => {
<GeneralIcon <GeneralIcon
v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')" v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
icon="arrowDown" icon="arrowDown"
class="flex-none text-grey h-full text-grey cursor-pointer ml-1 group-hover:visible" class="flex-none cursor-pointer ml-1 group-hover:visible w-4 h-4"
:class="{ :class="{
visible: editColumnDropdown || isDropDownOpen, visible: editColumnDropdown || isDropDownOpen,
invisible: !(editColumnDropdown || isDropDownOpen), invisible: !(editColumnDropdown || isDropDownOpen),

4
packages/nc-gui/components/smartsheet/header/VirtualCell.vue
Unescape View File

@ -179,7 +179,7 @@ const onClick = (e: Event) => {
<div <div
class="flex items-center w-full h-full text-small text-gray-500 font-weight-medium group" class="flex items-center w-full h-full text-small text-gray-500 font-weight-medium group"
:class="{ :class="{
'flex-col !items-start justify-center': isExpandedForm, 'flex-col !items-start justify-center pt-0.5': isExpandedForm && !isMobileMode,
'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false, 'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false,
'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'), 'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'),
}" }"
@ -220,7 +220,7 @@ const onClick = (e: Event) => {
<GeneralIcon <GeneralIcon
v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')" v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
icon="arrowDown" icon="arrowDown"
class="flex-none h-full cursor-pointer ml-1 group-hover:visible" class="flex-none cursor-pointer ml-1 group-hover:visible w-4 h-4"
:class="{ :class="{
visible: editColumnDropdown || isDropDownOpen, visible: editColumnDropdown || isDropDownOpen,
invisible: !(editColumnDropdown || isDropDownOpen), invisible: !(editColumnDropdown || isDropDownOpen),

Write Preview
Loading…
Cancel
Save