diff --git a/webapp/packages/core-app/src/AppScreen/Main.m.css b/webapp/packages/core-app/src/AppScreen/Main.m.css index 71e87782a0..c7d199df2c 100644 --- a/webapp/packages/core-app/src/AppScreen/Main.m.css +++ b/webapp/packages/core-app/src/AppScreen/Main.m.css @@ -1,5 +1,5 @@ .space { - composes: theme-typography--body2 theme-background-primary from global; + composes: theme-background-surface theme-text-on-surface from global; display: flex; flex-direction: row; flex: 1; diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx index 49247e8837..1fa9c02dbe 100644 --- a/webapp/packages/core-app/src/AppScreen/Main.tsx +++ b/webapp/packages/core-app/src/AppScreen/Main.tsx @@ -28,12 +28,7 @@ export const Main = observer(function Main() { return (
- + diff --git a/webapp/packages/core-blocks/package.json b/webapp/packages/core-blocks/package.json index 19d23a66db..21b5999970 100644 --- a/webapp/packages/core-blocks/package.json +++ b/webapp/packages/core-blocks/package.json @@ -29,7 +29,7 @@ "@cloudbeaver/core-sdk": "~0.1.0", "@cloudbeaver/core-theming": "~0.1.0", "@cloudbeaver/core-utils": "~0.1.0", - "go-split": "^3.4.1", + "go-split": "^3.4.7", "mobx": "^6.12.0", "mobx-react-lite": "^4.0.5", "react": "^18.2.0", diff --git a/webapp/packages/core-blocks/src/Split/Pane.tsx b/webapp/packages/core-blocks/src/Split/Pane.tsx index 00a2842a64..69372ab6cf 100644 --- a/webapp/packages/core-blocks/src/Split/Pane.tsx +++ b/webapp/packages/core-blocks/src/Split/Pane.tsx @@ -11,9 +11,16 @@ import { observer } from 'mobx-react-lite'; import { s } from '../s'; import { useS } from '../useS'; import style from './Pane.m.css'; +import { useSplit } from './useSplit'; -export const Pane = observer(function Pane({ className, ...rest }) { +export const Pane = observer(function Pane({ className, children, ...rest }) { const styles = useS(style); + const split = useSplit(); + const shouldHideContent = (rest.main && split.state.mode === 'minimize') || (!rest.main && split.state.mode === 'maximize'); - return ; + return ( + + {shouldHideContent ? null : children} + + ); }); diff --git a/webapp/packages/core-blocks/src/Split/Split.tsx b/webapp/packages/core-blocks/src/Split/Split.tsx index 2f1192fff6..0a501bc921 100644 --- a/webapp/packages/core-blocks/src/Split/Split.tsx +++ b/webapp/packages/core-blocks/src/Split/Split.tsx @@ -12,13 +12,24 @@ import { s } from '../s'; import { useS } from '../useS'; import style from './Split.m.css'; -export type ISplitProps = SplitProps; +export type ISplitProps = SplitProps & { + disableAutoMargin?: boolean; +}; -export const Split = observer(function Split({ className, split, ...rest }) { +const AUTO_MARGIN = 22; + +export const Split = observer(function Split({ className, minSize, maxSize, split, disableAutoMargin = false, ...rest }) { const styles = useS(style); const vertical = split === 'vertical' || split === undefined; const horizontal = split === 'horizontal'; - return ; + if (!disableAutoMargin) { + minSize = AUTO_MARGIN; + maxSize = -AUTO_MARGIN; + } + + return ( + + ); }); diff --git a/webapp/packages/core-blocks/src/Split/SplitControls.m.css b/webapp/packages/core-blocks/src/Split/SplitControls.m.css index 2f2c587725..091c45edc1 100644 --- a/webapp/packages/core-blocks/src/Split/SplitControls.m.css +++ b/webapp/packages/core-blocks/src/Split/SplitControls.m.css @@ -15,7 +15,7 @@ .button { composes: theme-button theme-button_unelevated theme-button_background theme-elevation-z3 from global; - opacity: 0; + opacity: 1; transition-property: opacity, box-shadow !important; transition: opacity 0.3s ease-in-out; } @@ -24,10 +24,14 @@ composes: theme-button_ripple from global; } -.container:hover .button { +.container:hover .resizeButton { opacity: 1; } +.resizeButton { + opacity: 0; +} + .container[data-s-split='vertical'] { flex-direction: column; cursor: ew-resize; diff --git a/webapp/packages/core-blocks/src/Split/SplitControls.tsx b/webapp/packages/core-blocks/src/Split/SplitControls.tsx index a993eb2790..62b198070f 100644 --- a/webapp/packages/core-blocks/src/Split/SplitControls.tsx +++ b/webapp/packages/core-blocks/src/Split/SplitControls.tsx @@ -14,6 +14,7 @@ import { useSplit } from './useSplit'; export const SplitControls: React.FC = function SplitControls() { const split = useSplit(); const styles = useS(SplitControlsStyles); + const isResizeMode = split.state.mode === 'resize'; const inverse = split.state.isMainSecond(); @@ -64,12 +65,16 @@ export const SplitControls: React.FC = function SplitControls() { onDoubleClick={split.state.onDoubleClick} > {split.state.mode !== 'minimize' && ( - )} {split.state.mode !== 'maximize' && ( - )} diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx index e23a9b7508..5fbf5571ac 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx @@ -225,6 +225,7 @@ export const TableViewer = observer( mode={valuePanelDisplayed ? splitState.mode : 'minimize'} disable={!valuePanelDisplayed} keepRatio + disableAutoMargin >
diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 935d4ca138..c78d9b1d4e 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -9791,10 +9791,10 @@ globby@^8.0.1: pify "^3.0.0" slash "^1.0.0" -go-split@^3.4.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/go-split/-/go-split-3.4.1.tgz#59b3b7b625f26abc2b5b91463604459d9116e16f" - integrity sha512-icg0vlpG6XN1VIecSlNd49WgGna14kxep+RLFpQ8P7ztbOAyFZcANzQja08Yc9MiDgIC1eTJa/Od2ST7xf3Q/Q== +go-split@^3.4.7: + version "3.4.7" + resolved "https://registry.yarnpkg.com/go-split/-/go-split-3.4.7.tgz#43996dc4e054c054170995c7a2a571ac1f149dd0" + integrity sha512-R4g8zp2BEZZ0tQL0wIhz8LvRW5xaSoX8jBcfSgcTnc/D0g+vqxbEojWwv04mhvISeyKD3DhgO8ybgcNZi/Y7mw== gonzales-pe@^4.2.3, gonzales-pe@^4.3.0: version "4.3.0"