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) => { paths = paths.map((path, index) => {
let sub_path = paths.slice(0, index+1).join('/'), let sub_path = paths.slice(0, index+1).join('/'),
label = path === ''? 'Nuage' : path; label = path === '' ? 'Nuage' : path;
if(index === paths.length - 1){ if(index === paths.length - 1){
return {full: null, label: label}; return {full: null, label: label};
}else{ }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; return paths;
@ -105,8 +114,8 @@ export class PathElementWrapper extends React.Component {
} }
limitSize(str){ limitSize(str){
if(str.length > 30){ if(str.length > 27){
return str.substring(0,23)+'...'; return str.substring(0,20)+'...';
} }
return str; return str;
} }
@ -118,7 +127,15 @@ export class PathElementWrapper extends React.Component {
<li className={className}> <li className={className}>
<NgIf cond={this.props.isLast === false}> <NgIf cond={this.props.isLast === false}>
<Link to={"/files" + this.props.path.full || "/"} className="label"> <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> </Link>
<Separator/> <Separator/>
</NgIf> </NgIf>

22
client/components/breadcrumb.scss
View file

@ -35,7 +35,20 @@
.component_path-element{ .component_path-element{
display: inline-block; display: inline-block;
.label{color: var(--color);padding: 2px 5px;} .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{ .component_path-element-wrapper{
font-size: 18px; font-size: 18px;
@ -56,8 +69,13 @@
} }
body.touch-no{ body.touch-no{
.component_path-element-wrapper:hover a{ .component_path-element-wrapper a.label:hover{
background: var(--super-light); background: var(--super-light);
span.title{
opacity: 1;
transform: translateY(0px);
transition: all 0.2s ease-out;
}
} }
} }