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

Make the friends list from the share modal reusable

Browse Source
This commit is contained in:
yflory 2019-08-28 15:29:38 +02:00
parent 28b2341f2c
commit f6762f7c01
8 changed files with 256 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}
}
}
}

86
customize.dist/src/less2/include/share.less
View File

@ -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;
}
}
}

8
historyKeeper.js
View File

@ -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))]);

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

@ -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 = $('<div>');
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<n; i++) {
$div.find('.cp-share-grid').append(makeFake());
}
};
$(inputFilter).on('keydown keyup change', redraw);
// Replace "copy link" by "share with friends" if at least one friedn is selected
$(buttonSelect).click(function () {
$div.find('.cp-share-friend:not(.cp-fake-friend):not(.cp-selected):visible').addClass('cp-selected');
onSelect();
});
$(buttonDeselect).click(function () {
$div.find('.cp-share-friend.cp-selected').removeClass('cp-selected').each(function (i, el) {
var order = $(el).attr('data-order');
if (!order) { return; }
$(el).attr('style', 'order:'+order);
});
redraw();
onSelect();
});
return {
others: others,
div: div
};
};
var createShareWithFriends = function (config, onShare) {
var common = config.common;
var title = config.title;
var friends = config.friends;
if (!friends) { return; }
var smallCurves = Object.keys(friends).map(function (c) {
return friends[c].curvePublic.slice(0,8);
});
// Replace "copy link" by "share with friends" if at least one friend is selected
// Also create the "share with friends" button if it doesn't exist
var refreshButtons = function () {
var $nav = $div.parents('.alertify').find('nav');
@ -475,19 +604,10 @@ define([
}
};
$(buttonSelect).click(function () {
$div.find('.cp-share-friend:not(.cp-fake-friend):not(.cp-selected):visible').addClass('cp-selected');
refreshButtons();
});
$(buttonDeselect).click(function () {
$div.find('.cp-share-friend.cp-selected').removeClass('cp-selected').each(function (i, el) {
var order = $(el).attr('data-order');
if (!order) { return; }
$(el).attr('style', 'order:'+order);
});
redraw();
refreshButtons();
});
var friendsList = UIElements.getFriendsList(Messages.share_linkFriends, config, refreshButtons);
var div = friendsList.div;
var $div = $(div);
var others = friendsList.others;
common.getAttribute(['general', 'share-friends'], function (err, val) {
order = val || [];
@ -538,7 +658,7 @@ define([
// Share link tab
var hasFriends = Object.keys(config.friends || {}).length !== 0;
var onFriendShare = Util.mkEvent();
var friendsList = hasFriends ? getFriendsList(config, onFriendShare) : undefined;
var friendsList = hasFriends ? createShareWithFriends(config, onFriendShare) : undefined;
var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
var link = h('div.cp-share-modal' + friendsUIClass, [
@ -703,7 +823,7 @@ define([
// Share link tab
var hasFriends = Object.keys(config.friends || {}).length !== 0;
var friendsList = hasFriends ? getFriendsList(config) : undefined;
var friendsList = hasFriends ? createShareWithFriends(config) : undefined;
var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
var link = h('div.cp-share-modal' + friendsUIClass, [
h('div.cp-share-column', [
@ -791,7 +911,7 @@ define([
// Share link tab
var hasFriends = Object.keys(config.friends || {}).length !== 0;
var friendsList = hasFriends ? getFriendsList(config) : undefined;
var friendsList = hasFriends ? createShareWithFriends(config) : undefined;
var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
var link = h('div.cp-share-modal' + friendsUIClass, [
h('div.cp-share-column', [

12
www/common/outer/async-store.js
View File

@ -1204,6 +1204,18 @@ define([
channel.bcast("PAD_DISCONNECT");
}
},
onMetadataUpdate: function (metadata) {
console.log('onMetadataUpdate', metadata);
channel.data = metadata || {};
var allData = store.manager.findChannel(data.channel);
allData.forEach(function (obj) {
obj.data.owners = metadata.owners;
if (metadata.expire) {
obj.data.expire = +metadata.expire;
}
});
//channel.bcast("PAD_METADATA", metadata);
},
crypto: {
// The encryption and decryption is done in the outer window.
// This async-store only deals with already encrypted messages.

4
www/common/sframe-common.js
View File

@ -422,12 +422,12 @@ define([
return JSON.parse(JSON.stringify(friendRequests));
};
funcs.getFriends = function () {
funcs.getFriends = function (meIncluded) {
var priv = ctx.metadataMgr.getPrivateData();
var friends = priv.friends;
var goodFriends = {};
Object.keys(friends).forEach(function (curve) {
if (curve.length !== 44) { return; }
if (curve.length !== 44 && !meIncluded) { return; }
var data = friends[curve];
if (!data.notifications) { return; }
goodFriends[curve] = friends[curve];

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

@ -4,7 +4,6 @@
@import (reference) "../../customize/src/less2/include/limit-bar.less";
@import (reference) "../../customize/src/less2/include/tokenfield.less";
@import (reference) '../../customize/src/less2/include/framework.less';
@import (reference) '../../customize/src/less2/include/share.less';
&.cp-app-drive {
.framework_min_main(
@ -15,7 +14,6 @@
.limit-bar_main();
.tokenfield_main();
.share_main();
@drive_hover: #eee;
@drive_hover-light: lighten(@drive_hover, 20%);

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

@ -1,8 +1,13 @@
@import (reference) '../../customize/src/less2/include/colortheme-all.less';
@import (reference) '../../customize/src/less2/include/tippy.less';
@import (reference) '../../customize/src/less2/include/share.less';
@import (reference) '../../customize/src/less2/include/modal.less';
@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';
&.cp-app-share {
.tippy_main();
.share_main();
.alertify_main();
.checkmark_main(20px);
.password_main();
.modal_main();
}