CB-5052 [2562 FR] Highlight the row where any field is currently sele…

…cted (#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 <[email protected]> Co-authored-by: Daria Marutkina <[email protected]>
dbeaver · Oct 8, 2024 · 2a1adc1 · 2a1adc1
1 parent c46e934
commit 2a1adc1
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 3 deletions.
diff --git 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
@@ -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
@@ -52,6 +52,13 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
       get isSelected(): boolean {
         return selectionContext.isSelected(this.position.rowIdx, this.position.idx) || false;
       },
+      get hasFocusedElementInRow(): boolean {
+        const focusedElement = this.focusedElementPosition;
+        return focusedElement?.rowIdx === this.position.rowIdx;
+      },
+      get focusedElementPosition() {
+        return selectionContext.getFocusedElementPosition();
+      },
       get isFocused(): boolean {
         return this.isEditing ? false : this.isCellSelected;
       },
@@ -70,6 +77,8 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
       isCellSelected: observable.ref,
       position: computed,
       cell: computed,
+      hasFocusedElementInRow: computed,
+      focusedElementPosition: computed,
       isEditing: computed,
       isSelected: computed,
       isFocused: computed,
@@ -78,8 +87,13 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
     { row, column, rowIdx, isCellSelected },
   );
 
+  const isDatabaseActionApplied = getComputed(() =>
+    [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/...es/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/DataGridSelectionContext.ts b/...es/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/...es/plugin-data-spreadsheet-new/src/DataGrid/DataGridSelection/useGridSelectionContext.tsx b/...es/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<IDataGridSelectionContext>(
     () => ({
       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
@@ -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;