From f6762f7c011eb8b7827a2538c2e215dac781e987 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 28 Aug 2019 15:29:38 +0200 Subject: [PATCH] Make the friends list from the share modal reusable --- .../src/less2/include/alertify.less | 81 ++++++++ customize.dist/src/less2/include/share.less | 86 --------- historyKeeper.js | 8 +- www/common/common-ui-elements.js | 178 +++++++++++++++--- www/common/outer/async-store.js | 12 ++ www/common/sframe-common.js | 4 +- www/drive/app-drive.less | 2 - www/share/app-share.less | 11 +- 8 files changed, 256 insertions(+), 126 deletions(-) delete mode 100644 customize.dist/src/less2/include/share.less diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index ec531e6b0..3274f1c63 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -1,6 +1,8 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./browser.less"; @import (reference) "./variables.less"; +@import (reference) "./avatar.less"; +@import (reference) "./tools.less"; .alertify_main() { --LessLoader_require: LessLoader_currentFile(); @@ -195,6 +197,9 @@ } & > div.alertify-tabs-content-active { display: block; + &.cp-share-columns { + display: flex; + } } } } @@ -260,6 +265,10 @@ color: @alertify-btn-fg; border: 1px solid @colortheme_alertify-cancel-border; + &.no-margin { + margin: 0; + } + &.safe, &.danger { color: @colortheme_old-base; white-space: normal; @@ -413,5 +422,77 @@ } } } + div.wide { + .cp-share-columns { + display: flex; + flex-flow: row; + + .cp-share-column { + width: 50%; + padding: 0 10px; + } + } + .cp-share-grid, .cp-share-list { + .avatar_main(50px); + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + .cp-share-list { + margin-bottom: 15px; + } + .cp-share-grid { + max-height: 228px; + 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; + } + .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; + .tools_unselectable(); + + &.cp-selected { + background-color: @colortheme_alertify-primary; + color: @colortheme_alertify-primary-text; + order: -1 !important; + } + .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/share.less b/customize.dist/src/less2/include/share.less deleted file mode 100644 index 98641a5f5..000000000 --- a/customize.dist/src/less2/include/share.less +++ /dev/null @@ -1,86 +0,0 @@ -@import (reference) "./colortheme-all.less"; -@import (reference) './modal.less'; -@import (reference) './alertify.less'; -@import (reference) './avatar.less'; -@import (reference) './checkmark.less'; -@import (reference) './password-input.less'; -@import (reference) "./tools.less"; -.share_main () { - .alertify_main(); - .checkmark_main(20px); - .password_main(); - .modal_main(); - - .cp-share-columns { - display: flex; - flex-flow: row; - - .cp-share-column { - width: 50%; - padding: 0 10px; - } - } - .cp-share-grid, .cp-share-list { - .avatar_main(50px); - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - .cp-share-list { - margin-bottom: 15px; - } - .cp-share-grid { - max-height: 228px; - 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; - } - .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; - .tools_unselectable(); - - &.cp-selected { - background-color: @colortheme_alertify-primary; - color: @colortheme_alertify-primary-text; - order: -1 !important; - } - .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/historyKeeper.js b/historyKeeper.js index b0d59a3f0..6027fc3fe 100644 --- a/historyKeeper.js +++ b/historyKeeper.js @@ -714,10 +714,10 @@ module.exports.create = function (cfg) { // If it is, remove it from memory and broadcast a message to its members const onChannelMetadataChanged = function (ctx, channel, metadata) { - Log.debug('SET_METADATA_CACHE', 'Test'); // XXX - if (channel && metadata_cache[channel]) { - Log.debug('SET_METADATA_CACHE', 'Channel '+ channel +', metadata: '+ JSON.stringify(metadata)); + if (channel && metadata_cache[channel] && typeof (metadata) === "object") { + Log.silly('SET_METADATA_CACHE', 'Channel '+ channel +', metadata: '+ JSON.stringify(metadata)); metadata_cache[channel] = metadata; + historyKeeperBroadcast(ctx, channel, metadata); } }; @@ -988,7 +988,7 @@ module.exports.create = function (cfg) { // make sure we update our cache of metadata // or at least invalidate it and force other mechanisms to recompute its state // 'output' could be the new state as computed by rpc - onChannelMetadataChanged(ctx, msg[4], output[1]); + onChannelMetadataChanged(ctx, msg[4].channel, output[1]); } sendMsg(ctx, user, [0, HISTORY_KEEPER_ID, 'MSG', user.id, JSON.stringify([parsed[0]].concat(output))]); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index d57eea7a5..fe94578a0 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -112,6 +112,85 @@ define([ cb(void 0, data); }); }; + var createOwnerModal = function (common, owners) { + var friends = common.getFriends(true); + + // Remove owner column + var _owners = {}; + owners.forEach(function (edPublic) { + var f; + Object.keys(friends).some(function (c) { + if (friends[c].edPublic === edPublic) { + f = friends[c]; + return true; + } + }); + _owners[edPublic] = f || { + displayName: 'Unknown user: '+ edPublic, // XXX + notifications: true, + edPublic: edPublic, + }; + }); + var removeCol = UIElements.getFriendsList('Remove an existing owner instantly', { + common: common, + friends: _owners, + noFilter: true + }, function () { + // XXX onSelect... + //onSelect... + console.log(arguments); + }); + var $div1 = $(removeCol.div); + var others1 = removeCol.others; + $div1.append(h('div.cp-share-grid', others1)); + $div1.find('.cp-share-friend').click(function () { + var sel = $(this).hasClass('cp-selected'); + if (!sel) { + $(this).addClass('cp-selected'); + } else { + var order = $(this).attr('data-order'); + order = order ? 'order:'+order : ''; + $(this).removeClass('cp-selected').attr('style', order); + } + // XXX onSelect... + }); + + // Add owners column + var addCol = UIElements.getFriendsList('Ask a friend to be an owner', { + common: common, + friends: friends + }, function () { + // XXX onSelect... + console.log(arguments); + }); + var $div2 = $(addCol.div); + var others2 = addCol.others; + $div2.append(h('div.cp-share-grid', others2)); + $div2.find('.cp-share-friend').click(function () { + var sel = $(this).hasClass('cp-selected'); + if (!sel) { + $(this).addClass('cp-selected'); + } else { + var order = $(this).attr('data-order'); + order = order ? 'order:'+order : ''; + $(this).removeClass('cp-selected').attr('style', order); + } + // XXX onSelect... + }); + + // Create modal + var link = h('div.cp-share-columns', [ + removeCol.div, + addCol.div + ]); + var linkButtons = [{ + className: 'cancel', + name: Messages.ok, + onClick: function () {}, + keys: [27] + }]; + return UI.dialog.customModal(link, {buttons: linkButtons}); + }; var getRightsProperties = function (common, data, cb) { var $d = $('
'); if (!data) { return void cb(void 0, $d); } @@ -152,6 +231,16 @@ define([ $d.append(UI.dialog.selectable(owners, { id: 'cp-app-prop-owners', })); + if (owned) { + var manageOwners = h('button.no-margin', 'Manage owners'); // XXX + $(manageOwners).click(function () { + var modal = createOwnerModal(common, data.owners); + UI.openCustomModal(modal, { + wide: true, + }); + }); + $d.append(h('p', manageOwners)); + } if (!data.noExpiration) { var expire = Messages.creation_expireFalse; @@ -345,9 +434,8 @@ define([ }); }; - var getFriendsList = function (config, onShare) { + UIElements.getFriendsList = function (label, config, onSelect) { var common = config.common; - var title = config.title; var friends = config.friends; var myName = common.getMetadataMgr().getUserData().name; var order = []; @@ -361,6 +449,7 @@ define([ var avatar = h('span.cp-share-friend-avatar.cp-avatar'); UIElements.displayAvatar(common, $(avatar), data.avatar, name); return h('div.cp-share-friend', { + 'data-ed': data.edPublic, 'data-curve': data.curvePublic, 'data-name': name, 'data-order': i, @@ -371,9 +460,6 @@ define([ h('span.cp-share-friend-name', name) ]); }).filter(function (x) { return x; }); - var smallCurves = Object.keys(friends).map(function (c) { - return friends[c].curvePublic.slice(0,8); - }); var noOthers = others.length === 0 ? '.cp-recent-only' : ''; @@ -384,8 +470,8 @@ define([ }); var div = h('div.cp-share-friends.cp-share-column' + noOthers, [ - h('label', Messages.share_linkFriends), - h('div.cp-share-grid-filter', [ + h('label', label), + h('div.cp-share-grid-filter', config.noFilter ? undefined : [ inputFilter, buttonSelect, buttonDeselect @@ -394,13 +480,16 @@ 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(h('div.cp-share-friend.cp-fake-friend', { - style: 'order:9999999;' - })); + els.push(makeFake); } }; addFake(others); @@ -409,13 +498,53 @@ define([ var redraw = function () { var name = $(inputFilter).val().trim().replace(/"/g, ''); $div.find('.cp-share-friend').show(); - if (!name) { return; } - $div.find('.cp-share-friend:not(.cp-selected):not([data-name*="'+name+'"])').hide(); + 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