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 new file mode 100644 index 0000000000..ebc03a01ca --- /dev/null +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.module.css @@ -0,0 +1,16 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +.container { + outline: 0; + display: flex; + flex-direction: column; + flex: 1; + overflow: auto; + user-select: none; + -webkit-user-select: none; +} diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx index 52f0ab8080..20f916b1f0 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx @@ -30,12 +30,12 @@ import '@cloudbeaver/plugin-react-data-grid/react-data-grid-dist/lib/styles.css' import { CellPosition, EditingContext } from '../Editing/EditingContext'; import { useEditing } from '../Editing/useEditing'; -import '../styles/base.scss'; import { reactGridStyles } from '../styles/styles'; import { CellRenderer } from './CellRenderer/CellRenderer'; import { DataGridContext, IColumnResizeInfo, IDataGridContext } from './DataGridContext'; import { DataGridSelectionContext } from './DataGridSelection/DataGridSelectionContext'; import { useGridSelectionContext } from './DataGridSelection/useGridSelectionContext'; +import classes from './DataGridTable.module.css'; import { CellFormatter } from './Formatters/CellFormatter'; import { TableDataContext } from './TableDataContext'; import { useGridDragging } from './useGridDragging'; @@ -435,7 +435,7 @@ export const DataGridTable = observer
(function Menu({ value, node }) { return (
-
+
{value}
{!menuEmpty && ( @@ -90,8 +90,8 @@ export const CellFormatter = observer>(function CellFo const value = property ? getValue(property.value) : ''; return ( -
- {columnIdx === 0 && !!node ? : {value}} +
+ {columnIdx === 0 && !!node ? : {value}}
); }); diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnIcon/IconFormatter.module.css b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnIcon/IconFormatter.module.css index caa97fffbf..bcac010b7f 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnIcon/IconFormatter.module.css +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnIcon/IconFormatter.module.css @@ -8,6 +8,7 @@ .icon { width: 100%; + height: 100%; display: flex; align-items: center; justify-content: center; diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnSelect/SelectorFormatter.module.css b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnSelect/SelectorFormatter.module.css index e3b05238e4..f1a509700e 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnSelect/SelectorFormatter.module.css +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnSelect/SelectorFormatter.module.css @@ -9,9 +9,11 @@ .container { display: flex; width: 100%; + height: 100%; align-items: center; justify-content: center; } + .checkbox { margin-left: -10px; margin-right: -10px; diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.module.css b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.module.css new file mode 100644 index 0000000000..8594dda3cf --- /dev/null +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.module.css @@ -0,0 +1,10 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +.header { + text-transform: uppercase; +} diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.tsx index fbda552e89..e26dd2dceb 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.tsx @@ -11,11 +11,16 @@ import { useContext } from 'react'; import type { DBObject } from '@cloudbeaver/core-navigation-tree'; import type { RenderHeaderCellProps } from '@cloudbeaver/plugin-react-data-grid'; +import classes from './HeaderRenderer.module.css'; import { TableContext } from './TableContext'; export const HeaderRenderer = observer>(function HeaderRenderer(props) { const tableContext = useContext(TableContext); const dataColumn = tableContext.tableData?.columns.find(column => column.key === props.column.key); - return
{props.column.name}
; + return ( +
+ {props.column.name} +
+ ); }); diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx index 44fe2a7a3b..15872c6163 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx @@ -24,7 +24,6 @@ import type { IDataColumn } from './Column'; import { ColumnIcon } from './Columns/ColumnIcon/ColumnIcon'; import { ColumnSelect } from './Columns/ColumnSelect/ColumnSelect'; import { HeaderRenderer } from './HeaderRenderer'; -import './styles/base.scss'; import { tableStyles } from './styles/styles'; import classes from './Table.module.css'; import { TableContext } from './TableContext'; diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/styles/base.scss b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/styles/base.scss deleted file mode 100644 index 1ed847b5b6..0000000000 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/styles/base.scss +++ /dev/null @@ -1,59 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2024 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -.metadata-grid-container { - .cb-metadata-grid-theme { - outline: 0 !important; - height: 100% !important; - background-color: inherit !important; - border: none !important; - font-family: inherit !important; - font-size: inherit !important; - - * { - font-size: inherit !important; - font-family: inherit !important; - } - - .rdg-header-row, - .rdg-row { - background-color: transparent !important; - } - - .rdg-header-row { - text-transform: uppercase !important; - } - - .rdg-cell { - border-color: transparent !important; - display: flex !important; - flex-direction: row !important; - user-select: text !important; - - &.rdg-cell-frozen { - box-shadow: none !important; - } - } - - .rdg-cell:global([aria-selected='true']) { - box-shadow: none !important; - } - - .cell-formatter { - display: flex !important; - align-items: center !important; - width: 100% !important; - } - - .cell-formatter__value { - overflow: hidden !important; - white-space: nowrap !important; - text-overflow: ellipsis !important; - } - } -} diff --git a/webapp/packages/plugin-react-data-grid/src/DataGrid.tsx b/webapp/packages/plugin-react-data-grid/src/DataGrid.tsx new file mode 100644 index 0000000000..673b387e19 --- /dev/null +++ b/webapp/packages/plugin-react-data-grid/src/DataGrid.tsx @@ -0,0 +1,15 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +import { forwardRef } from 'react'; +import ReactDataGrid from 'react-data-grid'; + +import './reset.css'; + +export const DataGrid = forwardRef(function DataGrid(props, ref) { + return ; +}) as typeof ReactDataGrid; diff --git a/webapp/packages/plugin-react-data-grid/src/DataGridLazy.ts b/webapp/packages/plugin-react-data-grid/src/DataGridLazy.ts new file mode 100644 index 0000000000..108e20e158 --- /dev/null +++ b/webapp/packages/plugin-react-data-grid/src/DataGridLazy.ts @@ -0,0 +1,10 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +import { importLazyComponent } from '@cloudbeaver/core-blocks'; + +export const DataGrid = importLazyComponent(() => import('./DataGrid').then(m => m.DataGrid)); diff --git a/webapp/packages/plugin-react-data-grid/src/index.ts b/webapp/packages/plugin-react-data-grid/src/index.ts index 980f3a5a40..688601187c 100644 --- a/webapp/packages/plugin-react-data-grid/src/index.ts +++ b/webapp/packages/plugin-react-data-grid/src/index.ts @@ -5,7 +5,7 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ -import DataGrid from 'react-data-grid'; +import { DataGrid } from './DataGridLazy'; export * from 'react-data-grid'; export default DataGrid; diff --git a/webapp/packages/plugin-react-data-grid/src/reset.css b/webapp/packages/plugin-react-data-grid/src/reset.css new file mode 100644 index 0000000000..d5361acae8 --- /dev/null +++ b/webapp/packages/plugin-react-data-grid/src/reset.css @@ -0,0 +1,43 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +.react-data-grid-container { + outline: 0 !important; + height: 100% !important; + background-color: inherit !important; + border: none !important; + font-family: inherit !important; + font-size: inherit !important; + + * { + font-size: inherit !important; + font-family: inherit !important; + } + + .rdg-header-row, + .rdg-row { + background-color: transparent !important; + } + + .rdg-cell.rdg-cell-frozen { + box-shadow: none !important; + } + + .rdg-cell-editing { + overflow: visible; + height: 24px; + box-shadow: none !important; + } + + .rdg-editor-container { + position: relative; + display: flex; + width: 100%; + height: 100%; + } +}