From 2a1adc13748d22c3c46c36f7d49f855b730b8003 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Tue, 8 Oct 2024 11:56:40 +0200 Subject: [PATCH] CB-5052 [2562 FR] Highlight the row where any field is currently selected (#2952) * CB-5052-2562 adds background for selected row * CB-5052-2562 fixes background for selected row * CB-5052-2562 moves style var * CB-5052 pr fixes * CB-5052 fixes color for selection * CB-5052 fixes color for selection 2 * CB-5052 adds themes and fixes actions styles for focused cursor in table * CB-5052 reverts theme for data grid. plus replaces selected row style * CB-5052 cleanup * CB-5052 cleanup * CB-5052 makes selected tab blue * CB-5052 reverts refresh button colors * CB-5052 fixes unneeded border left --------- Co-authored-by: Alexey Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com> --- .../core-blocks/src/layout/TopAppBar.module.css | 2 +- .../packages/core-ui/src/Tabs/Tab/Tab.module.css | 4 ++-- .../src/DataGrid/CellRenderer/CellRenderer.tsx | 14 ++++++++++++++ .../DataGridSelection/DataGridSelectionContext.ts | 4 ++++ .../DataGridSelection/useGridSelectionContext.tsx | 14 ++++++++++++++ .../src/DataGrid/DataGridTable.module.css | 14 ++++++++++++++ 6 files changed, 49 insertions(+), 3 deletions(-) diff --git a/webapp/packages/core-blocks/src/layout/TopAppBar.module.css b/webapp/packages/core-blocks/src/layout/TopAppBar.module.css index 02db965d10..7e50f64e68 100644 --- a/webapp/packages/core-blocks/src/layout/TopAppBar.module.css +++ b/webapp/packages/core-blocks/src/layout/TopAppBar.module.css @@ -11,7 +11,7 @@ align-items: center; height: 48px; padding: 0 8px; - background-color: #2a7cb4; + background-color: var(--theme-primary); z-index: 1; flex-shrink: 0; } diff --git a/webapp/packages/core-ui/src/Tabs/Tab/Tab.module.css b/webapp/packages/core-ui/src/Tabs/Tab/Tab.module.css index fce572857d..feb3185f49 100644 --- a/webapp/packages/core-ui/src/Tabs/Tab/Tab.module.css +++ b/webapp/packages/core-ui/src/Tabs/Tab/Tab.module.css @@ -19,12 +19,12 @@ background: initial; height: 32px; - border-top: solid 2px transparent; + border-bottom: solid 2px transparent; &:global([aria-selected='true']) { font-weight: 500; cursor: auto; - border-top-color: var(--theme-negative); + border-bottom-color: var(--theme-primary); opacity: 1; &:not(:focus-visible):before { diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx index d24c35a799..eb5537ec68 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx @@ -52,6 +52,13 @@ export const CellRenderer = observer + [DatabaseEditChangeType.add, DatabaseEditChangeType.delete, DatabaseEditChangeType.update].includes(cellContext.editionState!), + ); + const classes = getComputed(() => clsx({ + 'rdg-cell-custom-highlighted-row': cellContext.hasFocusedElementInRow && !isDatabaseActionApplied, 'rdg-cell-custom-selected': cellContext.isSelected, 'rdg-cell-custom-editing': cellContext.isEditing, 'rdg-cell-custom-added': cellContext.editionState === DatabaseEditChangeType.add, diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/DataGridSelectionContext.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/DataGridSelectionContext.ts index 9627fff27c..ea3b7ad5bd 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/DataGridSelectionContext.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/DataGridSelectionContext.ts @@ -17,6 +17,10 @@ export interface IDataGridSelectionContext { selectColumn: (colIdx: number, multiple: boolean) => void; selectTable: () => void; isSelected: (rowIdx: number, colIdx: number) => boolean; + getFocusedElementPosition: () => { + rowIdx: number; + columnIdx: number; + } | null; selectRange: (startPosition: IDraggingPosition, lastPosition: IDraggingPosition, multiple: boolean, temporary: boolean) => void; } diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/useGridSelectionContext.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/useGridSelectionContext.tsx index f18bda0753..fa1f6e2cbb 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/useGridSelectionContext.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/useGridSelectionContext.tsx @@ -238,6 +238,19 @@ export function useGridSelectionContext(tableData: ITableData, selectionAction: } } + function getFocusedElementPosition() { + const element = props.selectionAction.getFocusedElement(); + + if (!element) { + return null; + } + + const column = props.tableData.getColumnIndexFromColumnKey(element.column); + const row = props.tableData.getRowIndexFromKey(element.row); + + return { rowIdx: row, columnIdx: column }; + } + return useObjectRef( () => ({ get selectedCells() { @@ -246,6 +259,7 @@ export function useGridSelectionContext(tableData: ITableData, selectionAction: select, selectColumn, selectTable, + getFocusedElementPosition, isSelected, selectRange, }), diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.module.css b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.module.css index 10c388fdda..6a89725eed 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.module.css +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.module.css @@ -13,6 +13,8 @@ --data-grid-readonly-status-color: #e28835; --data-grid-cell-selection-background-color: rgba(150, 150, 150, 0.2); --data-grid-cell-selection-background-color-focus: rgba(0, 145, 234, 0.2); + --data-grid-index-cell-border-color: var(--theme-primary); + --data-grid-selected-row-color: var(--theme-secondary) !important; composes: theme-typography--caption from global; outline: 0; @@ -55,6 +57,18 @@ border-bottom-color: var(--theme-positive) !important; } + :global(.rdg-cell:first-child) { + border-left: 2px solid rgba(0, 0, 0, 0) !important; + } + + :global(.rdg-cell-custom-highlighted-row) { + background: var(--data-grid-selected-row-color) !important; + + &:global(.rdg-cell:first-child) { + border-left: 2px solid var(--data-grid-index-cell-border-color) !important; + } + } + :global(.rdg-cell-custom-selected) { box-shadow: none !important;