From 6fe0ff3c3de32200bf7b0bf0261b74c5f4f66746 Mon Sep 17 00:00:00 2001 From: Raunak Singh Jolly Date: Sun, 23 Jun 2024 17:42:37 +0530 Subject: [PATCH 1/4] Remove Right-Edge Gap in Table Cell Display --- .../components/RecordTableCellDisplayContainer.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css index d2184fcda0ba..f3dc7b78e06e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css @@ -6,6 +6,7 @@ padding-left: 8px; padding-right: 4px; width: 100%; + padding-right: 0px; } .cell-display-outer-container-soft-focus { From de3d8477ed21a69379402d673dc06d5d76f35519 Mon Sep 17 00:00:00 2001 From: Raunak Singh Jolly Date: Sun, 23 Jun 2024 17:49:31 +0530 Subject: [PATCH 2/4] removed redundant padding --- .../components/RecordTableCellDisplayContainer.module.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css index f3dc7b78e06e..f01b6bcff1ca 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css @@ -4,9 +4,7 @@ height: 100%; overflow: hidden; padding-left: 8px; - padding-right: 4px; width: 100%; - padding-right: 0px; } .cell-display-outer-container-soft-focus { From 264a11e9498925465fcb31a99617573c18aeef47 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 24 Jun 2024 11:57:53 +0200 Subject: [PATCH 3/4] Fixed soft focus + padding on td + incorrect cell total height --- .../object-record/record-table/components/RecordTable.tsx | 2 ++ .../components/RecordTableCellContainer.module.css | 2 +- .../components/RecordTableCellDisplayContainer.module.css | 6 ++---- .../components/RecordTableCellDisplayContainer.tsx | 2 +- .../components/RecordTableCellDisplayMode.tsx | 5 +++-- .../components/RecordTableCellSoftFocusMode.tsx | 1 + .../data-model/constants/SettingsFieldCurrencyCodes.ts | 2 +- 7 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index 2afb86e9875c..84a8e13cbdb3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -53,6 +53,8 @@ const StyledTable = styled.table<{ color: ${({ theme }) => theme.font.color.primary}; border-right: 1px solid ${({ theme }) => theme.border.color.light}; + padding: 0; + text-align: left; :last-child { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css index eef506c67a98..ed8e3802356b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css @@ -27,6 +27,6 @@ .cell-base-container-soft-focus { background: var(--twentycrm-background-transparent-secondary); border-radius: var(--twentycrm-border-radius-sm); - outline: 1px solid var(--twentycrm-font-color-extra-light); + border: 1px solid var(--twentycrm-font-color-extra-light); } diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css index f01b6bcff1ca..ee10c7e9f2ce 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css @@ -7,10 +7,8 @@ width: 100%; } -.cell-display-outer-container-soft-focus { - background: var(--twentycrm-background-transparent-secondary); - border-radius: var(--twentycrm-border-radius-sm); - outline: 1px solid var(--twentycrm-font-color-extra-light); +.cell-display-with-soft-focus { + margin: -1px; } .cell-display-inner-container { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx index f2db2901da0e..e47277cc1d50 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx @@ -23,7 +23,7 @@ export const RecordTableCellDisplayContainer = ({ onClick={onClick} className={clsx({ [styles.cellDisplayOuterContainer]: true, - [styles.cellDisplayOuterContainerSoftFocus]: softFocus, + [styles.cellDisplayWithSoftFocus]: softFocus, })} ref={scrollRef} > diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx index 566be79baf32..f562348e7974 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx @@ -4,7 +4,8 @@ import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContain export const RecordTableCellDisplayMode = ({ children, -}: React.PropsWithChildren) => { + softFocus, +}: React.PropsWithChildren<{ softFocus?: boolean }>) => { const isEmpty = useIsFieldEmpty(); if (isEmpty) { @@ -12,7 +13,7 @@ export const RecordTableCellDisplayMode = ({ } return ( - + {children} ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx index e7f3a03599e3..6dd6387a15af 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx @@ -159,6 +159,7 @@ export const RecordTableCellSoftFocusMode = ({ {editModeContentOnly ? editModeContent : nonEditModeContent} diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts index 6f302e6ea90e..ef2ea0b15826 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts @@ -88,5 +88,5 @@ export const SETTINGS_FIELD_CURRENCY_CODES: Record< BRL: { label: 'Brazilian real', Icon: IconCurrencyReal, - } + }, }; From 4929c9a2085a6c690e6100a6794732350f055598 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 24 Jun 2024 12:02:47 +0200 Subject: [PATCH 4/4] Fixed padding-left --- .../components/RecordTableCellDisplayContainer.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css index ee10c7e9f2ce..381efe436ff1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css @@ -3,7 +3,7 @@ display: flex; height: 100%; overflow: hidden; - padding-left: 8px; + padding-left: 6px; width: 100%; }