Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-28 19:22:31 +01:00
Code Issues Projects Releases Wiki Activity

improvement (UI): incremental improvements

Browse source
This commit is contained in:
Mickael Kerjean 2018-07-30 22:08:20 +10:00
parent 9a25fa5452
commit 6b428ec1ab
4 changed files with 42 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/components/dropdown.scss
View file

@ -10,7 +10,18 @@
text-align: center;
}
.dropdown_container{
padding-top: 3px;
&:before{
content: ' ';
position: absolute;
right: 10px;
top: 1px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
padding-top: 5px;
z-index: 3;
ul{
margin: 0;

17
client/pages/filespage.js
View file

@ -12,6 +12,7 @@ import { BreadCrumb, FileSystem, FrequentlyAccess } from './filespage/';
import InfiniteScroll from 'react-infinite-scroller';
const PAGE_NUMBER_INIT = 3;
const LOAD_PER_SCROLL = 24;
@EventReceiver
@DragDropContext(('ontouchstart' in window)? HTML5Backend : HTML5Backend)
@ -83,6 +84,11 @@ export class FilesPage extends React.Component {
e.preventDefault();
this.setState({show_hidden: !this.state.show_hidden}, () => {
settings_put('filespage_show_hidden', this.state.show_hidden);
if(!!this.state.show_hidden){
notify.send("Display hidden files", 'info');
}else{
notify.send("Hide hidden files", 'info');
}
});
this.onRefresh();
}
@ -168,17 +174,24 @@ export class FilesPage extends React.Component {
}
render() {
let $moreLoading = ( <div className="infinite_scroll_loading" key={-1}><Loader/></div> );
if(this.state.files.length <= this.state.page_number * LOAD_PER_SCROLL){
$moreLoading = null;
}
return (
<div className="component_page_filespage">
<BreadCrumb className="breadcrumb" path={this.state.path} />
<div className="page_container">
<div className="scroll-y">
<InfiniteScroll pageStart={0} hasMore={this.state.files.length > 70} initialLoad={false} useWindow={false} loadMore={this.loadMore.bind(this)} threshold={40} loader={<div className="infinite_scroll_loading" key={-1}><Loader/></div>}>
<InfiniteScroll pageStart={0} loader={$moreLoading} hasMore={this.state.files.length > 70}
initialLoad={false} useWindow={false} loadMore={this.loadMore.bind(this)} threshold={40}>
<NgIf className="container" cond={this.state.loading === false && this.state.error === null}>
<NgIf cond={this.state.path === '/'}>
<FrequentlyAccess files={this.state.frequents}/>
</NgIf>
<FileSystem path={this.state.path} sort={this.state.sort} view={this.state.view} onSort={this.onSort.bind(this)} onView={this.onView.bind(this)} files={this.state.files.slice(0, this.state.page_number * 24)} metadata={this.state.metadata} />
<FileSystem path={this.state.path} sort={this.state.sort} view={this.state.view}
files={this.state.files.slice(0, this.state.page_number * LOAD_PER_SCROLL)}
metadata={this.state.metadata} onSort={this.onSort.bind(this)} onView={this.onView.bind(this)} />
<Uploader path={this.state.path} />
</NgIf>
</InfiniteScroll>

15
client/pages/filespage/thing.scss
View file

@ -7,7 +7,20 @@
color: var(--light);
margin: 5px 0 10px 0;
> div, > span{cursor: pointer; margin-right: 15px;}
/* Create Buttons */
> span {
border-radius: 2px;
padding: 3px 5px;
cursor: pointer;
margin-right: 5px;
&:hover{
transtion: 0.15s ease-out background;
background: white;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
}
> div {cursor: pointer; margin-right: 15px;}
.view{
float: right;
padding: 2px;

2
client/pages/viewerpage/org_viewer.js
View file

@ -274,7 +274,7 @@ class OrgViewer extends React.Component {
{
({isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight}) => {
return (
<div className="sticky_header no-select" style={{...style, overflow: "auto", background: "white"}}>
<div className="sticky_header no-select" style={{...style, overflow: "auto", background: "white", zIndex: 4}}>
<h2>{list} <span>{this.state.headlines[list].length}</span></h2>
</div>
);