add variant

src/Flows.js

@@ -54,33 +54,45 @@ function load_single_meta(show_sidebar,token) {
     };
 }
 
-function Reply(props) {
+class Reply extends PureComponent {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
         return (
-        <div className={'flow-reply box'} style={props.info._display_color ? {
+            <div className={'flow-reply box'} style={this.props.info._display_color ? {
-            backgroundColor: props.info._display_color,
+                backgroundColor: this.props.info._display_color,
             } : null}>
                 <div className="box-header">
-                <code className="box-id">#{props.info.cid}</code>&nbsp;
+                    <code className="box-id">#{this.props.info.cid}</code>&nbsp;
-                <Time stamp={props.info.timestamp} />
+                    <Time stamp={this.props.info.timestamp} />
                 </div>
                 <div className="box-content">
-                <HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
+                    <HighlightedText text={this.props.info.text} color_picker={this.props.color_picker} show_pid={this.props.show_pid} />
                 </div>
             </div>
         );
+    }
 }
 
-function FlowItem(props) {
+class FlowItem extends PureComponent {
-    function copy_link(event) {
+    constructor(props) {
+        super(props);
+    }
+
+    copy_link(event) {
         event.preventDefault();
         copy(
             `${event.target.href}\n`+
-            `${props.info.text}${props.info.type==='image'?' [图片]':props.info.type==='audio'?' [语音]':''}\n`+
+            `${this.props.info.text}${this.props.info.type==='image'?' [图片]':this.props.info.type==='audio'?' [语音]':''}\n`+
-            `（${format_time(new Date(props.info.timestamp*1000))} ${props.info.likenum}关注 ${props.info.reply}回复）\n`+
+            `（${format_time(new Date(this.props.info.timestamp*1000))} ${this.props.info.likenum}关注 ${this.props.info.reply}回复）\n`+
-            props.replies.map((r)=>(r.text)).join('\n')
+            this.props.replies.map((r)=>(r.text)).join('\n')
         );
     }
 
+    render() {
+        let props=this.props;
         return (
             <div className="flow-item box">
                 {parseInt(props.info.pid,10)>window.LATEST_POST_ID && <div className="flow-item-dot" /> }
@@ -97,7 +109,7 @@ function FlowItem(props) {
                             <span className="icon icon-reply" />
                         </span>
                     }
-                <code className="box-id"><a href={'##'+props.info.pid} onClick={copy_link}>#{props.info.pid}</a></code>
+                    <code className="box-id"><a href={'##'+props.info.pid} onClick={this.copy_link}>#{props.info.pid}</a></code>
                     &nbsp;
                     <Time stamp={props.info.timestamp} />
                 </div>
@@ -115,6 +127,7 @@ function FlowItem(props) {
                 </div>
             </div>
         );
+    }
 }
 
 class FlowSidebar extends PureComponent {
@@ -131,6 +144,29 @@ class FlowSidebar extends PureComponent {
         this.syncState=props.sync_state||(()=>{});
     }
 
+    set_variant(cid,variant) {
+        this.setState((prev)=>{
+            if(cid)
+                return {
+                    replies: prev.replies.map((reply)=>{
+                        if(reply.cid===cid)
+                            return Object.assign({},reply,{variant: variant});
+                        else
+                            return reply;
+                    }),
+                };
+            else
+                return {
+                    info: Object.assign({},prev.info,{variant: variant}),
+                }
+        },function() {
+            this.syncState({
+                info: this.state.info,
+                replies: this.state.replies,
+            });
+        });
+    }
+
     load_replies(update_count=true) {
         this.setState({
             loading_status: 'loading',
@@ -251,7 +287,9 @@ class FlowSidebar extends PureComponent {
                     }
                 </div>
                 <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
-                    color_picker={this.color_picker} show_pid={this.show_pid} replies={this.state.replies} />
+                    color_picker={this.color_picker} show_pid={this.show_pid} replies={this.state.replies}
+                    set_variant={(variant)=>{this.set_variant(null,variant);}}
+                />
                 {(this.props.deletion_detect && parseInt(this.state.info.reply)>this.state.replies.length) &&
                     <div className="box box-tip flow-item box-danger">
                         {parseInt(this.state.info.reply)-this.state.replies.length} 条回复被删除
@@ -259,7 +297,10 @@ class FlowSidebar extends PureComponent {
                 }
                 {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} />
+                        <Reply
+                            info={reply} color_picker={this.color_picker} show_pid={this.show_pid}
+                            set_variant={(variant)=>{this.set_variant(reply.cid,variant);}}
+                        />
                     </LazyLoad>
                 ))}
                 {!!this.props.token ?
@@ -280,6 +321,7 @@ class FlowItemRow extends PureComponent {
             info: props.info,
             attention: false,
         };
+        this.state.info.variant={};
         this.color_picker=new ColorPicker();
         this.show_pid=load_single_meta(this.props.show_sidebar,this.props.token);
     }

src/Title.css

@@ -12,9 +12,16 @@
 
 .title {
     font-size: 1.5em;
-    line-height: 4em;
+    height: 4em;
+    padding-top: 1em;
     text-align: center;
 }
+.title .title-small {
+    opacity: .6;
+    padding-top: .5em;
+    font-size: .5em;
+    line-height: .5em;
+}
 
 .control-bar {
     display: flex;

src/Title.js

@@ -156,13 +156,18 @@ export function Title(props) {
     return (
         <div className="title-bar">
             <div className="aux-margin">
-                <p className="title centered-line">
+                <div className="title">
+                    <p className="centered-line">
                         P大树洞
                         &nbsp;
                         <a href="https://github.com/xmcp/ashole" target="_blank">
                             <span className="icon icon-github" />
                         </a>
                     </p>
+                    <p className="title-small">
+                        非官方网页版 by @xmcp
+                    </p>
+                </div>
                 <ControlBar show_sidebar={props.show_sidebar} set_mode={props.set_mode} />
             </div>
         </div>

src/flows_api.js

@@ -22,6 +22,7 @@ export const API={
                     })
                     .map((info)=>{
                         info._display_color=color_picker.get(info.name);
+                        info.variant={};
                         return info;
                     });