style: tweak proxy page layout style

This commit is contained in:
Haishan 2018-10-21 01:06:49 +08:00
parent 6071ac9381
commit 4646c216a9
3 changed files with 20 additions and 17 deletions

View file

@ -9,7 +9,7 @@ import cx from 'classnames';
import s0 from 'c/Proxies.module.scss';
const th = cx(s0.row, s0.th, 'border-bottom');
const colItem = cx(s0.colItem, 'border-bottom');
// const colItem = cx(s0.colItem, 'border-bottom');
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
@ -82,16 +82,17 @@ class ProxyRow extends Component {
<div className={s0.row}>
<div className={s0.col1}>{name}</div>
<div className={s0.col2}>{type}</div>
<div className={s0.col3}>
{all &&
all.map(p => {
{all ? (
<div className={s0.col3 + ' border-left'}>
{all.map(p => {
return (
<div className={colItem} key={p}>
<div className={s0.colItem} key={p}>
<Proxy name={p} parentName={name} checked={p === now} />
</div>
);
})}
</div>
) : null}
</div>
);
}

View file

@ -31,12 +31,12 @@ $heightHeader: 76px;
.col3 {
width: 350px;
padding: 8px;
margin: 16px 8px;
padding-left: 20px;
}
.colItem {
padding: 8px 0;
height: 44px;
padding: 6px;
}
.btnGroup {

View file

@ -45,7 +45,7 @@ class Proxy extends Component {
render() {
const { name, parentName, checked, switchProxy, delay } = this.props;
const id = parentName + ':' + name;
const latency = delay[name];
const latency = delay[name] || 0;
return (
<label className={s0.Proxy} htmlFor={id}>
<input
@ -56,7 +56,7 @@ class Proxy extends Component {
onChange={this.handleRadioOnChange}
/>
<div className={s0.name}>{name}</div>
{latency ? <LatencyLabel val={latency} /> : null}
<LatencyLabel val={latency} />
</label>
);
}
@ -64,12 +64,13 @@ class Proxy extends Component {
class LatencyLabel extends Component {
static propTypes = {
val: PropTypes.number.isRequired
val: PropTypes.number
};
render() {
const { val } = this.props;
let bg = colorMap.na;
if (val < 100) {
bg = colorMap.good;
} else if (val < 300) {
@ -77,12 +78,13 @@ class LatencyLabel extends Component {
} else {
bg = colorMap.bad;
}
const style = { background: bg };
if (val === 0 || !val) {
style.opacity = '0';
style.visibility = 'hidden';
}
return (
<div
className={s0.LatencyLabel}
style={{
background: bg
}}>
<div className={s0.LatencyLabel} style={style}>
<div>{val}</div>
<div>ms</div>
</div>