Make the friends list from the share modal reusable

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

customize.dist/src/less2/include/share.less

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

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] && typeof (metadata) === "object") {
-        if (channel && metadata_cache[channel]) {
+            Log.silly('SET_METADATA_CACHE', 'Channel '+ channel +', metadata: '+ JSON.stringify(metadata));
-            Log.debug('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))]);

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 = $('<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('label', label),
-            h('div.cp-share-grid-filter', [
+            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', {
+                els.push(makeFake);
-                    style: 'order:9999999;'
-                }));
             }
         };
         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; }
+            if (name) {
-            $div.find('.cp-share-friend:not(.cp-selected):not([data-name*="'+name+'"])').hide();
+                $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 () {
+        var friendsList = UIElements.getFriendsList(Messages.share_linkFriends, config, refreshButtons);
-            $div.find('.cp-share-friend:not(.cp-fake-friend):not(.cp-selected):visible').addClass('cp-selected');
+        var div = friendsList.div;
-            refreshButtons();
+        var $div = $(div);
-        });
+        var others = friendsList.others;
-        $(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();
-        });
 
         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', [

www/common/outer/async-store.js

@@ -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.

www/common/sframe-common.js

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

www/drive/app-drive.less

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

www/share/app-share.less

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