From a66c8316c8a0db35e70f2320f6e212c988d664e9 Mon Sep 17 00:00:00 2001 From: xusongfu Date: Wed, 25 Aug 2021 16:39:58 +0800 Subject: [PATCH] fix: Fix styles in Form & renderBadge & external network 1. Fix the footer of Form component with flex layout to get better showing 2. Add initial value in renderBadeg to hide Badge 3. Use isExternalNetwork function to judge network to prevent unknown bug Change-Id: Ib2a4e341b8cfe9432c406f5dd33b9bffd2304f33 --- src/components/Form/index.less | 7 ++++- src/components/StepForm/index.jsx | 6 ++++- src/components/StepForm/index.less | 13 +++++++--- .../CreateIronic/NetworkStep/index.jsx | 3 +++ .../Instance/actions/CreateIronic/index.jsx | 26 ++++++++++++------- .../Instance/actions/CreateIronic/index.less | 3 +++ .../actions/StepCreate/NetworkStep/index.jsx | 3 +++ .../Instance/actions/StepCreate/index.jsx | 26 ++++++++++++------- .../Instance/actions/StepCreate/index.less | 3 +++ .../network/containers/Topology/index.jsx | 4 +-- 10 files changed, 68 insertions(+), 26 deletions(-) diff --git a/src/components/Form/index.less b/src/components/Form/index.less index 29c77ab5..4994a9fd 100644 --- a/src/components/Form/index.less +++ b/src/components/Form/index.less @@ -53,6 +53,9 @@ height: 48px; background-color: #fff; box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09); + display: flex; + align-items: center; + justify-content: space-between; } .btns { @@ -102,6 +105,8 @@ height: 48px; float: left; margin-left: 16px; - padding-top: 8px; color: rgb(72, 72, 72); + display: flex; + align-items: center; + justify-content: left; } \ No newline at end of file diff --git a/src/components/StepForm/index.jsx b/src/components/StepForm/index.jsx index efdfd6cb..77dcf3de 100644 --- a/src/components/StepForm/index.jsx +++ b/src/components/StepForm/index.jsx @@ -335,7 +335,11 @@ export default class BaseStepForm extends React.Component { return (
{this.renderFooterLeft()}
diff --git a/src/components/StepForm/index.less b/src/components/StepForm/index.less index 56102c92..ca115ffa 100644 --- a/src/components/StepForm/index.less +++ b/src/components/StepForm/index.less @@ -41,15 +41,18 @@ bottom: 0; left: 0; right: 0; - height: 48px; + min-height: 48px; background-color: #fff; box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09); z-index: 2; + display: flex; + align-items: center; + justify-content: space-between; } .btns { float: right; margin-right: 32px; - margin-top: 8px; + min-width: 200px; :global{ button { margin-left: 8px; @@ -57,9 +60,11 @@ } } .footer-left { - height: 48px; + min-height: 48px; float: left; margin-left: 16px; - padding-top: 8px; color: rgb(72, 72, 72); + display: flex; + align-items: center; + justify-items: left; } \ No newline at end of file diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx index e3918df6..b72d1441 100644 --- a/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx +++ b/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx @@ -150,6 +150,9 @@ export default class NetworkStep extends Base { this.getSubnets(); } ); + this.updateContext({ + networkSelectRows: selectedRows, + }); }; get nameForStateUpdate() { diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx index 4408f4a1..bf3e32a9 100644 --- a/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx +++ b/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx @@ -191,11 +191,15 @@ export default class CreateIronic extends StepAction { }; renderBadge() { - const { status } = this.state; + const { status = 'success' } = this.state; if (status === 'success') { return null; } - return ; + return ( +
+ +
+ ); } renderFooterLeft() { @@ -209,13 +213,17 @@ export default class CreateIronic extends StepAction { formatter: (value) => `$ ${value}`.replace(/\D/g, ''), }; return ( -
- {t('Count')} - +
+
+
+ {t('Count')} + +
+
{this.renderBadge()}
); diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/index.less b/src/pages/compute/containers/Instance/actions/CreateIronic/index.less index 70e13d10..ee8facc4 100644 --- a/src/pages/compute/containers/Instance/actions/CreateIronic/index.less +++ b/src/pages/compute/containers/Instance/actions/CreateIronic/index.less @@ -1,4 +1,7 @@ .input { margin-left: 16px; margin-right: 32px; +} +.number-input { + min-width: 165px; } \ No newline at end of file diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx index ef028301..a26b2f32 100644 --- a/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx +++ b/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx @@ -150,6 +150,9 @@ export default class NetworkStep extends Base { this.getSubnets(); } ); + this.updateContext({ + networkSelectRows: selectedRows, + }); }; get nameForStateUpdate() { diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx index f2992c14..90c12e8a 100644 --- a/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx +++ b/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx @@ -180,11 +180,15 @@ class StepCreate extends StepAction { }; renderBadge() { - const { status } = this.state; + const { status = 'success' } = this.state; if (status === 'success') { return null; } - return ; + return ( +
+ +
+ ); } renderFooterLeft() { @@ -198,13 +202,17 @@ class StepCreate extends StepAction { formatter: (value) => `$ ${value}`.replace(/\D/g, ''), }; return ( -
- {t('Count')} - +
+
+
+ {t('Count')} + +
+
{this.renderBadge()}
); diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/index.less b/src/pages/compute/containers/Instance/actions/StepCreate/index.less index 70e13d10..ee8facc4 100644 --- a/src/pages/compute/containers/Instance/actions/StepCreate/index.less +++ b/src/pages/compute/containers/Instance/actions/StepCreate/index.less @@ -1,4 +1,7 @@ .input { margin-left: 16px; margin-right: 32px; +} +.number-input { + min-width: 165px; } \ No newline at end of file diff --git a/src/pages/network/containers/Topology/index.jsx b/src/pages/network/containers/Topology/index.jsx index bf4d7554..b72be858 100644 --- a/src/pages/network/containers/Topology/index.jsx +++ b/src/pages/network/containers/Topology/index.jsx @@ -32,7 +32,7 @@ import { import PrimaryActionButtons from 'components/Tables/Base/PrimaryActionButtons'; import { ipValidate } from 'utils/validate'; import { toJS } from 'mobx'; -import { getAnchorData } from 'resources/network'; +import { getAnchorData, isExternalNetwork } from 'resources/network'; import styles from './index.less'; import CreateRouter from '../Router/actions/Create'; import CreateNetwork from '../Network/actions/CreateNetwork'; @@ -219,7 +219,7 @@ export default class Topology extends React.Component { const { extendWidth } = this.state; data.subnetNodes = []; networks.forEach((network) => { - if (!network['router:external']) { + if (!isExternalNetwork(network)) { const networkSubnet = []; // const firstSubnetY = 250 + (netIndex * 150); const { firstSubnetY } = this.state;