From b8fba60100fcaf3200d31c3cef2f2093226278ea Mon Sep 17 00:00:00 2001 From: naumov Date: Wed, 31 Jul 2024 20:24:14 +0200 Subject: [PATCH 1/3] CB-5437 use flex component instead of container --- .../core-blocks/src/Flex/Flex.module.css | 96 +++++++++++++++++++ webapp/packages/core-blocks/src/Flex/Flex.tsx | 80 ++++++++++++++++ webapp/packages/core-blocks/src/index.ts | 1 + .../src/ResourceManagerScripts.tsx | 6 +- 4 files changed, 180 insertions(+), 3 deletions(-) create mode 100644 webapp/packages/core-blocks/src/Flex/Flex.module.css create mode 100644 webapp/packages/core-blocks/src/Flex/Flex.tsx diff --git a/webapp/packages/core-blocks/src/Flex/Flex.module.css b/webapp/packages/core-blocks/src/Flex/Flex.module.css new file mode 100644 index 0000000000..5d6c15e7b1 --- /dev/null +++ b/webapp/packages/core-blocks/src/Flex/Flex.module.css @@ -0,0 +1,96 @@ +/* + * 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. + */ + +.flex { + display: flex; + flex: 1 1 100%; +} + +.overflow { + overflow: auto; +} + +.gapXs { + gap: 8px; +} + +.gapMd { + gap: 16px; +} + +.gapLg { + gap: 24px; +} + +.wrapWrap { + flex-wrap: wrap; +} + +.wrapNoWrap { + flex-wrap: nowrap; +} + +.wrapWrapReverse { + flex-wrap: wrap-reverse; +} + +.directionRow { + flex-direction: row; +} + +.directionColumn { + flex-direction: column; +} + +.directionRowReverse { + flex-direction: row-reverse; +} + +.directionColumnReverse { + flex-direction: column-reverse; +} + +.alignStart { + align-items: flex-start; +} + +.alignCenter { + align-items: center; +} + +.alignEnd { + align-items: flex-end; +} + +.alignStretch { + align-items: stretch; +} + +.justifyStart { + justify-content: flex-start; +} + +.justifyCenter { + justify-content: center; +} + +.justifyEnd { + justify-content: flex-end; +} + +.justifySpaceBetween { + justify-content: space-between; +} + +.justifySpaceAround { + justify-content: space-around; +} + +.justifySpaceEvenly { + justify-content: space-evenly; +} diff --git a/webapp/packages/core-blocks/src/Flex/Flex.tsx b/webapp/packages/core-blocks/src/Flex/Flex.tsx new file mode 100644 index 0000000000..4e2eb72926 --- /dev/null +++ b/webapp/packages/core-blocks/src/Flex/Flex.tsx @@ -0,0 +1,80 @@ +/* + * 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 { clsx } from '@cloudbeaver/core-utils'; + +import classes from './Flex.module.css'; + +interface Props extends React.HTMLAttributes { + overflow?: boolean; + gap?: 'xs' | 'md' | 'lg'; + wrap?: React.CSSProperties['flexWrap']; + direction?: React.CSSProperties['flexDirection']; + align?: React.CSSProperties['alignItems']; + justify?: React.CSSProperties['justifyContent']; +} + +const gapClasses: Record = { + xs: classes.gapXs, + md: classes.gapMd, + lg: classes.gapLg, +}; + +const wrapClasses: Record = { + wrap: classes.wrapWrap, + nowrap: classes.wrapNoWrap, + 'wrap-reverse': classes.wrapWrapReverse, +}; + +const directionClasses: Record = { + row: classes.directionRow, + column: classes.directionColumn, + 'row-reverse': classes.directionRowReverse, + 'column-reverse': classes.directionColumnReverse, +}; + +const alignClasses: Record = { + 'flex-start': classes.alignStart, + center: classes.alignCenter, + 'flex-end': classes.alignEnd, + stretch: classes.alignStretch, +}; + +const justifyClasses: Record = { + 'flex-start': classes.justifyStart, + center: classes.justifyCenter, + 'flex-end': classes.justifyEnd, + 'space-between': classes.justifySpaceBetween, + 'space-around': classes.justifySpaceAround, + 'space-evenly': classes.justifySpaceEvenly, +}; + +export const Flex = forwardRef(function Flex( + { overflow, gap, wrap, direction, align, justify, className, children, ...rest }, + ref, +) { + return ( +
+ {children} +
+ ); +}); diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index 8ccb413fa2..6dd8a53241 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -250,3 +250,4 @@ export * from './manifest'; export * from './importLazyComponent'; export * from './ClickableLoader'; export * from './FormControls/TagsComboboxLoader'; +export * from './Flex/Flex'; diff --git a/webapp/packages/plugin-resource-manager-scripts/src/ResourceManagerScripts.tsx b/webapp/packages/plugin-resource-manager-scripts/src/ResourceManagerScripts.tsx index 29078cd208..6e1d4c17e9 100644 --- a/webapp/packages/plugin-resource-manager-scripts/src/ResourceManagerScripts.tsx +++ b/webapp/packages/plugin-resource-manager-scripts/src/ResourceManagerScripts.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { Container, useTranslate } from '@cloudbeaver/core-blocks'; +import { Flex, useTranslate } from '@cloudbeaver/core-blocks'; import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui'; import { ResourceManagerTree } from '@cloudbeaver/plugin-navigation-tree-rm'; @@ -17,10 +17,10 @@ export const ResourceManagerScripts: TabContainerPanelComponent = observer(funct const translate = useTranslate(); return ( - + {translate('plugin_resource_manager_scripts_no_resources_placeholder')} - + ); }); From 27755994e750ee964f3f49d3dc58bdea64a53fda Mon Sep 17 00:00:00 2001 From: naumov Date: Tue, 6 Aug 2024 14:30:40 +0200 Subject: [PATCH 2/3] CB-5437 use data attributes to apply styles --- .../core-blocks/src/Flex/Flex.module.css | 130 +++++++++--------- webapp/packages/core-blocks/src/Flex/Flex.tsx | 55 ++------ 2 files changed, 75 insertions(+), 110 deletions(-) diff --git a/webapp/packages/core-blocks/src/Flex/Flex.module.css b/webapp/packages/core-blocks/src/Flex/Flex.module.css index 5d6c15e7b1..6cf26cf1d7 100644 --- a/webapp/packages/core-blocks/src/Flex/Flex.module.css +++ b/webapp/packages/core-blocks/src/Flex/Flex.module.css @@ -9,88 +9,92 @@ .flex { display: flex; flex: 1 1 100%; -} -.overflow { - overflow: auto; -} + &[data-s-overflow] { + overflow: auto; + } -.gapXs { - gap: 8px; -} + &[data-s-gap='xs'] { + gap: 8px; + } -.gapMd { - gap: 16px; -} + &[data-s-gap='md'] { + gap: 16px; + } -.gapLg { - gap: 24px; -} + &[data-s-gap='lg'] { + gap: 24px; + } -.wrapWrap { - flex-wrap: wrap; -} + &[data-s-wrap='wrap'] { + flex-wrap: wrap; + } -.wrapNoWrap { - flex-wrap: nowrap; -} + &[data-s-wrap='nowrap'] { + flex-wrap: nowrap; + } -.wrapWrapReverse { - flex-wrap: wrap-reverse; -} + &[data-s-wrap='wrap-reverse'] { + flex-wrap: wrap-reverse; + } -.directionRow { - flex-direction: row; -} + &[data-s-direction='row'] { + flex-direction: row; + } -.directionColumn { - flex-direction: column; -} + &[data-s-direction='column'] { + flex-direction: column; + } -.directionRowReverse { - flex-direction: row-reverse; -} + &[data-s-direction='row-reverse'] { + flex-direction: row-reverse; + } -.directionColumnReverse { - flex-direction: column-reverse; -} + &[data-s-direction='column-reverse'] { + flex-direction: column-reverse; + } -.alignStart { - align-items: flex-start; -} + &[data-s-align='start'] { + align-items: flex-start; + } -.alignCenter { - align-items: center; -} + &[data-s-align='center'] { + align-items: center; + } -.alignEnd { - align-items: flex-end; -} + &[data-s-align='end'] { + align-items: flex-end; + } -.alignStretch { - align-items: stretch; -} + &[data-s-align='stretch'] { + align-items: stretch; + } -.justifyStart { - justify-content: flex-start; -} + &[data-s-justify='start'] { + justify-content: flex-start; + } -.justifyCenter { - justify-content: center; -} + &[data-s-justify='center'] { + justify-content: center; + } -.justifyEnd { - justify-content: flex-end; -} + &[data-s-justify='end'] { + justify-content: flex-end; + } -.justifySpaceBetween { - justify-content: space-between; -} + &[data-s-justify='space-between'] { + justify-content: space-between; + } -.justifySpaceAround { - justify-content: space-around; -} + &[data-s-justify='space-around'] { + justify-content: space-around; + } + + &[data-s-justify='space-evenly'] { + justify-content: space-evenly; + } -.justifySpaceEvenly { - justify-content: space-evenly; + &[data-s-justify='stretch'] { + justify-content: stretch; + } } diff --git a/webapp/packages/core-blocks/src/Flex/Flex.tsx b/webapp/packages/core-blocks/src/Flex/Flex.tsx index 4e2eb72926..e6b17f50a1 100644 --- a/webapp/packages/core-blocks/src/Flex/Flex.tsx +++ b/webapp/packages/core-blocks/src/Flex/Flex.tsx @@ -7,8 +7,7 @@ */ import { forwardRef } from 'react'; -import { clsx } from '@cloudbeaver/core-utils'; - +import { s } from '../s'; import classes from './Flex.module.css'; interface Props extends React.HTMLAttributes { @@ -20,41 +19,6 @@ interface Props extends React.HTMLAttributes { justify?: React.CSSProperties['justifyContent']; } -const gapClasses: Record = { - xs: classes.gapXs, - md: classes.gapMd, - lg: classes.gapLg, -}; - -const wrapClasses: Record = { - wrap: classes.wrapWrap, - nowrap: classes.wrapNoWrap, - 'wrap-reverse': classes.wrapWrapReverse, -}; - -const directionClasses: Record = { - row: classes.directionRow, - column: classes.directionColumn, - 'row-reverse': classes.directionRowReverse, - 'column-reverse': classes.directionColumnReverse, -}; - -const alignClasses: Record = { - 'flex-start': classes.alignStart, - center: classes.alignCenter, - 'flex-end': classes.alignEnd, - stretch: classes.alignStretch, -}; - -const justifyClasses: Record = { - 'flex-start': classes.justifyStart, - center: classes.justifyCenter, - 'flex-end': classes.justifyEnd, - 'space-between': classes.justifySpaceBetween, - 'space-around': classes.justifySpaceAround, - 'space-evenly': classes.justifySpaceEvenly, -}; - export const Flex = forwardRef(function Flex( { overflow, gap, wrap, direction, align, justify, className, children, ...rest }, ref, @@ -63,16 +27,13 @@ export const Flex = forwardRef(function Flex(
{children}
From 80d15835a65becb5e11d0661ffab8bbe14d838c2 Mon Sep 17 00:00:00 2001 From: naumov Date: Tue, 6 Aug 2024 15:31:40 +0200 Subject: [PATCH 3/3] CB-5437 simplify logic --- webapp/packages/core-blocks/src/Flex/Flex.module.css | 2 +- webapp/packages/core-blocks/src/Flex/Flex.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/webapp/packages/core-blocks/src/Flex/Flex.module.css b/webapp/packages/core-blocks/src/Flex/Flex.module.css index 6cf26cf1d7..cbc9739dba 100644 --- a/webapp/packages/core-blocks/src/Flex/Flex.module.css +++ b/webapp/packages/core-blocks/src/Flex/Flex.module.css @@ -10,7 +10,7 @@ display: flex; flex: 1 1 100%; - &[data-s-overflow] { + &.overflow { overflow: auto; } diff --git a/webapp/packages/core-blocks/src/Flex/Flex.tsx b/webapp/packages/core-blocks/src/Flex/Flex.tsx index e6b17f50a1..6fc22b164b 100644 --- a/webapp/packages/core-blocks/src/Flex/Flex.tsx +++ b/webapp/packages/core-blocks/src/Flex/Flex.tsx @@ -27,8 +27,7 @@ export const Flex = forwardRef(function Flex(