infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Make team drive leftside menu collapsable

pull/1/head
yflory 2019-10-01 14:10:44 +02:00
parent 6abc8151d1
commit 56d8b92c99
3 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
customize.dist/src/less2/include/sidebar-layout.less
View File

@ -31,9 +31,37 @@
.cp-sidebarlayout-categories {
flex: 1;
.cp-sidebarlayout-category {
display: flex;
align-items: center;
.leftside-menu-category_main();
}
}
&.cp-leftside-narrow {
transition: width 0.2s;
width: 50px;
.cp-sidebarlayout-category {
display: flex;
max-width: 100%;
align-items: center;
span.cp-sidebarlayout-category-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
display: none;
}
}
&:hover {
transition: width 0.5s;
width: 250px;
.cp-sidebarlayout-category {
span.cp-sidebarlayout-category-name {
display: inline;
}
}
}
}
}
#cp-sidebarlayout-rightside {
flex: 1;

12
www/teams/app-team.less
View File

@ -49,7 +49,19 @@
}
}
.cp-leftside-narrow {
.cp-avatar {
overflow: visible;
media-tag {
margin-right: 0;
}
span.cp-sidebarlayout-category-name {
margin-left: 3px;
}
}
}
.cp-team-cat-header {
justify-content: center;
.avatar_main(30px);
.cp-avatar {
justify-content: center;

8
www/teams/inner.js
View File

@ -157,7 +157,7 @@ define([
}
common.displayAvatar($avatar, obj.avatar, obj.name);
$category.append($avatar);
$avatar.append(obj.name);
$avatar.append(h('span.cp-sidebarlayout-category-name', obj.name));
});
}
@ -187,8 +187,10 @@ define([
active = key;
if (key === 'drive' || key === 'chat') {
APP.$rightside.addClass('cp-rightside-drive');
APP.$leftside.addClass('cp-leftside-narrow');
} else {
APP.$rightside.removeClass('cp-rightside-drive');
APP.$leftside.removeClass('cp-leftside-narrow');
}
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
@ -196,12 +198,14 @@ define([
showCategories(categories[key]);
});
$category.append(Messages['team_cat_'+key] || key);
$category.append(h('span.cp-sidebarlayout-category-name', Messages['team_cat_'+key] || key));
});
if (active === 'drive') {
APP.$rightside.addClass('cp-rightside-drive');
APP.$leftside.addClass('cp-leftside-narrow');
} else {
APP.$rightside.removeClass('cp-rightside-drive');
APP.$leftside.removeClass('cp-leftside-narrow');
}
showCategories(categories[active]);
};