Merge "fix: Fix styles in Form & renderBadge & external network"

This commit is contained in:
Zuul 2021-08-26 09:24:48 +00:00 committed by Gerrit Code Review
commit fdaf0ac24b
10 changed files with 68 additions and 26 deletions

View File

@ -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;
}

View File

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

View File

@ -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;
}

View File

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

View File

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

View File

@ -1,4 +1,7 @@
.input {
margin-left: 16px;
margin-right: 32px;
}
.number-input {
min-width: 165px;
}

View File

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

View File

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

View File

@ -1,4 +1,7 @@
.input {
margin-left: 16px;
margin-right: 32px;
}
.number-input {
min-width: 165px;
}

View File

@ -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;