Improve mute/unmute process

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

@@ -78,6 +78,9 @@
                 .cp-app-contacts-name {
                     white-space: nowrap;
                 }
+                .cp-app-contacts-icons {
+                    text-align: right;
+                }
             }
             &:hover {
                 background-color: rgba(0,0,0,0.3);

customize.dist/src/less2/include/sidebar-layout.less

@@ -126,6 +126,9 @@
                 background-color: @button-bg;
                 border-color: darken(@button-bg, 10%);
                 color: white;
+                .fa {
+                    margin-right: 0.2em;
+                }
                 &:hover {
                     background-color: darken(@button-bg, 10%);
                 }

www/common/common-ui-elements.js

@@ -3803,20 +3803,10 @@ define([
             });
         };
 
-        var modal;
-        var mute = UIElements.createMuteButton(common, msg.content, function () {
-            // Mute = auto-reject friend request
-            var $modal = modal && $(modal) && $(modal).closest('div.alertify');
-            if ($modal && $modal.length && $modal[0].closeModal) {
-                $modal[0].closeModal(function () {});
-            }
-            return void todo(false); // XXX false is reject. We can also "dismiss"...
-        });
         var content = h('div.cp-share-modal', [
             setHTML(h('p'), text),
-            h('p', mute)
         ]);
-        modal = UI.proposal(content, todo);
+        UI.proposal(content, todo);
     };
 
     UIElements.displayAddOwnerModal = function (common, data) {
@@ -4158,27 +4148,5 @@ define([
         UI.proposal(div, todo);
     };
 
-    UIElements.createMuteButton = function (common, data, cb) {
-        cb = cb || function () {};
-        var button = h('i.fa.fa-bell-slash-o', {
-            title: Messages.notifications_muteUserTitle
-        });
-        var module = common.makeUniversal('messenger');
-        $(button).click(function () {
-            UI.confirm(Messages.notifications_muteUserConfirm, function (yes) {
-                if (!yes) { return; }
-                module.execCommand('MUTE_USER', {
-                    curvePublic: data.curvePublic,
-                    name: data.displayName || data.name,
-                    avatar: data.avatar
-                }, function (e) {
-                    cb(e);
-                    if (e) { return void UI.warn(Messages.error); }
-                });
-            });
-        });
-        return button;
-    };
-
     return UIElements;
 });

www/common/messenger-ui.js

