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

Nc fix/UI misc changes (#9354) 

* fix(nc-gui): barcode & rollup cell icon stroke issue

* fix(nc-gui): update single select icon

* fix(nc-gui): update `id:` => `FIELD ID:`

* fix(nc-gui): description icon alignment

* fix(nc-gui): field copy id hover effect

* fix(nc-gui): update mfe test case

* fix(nc-gui): update duration icon

* fix(nc-gui): udpate year icon
pull/9299/head
Ramesh Mane 3 months ago committed by GitHub
parent
162a726efd
commit
fea18145c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 75 additions and 54 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. 12
      packages/nc-gui/assets/nc-icons/cell-duration.svg
  2. 6
      packages/nc-gui/assets/nc-icons/cell-select.svg
  3. 7
      packages/nc-gui/assets/nc-icons/cell-year.svg
  4. 32
      packages/nc-gui/components/smartsheet/details/Fields.vue
  5. 4
      packages/nc-gui/components/smartsheet/header/Cell.vue
  6. 2
      packages/nc-gui/components/smartsheet/header/CellIcon.ts
  7. 29
      packages/nc-gui/components/smartsheet/header/Menu.vue
  8. 2
      packages/nc-gui/lang/en.json
  9. 2
      packages/nc-gui/utils/columnUtils.ts
  10. 6
      packages/nc-gui/utils/iconUtils.ts
  11. 3
      tests/playwright/pages/Dashboard/Details/FieldsPage.ts

12
packages/nc-gui/assets/nc-icons/cell-duration.svg
Unescape View File

@ -1,7 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.9503 20C15.8163 20 18.9503 16.866 18.9503 13C18.9503 9.13401 15.8163 6 11.9503 6C8.08432 6 4.95032 9.13401 4.95032 13C4.95032 16.866 8.08432 20 11.9503 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 21C16.1421 21 19.5 17.6421 19.5 13.5C19.5 9.35786 16.1421 6 12 6C7.85786 6 4.5 9.35786 4.5 13.5C4.5 17.6421 7.85786 21 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.9503 10V13L13.4503 14.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.9503 10V13.5L13.4503 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 3L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 3L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.2929 7.12129C19.6834 6.73077 19.6834 6.0976 19.2929 5.70708C18.9024 5.31655 18.2692 5.31655 17.8787 5.70708L19.2929 7.12129ZM17.8787 5.70708L15.8787 7.70708L17.2929 9.12129L19.2929 7.12129L17.8787 5.70708Z" fill="currentColor"/> <path d="M19.2929 7.12129C19.6834 6.73077 19.6834 6.0976 19.2929 5.70708C18.9024 5.31655 18.2692 5.31655 17.8787 5.70708L19.2929 7.12129ZM17.8787 5.70708L15.8787 7.70708L17.2929 9.12129L19.2929 7.12129L17.8787 5.70708Z" fill="currentColor"/>
<path d="M13.5 3H10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 3H10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 949 B

After

Width:  |  Height:  |  Size: 928 B

6
packages/nc-gui/assets/nc-icons/cell-select.svg
Unescape View File

@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="3" y="3" width="18" height="18" rx="9" stroke="currentColor" stroke-width="2"/> <rect x="3" y="3" width="18" height="18" rx="9" stroke="currentColor" stroke-width="2"/>
<rect x="7" y="7" width="10" height="10" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2"/> <path d="M7.5 10.5L12 15L16.5 10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 301 B

After

Width:  |  Height:  |  Size: 320 B

7
packages/nc-gui/assets/nc-icons/cell-year.svg
Unescape View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 12.75L12 15.75M12 15.75V18.75M12 15.75L15 12.75" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 774 B

32
packages/nc-gui/components/smartsheet/details/Fields.vue
Unescape View File

@ -1203,15 +1203,19 @@ watch(
<template #title>{{ $t('msg.clickToCopyFieldId') }}</template> <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
<div <div
class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer" class="flex flex-row gap-2 w-[calc(100%_-_12px)] p-2 mx-1.5 rounded-md justify-between items-center group hover:bg-gray-100 cursor-pointer"
data-testid="nc-field-item-action-copy-id" data-testid="nc-field-item-action-copy-id"
@click="onClickCopyFieldUrl(field)" @click="onClickCopyFieldUrl(field)"
> >
<div class="flex flex-row items-baseline gap-x-1 font-bold text-xs"> <div
<div class="text-gray-600">{{ $t('labels.idColon') }}</div> class="flex flex-row text-gray-500 text-xs items-baseline gap-x-1 font-bold"
<div class="flex flex-row text-gray-600 text-xs" data-testid="nc-field-item-id"> data-testid="nc-field-item-id"
{{ field.id }} >
</div> {{
$t('labels.idColon', {
fieldId: field.id,
})
}}
</div> </div>
<NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100"> <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
<GeneralIcon v-if="isFieldIdCopied" icon="check" /> <GeneralIcon v-if="isFieldIdCopied" icon="check" />
@ -1384,15 +1388,19 @@ watch(
<template #title>{{ $t('msg.clickToCopyFieldId') }}</template> <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
<div <div
class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer" class="flex flex-row gap-2 w-[calc(100%_-_12px)] p-2 mx-1.5 rounded-md justify-between items-center group hover:bg-gray-100 cursor-pointer"
data-testid="nc-field-item-action-copy-id" data-testid="nc-field-item-action-copy-id"
@click="onClickCopyFieldUrl(displayColumn)" @click="onClickCopyFieldUrl(displayColumn)"
> >
<div class="flex flex-row items-baseline gap-x-1 font-bold text-xs"> <div
<div class="text-gray-600">{{ $t('labels.idColon') }}</div> class="flex flex-row text-gray-500 text-xs items-baseline gap-x-1 font-bold"
<div class="flex flex-row text-gray-600 text-xs"> data-testid="nc-field-item-id"
{{ displayColumn.id }} >
</div> {{
$t('labels.idColon', {
fieldId: displayColumn.id,
})
}}
</div> </div>
<NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100"> <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
<GeneralIcon v-if="isFieldIdCopied" icon="check" /> <GeneralIcon v-if="isFieldIdCopied" icon="check" />

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

@ -192,11 +192,11 @@ const onClick = (e: Event) => {
}" }"
/> />
</div> </div>
<NcTooltip v-if="column.description?.length && hideMenu"> <NcTooltip v-if="column.description?.length && hideMenu" class="flex">
<template #title> <template #title>
{{ column.description }} {{ column.description }}
</template> </template>
<GeneralIcon icon="info" class="group-hover:opacity-100 !w-3.5 !h-3.5 !text-gray-500" /> <GeneralIcon icon="info" class="group-hover:opacity-100 !w-3.5 !h-3.5 !text-gray-500 flex-none" />
</NcTooltip> </NcTooltip>
<template v-if="!hideMenu"> <template v-if="!hideMenu">

2
packages/nc-gui/components/smartsheet/header/CellIcon.ts
Unescape View File

@ -25,7 +25,7 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
} else if (isEmail(column)) { } else if (isEmail(column)) {
return iconMap.cellEmail return iconMap.cellEmail
} else if (isYear(column, abstractType)) { } else if (isYear(column, abstractType)) {
return iconMap.cellDate return iconMap.cellYear
} else if (isTime(column, abstractType)) { } else if (isTime(column, abstractType)) {
return iconMap.cellTime return iconMap.cellTime
} else if (isRating(column)) { } else if (isRating(column)) {

29
packages/nc-gui/components/smartsheet/header/Menu.vue
Unescape View File

@ -429,11 +429,11 @@ const onClickCopyFieldUrl = async (field: ColumnType) => {
> >
<div class="flex gap-0.5 items-center" @dblclick.stop> <div class="flex gap-0.5 items-center" @dblclick.stop>
<div v-if="isExpandedForm" class="h-[1px]">&nbsp;</div> <div v-if="isExpandedForm" class="h-[1px]">&nbsp;</div>
<NcTooltip v-if="column.description?.length && !isExpandedForm"> <NcTooltip v-if="column.description?.length && !isExpandedForm" class="flex">
<template #title> <template #title>
{{ column.description }} {{ column.description }}
</template> </template>
<GeneralIcon icon="info" class="group-hover:opacity-100 !w-3.5 !h-3.5 !text-gray-500" /> <GeneralIcon icon="info" class="group-hover:opacity-100 !w-3.5 !h-3.5 !text-gray-500 flex-none" />
</NcTooltip> </NcTooltip>
<NcTooltip class="flex items-center"> <NcTooltip class="flex items-center">
@ -460,7 +460,6 @@ const onClickCopyFieldUrl = async (field: ColumnType) => {
'min-w-[256px]': isExpandedForm, 'min-w-[256px]': isExpandedForm,
}" }"
> >
<NcMenuItem class="!h-9.5 nc-copy-field" @click="onClickCopyFieldUrl(column)">
<NcTooltip <NcTooltip
:attrs="{ :attrs="{
class: 'w-full', class: 'w-full',
@ -470,22 +469,26 @@ const onClickCopyFieldUrl = async (field: ColumnType) => {
<template #title>{{ $t('msg.clickToCopyFieldId') }}</template> <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
<div <div
class="flex flex-row justify-between items-center w-full group hover:bg-gray-100 cursor-pointer" class="nc-copy-field flex flex-row justify-between items-center w-[calc(100%_-_12px)] p-2 mx-1.5 rounded-md hover:bg-gray-100 cursor-pointer group"
data-testid="nc-field-item-action-copy-id" data-testid="nc-field-item-action-copy-id"
@click.stop="onClickCopyFieldUrl(column)"
> >
<div class="flex flex-row text-gray-500 text-xs items-baseline gap-x-1 font-bold text-xs"> <div class="w-full flex flex-row justify-between items-center gap-x-2 font-bold text-xs">
<div class="whitespace-nowrap">{{ $t('labels.idColon') }}</div> <div class="flex flex-row text-gray-500 text-xs items-baseline gap-x-1 font-bold">
<div class="flex flex-row truncate"> {{
{{ column.id }} $t('labels.idColon', {
</div> fieldId: column.id,
})
}}
</div> </div>
<NcButton size="xsmall" type="text" class="!group-hover:bg-gray-100"> <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
<GeneralIcon v-if="isFieldIdCopied" icon="check" /> <GeneralIcon v-if="isFieldIdCopied" icon="check" class="h-4 w-4" />
<GeneralIcon v-else icon="copy" /> <GeneralIcon v-else icon="copy" class="h-4 w-4" />
</NcButton> </NcButton>
</div> </div>
</div>
</NcTooltip> </NcTooltip>
</NcMenuItem>
<a-divider class="!my-0" /> <a-divider class="!my-0" />
<GeneralSourceRestrictionTooltip message="Field properties cannot be edited." :enabled="!isColumnEditAllowed"> <GeneralSourceRestrictionTooltip message="Field properties cannot be edited." :enabled="!isColumnEditAllowed">
<NcMenuItem <NcMenuItem

2
packages/nc-gui/lang/en.json
Unescape View File

@ -758,7 +758,7 @@
"icon": "Icon", "icon": "Icon",
"max": "Max", "max": "Max",
"enableRichText": "Enable rich text", "enableRichText": "Enable rich text",
"idColon": "Id:", "idColon": "FIELD ID: {fieldId}",
"copiedRecordURL": "Copied Record URL", "copiedRecordURL": "Copied Record URL",
"copyRecordURL": "Copy Record URL", "copyRecordURL": "Copy Record URL",
"duplicateRecord": "Duplicate record", "duplicateRecord": "Duplicate record",

2
packages/nc-gui/utils/columnUtils.ts
Unescape View File

@ -56,7 +56,7 @@ const uiTypes = [
}, },
{ {
name: UITypes.Year, name: UITypes.Year,
icon: iconMap.cellDate, icon: iconMap.cellYear,
}, },
{ {
name: UITypes.Time, name: UITypes.Time,

6
packages/nc-gui/utils/iconUtils.ts
Unescape View File

@ -156,6 +156,7 @@ import NcWorkspace from '~icons/nc-icons/workspace'
import NcCellBarcode from '~icons/nc-icons/cell-barcode' import NcCellBarcode from '~icons/nc-icons/cell-barcode'
import NcCellCheckbox from '~icons/nc-icons/cell-checkbox' import NcCellCheckbox from '~icons/nc-icons/cell-checkbox'
import NcCellDate from '~icons/nc-icons/cell-date' import NcCellDate from '~icons/nc-icons/cell-date'
import NcCellYear from '~icons/nc-icons/cell-year'
import NcCellEmail from '~icons/nc-icons/cell-email' import NcCellEmail from '~icons/nc-icons/cell-email'
import NcCellFormula from '~icons/nc-icons/cell-formula' import NcCellFormula from '~icons/nc-icons/cell-formula'
import NcCellCurrency from '~icons/nc-icons/cell-currency' import NcCellCurrency from '~icons/nc-icons/cell-currency'
@ -718,9 +719,10 @@ export const iconMap = {
controlPanel: NcControlPanel, controlPanel: NcControlPanel,
home: NcHome, home: NcHome,
home1: NcHome1, home1: NcHome1,
cellBarcode: NcCellBarcode, cellBarcode: h(NcCellBarcode, { stroke: 'transparent' }),
cellCheckbox: NcCellCheckbox, cellCheckbox: NcCellCheckbox,
cellDate: NcCellDate, cellDate: NcCellDate,
cellYear: NcCellYear,
cellEmail: NcCellEmail, cellEmail: NcCellEmail,
cellFormula: NcCellFormula, cellFormula: NcCellFormula,
cellCurrency: NcCellCurrency, cellCurrency: NcCellCurrency,
@ -739,7 +741,7 @@ export const iconMap = {
cellPhone: NcCellPhone, cellPhone: NcCellPhone,
cellQrCode: NcCellQrCode, cellQrCode: NcCellQrCode,
cellRating: NcCellRating, cellRating: NcCellRating,
cellRollup: NcCellRollup, cellRollup: h(NcCellRollup, { stroke: 'transparent' }),
cellSingleSelect: NcCellSingleSelect, cellSingleSelect: NcCellSingleSelect,
cellText: NcCellText, cellText: NcCellText,
cellTime: NcCellTime, cellTime: NcCellTime,

3
tests/playwright/pages/Dashboard/Details/FieldsPage.ts
Unescape View File

@ -356,6 +356,7 @@ export class FieldsPage extends BasePage {
const fieldId = await fieldActionDropdown.getByTestId('nc-field-item-id').textContent(); const fieldId = await fieldActionDropdown.getByTestId('nc-field-item-id').textContent();
await field.getByTestId('nc-field-item-action-button').click(); await field.getByTestId('nc-field-item-action-button').click();
await fieldActionDropdown.waitFor({ state: 'hidden' }); await fieldActionDropdown.waitFor({ state: 'hidden' });
return fieldId;
return fieldId.split(':')[1]?.trim() || '';
} }
} }

Write Preview
Loading…
Cancel
Save