From 2fdca507626d961d183a89cd986cb4caec51bc2f Mon Sep 17 00:00:00 2001 From: xmcp Date: Fri, 10 Jan 2020 00:43:31 +0800 Subject: [PATCH] improvements - add sidebar-stack - add control-btn-label - better locating dz - enable reply_rev when 1 reply - replace latest_post_id when page=1 --- public/index.html | 2 +- public/static/fonts_7/icomoon.css | 101 +++++++++++++++++++++++++++++ public/static/fonts_7/icomoon.svg | 34 ++++++++++ public/static/fonts_7/icomoon.ttf | Bin 0 -> 5740 bytes public/static/fonts_7/icomoon.woff | Bin 0 -> 5816 bytes src/App.js | 48 +++++++++----- src/Flows.js | 72 ++++++++++---------- src/Sidebar.js | 25 +++++-- src/Title.css | 18 +++-- src/Title.js | 4 ++ 10 files changed, 236 insertions(+), 68 deletions(-) create mode 100644 public/static/fonts_7/icomoon.css create mode 100644 public/static/fonts_7/icomoon.svg create mode 100644 public/static/fonts_7/icomoon.ttf create mode 100644 public/static/fonts_7/icomoon.woff diff --git a/public/index.html b/public/index.html index d33c801..77e5f14 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/static/fonts_7/icomoon.css b/public/static/fonts_7/icomoon.css new file mode 100644 index 0000000..5004159 --- /dev/null +++ b/public/static/fonts_7/icomoon.css @@ -0,0 +1,101 @@ +@font-face { + font-family: 'icomoon'; + src: + url('icomoon.ttf?8qh3rt') format('truetype'), + url('icomoon.woff?8qh3rt') format('woff'), + url('icomoon.svg?8qh3rt#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +.icon { + /* use !important to prevent issues with browser extensions that change fonts */ + /*noinspection CssNoGenericFontName*/ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + vertical-align: -.0625em; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-send:before { + content: "\e900"; +} +.icon-textfile:before { + content: "\e926"; +} +.icon-history:before { + content: "\e94d"; +} +.icon-reply:before { + content: "\e96b"; +} +.icon-quote:before { + content: "\e977"; +} +.icon-loading:before { + content: "\e979"; +} +.icon-login:before { + content: "\e98d"; +} +.icon-settings:before { + content: "\e994"; +} +.icon-stats:before { + content: "\e99b"; +} +.icon-locate:before { + content: "\e9b3"; +} +.icon-upload:before { + content: "\e9c3"; +} +.icon-flag:before { + content: "\e9cc"; +} +.icon-attention:before { + content: "\e9d3"; +} +.icon-star:before { + content: "\e9d7"; +} +.icon-star-ok:before { + content: "\e9d9"; +} +.icon-plus:before { + content: "\ea0a"; +} +.icon-about:before { + content: "\ea0c"; +} +.icon-close:before { + content: "\ea0d"; +} +.icon-logout:before { + content: "\ea14"; +} +.icon-refresh:before { + content: "\ea2e"; +} +.icon-forward:before { + content: "\ea42"; +} +.icon-back:before { + content: "\ea44"; +} +.icon-order-rev:before { + content: "\ea46"; + font-size: 1.2em; +} +.icon-github:before { + content: "\eab0"; +} diff --git a/public/static/fonts_7/icomoon.svg b/public/static/fonts_7/icomoon.svg new file mode 100644 index 0000000..2482297 --- /dev/null +++ b/public/static/fonts_7/icomoon.svg @@ -0,0 +1,34 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/static/fonts_7/icomoon.ttf b/public/static/fonts_7/icomoon.ttf new file mode 100644 index 0000000000000000000000000000000000000000..20a0e3860dc6afa9e892a3fca4f496fdc7506820 GIT binary patch literal 5740 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 KByh^lZT|x;d0Vjn literal 0 HcmV?d00001 diff --git a/src/App.js b/src/App.js index 4ec35e8..85058a5 100644 --- a/src/App.js +++ b/src/App.js @@ -17,8 +17,7 @@ class App extends Component { load_config(); listen_darkmode({default: undefined, light: false, dark: true}[window.config.color_scheme]); this.state={ - sidebar_title: null, - sidebar_content: null, // determine status of sidebar + sidebar_stack: [[null,null]], // list of [status, content] mode: 'list', // list, single, search, attention search_text: null, flow_render_key: +new Date(), @@ -41,20 +40,39 @@ class App extends Component { } on_pressure() { - if(this.state.sidebar_title!==null) - this.setState((prevState)=>({ - sidebar_title: null, - sidebar_content: prevState.sidebar_content, - })); + if(this.state.sidebar_stack.length>1) + this.show_sidebar(null,null,'clear'); else this.set_mode('list',null); } - show_sidebar(title,content) { - this.setState({ - sidebar_title: title, - sidebar_content: content, - }); + show_sidebar(title,content,mode='push') { + if(mode==='push') { + this.setState((prevState)=>({ + sidebar_stack: prevState.sidebar_stack.concat([[title,content]]), + })); + } else if(mode==='pop') { + this.setState((prevState)=>{ + let ns=prevState.sidebar_stack.slice(); + ns.pop(); + return { + sidebar_stack: ns, + }; + }); + } else if(mode==='replace') { + this.setState((prevState)=>{ + let ns=prevState.sidebar_stack.slice(); + ns.pop(); + return { + sidebar_stack: ns.concat([[title,content]]), + }; + }); + } else if(mode==='clear') { + this.setState({ + sidebar_stack: [[null,null]], + }); + } else + throw new Error('bad show_sidebar mode'); } set_mode(mode,search_text) { @@ -102,11 +120,7 @@ class App extends Component {
)} - { - this.setState({ - sidebar_title: null, - }); - }} content={this.state.sidebar_content} title={this.state.sidebar_title} /> + ); } diff --git a/src/Flows.js b/src/Flows.js index b376263..a0ffbc3 100644 --- a/src/Flows.js +++ b/src/Flows.js @@ -19,10 +19,12 @@ const QUOTE_BLACKLIST=['23333','233333','66666','666666','10086','10000','100000 window.LATEST_POST_ID=parseInt(localStorage['_LATEST_POST_ID'],10)||0; +const DZ_NAME='洞主'; + function load_single_meta(show_sidebar,token,parents) { return (pid)=>{ - let title_elem=; - const color_picker=new ColorPicker(); + let color_picker=new ColorPicker(); + let title_elem='树洞 #'+pid; show_sidebar( title_elem,
@@ -46,7 +48,8 @@ function load_single_meta(show_sidebar,token,parents) { info={single.data} replies={replies.data} attention={replies.attention} token={token} show_sidebar={show_sidebar} color_picker={color_picker} deletion_detect={localStorage['DELETION_DETECT']==='on'} parents={parents} - /> + />, + 'replace' ) }) .catch((e)=>{ @@ -56,7 +59,8 @@ function load_single_meta(show_sidebar,token,parents) { +
, + 'replace' ); }) }; @@ -142,6 +146,11 @@ class FlowItem extends PureComponent {
}
+ {!!this.props.do_filter_name && + {this.props.do_filter_name(DZ_NAME);}}> + + + } {!!parseInt(props.info.likenum,10) && {props.info.likenum}  @@ -334,18 +343,20 @@ class FlowSidebar extends PureComponent { // key for lazyload elem let view_mode_key=(this.state.rev ? 'y-' : 'n-')+(this.state.filter_name||'null'); - let replies_cnt={}; + let replies_cnt={[DZ_NAME]:1}; replies_to_show.forEach((r)=>{ if(replies_cnt[r.name]===undefined) replies_cnt[r.name]=0; replies_cnt[r.name]++; }); - let main_thread_elem=( + // hide main thread when filtered + let main_thread_elem=(this.state.filter_name && this.state.filter_name!==DZ_NAME) ? null : ( {this.show_reply_bar('',e);}}> {this.set_variant(null,variant);}} + do_filter_name={replies_cnt[DZ_NAME]>1 ? this.set_filter_name.bind(this) : null} /> ); @@ -364,7 +375,7 @@ class FlowSidebar extends PureComponent { - {(this.state.replies.length>1 || this.state.rev) && + {(this.state.replies.length>=1 || this.state.rev) &&    @@ -386,6 +397,15 @@ class FlowSidebar extends PureComponent { }
+ {!!this.state.filter_name && +
+

+ {this.set_filter_name(null)}}>还原 +  当前只看  + {this.state.filter_name} +

+
+ } {!this.state.rev && main_thread_elem } @@ -400,15 +420,6 @@ class FlowSidebar extends PureComponent { {parseInt(this.state.info.reply)-this.state.replies.length} 条回复被删除
} - {!!this.state.filter_name && -
-

- {this.set_filter_name(null)}}>还原 -  当前只看  - {this.state.filter_name} -

-
- } {replies_to_show.map((reply)=>( {this.show_reply_bar(reply.name,e);}}> @@ -433,24 +444,6 @@ class FlowSidebar extends PureComponent { } } -function FlowSidebarTitle(props) { - let last_pid=props.parents.length ? props.parents[props.parents.length-1] : null; - return ( - - 树洞  - {!!last_pid && - - load_single_meta(props.show_sidebar,props.token,props.parents.slice(0,-1))(last_pid)}> - #{last_pid} - -  →  - - } - #{props.pid} - - ); -} - class FlowItemRow extends PureComponent { constructor(props) { super(props); @@ -499,7 +492,7 @@ class FlowItemRow extends PureComponent { show_sidebar() { this.props.show_sidebar( - , + '树洞 #'+this.state.info.pid, { - if(page===1) + if(page===1 && json.data.length) { // update latest_post_id + let max_id=-1; json.data.forEach((x)=>{ - if(parseInt(x.pid,10)>(parseInt(localStorage['_LATEST_POST_ID'],10)||0)) - localStorage['_LATEST_POST_ID']=x.pid; + if(parseInt(x.pid,10)>max_id) + max_id=parseInt(x.pid,10); }); + localStorage['_LATEST_POST_ID']=''+max_id; + } this.setState((prev,props)=>({ chunks: { title: 'News Feed', diff --git a/src/Sidebar.js b/src/Sidebar.js index cec5f9b..31aa58d 100644 --- a/src/Sidebar.js +++ b/src/Sidebar.js @@ -5,26 +5,39 @@ export class Sidebar extends PureComponent { constructor(props) { super(props); this.sidebar_ref=React.createRef(); + this.do_close_bound=this.do_close.bind(this); + this.do_back_bound=this.do_back.bind(this); } componentDidUpdate(nextProps) { - if(this.props.content!==nextProps.content) { + if(this.props.stack!==nextProps.stack) { //console.log('sidebar top'); if(this.sidebar_ref.current) this.sidebar_ref.current.scrollTop=0; } } + do_close() { + this.props.show_sidebar(null,null,'clear'); + } + do_back() { + this.props.show_sidebar(null,null,'pop'); + } + render() { + let [cur_title,cur_content]=this.props.stack[this.props.stack.length-1]; return ( -
-
{e.preventDefault();e.target.click();}} /> +
+
{e.preventDefault();e.target.click();}} />
- {this.props.content} + {cur_content}
-    - {this.props.title} +    + {this.props.stack.length>2 && +    + } + {cur_title}
); diff --git a/src/Title.css b/src/Title.css index 330780e..c493e28 100644 --- a/src/Title.css +++ b/src/Title.css @@ -23,7 +23,7 @@ } .control-btn { - flex: 0 0 2em; + flex: 0 0 4.5em; text-align: center; color: black; border-radius: 5px; @@ -32,6 +32,17 @@ background-color: #555555; color: white; } +.control-btn-label { + margin-left: .25em; +} +@media screen and (max-width: 900px) { + .control-btn { + flex: 0 0 2em; + } + .control-btn-label { + display: none; + } +} .root-dark-mode .control-btn { color: var(--foreground-dark); @@ -42,11 +53,6 @@ opacity: 1; } -.control-btn .icon:before { - margin: .5em; - display: inline-block; -} - .control-search { flex: auto; color: black; diff --git a/src/Title.js b/src/Title.js index 063737c..253121d 100644 --- a/src/Title.js +++ b/src/Title.js @@ -132,10 +132,12 @@ class ControlBar extends PureComponent {