From 32883e4bbdbf26f9bd99bd2fa62089d51c8e4cc9 Mon Sep 17 00:00:00 2001
From: xmcp <xiaoyuanan2000@sina.com>
Date: Sun, 26 Aug 2018 23:11:43 +0800
Subject: [PATCH] improve

---
 src/Common.js     |  2 +-
 src/Flows.css     |  4 ++--
 src/Flows.js      | 17 +++++++++++++----
 src/UserAction.js |  4 ++--
 src/flows_api.js  | 12 +++++++++---
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/Common.js b/src/Common.js
index a824e61..2099328 100644
--- a/src/Common.js
+++ b/src/Common.js
@@ -46,7 +46,7 @@ export class HighlightedText extends PureComponent {
                 <pre>
                     {parts.map((p,idx)=>(
                         <span key={idx}>{
-                            PID_RE.test(p) ? <a onClick={()=>{this.props.show_pid(p)}}>{p}</a> :
+                            PID_RE.test(p) ? <a href={'##'+p} onClick={(e)=>{e.preventDefault(); this.props.show_pid(p);}}>{p}</a> :
                             NICKNAME_RE.test(p) ? <span style={{backgroundColor: this.props.color_picker.get(p)}}>{p}</span> :
                             p
                         }</span>
diff --git a/src/Flows.css b/src/Flows.css
index 09759fd..e3d9bd4 100644
--- a/src/Flows.css
+++ b/src/Flows.css
@@ -23,7 +23,7 @@
     align-items: flex-start;
     width: calc(100% - 625px);
     margin-left: -25px;
-    padding-left: 20px;
+    padding-left: 18px;
     overflow-x: auto;
 }
 
@@ -63,7 +63,7 @@
 .left-container .flow-reply {
     flex: 0 0 300px;
     max-height: 15em;
-    margin-right: -5px;
+    margin-right: -7px;
     overflow-y: hidden;
 }
 
diff --git a/src/Flows.js b/src/Flows.js
index bfd1c4d..e3a48a5 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -94,8 +94,15 @@ function FlowItem(props) {
                 <Time stamp={props.info.timestamp} />
             </div>
             <HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
-            {props.info.type==='image' ? <p className="img"><img src={IMAGE_BASE+props.info.url} /></p> : null}
-            {props.info.type==='audio' ? <AudioWidget src={AUDIO_BASE+props.info.url} /> : null}
+            {props.info.type==='image' &&
+                <p className="img">
+                    {props.img_clickable ?
+                        <a href={IMAGE_BASE+props.info.url} target="_blank"><img src={IMAGE_BASE+props.info.url} /></a> :
+                        <img src={IMAGE_BASE+props.info.url} />
+                    }
+                </p>
+            }
+            {props.info.type==='audio' && <AudioWidget src={AUDIO_BASE+props.info.url} />}
         </div>
     );
 }
@@ -209,7 +216,8 @@ class FlowSidebar extends PureComponent {
                         </span>
                     }
                 </div>
-                <FlowItem info={this.state.info} color_picker={this.color_picker} attention={this.state.attention} show_pid={this.show_pid} />
+                <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
+                    color_picker={this.color_picker} show_pid={this.show_pid} />
                 {this.state.replies.map((reply)=>(
                     <LazyLoad key={reply.cid} offset={500} height="5em" overflow={true} once={true}>
                         <Reply info={reply} color_picker={this.color_picker} show_pid={this.show_pid} />
@@ -283,7 +291,8 @@ class FlowItemRow extends PureComponent {
                 if(!CLICKABLE_TAGS[event.target.tagName.toLowerCase()])
                     this.show_sidebar();
             }}>
-                <FlowItem info={this.state.info} color_picker={this.color_picker} attention={this.state.attention} show_pid={this.show_pid} />
+                <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={false}
+                    color_picker={this.color_picker} show_pid={this.show_pid} />
                 <div className="flow-reply-row">
                     {this.state.reply_status==='loading' && <div className="box box-tip">加载中</div>}
                     {this.state.reply_status==='failed' &&
diff --git a/src/UserAction.js b/src/UserAction.js
index 36655a0..ce02879 100644
--- a/src/UserAction.js
+++ b/src/UserAction.js
@@ -5,8 +5,8 @@ import './UserAction.css';
 
 import {API_BASE} from './Common';
 const LOGIN_BASE=window.location.protocol==='https:' ? '/login_proxy' : 'http://www.pkuhelper.com/services/login';
-const MAX_IMG_PX=1000;
-const MAX_IMG_FILESIZE=100000;
+const MAX_IMG_PX=2000;
+const MAX_IMG_FILESIZE=256000;
 
 export const TokenCtx=React.createContext({
     value: null,
diff --git a/src/flows_api.js b/src/flows_api.js
index 2d85ddd..542aabc 100644
--- a/src/flows_api.js
+++ b/src/flows_api.js
@@ -100,8 +100,10 @@ export const API={
         )
             .then((res)=>res.json())
             .then((json)=>{
-                if(json.code!==0)
+                if(json.code!==0) {
+                    if(json.msg) alert(json.msg);
                     throw new Error(json);
+                }
                 return json;
             });
     },
@@ -114,8 +116,10 @@ export const API={
         )
             .then((res)=>res.json())
             .then((json)=>{
-                if(json.code!==0)
+                if(json.code!==0) {
+                    if(json.msg) alert(json.msg);
                     throw new Error(json);
+                }
                 return json;
             });
     },
@@ -127,8 +131,10 @@ export const API={
         )
             .then((res)=>res.json())
             .then((json)=>{
-                if(json.code!==0)
+                if(json.code!==0) {
+                    if(json.msg) alert(json.msg);
                     throw new Error(json);
+                }
                 return json;
             });
     }