web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make team drive leftside menu collapsable

Browse Source
This commit is contained in:
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 { .cp-sidebarlayout-categories {
flex: 1; flex: 1;
.cp-sidebarlayout-category { .cp-sidebarlayout-category {
display: flex;
align-items: center;
.leftside-menu-category_main(); .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 { #cp-sidebarlayout-rightside {
flex: 1; 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 { .cp-team-cat-header {
justify-content: center;
.avatar_main(30px); .avatar_main(30px);
.cp-avatar { .cp-avatar {
justify-content: center; justify-content: center;

8
www/teams/inner.js
View File

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