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 6 months ago committed by GitHub
parent
commit
95cd67cc4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 8
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  2. 50
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  3. 6
      packages/nc-gui/components/smartsheet/header/Cell.vue
  4. 4
      packages/nc-gui/components/smartsheet/header/VirtualCell.vue

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

@ -166,10 +166,10 @@ watch(commentsWrapperEl, () => {
<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 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" />
<div class="flex-1 flex flex-col gap-1 max-w-[calc(100%_-_24px)]">
<GeneralUserIcon size="medium" :name="log.display_name" :email="log.user" class="mt-0.7" />
<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="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">
<NcTooltip class="truncate max-w-42 mr-2" show-on-truncate-only>
<template #title>
@ -389,7 +389,7 @@ watch(commentsWrapperEl, () => {
.ant-tabs-nav {
@apply px-3;
.ant-tabs-nav-list {
@apply w-[calc(100%_-_24px)] gap-6;
@apply w-full gap-6;
.ant-tabs-tab {
@apply flex-1 flex items-center justify-center pt-3 pb-2.5;

50
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -562,7 +562,7 @@ export default {
<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"
>
<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">
<NcTooltip v-if="props.showNextPrevIcons">
<template #title> {{ renderAltOrOptlKey() }} + </template>
@ -601,9 +601,9 @@ 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">
<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>
{{ meta.title }}
</template>
@ -627,6 +627,21 @@ export default {
</div>
</div>
<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
v-if="!isNew && rowId && !isMobileMode"
:disabled="isLoading"
@ -645,21 +660,6 @@ export default {
{{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }}
</div>
</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">
<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'" />
@ -730,7 +730,7 @@ export default {
>
<div
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
v-for="(col, i) of fields"
@ -1024,14 +1024,18 @@ export default {
}
.nc-data-cell {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
&:hover,
@apply !rounded-lg;
transition: all 0.3s;
&:hover {
@apply !border-1 !border-brand-400;
}
&: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 {
@apply !border-1 !border-brand-500 !rounded-lg;
@apply !border-1 !border-brand-500;
}
:deep(.nc-system-field input) {

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

@ -99,7 +99,7 @@ const onClick = (e: Event) => {
:class="{
'h-full': column,
'!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'),
'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false,
}"
@ -138,7 +138,7 @@ const onClick = (e: Event) => {
<NcTooltip
v-if="column"
:class="{
'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu,
'cursor-pointer': !isForm && isUIAllowed('fieldEdit') && !hideMenu,
'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
'truncate': !isForm,
}"
@ -164,7 +164,7 @@ const onClick = (e: Event) => {
<GeneralIcon
v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
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="{
visible: editColumnDropdown || isDropDownOpen,
invisible: !(editColumnDropdown || isDropDownOpen),

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

@ -179,7 +179,7 @@ const onClick = (e: Event) => {
<div
class="flex items-center w-full h-full text-small text-gray-500 font-weight-medium group"
: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,
'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'),
}"
@ -220,7 +220,7 @@ const onClick = (e: Event) => {
<GeneralIcon
v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
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="{
visible: editColumnDropdown || isDropDownOpen,
invisible: !(editColumnDropdown || isDropDownOpen),

Loading…
Cancel
Save