clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-01 11:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nc-gui): canvas cell timezone issue and editable cell ui changes

Browse Source
This commit is contained in:
Ramesh Mane
2025-04-22 14:15:57 +00:00
parent d566cf7df9
commit 24db9cb4e3
10 changed files with 50 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/nc-gui/components/cell/DateTime/Editor.vue
View File

@@ -501,14 +501,13 @@ const minimizeMaxWidth = computed(() => {
>
<div
:title="localState?.format(dateTimeFormat)"
class="nc-date-picker ant-picker-input flex items-center relative gap-2 !truncate"
class="nc-date-picker ant-picker-input flex items-center relative gap-2 !truncate !w-auto"
:class="{
'max-w-[calc(100%_-_70px)] flex-none': minimizeMaxWidth,
'flex-1': !minimizeMaxWidth,
'max-w-[calc(100%_-_70px)]': minimizeMaxWidth,
}"
>
<div
class="nc-flex-1 rounded-md box-border nc-truncate"
class="flex rounded-md box-border w-[60%] max-w-[110px]"
:class="{
'py-0': isForm,
'py-0.5': !isForm && !isColDisabled,
@@ -521,7 +520,7 @@ const minimizeMaxWidth = computed(() => {
ref="datePickerRef"
:value="localState?.format(dateFormat) ?? ''"
:placeholder="typeof placeholder === 'string' ? placeholder : placeholder?.date"
class="nc-date-input nc-flex-1 w-full min-w-0 !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
class="nc-date-input w-full !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
:readonly="isColDisabled"
@focus="onFocus(true)"
@blur="onBlur($event, true)"
@@ -536,8 +535,9 @@ const minimizeMaxWidth = computed(() => {
</template>
</div>
<div
class="nc-flex-1 rounded-md box-border nc-truncate"
class="rounded-md box-border"
:class="[
`${timeCellMaxWidth}`,
{
'py-0': isForm,
'py-0.5': !isForm && !isColDisabled,
@@ -551,7 +551,7 @@ const minimizeMaxWidth = computed(() => {
ref="timePickerRef"
:value="cellValue"
:placeholder="typeof placeholder === 'string' ? placeholder : placeholder?.time"
class="nc-time-input nc-flex-1 w-full min-w-0 !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
class="nc-time-input w-full !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
:readonly="isColDisabled"
@focus="onFocus(false)"
@blur="onBlur($event, false)"
@@ -606,7 +606,7 @@ const minimizeMaxWidth = computed(() => {
<div
v-if="timeZoneDisplay"
class="nc-timezone-field text-nc-content-gray-muted whitespace-nowrap text-tiny transition-all duration-300 text-right"
class="nc-timezone-field text-nc-content-gray-muted whitespace-nowrap text-tiny transition-all duration-300 text-right flex-1"
:class="{
'nc-flex-1': minimizeMaxWidth,
}"

18
packages/nc-gui/components/cell/DateTime/Readonly.vue
View File

@@ -82,12 +82,20 @@ const timeCellMaxWidth = computed(() => {
:title="localState?.format(dateTimeFormat)"
class="nc-date-picker w-full flex items-center nc-cell-field relative gap-2 nc-cell-picker-datetime tracking-tight"
>
<div class="nc-flex-1 px-1 nc-truncate">
{{ localState?.format(dateFormat) ?? '' }}
</div>
<div class="flex-1 flex items-center gap-2 truncate">
<div
class="px-1 nc-truncate"
:class="{
'w-[fit-content]': isUnderLookup,
'w-[60%] !max-w-[110px]': !isUnderLookup,
}"
>
{{ localState?.format(dateFormat) ?? '' }}
</div>
<div class="nc-flex-1 px-1 nc-truncate">
{{ cellValue }}
<div :class="timeCellMaxWidth" class="px-1 nc-truncate">
{{ cellValue }}
</div>
</div>
<div v-if="timeZoneDisplay" class="text-nc-content-gray-muted whitespace-nowrap text-tiny">
{{ timeZoneDisplay }}

16
packages/nc-gui/components/cell/DateTime/index.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import dayjs from 'dayjs'
import { dateFormats, isSystemColumn, timeFormats } from 'nocodb-sdk'
import { getTimeZones } from '@vvo/tzdb'
import { timeFormatsObj } from './utils'
interface Props {
@@ -487,14 +486,13 @@ const minimizeMaxWidth = computed(() => {
>
<div
:title="localState?.format(dateTimeFormat)"
class="nc-date-picker ant-picker-input flex items-center relative gap-2"
class="nc-date-picker ant-picker-input flex items-center relative gap-2 !truncate !w-auto"
:class="{
'max-w-[calc(100%_-_70px)] flex-none': minimizeMaxWidth,
'flex-1': !minimizeMaxWidth,
'max-w-[calc(100%_-_70px)]': minimizeMaxWidth,
}"
>
<div
class="nc-flex-1 rounded-md box-border nc-truncate"
class="flex rounded-md box-border w-[60%] max-w-[110px]"
:class="{
'py-0': isForm,
'py-0.5': !isForm && !isColDisabled,
@@ -507,7 +505,7 @@ const minimizeMaxWidth = computed(() => {
ref="datePickerRef"
:value="localState?.format(dateFormat) ?? ''"
:placeholder="typeof placeholder === 'string' ? placeholder : placeholder?.date"
class="nc-date-input w-full min-w-0 !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
class="nc-date-input w-full !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
:readonly="isColDisabled"
@focus="onFocus(true)"
@blur="onBlur($event, true)"
@@ -522,7 +520,7 @@ const minimizeMaxWidth = computed(() => {
</template>
</div>
<div
class="nc-flex-1 rounded-md box-border nc-truncate"
class="rounded-md box-border nc-truncate"
:class="[
`${timeCellMaxWidth}`,
{
@@ -538,7 +536,7 @@ const minimizeMaxWidth = computed(() => {
ref="timePickerRef"
:value="cellValue"
:placeholder="typeof placeholder === 'string' ? placeholder : placeholder?.time"
class="nc-time-input w-full min-w-0 !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
class="nc-time-input w-full !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
:readonly="isColDisabled"
@focus="onFocus(false)"
@blur="onBlur($event, false)"
@@ -591,7 +589,7 @@ const minimizeMaxWidth = computed(() => {
<div
v-if="timeZoneDisplay"
class="nc-timezone-field text-nc-content-gray-muted whitespace-nowrap text-tiny transition-all duration-300 text-right"
class="nc-timezone-field text-nc-content-gray-muted whitespace-nowrap text-tiny transition-all duration-300 text-right flex-1"
:class="{
'nc-flex-1': minimizeMaxWidth,
}"