From 4646c216a9e5cdc1ec65de872279469988df3ad1 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 21 Oct 2018 01:06:49 +0800
Subject: [PATCH] style: tweak proxy page layout style

---
 src/components/Proxies.js          | 13 +++++++------
 src/components/Proxies.module.scss |  6 +++---
 src/components/Proxy.js            | 18 ++++++++++--------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/Proxies.js b/src/components/Proxies.js
index 1e675a8..2303baf 100644
--- a/src/components/Proxies.js
+++ b/src/components/Proxies.js
@@ -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>
     );
   }
diff --git a/src/components/Proxies.module.scss b/src/components/Proxies.module.scss
index 9652a1e..3b11056 100644
--- a/src/components/Proxies.module.scss
+++ b/src/components/Proxies.module.scss
@@ -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 {
diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index a395c50..a39da57 100644
--- a/src/components/Proxy.js
+++ b/src/components/Proxy.js
@@ -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>