newthuhole
/
hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity
Browse Source

add variant

dev
xmcp 6 years ago
parent
87f24e3085
commit
df716f72d5
4 changed files with 116 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 148
      src/Flows.js
  2. 9
      src/Title.css
  3. 19
      src/Title.js
  4. 1
      src/flows_api.js

148
src/Flows.js
Unescape View File

@ -54,67 +54,80 @@ function load_single_meta(show_sidebar,token) {
};
}
function Reply(props) {
return (
<div className={'flow-reply box'} style={props.info._display_color ? {
backgroundColor: props.info._display_color,
} : null}>
<div className="box-header">
<code className="box-id">#{props.info.cid}</code>&nbsp;
<Time stamp={props.info.timestamp} />
</div>
<div className="box-content">
<HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
class Reply extends PureComponent {
constructor(props) {
super(props);
}
render() {
return (
<div className={'flow-reply box'} style={this.props.info._display_color ? {
backgroundColor: this.props.info._display_color,
} : null}>
<div className="box-header">
<code className="box-id">#{this.props.info.cid}</code>&nbsp;
<Time stamp={this.props.info.timestamp} />
</div>
<div className="box-content">
<HighlightedText text={this.props.info.text} color_picker={this.props.color_picker} show_pid={this.props.show_pid} />
</div>
</div>
</div>
);
);
}
}
function FlowItem(props) {
function copy_link(event) {
class FlowItem extends PureComponent {
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`+
`（${format_time(new Date(props.info.timestamp*1000))} ${props.info.likenum}关注 ${props.info.reply}回复）\n`+
props.replies.map((r)=>(r.text)).join('\n')
`${this.props.info.text}${this.props.info.type==='image'?' [图片]':this.props.info.type==='audio'?' [语音]':''}\n`+
`（${format_time(new Date(this.props.info.timestamp*1000))} ${this.props.info.likenum}关注 ${this.props.info.reply}回复）\n`+
this.props.replies.map((r)=>(r.text)).join('\n')
);
}
return (
<div className="flow-item box">
{parseInt(props.info.pid,10)>window.LATEST_POST_ID && <div className="flow-item-dot" /> }
<div className="box-header">
{!!parseInt(props.info.likenum,10) &&
<span className="box-header-badge">
{props.info.likenum}&nbsp;
<span className={'icon icon-'+(props.attention ? 'star-ok' : 'star')} />
</span>
}
{!!parseInt(props.info.reply,10) &&
<span className="box-header-badge">
{props.info.reply}&nbsp;
<span className="icon icon-reply" />
</span>
}
<code className="box-id"><a href={'##'+props.info.pid} onClick={copy_link}>#{props.info.pid}</a></code>
&nbsp;
<Time stamp={props.info.timestamp} />
</div>
<div className="box-content">
<HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
{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} />}
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" /> }
<div className="box-header">
{!!parseInt(props.info.likenum,10) &&
<span className="box-header-badge">
{props.info.likenum}&nbsp;
<span className={'icon icon-'+(props.attention ? 'star-ok' : 'star')} />
</span>
}
{!!parseInt(props.info.reply,10) &&
<span className="box-header-badge">
{props.info.reply}&nbsp;
<span className="icon icon-reply" />
</span>
}
<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>
<div className="box-content">
<HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
{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>
</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);
}

9
src/Title.css
Unescape View File

@ -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;

19
src/Title.js
Unescape View File

@ -156,13 +156,18 @@ export function Title(props) {
return (
<div className="title-bar">
<div className="aux-margin">
<p className="title centered-line">
P大树洞
&nbsp;
<a href="https://github.com/xmcp/ashole" target="_blank">
<span className="icon icon-github" />
</a>
</p>
<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>

1
src/flows_api.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save