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

ux update

Browse Source
This commit is contained in:
xmcp
2019-10-04 17:52:56 +08:00
parent d3f296d8eb
commit cc6cd54185
5 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Common.css
View File

@@ -55,7 +55,6 @@
font-size: .9em;
vertical-align: .05em;
cursor: inherit;
}
.icon+label::before {
content: ' ';
padding: 0 .1rem;
margin-left: .15rem;
}

33
src/Flows.js
View File

@@ -342,6 +342,15 @@ class FlowSidebar extends PureComponent {
replies_cnt[r.name]++;
});
let main_thread_elem=(
<ClickHandler callback={(e)=>{this.show_reply_bar('',e);}}>
<FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
color_picker={this.color_picker} show_pid={show_pid} replies={this.state.replies}
set_variant={(variant)=>{this.set_variant(null,variant);}}
/>
</ClickHandler>
);
return (
<div className="flow-item-row sidebar-flow-item">
<div className="box box-tip">
@@ -356,10 +365,14 @@ class FlowSidebar extends PureComponent {
<a onClick={this.load_replies.bind(this)}>
<span className="icon icon-refresh" /><label>刷新</label>
</a>
&nbsp;&nbsp;
<a onClick={this.toggle_rev.bind(this)}>
<span className="icon icon-order-rev" /><label>{this.state.rev ? '还原' : '逆序'}</label>
</a>
{(this.state.replies.length>1 || this.state.rev) &&
<span>
&nbsp;&nbsp;
<a onClick={this.toggle_rev.bind(this)}>
<span className="icon icon-order-rev" /><label>{this.state.rev ? '还原' : '逆序'}</label>
</a>
</span>
}
{!!this.props.token &&
<span>
&nbsp;&nbsp;
@@ -374,12 +387,9 @@ class FlowSidebar extends PureComponent {
</span>
}
</div>
<ClickHandler callback={(e)=>{this.show_reply_bar('',e);}}>
<FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
color_picker={this.color_picker} show_pid={show_pid} replies={this.state.replies}
set_variant={(variant)=>{this.set_variant(null,variant);}}
/>
</ClickHandler>
{!this.state.rev &&
main_thread_elem
}
{!!this.state.error_msg &&
<div className="box box-tip flow-item">
<p>回复加载失败</p>
@@ -411,6 +421,9 @@ class FlowSidebar extends PureComponent {
</ClickHandler>
</LazyLoad>
))}
{this.state.rev &&
main_thread_elem
}
{!!this.props.token ?
<ReplyForm pid={this.state.info.pid} token={this.props.token}
area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> :

2
src/Sidebar.js
View File

@@ -23,7 +23,7 @@ export class Sidebar extends PureComponent {
{this.props.content}
</div>
<div className="sidebar-title">
<a onClick={this.props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
<a className="no-underline" onClick={this.props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
{this.props.title}
</div>
</div>

8
src/Title.js
View File

@@ -130,18 +130,18 @@ class ControlBar extends PureComponent {
return (
<TokenCtx.Consumer>{({value: token})=>(
<div className="control-bar">
<a className="control-btn" onClick={this.do_refresh_bound}>
<a className="no-underline control-btn" onClick={this.do_refresh_bound}>
<span className="icon icon-refresh" />
</a>
{!!token &&
<a className="control-btn" onClick={this.do_attention_bound}>
<a className="no-underline control-btn" onClick={this.do_attention_bound}>
<span className="icon icon-attention" />
</a>
}
<input className="control-search" value={this.state.search_text} placeholder="搜索 或 #PID"
onChange={this.on_change_bound} onKeyPress={this.on_keypress_bound}
/>
<a className="control-btn" onClick={()=>{
<a className="no-underline control-btn" onClick={()=>{
this.props.show_sidebar(
'P大树洞',
<div>
@@ -170,7 +170,7 @@ class ControlBar extends PureComponent {
<span className={'icon icon-'+(token ? 'about' : 'login')} />
</a>
{!!token &&
<a className="control-btn" onClick={()=>{
<a className="no-underline control-btn" onClick={()=>{
this.props.show_sidebar(
'发表树洞',
<PostForm token={token} on_complete={()=>{

15
src/index.css
View File

@@ -15,12 +15,19 @@ html {
scrollbar-width: none;
}
a {
color: #00c;
:root {
--var-link-color: #00c;
}
.root-dark-mode .left-container, .root-dark-mode .sidebar, .root-dark-mode .sidebar-title, .root-dark-mode .balance-popover {
--var-link-color: #9bf;
}
.root-dark-mode .left-container a, .root-dark-mode .sidebar a, .root-dark-mode .sidebar-title a, .root-dark-mode .balance-popover a {
color: #9bf;
a {
color: var(--var-link-color);
}
a:not(.no-underline):hover {
border-bottom: 1px solid var(--var-link-color);
margin-bottom: -1px;
}
input, textarea {