feat: Add styles for borders, add single click edit (#411)

linz · Sep 1, 2023 · 024dad1 · 024dad1
1 parent 82b5a33
commit 024dad1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
@@ -96,6 +96,11 @@ export interface GridProps {
    * Whether to select row on context menu.
    */
   contextMenuSelectRow?: boolean;
+
+  /**
+   * Defaults to false.
+   */
+  singleClickEdit?: boolean;
 }
 
 /**
@@ -109,6 +114,7 @@ export const Grid = ({
   sizeColumns = "auto",
   selectColumnPinned = null,
   contextMenuSelectRow = false,
+  singleClickEdit = false,
   rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined,
   ...params
 }: GridProps): ReactElement => {
@@ -469,11 +475,11 @@ export const Grid = ({
    */
   const onCellClicked = useCallback(
     (event: CellEvent) => {
-      if (event.colDef?.cellRendererParams?.singleClickEdit) {
+      if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
         startCellEditing(event);
       }
     },
-    [startCellEditing],
+    [singleClickEdit, startCellEditing],
   );
 
   /**

diff --git a/src/styles/GridTheme.scss b/src/styles/GridTheme.scss
@@ -10,18 +10,21 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     themes: (
       'step-compact.theme-specific': (
         extend-theme: alpine,
-        --ag-row-height: 36px,
-        --ag-header-height: 36px,
-        --ag-font-size: calc($grid-base-font-size - 2px),
+        row-height: 36px,
+        header-height: 36px,
+        font-size: calc($grid-base-font-size - 2px),
       ),
       'step-default.theme-specific': (
         extend-theme: alpine,
-        --ag-row-height: 40px,
-        --ag-header-height: 40px,
-        --ag-font-size: calc($grid-base-font-size),
+        row-height: 40px,
+        header-height: 40px,
+        font-size: calc($grid-base-font-size),
       ),
     ),
 
+    input-focus-border-color: lui.$sea,
+    borders-input: 1px solid,
+    input-border-color: lui.$silver,
     alpine-active-color: lui.$sea,
     background-color: lui.$white,
     border-color: lui.$dew,
@@ -49,6 +52,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
+  .ag-text-area-input:focus {
+    border-color: lui.$sea;
+  }
+
   .ag-cell[col-id="selection"] {
     display: flex; // Fix that when you click below checkbox it doesn't process a click
   }