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

Make user grid layout reusable

Browse Source
This commit is contained in:
yflory
2019-09-26 12:53:02 +02:00
parent 0d0eaebb1f
commit a73af811d3
4 changed files with 61 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
customize.dist/src/less2/include/alertify.less
View File

@@ -29,6 +29,7 @@
// Logs to show that something has happened // Logs to show that something has happened
// These show only once // These show only once
.alertify-logs { .alertify-logs {
z-index: 100001; // alertify logs should be in front of alertify modals z-index: 100001; // alertify logs should be in front of alertify modals
@media print { @media print {
@@ -466,75 +467,10 @@
} }
} }
.cp-share-column { .cp-share-column {
.cp-share-grid, .cp-share-list { .cp-usergrid-grid {
.avatar_main(40px);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cp-share-list {
margin-bottom: 15px;
}
.cp-share-grid {
max-height: 225px; max-height: 225px;
overflow-x: auto; overflow-x: auto;
} }
.cp-recent-only {
.cp-share-grid, .cp-share-grid-filter {
display: none;
}
}
.cp-share-grid-filter {
display: flex;
input {
flex: 1;
min-width: 0;
margin-bottom: 0 !important;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @colortheme_alertify-primary-text;
opacity: 1; /* Firefox */
}
}
margin-bottom: 15px;
&:empty {
margin: 0;
display: none;
}
}
.cp-share-friend {
width: 70px;
height: 70px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
padding: 5px;
margin-bottom: 6px;
cursor: default;
transition: order 0.5s, background-color 0.5s;
margin-top: 1px;
.tools_unselectable();
&.cp-selected {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
order: -1 !important;
}
.cp-share-friend-avatar {
min-height: 40px;
}
.cp-share-friend-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
text-align: center;
}
border: 1px solid @colortheme_alertify-primary;
&.cp-fake-friend {
visibility: hidden;
}
}
} }
} }

3
customize.dist/src/less2/include/framework.less
View File

