From ca9edd2ad9d7a74b48d1985d64fca1b03e3a87b6 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Wed, 21 Oct 2020 12:46:34 +0300 Subject: [PATCH] improve(core-connection): CB-319 delete formStyles.ts CB-319 --- .../ConnectionForm/Options/Options.tsx | 9 ++++-- .../ConnectionForm/Options/ParametersForm.tsx | 12 ++++--- .../ConnectionForm/Options/formStyles.ts | 31 ------------------ .../ConnectionForm/ConnectionForm.tsx | 12 +++++-- .../ConnectionForm/ParametersForm.tsx | 11 +++++-- .../ConnectionForm/formStyles.ts | 32 ------------------- 6 files changed, 33 insertions(+), 74 deletions(-) delete mode 100644 webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts delete mode 100644 webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx index 2a12a3359e..4f0a96b2a2 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx @@ -28,7 +28,6 @@ import { useStyles } from '@cloudbeaver/core-theming'; import { EConnectionType } from '../EConnectionType'; import { IConnectionFormModel } from '../IConnectionFormModel'; -import { formStyles } from './formStyles'; import { OptionsController } from './OptionsController'; import { ParametersForm } from './ParametersForm'; @@ -52,6 +51,12 @@ const styles = css` flex-direction: column; max-width: 630px; } + connection-type { + margin-left: 180px; + } + Radio { + composes: theme-typography--body2 from global; + } `; export const Options = observer(function Options({ @@ -66,7 +71,7 @@ export const Options = observer(function Options({ const translate = useTranslate(); const [focusedRef] = useFocus({ focusFirstChild: true }); - return styled(useStyles(styles, formStyles))( + return styled(useStyles(styles))( diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/ParametersForm.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/ParametersForm.tsx index 19dd37791c..3df89c540e 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/ParametersForm.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/ParametersForm.tsx @@ -7,21 +7,25 @@ */ import { observer } from 'mobx-react'; -import styled, { use, css } from 'reshadow'; +import styled, { css, use } from 'reshadow'; import { FormGroup, InputField } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import { ConnectionInfo } from '@cloudbeaver/core-sdk'; import { useStyles } from '@cloudbeaver/core-theming'; -import { formStyles } from './formStyles'; - interface ParametersFormProps { connection: ConnectionInfo; disabled?: boolean; embedded?: boolean; } +const parametersFormStyles = css` + sub-label { + composes: theme-typography--caption from global; + line-height: 14px; + }`; + export const ParametersForm = observer(function ParametersForm({ connection, embedded, @@ -29,7 +33,7 @@ export const ParametersForm = observer(function ParametersForm({ }: ParametersFormProps) { const translate = useTranslate(); - return styled(useStyles(formStyles))( + return styled(useStyles(parametersFormStyles))( <> {!embedded && ( diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts deleted file mode 100644 index 3128565886..0000000000 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/formStyles.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - * cloudbeaver - Cloud Database Manager - * Copyright (C) 2020 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 { css } from 'reshadow'; - -export const formStyles = css` - connection-form { - flex: 1; - display: flex; - overflow: auto; - flex-direction: row; - } - layout-grid { - flex: 1; - } - connection-type { - margin-left: 180px; - } - Radio { - composes: theme-typography--body1 from global; - } - sub-label { - composes: theme-typography--caption from global; - line-height: 14px; - } -`; diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx index 1650693a0d..25caf9c3ad 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx @@ -17,7 +17,6 @@ import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles } from '@cloudbeaver/core-theming'; import { ConnectionType } from '../ConnectionFormDialogController'; -import { formStyles } from './formStyles'; import { IFormController } from './IFormController'; import { ParametersForm } from './ParametersForm'; @@ -34,6 +33,15 @@ const connectionFormStyles = css` FormBoxElement { flex: 1; } + connection-type { + padding: 12px; + margin-left: 160px; + } + Radio { + composes: theme-typography--body2 from global; + font-weight: 500; + padding: 0 12px; + } `; export const ConnectionForm = observer(function ConnectionForm({ @@ -43,7 +51,7 @@ export const ConnectionForm = observer(function ConnectionForm({ const translate = useTranslate(); const [focusedRef] = useFocus({ focusFirstChild: true }); - return styled(useStyles(formStyles, connectionFormStyles))( + return styled(useStyles(connectionFormStyles))( diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ParametersForm.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ParametersForm.tsx index 80fa0e9958..41f597a7f7 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ParametersForm.tsx +++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ParametersForm.tsx @@ -7,13 +7,12 @@ */ import { observer } from 'mobx-react'; -import styled, { use } from 'reshadow'; +import styled, { css, use } from 'reshadow'; import { InputField } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles } from '@cloudbeaver/core-theming'; -import { formStyles } from './formStyles'; import { IFormController } from './IFormController'; interface ParametersFormProps { @@ -21,13 +20,19 @@ interface ParametersFormProps { embedded?: boolean; } +const parametersFormStyles = css` + sub-label { + composes: theme-typography--caption from global; + line-height: 14px; + }`; + export const ParametersForm = observer(function ParametersForm({ controller, embedded, }: ParametersFormProps) { const translate = useTranslate(); - return styled(useStyles(formStyles))( + return styled(useStyles(parametersFormStyles))( <> {!embedded && ( diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts deleted file mode 100644 index 090955e37b..0000000000 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/formStyles.ts +++ /dev/null @@ -1,32 +0,0 @@ -/* - * cloudbeaver - Cloud Database Manager - * Copyright (C) 2020 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 { css } from 'reshadow'; - -export const formStyles = css` - connection-form { - flex: 1; - display: flex; - flex-direction: column; - padding: 18px 24px; - padding-top: 4px; - } - connection-type { - padding: 12px; - margin-left: 160px; - } - Radio { - composes: theme-typography--body1 from global; - font-weight: 500; - padding: 0 12px; - } - sub-label { - composes: theme-typography--caption from global; - line-height: 14px; - } -`;