feat(core-connections): CB-749 flex-grow by default

2026-09-24 16:04:36 +08:00 · 2021-03-05 11:58:49 +03:00
parent d406ba5ffb
commit 062dd87958
17 changed files with 131 additions and 132 deletions
@@ -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;
      }
@@ -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<Props> = function ColoredContainer({ children, className }) {
  return (
@@ -10,6 +10,7 @@ import type { IGridOptions, ILayoutSizeProps } from './ILayoutContainerProps';

 interface Props extends ILayoutSizeProps, IGridOptions {
  className?: string;
+  limitWidth?: boolean;
 }

 export const Grid: React.FC<Props> = function Grid({ children, className }) {
@@ -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<Props> = function Group({ children, className }) {
@@ -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;
@@ -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}
      />
-      <field-label as="div">{children}</field-label>
+      <field-label htmlFor={rest.value || rest.name} as="label">{children}</field-label>
    </field>
  );
 };
@@ -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;
@@ -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;
  }
 `;

@@ -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;
    }
  `
 );
@@ -23,6 +23,8 @@ const styles = css`
  field-label {
    display: block;
    padding-bottom: 10px;
+    composes: theme-typography--body1 from global;
+    font-weight: 500;
  }
 `;

@@ -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 {
@@ -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<RenderFieldProps> = observer(function RenderField({
      <FieldCheckboxNew
        name={property.id!}
        state={state}
-        checkboxLabel={property.displayName}
        title={property.description}
        disabled={disabled || readOnly}
-        mod='surface'
-      />
+      >{property.displayName ?? ''}
+      </FieldCheckboxNew>
    );
  }

@@ -212,12 +212,12 @@ export const Options: TabContainerPanelComponent<IConnectionFormTabProps> = 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')}
+              </FieldCheckboxNew>
            )}
            <TextareaNew
              name="description"
@@ -247,12 +247,11 @@ export const Options: TabContainerPanelComponent<IConnectionFormTabProps> = 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')}
+                </FieldCheckboxNew>
              )}
            </Group>
          )}
@@ -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')}
          </InputFieldNew>
@@ -96,90 +96,88 @@ export const SSH: TabContainerPanelComponent<IConnectionFormTabProps> = observer

  return styled(styles)(
    <SubmittingForm onSubmit={form.save}>
-      <ColoredContainer limitWidth>
-        <Group form>
-          <SwitchNew
-            name="enabled"
-            state={state}
-            mod={['primary']}
-            disabled={disabled || form.form.readonly}
-          >
-            {translate('connections_network_handler_ssh_tunnel_enable')}
-          </SwitchNew>
-          <Container horizontal wrap gap gridItemMax>
-            <InputFieldNew
-              type="text"
-              name="host"
-              state={state.properties}
-              disabled={disabled || !enabled}
-              readOnly={form.form.readonly}
-              mod='surface'
-              flexItemSmall
-              flexItemGrow
-            >
-              {translate('connections_network_handler_ssh_tunnel_host')}
-            </InputFieldNew>
-            <InputFieldNew
-              type="number"
-              name="port"
-              state={state.properties}
-              disabled={disabled || !enabled}
-              readOnly={form.form.readonly}
-              mod='surface'
-              flexItemTiny
-              flexItemGrow
-            >
-              {translate('connections_network_handler_ssh_tunnel_port')}
-            </InputFieldNew>
-          </Container>
-          <Container horizontal wrap gap gridItemMax>
-            <InputFieldNew
-              type="text"
-              name="userName"
+      <ColoredContainer>
+        <Container limitWidth>
+          <Group form keepSize>
+            <SwitchNew
+              name="enabled"
              state={state}
-              disabled={disabled || !enabled}
-              readOnly={form.form.readonly}
-              mod='surface'
-              flexItemSmall
-              flexItemGrow
+              mod={['primary']}
+              disabled={disabled || form.form.readonly}
            >
-              {translate('connections_network_handler_ssh_tunnel_user')}
-            </InputFieldNew>
-            <InputFieldNew
-              type="password"
-              name="password"
-              placeholder={passwordHint}
-              state={state}
-              disabled={disabled || !enabled}
-              readOnly={form.form.readonly}
-              mod='surface'
-              flexItemSmall
-              flexItemGrow
-            >
-              {translate('connections_network_handler_ssh_tunnel_password')}
-            </InputFieldNew>
-          </Container>
-          {credentialsSavingEnabled && (
-            <FieldCheckboxNew
-              name="savePassword"
-              value={SSH_TUNNEL_ID + ' savePassword'}
-              state={state}
-              checkboxLabel={translate('connections_network_handler_ssh_tunnel_save_password')}
-              disabled={disabled || !enabled || form.form.readonly}
-              mod='surface'
-            />
-          )}
-          <GroupItem>
-            <Button
-              type='button'
-              mod={['outlined']}
-              disabled={disabled || !enabled || !passwordFilled}
-              onClick={testConnection}
-            >
-              {translate('connections_network_handler_test')}
-            </Button>
-          </GroupItem>
-        </Group>
+              {translate('connections_network_handler_ssh_tunnel_enable')}
+            </SwitchNew>
+            <Container horizontal wrap gap gridItemMax>
+              <InputFieldNew
+                type="text"
+                name="host"
+                state={state.properties}
+                disabled={disabled || !enabled}
+                readOnly={form.form.readonly}
+                mod='surface'
+                flexItemSmall
+              >
+                {translate('connections_network_handler_ssh_tunnel_host')}
+              </InputFieldNew>
+              <InputFieldNew
+                type="number"
+                name="port"
+                state={state.properties}
+                disabled={disabled || !enabled}
+                readOnly={form.form.readonly}
+                mod='surface'
+                flexItemTiny
+              >
+                {translate('connections_network_handler_ssh_tunnel_port')}
+              </InputFieldNew>
+            </Container>
+            <Container horizontal wrap gap gridItemMax>
+              <InputFieldNew
+                type="text"
+                name="userName"
+                state={state}
+                disabled={disabled || !enabled}
+                readOnly={form.form.readonly}
+                mod='surface'
+                flexItemSmall
+              >
+                {translate('connections_network_handler_ssh_tunnel_user')}
+              </InputFieldNew>
+              <InputFieldNew
+                type="password"
+                name="password"
+                placeholder={passwordHint}
+                state={state}
+                disabled={disabled || !enabled}
+                readOnly={form.form.readonly}
+                mod='surface'
+                flexItemSmall
+              >
+                {translate('connections_network_handler_ssh_tunnel_password')}
+              </InputFieldNew>
+            </Container>
+            {credentialsSavingEnabled && (
+              <FieldCheckboxNew
+                name="savePassword"
+                value={SSH_TUNNEL_ID + ' savePassword'}
+                state={state}
+                disabled={disabled || !enabled || form.form.readonly}
+                mod='surface'
+              >{translate('connections_network_handler_ssh_tunnel_save_password')}
+              </FieldCheckboxNew>
+            )}
+            <GroupItem>
+              <Button
+                type='button'
+                mod={['outlined']}
+                disabled={disabled || !enabled || !passwordFilled}
+                onClick={testConnection}
+              >
+                {translate('connections_network_handler_test')}
+              </Button>
+            </GroupItem>
+          </Group>
+        </Container>
      </ColoredContainer>
    </SubmittingForm>
  );
@@ -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"],
@@ -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}