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

feature (breadcrumb): adapt how paths are rendered in the breadcrumb

Browse source
This commit is contained in:
Mickael KERJEAN 2018-04-09 14:46:42 +10:00
parent 0eb59521ab
commit 24592be54b
2 changed files with 42 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
client/components/breadcrumb.js
View file

@ -25,11 +25,20 @@ export class BreadCrumb extends React.Component {
}
paths = paths.map((path, index) => {
let sub_path = paths.slice(0, index+1).join('/'),
label = path === ''? 'Nuage' : path;
label = path === '' ? 'Nuage' : path;
if(index === paths.length - 1){
return {full: null, label: label};
}else{
return {full: sub_path+'/', label: label};
return {
full: sub_path+'/',
label: label,
minify: function(){
if(index === 0){ return false; }
if(paths.length <= (document.body.clientWidth > 800 ? 5 : 4)){ return false; }
if(index > paths.length - (document.body.clientWidth > 1000? 4 : 3)) return false;
return true;
}()
};
}
});
return paths;
@ -105,8 +114,8 @@ export class PathElementWrapper extends React.Component {
}
limitSize(str){
if(str.length > 30){
return str.substring(0,23)+'...';
if(str.length > 27){
return str.substring(0,20)+'...';
}
return str;
}
@ -118,7 +127,15 @@ export class PathElementWrapper extends React.Component {
<li className={className}>
<NgIf cond={this.props.isLast === false}>
<Link to={"/files" + this.props.path.full || "/"} className="label">
{this.limitSize(this.props.path.label)}
<NgIf cond={this.props.path.minify !== true}>
{this.limitSize(this.props.path.label)}
</NgIf>
<NgIf cond={this.props.path.minify === true}>
...
<span className="title">
{this.limitSize(this.props.path.label)}
</span>
</NgIf>
</Link>
<Separator/>
</NgIf>

22
client/components/breadcrumb.scss
View file

@ -35,7 +35,20 @@
.component_path-element{
display: inline-block;
.label{color: var(--color);padding: 2px 5px;}
a.label{color: var(--light);}
a.label{
color: var(--light);
span.title{
position: absolute;
background: var(--bg-color);
opacity: 0;
transform: translateY(5px);
border-radius: 2px;
white-space: nowrap;
padding: 1px 5px!important;
margin: 5px 0px 5px -5px;
}
}
.component_path-element-wrapper{
font-size: 18px;
@ -56,8 +69,13 @@
}
body.touch-no{
.component_path-element-wrapper:hover a{
.component_path-element-wrapper a.label:hover{
background: var(--super-light);
span.title{
opacity: 1;
transform: translateY(0px);
transition: all 0.2s ease-out;
}
}
}