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
This commit is contained in:
xusongfu 2021-08-25 16:39:58 +08:00
parent e915d13e4a
commit a66c8316c8
10 changed files with 68 additions and 26 deletions

View File

@ -53,6 +53,9 @@
height: 48px; height: 48px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
display: flex;
align-items: center;
justify-content: space-between;
} }
.btns { .btns {
@ -102,6 +105,8 @@
height: 48px; height: 48px;
float: left; float: left;
margin-left: 16px; margin-left: 16px;
padding-top: 8px;
color: rgb(72, 72, 72); color: rgb(72, 72, 72);
display: flex;
align-items: center;
justify-content: left;
} }

View File

@ -335,7 +335,11 @@ export default class BaseStepForm extends React.Component {
return ( return (
<div className={styles.footer}> <div className={styles.footer}>
<div <div
className={classnames(styles['footer-left'], 'step-form-footer-left')} className={classnames(
styles['footer-left'],
this.footerStyle,
'step-form-footer-left'
)}
> >
{this.renderFooterLeft()} {this.renderFooterLeft()}
</div> </div>

View File

@ -41,15 +41,18 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 48px; min-height: 48px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
z-index: 2; z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
} }
.btns { .btns {
float: right; float: right;
margin-right: 32px; margin-right: 32px;
margin-top: 8px; min-width: 200px;
:global{ :global{
button { button {
margin-left: 8px; margin-left: 8px;
@ -57,9 +60,11 @@
} }
} }
.footer-left { .footer-left {
height: 48px; min-height: 48px;
float: left; float: left;
margin-left: 16px; margin-left: 16px;
padding-top: 8px;
color: rgb(72, 72, 72); color: rgb(72, 72, 72);
display: flex;
align-items: center;
justify-items: left;
} }

View File

@ -150,6 +150,9 @@ export default class NetworkStep extends Base {
this.getSubnets(); this.getSubnets();
} }
); );
this.updateContext({
networkSelectRows: selectedRows,
});
}; };
get nameForStateUpdate() { get nameForStateUpdate() {

View File

@ -191,11 +191,15 @@ export default class CreateIronic extends StepAction {
}; };
renderBadge() { renderBadge() {
const { status } = this.state; const { status = 'success' } = this.state;
if (status === 'success') { if (status === 'success') {
return null; return null;
} }
return <Badge status={status} text={this.msg} />; return (
<div style={{ marginTop: 8, marginBottom: 8 }}>
<Badge status={status} text={this.msg} />
</div>
);
} }
renderFooterLeft() { renderFooterLeft() {
@ -209,13 +213,17 @@ export default class CreateIronic extends StepAction {
formatter: (value) => `$ ${value}`.replace(/\D/g, ''), formatter: (value) => `$ ${value}`.replace(/\D/g, ''),
}; };
return ( return (
<div> <div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div className={styles['number-input']}>
<span>{t('Count')}</span> <span>{t('Count')}</span>
<InputNumber <InputNumber
{...configs} {...configs}
value={count} value={count}
className={classnames(styles.input, 'instance-count')} className={classnames(styles.input, 'instance-count')}
/> />
</div>
</div>
{this.renderBadge()} {this.renderBadge()}
</div> </div>
); );

View File

@ -2,3 +2,6 @@
margin-left: 16px; margin-left: 16px;
margin-right: 32px; margin-right: 32px;
} }
.number-input {
min-width: 165px;
}

View File

@ -150,6 +150,9 @@ export default class NetworkStep extends Base {
this.getSubnets(); this.getSubnets();
} }
); );
this.updateContext({
networkSelectRows: selectedRows,
});
}; };
get nameForStateUpdate() { get nameForStateUpdate() {

View File

@ -180,11 +180,15 @@ class StepCreate extends StepAction {
}; };
renderBadge() { renderBadge() {
const { status } = this.state; const { status = 'success' } = this.state;
if (status === 'success') { if (status === 'success') {
return null; return null;
} }
return <Badge status={status} text={this.msg} />; return (
<div style={{ marginTop: 8, marginBottom: 8 }}>
<Badge status={status} text={this.msg} />
</div>
);
} }
renderFooterLeft() { renderFooterLeft() {
@ -198,13 +202,17 @@ class StepCreate extends StepAction {
formatter: (value) => `$ ${value}`.replace(/\D/g, ''), formatter: (value) => `$ ${value}`.replace(/\D/g, ''),
}; };
return ( return (
<div> <div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div className={styles['number-input']}>
<span>{t('Count')}</span> <span>{t('Count')}</span>
<InputNumber <InputNumber
{...configs} {...configs}
value={count} value={count}
className={classnames(styles.input, 'instance-count')} className={classnames(styles.input, 'instance-count')}
/> />
</div>
</div>
{this.renderBadge()} {this.renderBadge()}
</div> </div>
); );

View File

@ -2,3 +2,6 @@
margin-left: 16px; margin-left: 16px;
margin-right: 32px; margin-right: 32px;
} }
.number-input {
min-width: 165px;
}

View File

@ -32,7 +32,7 @@ import {
import PrimaryActionButtons from 'components/Tables/Base/PrimaryActionButtons'; import PrimaryActionButtons from 'components/Tables/Base/PrimaryActionButtons';
import { ipValidate } from 'utils/validate'; import { ipValidate } from 'utils/validate';
import { toJS } from 'mobx'; import { toJS } from 'mobx';
import { getAnchorData } from 'resources/network'; import { getAnchorData, isExternalNetwork } from 'resources/network';
import styles from './index.less'; import styles from './index.less';
import CreateRouter from '../Router/actions/Create'; import CreateRouter from '../Router/actions/Create';
import CreateNetwork from '../Network/actions/CreateNetwork'; import CreateNetwork from '../Network/actions/CreateNetwork';
@ -219,7 +219,7 @@ export default class Topology extends React.Component {
const { extendWidth } = this.state; const { extendWidth } = this.state;
data.subnetNodes = []; data.subnetNodes = [];
networks.forEach((network) => { networks.forEach((network) => {
if (!network['router:external']) { if (!isExternalNetwork(network)) {
const networkSubnet = []; const networkSubnet = [];
// const firstSubnetY = 250 + (netIndex * 150); // const firstSubnetY = 250 + (netIndex * 150);
const { firstSubnetY } = this.state; const { firstSubnetY } = this.state;