@@ -70,7 +70,7 @@ define([
             h('div.cp-app-contacts-friends.cp-app-contacts-category', [
                 h('div.cp-app-contacts-category-content.cp-contacts-friends'),
                 h('h2.cp-app-contacts-category-title', Messages.contacts_friends),
-                h('button.cp-app-contacts-muted-button', Messages.contacts_manageMuted || 'MANAGE MUTED') // XXX
+                h('button.btn.btn-secondary.cp-app-contacts-muted-button', Messages.contacts_manageMuted || 'MANAGE MUTED') // XXX
             ]),
             h('div.cp-app-contacts-rooms.cp-app-contacts-category', [
                 h('div.cp-app-contacts-category-content'),
@@ -510,6 +510,9 @@ define([
                 title: room.name
             });
 
+            var mute = h('span.cp-app-contacts-remove.fa.fa-bell-slash-o.cp-mute-icon', {
+                title: Messages.contacts_mute || 'mute'
+            });
             var remove = h('span.cp-app-contacts-remove.fa.fa-user-times', {
                 title: Messages.contacts_remove
             });
@@ -522,8 +525,11 @@ define([
             });
             var rightCol = h('span.cp-app-contacts-right-col', [
                 h('span.cp-app-contacts-name', [room.name]),
+                h('span.cp-app-contacts-icons', [
+                    room.isFriendChat ? mute : undefined,
                     room.isFriendChat ? remove :
                         (room.isPadChat || room.isTeamChat) ? undefined : leaveRoom,
+                ])
             ]);
 
             var friendData = room.isFriendChat ? userlist[0] : {};
@@ -534,21 +540,27 @@ define([
                 if (friendData.profile) { window.open(origin + '/profile/#' + friendData.profile); }
             });
 
+            $(mute).click(function (e) {
+                e.stopPropagation();
+                var channel = state.channels[id];
+                if (!channel.isFriendChat) { return; }
+                var curvePublic = channel.curvePublic;
+                var friend = contactsData[curvePublic] || friendData;
+                $(mute).hide();
+                muteUser(friend);
+            });
+
             $(remove).click(function (e) {
                 e.stopPropagation();
                 var channel = state.channels[id];
                 if (!channel.isFriendChat) { return; }
                 var curvePublic = channel.curvePublic;
                 var friend = contactsData[curvePublic] || friendData;
-                var muteBox = UI.createCheckbox('cp-contacts-mute', Messages.contacts_mute, false);
                 var content = h('div', [
                     UI.setHTML(h('p'), Messages._getKey('contacts_confirmRemove', [Util.fixHTML(friend.name)])),
-                    muteBox
                 ]);
                 UI.confirm(content, function (yes) {
                     if (!yes) { return; }
-                    var mute = Util.isChecked($(content).find('#cp-contacts-mute'));
-                    if (mute) { muteUser(friend); }
                     removeFriend(curvePublic);
                     // TODO remove friend from userlist ui
                     // FIXME seems to trigger EJOINED from netflux-websocket (from server);
@@ -819,25 +831,30 @@ define([
 
                 var rows = Object.keys(muted).map(function (curve) {
                     var data = muted[curve];
-                    var avatar = h('div.cp-avatar');
+                    var avatar = h('span.cp-avatar');
-                    var button = h('td', h('i.fa.fa-times', {title: Messages.contacts_unmute}));
+                    var button = h('button.btn.btn-secondary', [
+                        h('i.fa.fa-ban'),
+                        Messages.contacts_unmute || 'unmute'
+                    ]);
                     UIElements.displayAvatar(common, $(avatar), data.avatar, data.name);
                     $(button).click(function () {
                         execCommand('UNMUTE_USER', curve, function (e, data) {
                             if (e) { return void console.error(e); }
-                            $(button).closest('tr').remove();
+                            $(button).closest('div').remove();
                             if (!data) { $button.hide(); }
+                            $('.cp-app-contacts-friend[data-user="'+curve+'"]')
+                                .find('.cp-mute-icon').show();
                         });
                     });
-                    return h('tr', [
+                    return h('div.cp-contacts-muted-user', [
-                        h('td', avatar),
+                        h('span', avatar),
-                        h('td', data.name),
+                        h('span', data.name),
                         button
                     ]);
                 });
                 var content = h('div', [
-                    h('p', Messages.contacts_mutedUsers),
+                    h('h4', Messages.contacts_mutedUsers || 'Muted users...'),
-                    h('table', rows)
+                    h('div.cp-contacts-muted-table', rows)
                 ]);
                 $button.off('click');
                 $button.click(function () {

www/common/outer/async-store.js

@@ -1253,10 +1253,6 @@ define([
             if (friend) { return void cb({error: 'ALREADY_FRIEND'}); }
             if (!data.notifications || !data.curvePublic) { return void cb({error: 'INVALID_USER'}); }
 
-            // Unmute this user when we send them a friend request
-            var muted = store.proxy.mutedUsers || {};
-            delete muted[data.curvePublic];
-
             store.proxy.friends_pending = store.proxy.friends_pending || {};
 
             var twoDaysAgo = +new Date() - (2 * 24 * 3600 * 1000);

www/contacts/app-contacts.less

@@ -1,5 +1,6 @@
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/messenger.less';
+@import (reference) '../../customize/src/less2/include/avatar.less';
 
 // body
 &.cp-app-contacts {
@@ -17,6 +18,17 @@
         display: flex; // We need this to remove a 3px border at the bottom of the toolbar
     }
 
+    .cp-contacts-muted-table {
+        .avatar_main(50px);
+        .cp-contacts-muted-user {
+            display: flex;
+            align-items: center;
+            span:nth-child(2) {
+                flex: 1;
+            }
+        }
+    }
+
     .messenger_main();
 }
 

www/profile/app-profile.less

@@ -10,6 +10,8 @@
     );
     .sidebar-layout_main();
 
+    @cp-profile-is-your-friend: #777;
+
     display: flex;
     flex-flow: column;
     #cp-app-profile-header {
@@ -112,6 +114,14 @@
         }
     }
 
+    .cp-app-profile-friend {
+        display: flex;
+        align-items: center;
+        color: @cp-profile-is-your-friend;
+        .fa {
+            margin-right: 0.2em;
+        }
+    }
     .cp-app-profile-friend-request {
         flex: 0;
         width: 400px;

www/profile/inner.js

@@ -199,49 +199,40 @@ define([
         // This is a friend: display the "friend" message and an "unfriend" button
         if (friends[data.curvePublic]) {
             // Add friend message
-            APP.$friend.append(h('p.cp-app-profile-friend', Messages._getKey('profile_friend', [name])));
+            APP.$friend.append(h('p.cp-app-profile-friend', [
+                h('i.fa.fa-address-book'),
+                Messages._getKey('profile_friend', [name])
+            ]));
             if (!friends[data.curvePublic].notifications) { return; }
             // Add unfriend button
-            var $unfriendButton = $('<button>', {
+            var unfriendButton = h('button.btn.btn-primary.cp-app-profile-friend-request', [
-                'class': 'btn btn-danger cp-app-profile-friend-request',
+                h('i.fa.fa-user-times'),
-            }).text(Messages.contacts_remove).appendTo(APP.$friend);
+                Messages.contacts_remove
-            $unfriendButton.click(function () {
+            ]);
-                // Unfriend confirm + mute checkbox
+            $(unfriendButton).click(function () {
-                var muteBox = UI.createCheckbox('cp-contacts-mute', Messages.contacts_mute, false);
+                // Unfriend confirm
                 var content = h('div', [
-                    UI.setHTML(h('p'), Messages._getKey('contacts_confirmRemove', [name])),
+                    UI.setHTML(h('p'), Messages._getKey('contacts_confirmRemove', [name]))
-                    muteBox
                 ]);
                 UI.confirm(content, function (yes) {
                     if (!yes) { return; }
-                    // Mute if necessary
-                    var mute = Util.isChecked($(content).find('#cp-contacts-mute'));
-                    if (mute) {
-                        module.execCommand('MUTE_USER', {
-                            curvePublic: data.curvePublic,
-                            name: name,
-                            avatar: data.avatar
-                        }, function (e /*, removed */) {
-                            if (e) { return void console.error(e); }
-                        });
-                    }
-                    // And unfriend
                     module.execCommand('REMOVE_FRIEND', data.curvePublic, function (e) {
                         if (e) { return void console.error(e); }
                     });
                 });
-            });
+            }).appendTo(APP.$friend);
             return;
         }
 
-        var $button = $('<button>', {
+        var button = h('button.btn.btn-success.cp-app-profile-friend-request', [
-            'class': 'btn btn-success cp-app-profile-friend-request',
+            h('i.fa.fa-user-plus'),
-        }).appendTo(APP.$friend);
+        ]);
+        var $button = $(button).appendTo(APP.$friend);
 
         // If this curve has sent us a friend request, we should not be able to sent it to them
         var friendRequests = common.getFriendRequests();
         if (friendRequests[data.curvePublic]) {
-            $button.html(Messages._getKey('friendRequest_received', [data.name || Messages.anonymous]))
+            $button.append(Messages._getKey('friendRequest_received', [data.name || Messages.anonymous]))
                 .click(function () {
                 UIElements.displayFriendRequestModal(common, friendRequests[data.curvePublic]);
             });
@@ -251,41 +242,70 @@ define([
         // Pending friend (we've sent a friend request)
         var pendingFriends = APP.common.getPendingFriends(); // Friend requests sent
         if (pendingFriends[data.curvePublic]) {
-            $button.attr('disabled', 'disabled').text(Messages.profile_friendRequestSent);
+            $button.attr('disabled', 'disabled').append(Messages.profile_friendRequestSent);
             return;
         }
-        // This is not a friend yet: we can send a friend request or mute them
+        // This is not a friend yet: we can send a friend request
         $button.text(Messages._getKey('userlist_addAsFriendTitle', [data.name || Messages.anonymous]))
             .click(function () {
                 APP.common.sendFriendRequest({
                     curvePublic: data.curvePublic,
                     notifications: data.notifications
                 }, function () {
-                    $button.attr('disabled', 'disabled').text(Messages.profile_friendRequestSent);
+                    $button.attr('disabled', 'disabled').append(Messages.profile_friendRequestSent);
                 });
             });
+    };
+
+    var addMuteButton = function ($container) {
+        if (!APP.readOnly || !APP.common.isLoggedIn()) { return; }
+        APP.$mute = $(h('div.cp-app-profile-mute-container'));
+        $container.append(APP.$mute);
+    };
+    var refreshMute = function (data) {
+        if (!APP.$mute) { return; }
+
+        var me = common.getMetadataMgr().getUserData().curvePublic;
+        if (data.curvePublic === me) {
+            APP.$mute.remove();
+            return;
+        }
+
 
         // Add mute/unmute buttons
-        var $mute = $(h('div')).appendTo(APP.$friend);
+        var $mute = APP.$mute;
+        var module = common.makeUniversal('messenger');
         module.execCommand('GET_MUTED_USERS', null, function (muted) {
             if (!muted || typeof(muted) !== "object") { return; }
+            $mute.html('');
             var isMuted = muted[data.curvePublic];
             if (isMuted) {
-                var $unmuteButton = $('<button>', {
+                var unmuteButton = h('button.btn.btn-secondary.cp-app-profile-friend-request', [
-                    'class': 'btn btn-danger cp-app-profile-friend-request',
+                    h('i.fa.fa-ban'),
-                }).text(Messages.contacts_unmute || 'UNMUTE').appendTo($mute);
+                    Messages.contacts_unmute || 'unmute'
-                $unmuteButton.click(function () {
+                ]);
+                $(unmuteButton).click(function () {
                     module.execCommand('UNMUTE_USER', data.curvePublic, function (e) {
-                        if (e) { return void console.error(e); }
+                        if (e) { return void UI.warn(Messages.error); }
-                        refreshFriendRequest(data);
+                        refreshMute(data);
-                    });
                     });
+                }).appendTo($mute);
                 return;
             }
-            var button = UIElements.createMuteButton(common, data, function () {
+            var muteButton = h('button.btn.btn-danger.cp-app-profile-friend-request', [
-                refreshFriendRequest(data);
+                h('i.fa.fa-ban'),
+                Messages.contacts_mute || 'mute'
+            ]);
+            $(muteButton).click(function () {
+                module.execCommand('MUTE_USER', {
+                    curvePublic: data.curvePublic,
+                    name: data.displayName || data.name,
+                    avatar: data.avatar
+                }, function (e) {
+                    if (e) { return void UI.warn(Messages.error); }
+                    refreshMute(data);
                 });
-            $mute.append(button);
+            }).appendTo($mute);
         });
     };
 
@@ -443,6 +463,7 @@ define([
             addDisplayName($rightside);
             addLink($rightside);
             addFriendRequest($rightside);
+            addMuteButton($rightside);
             addDescription(APP.$rightside);
             addViewButton(APP.$rightside);
             APP.initialized = true;
@@ -456,6 +477,7 @@ define([
         refreshLink(data);
         refreshDescription(data);
         refreshFriendRequest(data);
+        refreshMute(data);
     };
 
     var createToolbar = function () {