From 062dd87958235918f3716edb60b079b322683080 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Fri, 5 Mar 2021 11:58:49 +0300 Subject: [PATCH] feat(core-connections): CB-749 flex-grow by default --- .../src/Containers/BASE_CONTAINERS_STYLES.ts | 52 +++--- .../src/Containers/ColoredContainer.tsx | 5 +- .../core-blocks/src/Containers/Grid.tsx | 1 + .../core-blocks/src/Containers/Group.tsx | 1 + .../src/Containers/ILayoutContainerProps.ts | 3 +- .../Checkboxes/FieldCheckboxNew.tsx | 6 +- .../src/FormControls/ComboboxNew.tsx | 2 + .../src/FormControls/InputFieldNew.tsx | 2 + .../src/FormControls/SwitchNew.tsx | 2 + .../src/FormControls/TextareaNew.tsx | 2 + .../FormControls/baseFormControlStylesNew.ts | 3 - .../ObjectPropertyInfoFormNew.tsx | 7 +- .../src/ConnectionForm/Options/Options.tsx | 9 +- .../Options/ParametersFormNew.tsx | 2 - .../src/ConnectionForm/SSH/SSH.tsx | 162 +++++++++--------- .../src/styles/_form-controls.scss | 2 + .../ObjectInfoTab/ObjectProperty.tsx | 2 +- 17 files changed, 131 insertions(+), 132 deletions(-) diff --git a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts index 95e801a995..483f665dd2 100644 --- a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts +++ b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts @@ -28,26 +28,37 @@ export const BASE_CONTAINERS_STYLES = composes( &[horizontal] { flex-direction: row; } - &[wrap] { flex-wrap: wrap; } - &[overflow] { overflow: auto; } - &[parent] { padding: 10px; } - - &[limitWidth] { - max-width: 800px; - } - &[gap] { gap: 24px; } + + & > * { + flex-grow: 1; + } + & > [flexItemKeepSize] { + flex-grow: 0; + } + & > [flexItemTiny] { + flex-basis: 100px; + } + & > [flexItemSmall] { + flex-basis: 240px; + } + & > [flexItemMedium] { + flex-basis: 340px; + } + & > [flexItemLarge] { + flex-basis: 540px; + } } Grid, Group { @@ -71,10 +82,6 @@ export const BASE_CONTAINERS_STYLES = composes( & > [gridItemMax] { grid-column: 1/-1; } - - & > [gridItemMedium] { - grid-column: 1/-2; - } } Group { @@ -87,26 +94,17 @@ export const BASE_CONTAINERS_STYLES = composes( } } - Container, ColoredContainer { - & > [flexItemGrow] { - flex-grow: 1; - } - & > [flexItemTiny] { - flex-basis: 100px; - } - & > [flexItemSmall] { - flex-basis: 182px; - } - & > [flexItemMedium] { - flex-basis: 300px; - } - & > [flexItemLarge] { - flex-basis: 400px; + Container, ColoredContainer, Grid { + &[limitWidth] { + max-width: 800px; } } Container, ColoredContainer, Group, Grid { flex-grow: 1; + &[keepSize] { + flex-grow: 0; + } &[small], & > [small] { max-width: 250px; } diff --git a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx index a93fc1c58b..11539ca875 100644 --- a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx +++ b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx @@ -7,8 +7,7 @@ */ import type { IGridItemsLayoutProps, ILayoutSizeProps } from './ILayoutContainerProps'; - -type Props = ILayoutSizeProps & IGridItemsLayoutProps & { +interface Props extends ILayoutSizeProps, IGridItemsLayoutProps { className?: string; horizontal?: boolean; wrap?: boolean; @@ -16,7 +15,7 @@ type Props = ILayoutSizeProps & IGridItemsLayoutProps & { parent?: boolean; limitWidth?: boolean; gap?: boolean; -}; +} export const ColoredContainer: React.FC = function ColoredContainer({ children, className }) { return ( diff --git a/webapp/packages/core-blocks/src/Containers/Grid.tsx b/webapp/packages/core-blocks/src/Containers/Grid.tsx index 32cc6fff83..c14d96ca05 100644 --- a/webapp/packages/core-blocks/src/Containers/Grid.tsx +++ b/webapp/packages/core-blocks/src/Containers/Grid.tsx @@ -10,6 +10,7 @@ import type { IGridOptions, ILayoutSizeProps } from './ILayoutContainerProps'; interface Props extends ILayoutSizeProps, IGridOptions { className?: string; + limitWidth?: boolean; } export const Grid: React.FC = function Grid({ children, className }) { diff --git a/webapp/packages/core-blocks/src/Containers/Group.tsx b/webapp/packages/core-blocks/src/Containers/Group.tsx index f5e7f22143..aa4b2d3bb3 100644 --- a/webapp/packages/core-blocks/src/Containers/Group.tsx +++ b/webapp/packages/core-blocks/src/Containers/Group.tsx @@ -11,6 +11,7 @@ import type { IGridOptions, ILayoutSizeProps } from './ILayoutContainerProps'; interface Props extends ILayoutSizeProps, IGridOptions { className?: string; form?: boolean; + keepSize?: boolean; } export const Group: React.FC = function Group({ children, className }) { diff --git a/webapp/packages/core-blocks/src/Containers/ILayoutContainerProps.ts b/webapp/packages/core-blocks/src/Containers/ILayoutContainerProps.ts index c3a8003762..be0ad7824c 100644 --- a/webapp/packages/core-blocks/src/Containers/ILayoutContainerProps.ts +++ b/webapp/packages/core-blocks/src/Containers/ILayoutContainerProps.ts @@ -6,12 +6,11 @@ export interface ILayoutSizeProps { } export interface IGridItemsLayoutProps { - gridItemMedium?: boolean; gridItemMax?: boolean; } export interface IFlexItemsLayoutProps { - flexItemGrow?: boolean; + flexItemKeepSize?: boolean; flexItemTiny?: boolean; flexItemSmall?: boolean; flexItemMedium?: boolean; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx index 1908eff162..14286e6d5c 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx @@ -16,7 +16,7 @@ import { Checkbox, CheckboxType, CheckboxControlledProps, CheckboxObjectProps } const fieldCheckboxStyles = css` Checkbox { - margin: -5px -10px; + margin: -10px; } field { display: flex; @@ -25,6 +25,8 @@ const fieldCheckboxStyles = css` } field-label { padding-left: 10px; + composes: theme-typography--body2 from global; + line-height: 16px; } `; @@ -47,7 +49,7 @@ export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ {...rest} checked={checkedControlled} /> - {children} + {children} ); }; diff --git a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx index 1108cd5ffd..b6a27894f1 100644 --- a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx @@ -41,6 +41,8 @@ const styles = composes( field-label { display: block; padding-bottom: 10px; + composes: theme-typography--body1 from global; + font-weight: 500; } input { padding-right: 20px; diff --git a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx index 378a601f94..9c0810248b 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx @@ -21,6 +21,8 @@ const INPUT_FIELD_STYLES = css` field-label { display: block; padding-bottom: 10px; + composes: theme-typography--body1 from global; + font-weight: 500; } `; diff --git a/webapp/packages/core-blocks/src/FormControls/SwitchNew.tsx b/webapp/packages/core-blocks/src/FormControls/SwitchNew.tsx index bee04e6688..2e6d679874 100644 --- a/webapp/packages/core-blocks/src/FormControls/SwitchNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/SwitchNew.tsx @@ -46,6 +46,8 @@ const switchStyles = composes( padding-right: 17px; min-width: 50px; white-space: pre-wrap; + composes: theme-typography--body1 from global; + font-weight: 500; } ` ); diff --git a/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx b/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx index 297aa33d60..2313b671e2 100644 --- a/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx @@ -23,6 +23,8 @@ const styles = css` field-label { display: block; padding-bottom: 10px; + composes: theme-typography--body1 from global; + font-weight: 500; } `; diff --git a/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts b/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts index 83e22694a7..a2979be9ab 100644 --- a/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts +++ b/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts @@ -24,13 +24,10 @@ export const baseFormControlStylesNew = css` } field-label { - composes: theme-typography--body1 from global; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - line-height: 16px; - font-weight: 500; } field-description { diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx index c6b1ea5067..03a00bbb8a 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx @@ -8,10 +8,8 @@ import { observer } from 'mobx-react-lite'; import { useCallback } from 'react'; -import styled from 'reshadow'; import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; -import { useStyles } from '@cloudbeaver/core-theming'; import { FieldCheckboxNew } from '../FormControls/Checkboxes/FieldCheckboxNew'; import { ComboboxNew } from '../FormControls/ComboboxNew'; @@ -80,11 +78,10 @@ const RenderField: React.FC = observer(function RenderField({ + >{property.displayName ?? ''} + ); } diff --git a/webapp/packages/core-connections/src/ConnectionForm/Options/Options.tsx b/webapp/packages/core-connections/src/ConnectionForm/Options/Options.tsx index 32a38900ae..bd4bbc6efb 100644 --- a/webapp/packages/core-connections/src/ConnectionForm/Options/Options.tsx +++ b/webapp/packages/core-connections/src/ConnectionForm/Options/Options.tsx @@ -212,12 +212,12 @@ export const Options: TabContainerPanelComponent = obse name="template" value={data.config.connectionId} state={data.config} - checkboxLabel={translate('connections_connection_template')} disabled={edit || form.form.disabled} readOnly={form.form.readonly} // autoHide={} // maybe better to use autoHide mod='surface' - /> + >{translate('connections_connection_template')} + )} = obse name="saveCredentials" value={data.config.connectionId + 'authNeeded'} state={data.config} - checkboxLabel={translate('connections_connection_edit_save_credentials')} disabled={form.form.disabled || form.form.readonly} mod='surface' gridItemMax - - /> + >{translate('connections_connection_edit_save_credentials')} + )} )} diff --git a/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx b/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx index 891d594e8d..d053dfeea7 100644 --- a/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx +++ b/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx @@ -42,7 +42,6 @@ export const ParametersFormNew = observer(function ParametersFormNew({ disabled={disabled} readOnly={readOnly || !originLocal} flexItemSmall - flexItemGrow required > {translate('customConnection_custom_host')} @@ -54,7 +53,6 @@ export const ParametersFormNew = observer(function ParametersFormNew({ disabled={disabled} readOnly={readOnly || !originLocal} flexItemTiny - flexItemGrow > {translate('customConnection_custom_port')} diff --git a/webapp/packages/core-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/core-connections/src/ConnectionForm/SSH/SSH.tsx index e1cf27c48a..4169381915 100644 --- a/webapp/packages/core-connections/src/ConnectionForm/SSH/SSH.tsx +++ b/webapp/packages/core-connections/src/ConnectionForm/SSH/SSH.tsx @@ -96,90 +96,88 @@ export const SSH: TabContainerPanelComponent = observer return styled(styles)( - - - - {translate('connections_network_handler_ssh_tunnel_enable')} - - - - {translate('connections_network_handler_ssh_tunnel_host')} - - - {translate('connections_network_handler_ssh_tunnel_port')} - - - - + + + - {translate('connections_network_handler_ssh_tunnel_user')} - - - {translate('connections_network_handler_ssh_tunnel_password')} - - - {credentialsSavingEnabled && ( - - )} - - - - + {translate('connections_network_handler_ssh_tunnel_enable')} + + + + {translate('connections_network_handler_ssh_tunnel_host')} + + + {translate('connections_network_handler_ssh_tunnel_port')} + + + + + {translate('connections_network_handler_ssh_tunnel_user')} + + + {translate('connections_network_handler_ssh_tunnel_password')} + + + {credentialsSavingEnabled && ( + {translate('connections_network_handler_ssh_tunnel_save_password')} + + )} + + + + + ); diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss index a950053958..69223aaca2 100644 --- a/webapp/packages/core-theming/src/styles/_form-controls.scss +++ b/webapp/packages/core-theming/src/styles/_form-controls.scss @@ -36,11 +36,13 @@ textarea[role="new"] { resize: vertical; + min-height: 40px; } input[role="new"] { overflow: hidden; text-overflow: ellipsis; + min-height: 25px; } input[role="new"], diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx index 6ec80bcc9f..559ff4f3b4 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx @@ -29,7 +29,7 @@ export const ObjectProperty = observer(function ObjectProperty({ className={className} name={objectProperty.id} value={getValue(objectProperty.value)} - readOnly + disabled {...additionalProps(objectProperty)} > {objectProperty.displayName}