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

usergrid avatar display and scrolling

pull/1/head
David Benqué 2019-12-02 11:34:34 +00:00
parent 66073804ee
commit 1da5e8ac3c
3 changed files with 53 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
customize.dist/src/less2/include/avatar.less
View File

@ -1,4 +1,5 @@
@import (reference) "./tools.less";
@import (reference) "./colortheme-all.less";
.avatar_vars(
@width: 30px
) {
@ -35,10 +36,11 @@
}
.cp-avatar-default {
.tools_unselectable();
background: white;
color: black;
background: rgb(160, 160, 160); // XXX testing
color: @cryptpad_text_col; // XXX testing
font-size: @avatar-font-size;
font-size: var(--avatar-font-size);
text-transform: capitalize;
}
media-tag {
min-height: @avatar-width;

51
customize.dist/src/less2/include/usergrid.less
View File

@ -10,12 +10,12 @@
.cp-usergrid-grid {
display: flex;
flex-wrap: wrap;
margin: -3px;
margin-bottom: 6px;
}
&:not(.large) {
.cp-usergrid-grid {
margin: -3px;
margin-bottom: 6px;
max-height: 130px;
overflow: auto;
@media screen and (max-height: 515px) {
max-height: unset; // remove double scrollbar
}
}
&.cp-usergrid-empty {
@ -30,13 +30,13 @@
min-width: 0;
margin-bottom: 0 !important;
height: 38px;
margin: 6px 8px 6px 0px;
margin: 6px 0px;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @cryptpad_color_grey;
opacity: 1; /* Firefox */
}
}
margin-bottom: 15px;
margin-bottom: 10px;
&:empty {
margin: 0;
display: none;
@ -54,7 +54,6 @@
justify-content: center;
align-items: center;
padding: 5px;
margin: 3px;
cursor: default;
transition: order 0.5s, background-color 0.5s;
margin-top: 1px;
@ -64,10 +63,21 @@
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
order: -1 !important;
.cp-usergrid-avatar {
media-tag, .cp-avatar-default {
opacity: 0.7;
}
}
}
.cp-usergrid-user-avatar {
min-height: 40px;
}
&:not(.large) {
.cp-usergrid-user-name {
display: none;
}
}
.cp-usergrid-user-name {
overflow: hidden;
white-space: nowrap;
@ -75,24 +85,33 @@
width: 100%;
text-align: center;
line-height: 18px;
flex: 1;
}
border: 1px solid @colortheme_alertify-primary;
&:not(.large) {
.avatar_main(40px);
.avatar_main(60px);
}
&.large {
.avatar_main(25px);
width: 140px;
width: 145px;
height: 35px;
flex-flow: row;
margin: 0;
margin-right: 15px;
margin-bottom: 1px;
&:nth-child(3n) {
margin-right: 0;
margin: 3px;
flex-basis: calc(33.3333333% - 6px);
flex-shrink: 1;
min-width: 0;
.cp-usergrid-user-name {
margin-left: 5px;
text-align: left;
color: @cryptpad_text_col;
}
}
&.cp-selected {
.cp-usergrid-user-name {
color: @colortheme_alertify-primary-text;
}
}
}
}
}

18
www/common/common-ui-elements.js
View File

@ -791,9 +791,7 @@ define([
var div = h('div.cp-usergrid-container' + noOthers + (config.large?'.large':''), [
label ? h('label', label) : undefined,
h('div.cp-usergrid-filter', (config.noFilter || config.noSelect) ? undefined : [
inputFilter,
buttonSelect,
buttonDeselect
inputFilter
]),
]);
var $div = $(div);
@ -880,10 +878,21 @@ define([
delete friends[curve];
});
var x = new Array(50).fill('test'); // XXX fake friend generator
x.forEach(function (el, i) {
friends[i] = {
edPublic: i,
curvePublic: i,
displayName: i + " pizza" // Hash.createChannelId()
};
}); // XXX
var friendsList = UIElements.getUserGrid(null, {
common: common,
data: friends,
noFilter: false
noFilter: false,
large: true
}, refreshButtons);
var friendDiv = friendsList.div;
$div.append(friendDiv);
@ -909,6 +918,7 @@ define([
var teamsList = UIElements.getUserGrid(Messages.share_linkTeam, {
common: common,
noFilter: true,
large: true,
data: teams
}, refreshButtons);
$div.append(teamsList.div);