style: tweak proxy page layout style
This commit is contained in:
parent
6071ac9381
commit
4646c216a9
3 changed files with 20 additions and 17 deletions
|
@ -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>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue