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

usergrid avatar display and scrolling

Browse Source
This commit is contained in:
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) "./tools.less";
@import (reference) "./colortheme-all.less";
.avatar_vars( .avatar_vars(
@width: 30px @width: 30px
) { ) {
@ -35,10 +36,11 @@
} }
.cp-avatar-default { .cp-avatar-default {
.tools_unselectable(); .tools_unselectable();
background: white; background: rgb(160, 160, 160); // XXX testing
color: black; color: @cryptpad_text_col; // XXX testing
font-size: @avatar-font-size; font-size: @avatar-font-size;
font-size: var(--avatar-font-size); font-size: var(--avatar-font-size);
text-transform: capitalize;
} }
media-tag { media-tag {
min-height: @avatar-width; min-height: @avatar-width;

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

@ -10,12 +10,12 @@
.cp-usergrid-grid { .cp-usergrid-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: -3px;
margin-bottom: 6px; margin-bottom: 6px;
} max-height: 130px;
&:not(.large) { overflow: auto;
.cp-usergrid-grid { @media screen and (max-height: 515px) {
margin: -3px; max-height: unset; // remove double scrollbar
margin-bottom: 6px;
} }
} }
&.cp-usergrid-empty { &.cp-usergrid-empty {
@ -30,13 +30,13 @@
min-width: 0; min-width: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
height: 38px; height: 38px;
margin: 6px 8px 6px 0px; margin: 6px 0px;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @cryptpad_color_grey; color: @cryptpad_color_grey;
opacity: 1; /* Firefox */ opacity: 1; /* Firefox */
} }
} }
margin-bottom: 15px; margin-bottom: 10px;
&:empty { &:empty {
margin: 0; margin: 0;
display: none; display: none;
@ -54,7 +54,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
margin: 3px;
cursor: default; cursor: default;
transition: order 0.5s, background-color 0.5s; transition: order 0.5s, background-color 0.5s;
margin-top: 1px; margin-top: 1px;
@ -64,10 +63,21 @@
background-color: @colortheme_alertify-primary; background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text; color: @colortheme_alertify-primary-text;
order: -1 !important; order: -1 !important;
.cp-usergrid-avatar {
media-tag, .cp-avatar-default {
opacity: 0.7;
}
}
} }
.cp-usergrid-user-avatar { .cp-usergrid-user-avatar {
min-height: 40px; min-height: 40px;
} }
&:not(.large) {
.cp-usergrid-user-name {
display: none;
}
}
.cp-usergrid-user-name { .cp-usergrid-user-name {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -75,24 +85,33 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 18px; line-height: 18px;
flex: 1;
} }
border: 1px solid @colortheme_alertify-primary;
&:not(.large) { &:not(.large) {
.avatar_main(40px); .avatar_main(60px);
} }
&.large { &.large {
.avatar_main(25px); .avatar_main(25px);
width: 140px; width: 145px;
height: 35px; height: 35px;
flex-flow: row; flex-flow: row;
margin: 0; margin: 3px;
margin-right: 15px; flex-basis: calc(33.3333333% - 6px);
margin-bottom: 1px; flex-shrink: 1;
&:nth-child(3n) { min-width: 0;
margin-right: 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':''), [ var div = h('div.cp-usergrid-container' + noOthers + (config.large?'.large':''), [
label ? h('label', label) : undefined, label ? h('label', label) : undefined,
h('div.cp-usergrid-filter', (config.noFilter || config.noSelect) ? undefined : [ h('div.cp-usergrid-filter', (config.noFilter || config.noSelect) ? undefined : [
inputFilter, inputFilter
buttonSelect,
buttonDeselect
]), ]),
]); ]);
var $div = $(div); var $div = $(div);
@ -880,10 +878,21 @@ define([
delete friends[curve]; 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, { var friendsList = UIElements.getUserGrid(null, {
common: common, common: common,
data: friends, data: friends,
noFilter: false noFilter: false,
large: true
}, refreshButtons); }, refreshButtons);
var friendDiv = friendsList.div; var friendDiv = friendsList.div;
$div.append(friendDiv); $div.append(friendDiv);
@ -909,6 +918,7 @@ define([
var teamsList = UIElements.getUserGrid(Messages.share_linkTeam, { var teamsList = UIElements.getUserGrid(Messages.share_linkTeam, {
common: common, common: common,
noFilter: true, noFilter: true,
large: true,
data: teams data: teams
}, refreshButtons); }, refreshButtons);
$div.append(teamsList.div); $div.append(teamsList.div);