github/filestash
4
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2024-04-21 12:32:08 +00:00
Code Issues Releases Wiki Activity

improvement (ui): improve quick access bar

Browse Source
This commit is contained in:
Mickael KERJEAN
2019-03-15 11:42:50 +11:00
parent e9786ada96
commit 3246447da2
3 changed files with 66 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/pages/filespage.js
+1 -1
View File
@@ -40,7 +40,7 @@ export class FilesPage extends React.Component {
files: [],
search_loading: false,
metadata: null,
frequents: [],
frequents: null,
page_number: PAGE_NUMBER_INIT,
loading: true
};
client/pages/filespage/frequently_access.js
+26 -24
View File
@@ -14,31 +14,33 @@ export class FrequentlyAccess extends React.Component {
render(){
return (
<ReactCSSTransitionGroup transitionName="frequent-access" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={300}>
<div className="component_frequently-access">
<Container>
<span className="caption">Quick Access</span>
<div className="frequent_wrapper">
{
this.props.files.map(function(path, index){
return (
<Link key={path} to={"/files"+path+window.location.search}>
<Icon name={'directory'} />
<div>{Path.basename(path)}</div>
</Link>
);
})
}
</div>
<NgIf cond={this.props.files.length === 0} className="nothing_placeholder">
<svg aria-hidden="true" focusable="false" data-icon="layer-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path>
</svg>
Frequently access folders will be shown here
</NgIf>
<div className="component_frequently-access">
<ReactCSSTransitionGroup transitionName="frequent-access" transitionLeave={false} transitionEnter={true} transitionAppear={true} transitionEnterTimeout={500} transitionAppearTimeout={300}>
<Container key={this.props.files === null ? 'nothing' : 'something'}>
<NgIf cond={!!this.props.files && this.props.files.length > 0}>
<span className="caption">Quick Access</span>
<div className="frequent_wrapper">
{
this.props.files && this.props.files.map(function(path, index){
return (
<Link key={path} to={"/files"+path+window.location.search}>
<Icon name={'directory'} />
<div>{Path.basename(path)}</div>
</Link>
);
})
}
</div>
</NgIf>
<NgIf cond={!!this.props.files && this.props.files.length === 0} className="nothing_placeholder">
<svg aria-hidden="true" focusable="false" data-icon="layer-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path>
</svg>
Frequently access folders will be shown here
</NgIf>
</Container>
</div>
</ReactCSSTransitionGroup>
</ReactCSSTransitionGroup>
</div>
);
}
}
client/pages/filespage/frequently_access.scss
+39 -6
View File
@@ -1,4 +1,12 @@
.component_frequently-access{
min-height: 110px;
margin-top: 5px;
.component_container{
padding: 0;
}
.component_icon{
height: 25px;
}
.caption{
letter-spacing: 0.06em;
display: inline-block;
@@ -38,7 +46,7 @@
@media (max-width: 450px){ a:nth-child(3){display: none;} }
}
.nothing_placeholder{
padding: 20px;
padding: 15px;
text-align: center;
background: var(--super-light);
border: 1px dashed rgba(0,0,0,0.1);
@@ -47,9 +55,9 @@
font-weight: 100;
svg{
display: block;
width: 50px;
width: 45px;
margin: 0 auto;
padding-bottom: 10px;
padding-bottom: 5px;
}
}
}
@@ -62,10 +70,35 @@
.frequent-access-appear{
opacity: 0;
transform: translateX(5px);
transition: opacity 0.3s ease-out;
.frequent_wrapper a{
transition: all 0.3s ease-out;
opacity: 0;
transform: translateX(5px);
}
}
.frequent-access-appear.frequent-access-appear-active{
opacity: 1;
transform: translateX(0px);
transition: all 0.3s ease-out;
.frequent_wrapper a{
transform: translateX(0px);
opacity: 1;
}
}
.frequent-access-enter{
opacity: 0;
transition: opacity 0.5s ease-out;
.frequent_wrapper a{
transition: all 0.3s ease-out;
transition-delay: 0.2s;
opacity: 0;
transform: translateY(-5px);
}
}
.frequent-access-enter.frequent-access-enter-active{
opacity: 1;
transition: opacity 0.5s ease-out;
.frequent_wrapper a{
transform: translateY(0px);
opacity: 1;
}
}