From a73af811d35427c934f0af34fe51158a9c799942 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 26 Sep 2019 12:53:02 +0200 Subject: [PATCH] Make user grid layout reusable --- .../src/less2/include/alertify.less | 68 +--------- .../src/less2/include/framework.less | 3 + www/common/common-ui-elements.js | 127 ++++++++---------- www/share/app-share.less | 2 + 4 files changed, 61 insertions(+), 139 deletions(-) diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 6662a9df7..bbc87f9c7 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -29,6 +29,7 @@ // Logs to show that something has happened // These show only once + .alertify-logs { z-index: 100001; // alertify logs should be in front of alertify modals @media print { @@ -466,75 +467,10 @@ } } .cp-share-column { - .cp-share-grid, .cp-share-list { - .avatar_main(40px); - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - .cp-share-list { - margin-bottom: 15px; - } - .cp-share-grid { + .cp-usergrid-grid { max-height: 225px; 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; - } - } } } diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less index ef6cee1f1..685bfcaf5 100644 --- a/customize.dist/src/less2/include/framework.less +++ b/customize.dist/src/less2/include/framework.less @@ -14,6 +14,7 @@ @import (reference) "./app-noscroll.less"; @import (reference) "./messenger.less"; @import (reference) "./cursor.less"; +@import (reference) "./usergrid.less"; .framework_main(@bg-color, @warn-color, @color) { --LessLoader_require: LessLoader_currentFile(); @@ -40,6 +41,7 @@ .password_main(); .messenger_main(); .cursor_main(); + .usergrid_main(); .creation_main( @bg-color: @bg-color, @color: @color @@ -73,6 +75,7 @@ .tippy_main(); .checkmark_main(20px); .password_main(); + .usergrid_main(); font: @colortheme_app-font; } diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 0039323ee..cf6c8ffdb 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -107,8 +107,8 @@ define([ var redrawAll = function () {}; - var div1 = h('div.cp-share-friends.cp-share-column.cp-ownership'); - var div2 = 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-usergrid-user.cp-share-column.cp-ownership'); var $div1 = $(div1); var $div2 = $(div2); @@ -126,22 +126,18 @@ define([ }); if (ed === edPublic) { f = f || user; - if (f.name) { - f.displayName = f.name; - f.edPublic = edPublic; - } + if (f.name) { f.edPublic = edPublic; } } _owners[ed] = f || { displayName: Messages._getKey('owner_unknownUser', [ed]), - notifications: true, edPublic: ed, }; }); var msg = pending ? Messages.owner_removePendingText : Messages.owner_removeText; - var removeCol = UIElements.getFriendsList(msg, { + var removeCol = UIElements.getUserGrid(msg, { common: common, - friends: _owners, + data: _owners, noFilter: true }, function () { }); @@ -152,7 +148,7 @@ define([ var removeButton = h('button.no-margin', btnMsg); $(removeButton).click(function () { // Check selection - var $sel = $div.find('.cp-share-friend.cp-selected'); + var $sel = $div.find('.cp-usergrid-user.cp-selected'); var sel = $sel.toArray(); if (!sel.length) { return; } var me = false; @@ -221,13 +217,14 @@ define([ var _friends = JSON.parse(JSON.stringify(friends)); Object.keys(_friends).forEach(function (curve) { 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]; } }); - var addCol = UIElements.getFriendsList(Messages.owner_addText, { + var addCol = UIElements.getUserGrid(Messages.owner_addText, { common: common, - friends: _friends + data: _friends }, function () { //console.log(arguments); }); @@ -236,7 +233,7 @@ define([ var addButton = h('button.no-margin', Messages.owner_addButton); $(addButton).click(function () { // Check selection - var $sel = $div2.find('.cp-share-friend.cp-selected'); + var $sel = $div2.find('.cp-usergrid-user.cp-selected'); var sel = $sel.toArray(); if (!sel.length) { return; } 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 friends = config.friends; - if (!friends) { return; } + var users = config.data; + if (!users) { return; } - var others = Object.keys(friends).map(function (curve, i) { - if (curve.length <= 40) { return; } - var data = friends[curve]; - if (!data.notifications) { return; } - var name = data.displayName || Messages.anonymous; - var avatar = h('span.cp-share-friend-avatar.cp-avatar'); + var icons = Object.keys(users).map(function (key, i) { + var data = users[key]; + var name = data.displayName || data.name || Messages.anonymous; + var avatar = h('span.cp-usergrid-avatar.cp-avatar'); UIElements.displayAvatar(common, $(avatar), data.avatar, name); - return h('div.cp-share-friend', { + return h('div.cp-usergrid-user', { 'data-ed': data.edPublic, 'data-curve': data.curvePublic || '', 'data-name': name.toLowerCase(), @@ -653,21 +648,21 @@ define([ style: 'order:'+i+';' },[ avatar, - h('span.cp-share-friend-name', name) + h('span.cp-usergrid-user-name', name) ]); }).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 buttonDeselect = h('button.cp-share-with-friends', Messages.share_deselectAll); + var buttonSelect = h('button', Messages.share_selectAll); + var buttonDeselect = h('button', Messages.share_deselectAll); var inputFilter = h('input', { 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('div.cp-share-grid-filter', config.noFilter ? undefined : [ + h('div.cp-usergrid-filter', config.noFilter ? undefined : [ inputFilter, buttonSelect, buttonDeselect @@ -675,46 +670,23 @@ define([ ]); 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 var redraw = function () { var name = $(inputFilter).val().trim().replace(/"/g, '').toLowerCase(); - $div.find('.cp-share-friend').show(); + $div.find('.cp-usergrid-user').show(); if (name) { - $div.find('.cp-share-friend: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 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; $div.append(friendDiv); - var others = friendsList.others; + var others = friendsList.icons; var privateData = common.getMetadataMgr().getPrivateData(); var teamsData = Util.tryParse(JSON.stringify(privateData.teams)) || {}; @@ -794,10 +776,10 @@ define([ id: id }; }); - var teamsList = UIElements.getFriendsList(Messages.share_linkTeam, { + var teamsList = UIElements.getUserGrid(Messages.share_linkTeam, { common: common, noFilter: true, - friends: teams + data: teams }, refreshButtons); $div.append(teamsList.div); } @@ -807,7 +789,7 @@ define([ name: Messages.share_withFriends, onClick: function () { 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) { var curve = $(el).attr('data-curve'); // Check if the selected element is a friend or a team @@ -882,12 +864,11 @@ define([ }); // Reorder the friend icons others.forEach(function (el, i) { - if ($(el).is('.cp-fake-friend')) { return; } $(el).attr('data-order', i).css('order', i); }); // Display them - $(friendDiv).find('.cp-share-grid').detach(); - $(friendDiv).append(h('div.cp-share-grid', others)); + $(friendDiv).find('.cp-usergrid-grid').detach(); + $(friendDiv).append(h('div.cp-usergrid-grid', others)); $div.append(UI.dialog.getButtons(shareButtons, config.onClose)); refreshButtons(); }); @@ -1219,16 +1200,16 @@ define([ var $modal = $div.closest('.alertify'); var $nav = $modal.find('nav'); 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) { $btn.prop('disabled', ''); } else { $btn.prop('disabled', 'disabled'); } }; - var list = UIElements.getFriendsList(Messages.team_pickFriends, { + var list = UIElements.getUserGrid(Messages.team_pickFriends, { common: common, - friends: config.friends, + data: config.friends, }, refreshButton); $div = $(list.div); refreshButton(); @@ -1242,7 +1223,7 @@ define([ className: 'primary', name: Messages.team_inviteModalButton, onClick: function () { - var $sel = $div.find('.cp-share-friend.cp-selected'); + var $sel = $div.find('.cp-usergrid-user.cp-selected'); var sel = $sel.toArray(); if (!sel.length) { return; } diff --git a/www/share/app-share.less b/www/share/app-share.less index 0a4ec30cc..cab03b7ce 100644 --- a/www/share/app-share.less +++ b/www/share/app-share.less @@ -3,6 +3,7 @@ @import (reference) '../../customize/src/less2/include/alertify.less'; @import (reference) '../../customize/src/less2/include/checkmark.less'; @import (reference) '../../customize/src/less2/include/password-input.less'; +@import (reference) '../../customize/src/less2/include/usergrid.less'; &.cp-app-share { .tippy_main(); @@ -10,4 +11,5 @@ .checkmark_main(20px); .password_main(); .modal_main(); + .usergrid_main(); }