diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx index 7561e8e0..4627994c 100644 --- 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 index e078213c..ee8e9cad 100644 --- 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 }