@@ -14,6 +14,7 @@
@import (reference) "./app-noscroll.less"; @import (reference) "./app-noscroll.less";
@import (reference) "./messenger.less"; @import (reference) "./messenger.less";
@import (reference) "./cursor.less"; @import (reference) "./cursor.less";
@import (reference) "./usergrid.less";
.framework_main(@bg-color, @warn-color, @color) { .framework_main(@bg-color, @warn-color, @color) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@@ -40,6 +41,7 @@
.password_main(); .password_main();
.messenger_main(); .messenger_main();
.cursor_main(); .cursor_main();
.usergrid_main();
.creation_main( .creation_main(
@bg-color: @bg-color, @bg-color: @bg-color,
@color: @color @color: @color
@@ -73,6 +75,7 @@
.tippy_main(); .tippy_main();
.checkmark_main(20px); .checkmark_main(20px);
.password_main(); .password_main();
.usergrid_main();
font: @colortheme_app-font; font: @colortheme_app-font;
} }

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

@@ -107,8 +107,8 @@ define([
var redrawAll = function () {}; var redrawAll = function () {};
var div1 = h('div.cp-share-friends.cp-share-column.cp-ownership'); var div1 = h('div.cp-usergrid-user.cp-share-column.cp-ownership');
var div2 = h('div.cp-share-friends.cp-share-column.cp-ownership'); var div2 = h('div.cp-usergrid-user.cp-share-column.cp-ownership');
var $div1 = $(div1); var $div1 = $(div1);
var $div2 = $(div2); var $div2 = $(div2);
@@ -126,22 +126,18 @@ define([
}); });
if (ed === edPublic) { if (ed === edPublic) {
f = f || user; f = f || user;
if (f.name) { if (f.name) { f.edPublic = edPublic; }
f.displayName = f.name;
f.edPublic = edPublic;
}
} }
_owners[ed] = f || { _owners[ed] = f || {
displayName: Messages._getKey('owner_unknownUser', [ed]), displayName: Messages._getKey('owner_unknownUser', [ed]),
notifications: true,
edPublic: ed, edPublic: ed,
}; };
}); });
var msg = pending ? Messages.owner_removePendingText var msg = pending ? Messages.owner_removePendingText
: Messages.owner_removeText; : Messages.owner_removeText;
var removeCol = UIElements.getFriendsList(msg, { var removeCol = UIElements.getUserGrid(msg, {
common: common, common: common,
friends: _owners, data: _owners,
noFilter: true noFilter: true
}, function () { }, function () {
}); });
@@ -152,7 +148,7 @@ define([
var removeButton = h('button.no-margin', btnMsg); var removeButton = h('button.no-margin', btnMsg);
$(removeButton).click(function () { $(removeButton).click(function () {
// Check selection // Check selection
var $sel = $div.find('.cp-share-friend.cp-selected'); var $sel = $div.find('.cp-usergrid-user.cp-selected');
var sel = $sel.toArray(); var sel = $sel.toArray();
if (!sel.length) { return; } if (!sel.length) { return; }
var me = false; var me = false;
@@ -221,13 +217,14 @@ define([
var _friends = JSON.parse(JSON.stringify(friends)); var _friends = JSON.parse(JSON.stringify(friends));
Object.keys(_friends).forEach(function (curve) { Object.keys(_friends).forEach(function (curve) {
if (owners.indexOf(_friends[curve].edPublic) !== -1 || if (owners.indexOf(_friends[curve].edPublic) !== -1 ||
pending_owners.indexOf(_friends[curve].edPublic) !== -1) { pending_owners.indexOf(_friends[curve].edPublic) !== -1 ||
!_friends[curve].notifications) {
delete _friends[curve]; delete _friends[curve];
} }
}); });
var addCol = UIElements.getFriendsList(Messages.owner_addText, { var addCol = UIElements.getUserGrid(Messages.owner_addText, {
common: common, common: common,
friends: _friends data: _friends
}, function () { }, function () {
//console.log(arguments); //console.log(arguments);
}); });
@@ -236,7 +233,7 @@ define([
var addButton = h('button.no-margin', Messages.owner_addButton); var addButton = h('button.no-margin', Messages.owner_addButton);
$(addButton).click(function () { $(addButton).click(function () {
// Check selection // Check selection
var $sel = $div2.find('.cp-share-friend.cp-selected'); var $sel = $div2.find('.cp-usergrid-user.cp-selected');
var sel = $sel.toArray(); var sel = $sel.toArray();
if (!sel.length) { return; } if (!sel.length) { return; }
var toAdd = sel.map(function (el) { var toAdd = sel.map(function (el) {
@@ -632,19 +629,17 @@ define([
}); });
}; };
UIElements.getFriendsList = function (label, config, onSelect) { UIElements.getUserGrid = function (label, config, onSelect) {
var common = config.common; var common = config.common;
var friends = config.friends; var users = config.data;
if (!friends) { return; } if (!users) { return; }
var others = Object.keys(friends).map(function (curve, i) { var icons = Object.keys(users).map(function (key, i) {
if (curve.length <= 40) { return; } var data = users[key];
var data = friends[curve]; var name = data.displayName || data.name || Messages.anonymous;
if (!data.notifications) { return; } var avatar = h('span.cp-usergrid-avatar.cp-avatar');
var name = data.displayName || Messages.anonymous;
var avatar = h('span.cp-share-friend-avatar.cp-avatar');
UIElements.displayAvatar(common, $(avatar), data.avatar, name); UIElements.displayAvatar(common, $(avatar), data.avatar, name);
return h('div.cp-share-friend', { return h('div.cp-usergrid-user', {
'data-ed': data.edPublic, 'data-ed': data.edPublic,
'data-curve': data.curvePublic || '', 'data-curve': data.curvePublic || '',
'data-name': name.toLowerCase(), 'data-name': name.toLowerCase(),
@@ -653,21 +648,21 @@ define([
style: 'order:'+i+';' style: 'order:'+i+';'
},[ },[
avatar, avatar,
h('span.cp-share-friend-name', name) h('span.cp-usergrid-user-name', name)
]); ]);
}).filter(function (x) { return x; }); }).filter(function (x) { return x; });
var noOthers = others.length === 0 ? '.cp-recent-only' : ''; var noOthers = icons.length === 0 ? '.cp-usergrid-empty' : '';
var buttonSelect = h('button.cp-share-with-friends', Messages.share_selectAll); var buttonSelect = h('button', Messages.share_selectAll);
var buttonDeselect = h('button.cp-share-with-friends', Messages.share_deselectAll); var buttonDeselect = h('button', Messages.share_deselectAll);
var inputFilter = h('input', { var inputFilter = h('input', {
placeholder: Messages.share_filterFriend placeholder: Messages.share_filterFriend
}); });
var div = h('div.cp-share-friends.cp-share-column' + noOthers, [ var div = h('div.cp-usergrid-container' + noOthers, [
h('label', label), h('label', label),
h('div.cp-share-grid-filter', config.noFilter ? undefined : [ h('div.cp-usergrid-filter', config.noFilter ? undefined : [
inputFilter, inputFilter,
buttonSelect, buttonSelect,
buttonDeselect buttonDeselect
@@ -675,46 +670,23 @@ define([
]); ]);
var $div = $(div); var $div = $(div);
// Fill with fake friends to have a uniform spacing (from the flexbox)
var makeFake = function () {
return h('div.cp-share-friend.cp-fake-friend', {
style: 'order:9999999;'
});
};
var addFake = function (els) {
$div.find('.cp-fake-friend').remove();
var n = (6 - els.length%6)%6;
for (var j = 0; j < n; j++) {
els.push(makeFake);
}
};
addFake(others);
// Hide friends when they are filtered using the text input // Hide friends when they are filtered using the text input
var redraw = function () { var redraw = function () {
var name = $(inputFilter).val().trim().replace(/"/g, '').toLowerCase(); var name = $(inputFilter).val().trim().replace(/"/g, '').toLowerCase();
$div.find('.cp-share-friend').show(); $div.find('.cp-usergrid-user').show();
if (name) { if (name) {
$div.find('.cp-share-friend:not(.cp-selected):not([data-name*="'+name+'"])').hide(); $div.find('.cp-usergrid-user:not(.cp-selected):not([data-name*="'+name+'"])').hide();
}
// Redraw fake friends
$div.find('.cp-fake-friend').remove();
var visible = $div.find('.cp-share-friend:visible').length;
var n = (6 - visible%6)%6;
for (var i = 0; i<n; i++) {
$div.find('.cp-share-grid').append(makeFake());
} }
}; };
$(inputFilter).on('keydown keyup change', redraw); $(inputFilter).on('keydown keyup change', redraw);
$(buttonSelect).click(function () { $(buttonSelect).click(function () {
$div.find('.cp-share-friend:not(.cp-fake-friend):not(.cp-selected):visible').addClass('cp-selected'); $div.find('.cp-usergrid-user:not(.cp-selected):visible').addClass('cp-selected');
onSelect(); onSelect();
}); });
$(buttonDeselect).click(function () { $(buttonDeselect).click(function () {
$div.find('.cp-share-friend.cp-selected').removeClass('cp-selected').each(function (i, el) { $div.find('.cp-usergrid-user.cp-selected').removeClass('cp-selected').each(function (i, el) {
var order = $(el).attr('data-order'); var order = $(el).attr('data-order');
if (!order) { return; } if (!order) { return; }
$(el).attr('style', 'order:'+order); $(el).attr('style', 'order:'+order);
@@ -723,8 +695,8 @@ define([
onSelect(); onSelect();
}); });
$(div).append(h('div.cp-share-grid', others)); $(div).append(h('div.cp-usergrid-grid', icons));
$div.on('click', '.cp-share-friend', function () { $div.on('click', '.cp-usergrid-user', function () {
var sel = $(this).hasClass('cp-selected'); var sel = $(this).hasClass('cp-selected');
if (!sel) { if (!sel) {
$(this).addClass('cp-selected'); $(this).addClass('cp-selected');
@@ -737,7 +709,7 @@ define([
}); });
return { return {
others: others, icons: icons,
div: div div: div
}; };
}; };
@@ -763,7 +735,7 @@ define([
var refreshButtons = function () { var refreshButtons = function () {
var $nav = $div.closest('.alertify').find('nav'); var $nav = $div.closest('.alertify').find('nav');
var friendMode = $div.find('.cp-share-friend.cp-selected').length; var friendMode = $div.find('.cp-usergrid-user.cp-selected').length;
if (friendMode) { if (friendMode) {
$nav.find('button.cp-share-with-friends').prop('disabled', ''); $nav.find('button.cp-share-with-friends').prop('disabled', '');
} else { } else {
@@ -772,10 +744,20 @@ define([
}; };
config.noInclude = true; config.noInclude = true;
var friendsList = UIElements.getFriendsList(Messages.share_linkFriends, config, refreshButtons); Object.keys(friends).forEach(function (curve) {
var data = friends[curve];
if (curve.length > 40 && data.notifications) { return; }
delete friends[curve];
});
var friendsList = UIElements.getUserGrid(Messages.share_linkFriends, {
common: common,
data: friends,
noFilter: false
}, refreshButtons);
var friendDiv = friendsList.div; var friendDiv = friendsList.div;
$div.append(friendDiv); $div.append(friendDiv);
var others = friendsList.others; var others = friendsList.icons;
var privateData = common.getMetadataMgr().getPrivateData(); var privateData = common.getMetadataMgr().getPrivateData();
var teamsData = Util.tryParse(JSON.stringify(privateData.teams)) || {}; var teamsData = Util.tryParse(JSON.stringify(privateData.teams)) || {};
@@ -794,10 +776,10 @@ define([
id: id id: id
}; };
}); });
var teamsList = UIElements.getFriendsList(Messages.share_linkTeam, { var teamsList = UIElements.getUserGrid(Messages.share_linkTeam, {
common: common, common: common,
noFilter: true, noFilter: true,
friends: teams data: teams
}, refreshButtons); }, refreshButtons);
$div.append(teamsList.div); $div.append(teamsList.div);
} }
@@ -807,7 +789,7 @@ define([
name: Messages.share_withFriends, name: Messages.share_withFriends,
onClick: function () { onClick: function () {
var href = Hash.getRelativeHref($('#cp-share-link-preview').val()); var href = Hash.getRelativeHref($('#cp-share-link-preview').val());
var $friends = $div.find('.cp-share-friend.cp-selected'); var $friends = $div.find('.cp-usergrid-user.cp-selected');
$friends.each(function (i, el) { $friends.each(function (i, el) {
var curve = $(el).attr('data-curve'); var curve = $(el).attr('data-curve');
// Check if the selected element is a friend or a team // Check if the selected element is a friend or a team
@@ -882,12 +864,11 @@ define([
}); });
// Reorder the friend icons // Reorder the friend icons
others.forEach(function (el, i) { others.forEach(function (el, i) {
if ($(el).is('.cp-fake-friend')) { return; }
$(el).attr('data-order', i).css('order', i); $(el).attr('data-order', i).css('order', i);
}); });
// Display them // Display them
$(friendDiv).find('.cp-share-grid').detach(); $(friendDiv).find('.cp-usergrid-grid').detach();
$(friendDiv).append(h('div.cp-share-grid', others)); $(friendDiv).append(h('div.cp-usergrid-grid', others));
$div.append(UI.dialog.getButtons(shareButtons, config.onClose)); $div.append(UI.dialog.getButtons(shareButtons, config.onClose));
refreshButtons(); refreshButtons();
}); });
@@ -1219,16 +1200,16 @@ define([
var $modal = $div.closest('.alertify'); var $modal = $div.closest('.alertify');
var $nav = $modal.find('nav'); var $nav = $modal.find('nav');
var $btn = $nav.find('button.primary'); var $btn = $nav.find('button.primary');
var selected = $div.find('.cp-share-friend.cp-selected').length; var selected = $div.find('.cp-usergrid-user.cp-selected').length;
if (selected) { if (selected) {
$btn.prop('disabled', ''); $btn.prop('disabled', '');
} else { } else {
$btn.prop('disabled', 'disabled'); $btn.prop('disabled', 'disabled');
} }
}; };
var list = UIElements.getFriendsList(Messages.team_pickFriends, { var list = UIElements.getUserGrid(Messages.team_pickFriends, {
common: common, common: common,
friends: config.friends, data: config.friends,
}, refreshButton); }, refreshButton);
$div = $(list.div); $div = $(list.div);
refreshButton(); refreshButton();
@@ -1242,7 +1223,7 @@ define([
className: 'primary', className: 'primary',
name: Messages.team_inviteModalButton, name: Messages.team_inviteModalButton,
onClick: function () { onClick: function () {
var $sel = $div.find('.cp-share-friend.cp-selected'); var $sel = $div.find('.cp-usergrid-user.cp-selected');
var sel = $sel.toArray(); var sel = $sel.toArray();
if (!sel.length) { return; } if (!sel.length) { return; }

2
www/share/app-share.less
View File

@@ -3,6 +3,7 @@
@import (reference) '../../customize/src/less2/include/alertify.less'; @import (reference) '../../customize/src/less2/include/alertify.less';
@import (reference) '../../customize/src/less2/include/checkmark.less'; @import (reference) '../../customize/src/less2/include/checkmark.less';
@import (reference) '../../customize/src/less2/include/password-input.less'; @import (reference) '../../customize/src/less2/include/password-input.less';
@import (reference) '../../customize/src/less2/include/usergrid.less';
&.cp-app-share { &.cp-app-share {
.tippy_main(); .tippy_main();
@@ -10,4 +11,5 @@
.checkmark_main(20px); .checkmark_main(20px);
.password_main(); .password_main();
.modal_main(); .modal_main();
.usergrid_main();
} }