Improve ownership UI

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

@@ -109,6 +109,29 @@
                     color: @colortheme_alertify-primary-text;
                 }
             }
+            .fa-times {
+                padding-left: 5px;
+                cursor: pointer;
+                height: 100%;
+                line-height: 25px;
+                color: @cryptpad_text_col;
+                &:hover {
+                    color: lighten(@cryptpad_text_col, 10%);
+                }
+            }
+        }
+        &.list {
+            .cp-usergrid-grid {
+                display: block;
+            }
+            .cp-usergrid-user {
+                width: auto;
+                max-width: calc(100% - 6px);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: inline-flex;
+            }
         }
     }
 }

www/common/common-ui-elements.js

@@ -329,7 +329,15 @@ define([
             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-usergrid-user'+(data.selected?'.cp-selected':'')+(config.large?'.large':''), {
+            var removeBtn, el;
+            if (config.remove) {
+                removeBtn = h('span.fa.fa-times');
+                $(removeBtn).click(function () {
+                    config.remove(el);
+                });
+            }
+
+            el = h('div.cp-usergrid-user'+(data.selected?'.cp-selected':'')+(config.large?'.large':''), {
                 'data-ed': data.edPublic,
                 'data-teamid': data.teamId,
                 'data-curve': data.curvePublic || '',
@@ -339,17 +347,20 @@ define([
                 style: 'order:'+i+';'
             },[
                 avatar,
-                h('span.cp-usergrid-user-name', name)
+                h('span.cp-usergrid-user-name', name),
+                removeBtn
             ]);
+            return el;
         }).filter(function (x) { return x; });
 
         var noOthers = icons.length === 0 ? '.cp-usergrid-empty' : '';
+        var classes = noOthers + (config.large?'.large':'') + (config.list?'.list':'');
 
         var inputFilter = h('input', {
             placeholder: Messages.share_filterFriend
         });
 
-        var div = h('div.cp-usergrid-container' + noOthers + (config.large?'.large':''), [
+        var div = h('div.cp-usergrid-container' + classes, [
             label ? h('label', label) : undefined,
             h('div.cp-usergrid-filter', (config.noFilter || config.noSelect) ? undefined : [
                 inputFilter

www/common/inner/access.js

@@ -35,7 +35,6 @@ define([
         var divMid = h('div.cp-share-column-mid', addBtn);
         var div2 = h('div.cp-share-column.cp-ownership');
         var $div1 = $(div1);
-        $divMid = $(divMid);
         var $div2 = $(div2);
 
         // Remove owner column
@@ -65,35 +64,17 @@ define([
                     edPublic: ed,
                 };
             });
-            var msg = pending ? Messages.owner_removePendingText
+
-                        : Messages.owner_removeText;
+            var remove = function (el) {
-            var removeCol = UIElements.getUserGrid(msg, {
-                common: common,
-                large: true,
-                data: _owners,
-                noFilter: true
-            }, function () {
-            });
-            var $div = $(removeCol.div);
-            // When clicking on the remove button, we check the selected users.
-            // If you try to remove yourself, we'll display an additional warning message
-            var btnMsg = pending ? Messages.owner_removePendingButton : Messages.owner_removeButton;
-            var removeButton = h('button.no-margin', btnMsg);
-            $(removeButton).click(function () {
                 // Check selection
-                var $sel = $div.find('.cp-usergrid-user.cp-selected');
-                var sel = $sel.toArray();
-                if (!sel.length) { return; }
                 var me = false;
-                var toRemove = sel.map(function (el) {
+                var $el = $(el);
-                    var ed = $(el).attr('data-ed');
+                var ed = $el.attr('data-ed');
-                    if (!ed) { return; }
+                if (!ed) { return; }
-                    if (teamOwner && teams[teamOwner] && teams[teamOwner].edPublic === ed) { me = true; }
+                if (teamOwner && teams[teamOwner] && teams[teamOwner].edPublic === ed) { me = true; }
-                    if (ed === edPublic && !teamOwner) { me = true; }
+                if (ed === edPublic && !teamOwner) { me = true; }
-                    return ed;
-                }).filter(function (x) { return x; });
                 nThen(function (waitFor) {
-                    var msg = me ? Messages.owner_removeMeConfirm : Messages.owner_removeConfirm;
+                    var msg = me ? Messages.owner_removeMeConfirm : Messages.owner_removeConfirm; // XXX check existing keys
                     UI.confirm(msg, waitFor(function (yes) {
                         if (!yes) {
                             waitFor.abort();
@@ -105,7 +86,7 @@ define([
                     sframeChan.query('Q_SET_PAD_METADATA', {
                         channel: channel,
                         command: pending ? 'RM_PENDING_OWNERS' : 'RM_OWNERS',
-                        value: toRemove,
+                        value: [ed],
                         teamId: teamOwner
                     }, waitFor(function (err, res) {
                         err = err || (res && res.error);
@@ -119,24 +100,34 @@ define([
                         UI.log(Messages.saved);
                     }));
                 }).nThen(function (waitFor) {
-                    sel.forEach(function (el) {
+                    var curve = $el.attr('data-curve');
-                        var curve = $(el).attr('data-curve');
+                    var friend = curve === user.curvePublic ? user : friends[curve];
-                        var friend = curve === user.curvePublic ? user : friends[curve];
+                    if (!friend) { return; }
-                        if (!friend) { return; }
+                    common.mailbox.sendTo("RM_OWNER", {
-                        common.mailbox.sendTo("RM_OWNER", {
+                        channel: channel,
-                            channel: channel,
+                        title: data.title,
-                            title: data.title,
+                        pending: pending
-                            pending: pending
+                    }, {
-                        }, {
+                        channel: friend.notifications,
-                            channel: friend.notifications,
+                        curvePublic: friend.curvePublic
-                            curvePublic: friend.curvePublic
+                    }, waitFor());
-                        }, waitFor());
-                    });
                 }).nThen(function () {
                     redrawAll(true);
                 });
+            };
+
+            var msg = pending ? Messages.owner_removePendingText
+                        : Messages.owner_removeText;
+            var removeCol = UIElements.getUserGrid(msg, {
+                common: common,
+                large: true,
+                data: _owners,
+                noSelect: true,
+                list: true,
+                remove: remove
+            }, function () {
             });
-            $div.append(h('p', removeButton));
+            var $div = $(removeCol.div);
             return $div;
         };
 
@@ -415,7 +406,6 @@ define([
         opts = opts || {};
 
         var priv = common.getMetadataMgr().getPrivateData();
-        var edPublic = priv.edPublic;
 
         var $div = $(h('div.cp-share-columns'));
         if (!data) { return void cb(void 0, $div); }
@@ -445,8 +435,7 @@ define([
                 ]));
             }
 
-            var $pwLabel = $('<label>', {'for': 'cp-app-prop-password'})
+            $('<label>', {'for': 'cp-app-prop-password'}).text(Messages.creation_passwordValue).appendTo($d);
-                            .text(Messages.creation_passwordValue).appendTo($d);
             var password = UI.passwordInput({
                 id: 'cp-app-prop-password',
                 readonly: 'readonly'