From 9a955f280b10333d35b9073fb4e89e00b59c09fe Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Fri, 20 Aug 2021 16:28:30 +0800 Subject: [PATCH] feature: Support tips at top in StepForm component Support tips at top in StepForm component Change-Id: I4cc4e489a81847f0c3b6190576141b9c39d9075e --- src/components/Form/index.jsx | 28 +++++++++++++++---- src/components/Form/index.less | 5 +++- src/locales/en.json | 4 --- src/locales/zh.json | 4 --- .../Stack/actions/Create/Parameter.jsx | 4 +++ .../Stack/actions/Create/Template.jsx | 4 +++ 6 files changed, 35 insertions(+), 14 deletions(-) diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx index 182cb09f..0ddb96dc 100644 --- a/src/components/Form/index.jsx +++ b/src/components/Form/index.jsx @@ -42,6 +42,7 @@ export default class BaseForm extends React.Component { this.response = null; this.responseError = null; this.formRef = React.createRef(); + this.tipRef = React.createRef(); this.codeError = false; this.currentFormValue = {}; this.init(); @@ -100,7 +101,7 @@ export default class BaseForm extends React.Component { } get listUrl() { - return '/base/tmp'; + return ''; } get isAdminPage() { @@ -386,7 +387,7 @@ export default class BaseForm extends React.Component { renderTips() { if (this.tips) { return ( -
+
{this.tips}
@@ -496,11 +497,28 @@ export default class BaseForm extends React.Component { } render() { + const wrapperPadding = + this.listUrl || this.isStep || (this.isModal && this.tips) + ? styles['wrapper-page-padding'] + : ''; + const tips = this.renderTips(); + const formStyle = {}; + if ((this.listUrl || this.isStep) && this.tips && this.tipRef.current) { + if (this.isStep) { + const tipHeight = this.tipRef.current.clientHeight + 219; + formStyle.height = `calc(100vh - ${tipHeight}px)`; + } else { + const tipHeight = this.tipRef.current.clientHeight + 66; + formStyle.height = `calc(100% - ${tipHeight}px)`; + } + } return ( -
+
- {this.renderTips()} -
+ {tips} +
{this.renderForms()}
{this.renderFooter()} diff --git a/src/components/Form/index.less b/src/components/Form/index.less index dfb623eb..29c77ab5 100644 --- a/src/components/Form/index.less +++ b/src/components/Form/index.less @@ -18,6 +18,10 @@ } } +.wrapper-page-padding { + padding-top: 0; +} + .form { margin-left: @body-padding * 2; margin-right: @body-padding * 2; @@ -86,7 +90,6 @@ .tips { padding: 8px 16px; background: rgba(89, 157, 255, 0.15); - margin-top: -16px; margin-bottom: 16px; } diff --git a/src/locales/en.json b/src/locales/en.json index f064d0b8..90f3552d 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1231,7 +1231,6 @@ "Qos Policy": "Qos Policy", "Queued": "Queued", "Quota Overview": "Quota Overview", - "Quota Resource": "Quota Resource", "Quota exceeded": "Quota exceeded", "Quota: Insufficient quota to create resources, please adjust resource quantity or quota(left { quota }, input { input }).": "Quota: Insufficient quota to create resources, please adjust resource quantity or quota(left { quota }, input { input }).", "Quota: Project quotas sufficient resources can be created": "Quota: Project quotas sufficient resources can be created", @@ -1842,8 +1841,6 @@ "image": "image", "images": "images", "ingress": "ingress", - "insert": "insert", - "insert rule": "insert rule", "instance": "instance", "instance snapshot": "instance snapshot", "instances": "instances", @@ -1927,7 +1924,6 @@ "unlock instance": "unlock instance", "unpause instance": "unpause instance", "unshelve instance": "unshelve instance", - "update": "update", "update status": "update status", "update template": "update template", "user": "user", diff --git a/src/locales/zh.json b/src/locales/zh.json index 036417cf..678c60b6 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -1231,7 +1231,6 @@ "Qos Policy": "QoS策略", "Queued": "已排队", "Quota Overview": "配额概况", - "Quota Resource": "Quota(配额)", "Quota exceeded": "配额用尽", "Quota: Insufficient quota to create resources, please adjust resource quantity or quota(left { quota }, input { input }).": "配额：项目配额不足，无法创建资源，请进行资源数量或配额的调整（剩余{ quota }，输入{ input }）。", "Quota: Project quotas sufficient resources can be created": "配额：项目配额充足，可创建资源", @@ -1842,8 +1841,6 @@ "image": "镜像", "images": "镜像", "ingress": "入方向", - "insert": "", - "insert rule": "插入规则", "instance": "云主机", "instance snapshot": "云主机快照", "instances": "云主机", @@ -1927,7 +1924,6 @@ "unlock instance": "解锁云主机", "unpause instance": "恢复云主机", "unshelve instance": "取消归档云主机", - "update": "", "update status": "更新状态", "update template": "更新模板", "user": "用户", diff --git a/src/pages/heat/containers/Stack/actions/Create/Parameter.jsx b/src/pages/heat/containers/Stack/actions/Create/Parameter.jsx index 04a583aa..dfff78fb 100644 --- a/src/pages/heat/containers/Stack/actions/Create/Parameter.jsx +++ b/src/pages/heat/containers/Stack/actions/Create/Parameter.jsx @@ -25,6 +25,10 @@ import { @inject('rootStore') @observer export default class Parameter extends Base { + get isStep() { + return true; + } + get title() { return t('Parameter'); } diff --git a/src/pages/heat/containers/Stack/actions/Create/Template.jsx b/src/pages/heat/containers/Stack/actions/Create/Template.jsx index 18aab65e..7a68dfed 100644 --- a/src/pages/heat/containers/Stack/actions/Create/Template.jsx +++ b/src/pages/heat/containers/Stack/actions/Create/Template.jsx @@ -19,6 +19,10 @@ import { yamlTip, validateYaml, paramTip } from 'resources/stack'; @inject('rootStore') @observer export default class Template extends Base { + get isStep() { + return true; + } + get title() { return t('Prepare Template'); }