diff --git a/customize.dist/src/less2/include/messenger.less b/customize.dist/src/less2/include/messenger.less index 4b89b967d..43f20eda9 100644 --- a/customize.dist/src/less2/include/messenger.less +++ b/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); diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 24228cfaf..b8c272bad 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/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%); } diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 459f4319d..6450ced47 100644 --- a/www/common/common-ui-elements.js +++ b/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; }); diff --git a/www/common/messenger-ui.js b/www/common/messenger-ui.js index f157f2a08..41304151e 100644 --- a/www/common/messenger-ui.js +++ b/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]), - room.isFriendChat ? remove : - (room.isPadChat || room.isTeamChat) ? undefined : leaveRoom, + 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 button = h('td', h('i.fa.fa-times', {title: Messages.contacts_unmute})); + var avatar = h('span.cp-avatar'); + 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', [ - h('td', avatar), - h('td', data.name), + return h('div.cp-contacts-muted-user', [ + h('span', avatar), + h('span', data.name), button ]); }); var content = h('div', [ - h('p', Messages.contacts_mutedUsers), - h('table', rows) + h('h4', Messages.contacts_mutedUsers || 'Muted users...'), + h('div.cp-contacts-muted-table', rows) ]); $button.off('click'); $button.click(function () { diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js index 0a44dfc76..0cf362e5d 100644 --- a/www/common/outer/async-store.js +++ b/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); diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less index 32753f136..99b927b6c 100644 --- a/www/contacts/app-contacts.less +++ b/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(); } diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less index 1284f31c4..5305a2612 100644 --- a/www/profile/app-profile.less +++ b/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; diff --git a/www/profile/inner.js b/www/profile/inner.js index 301fa0808..ef1431e97 100644 --- a/www/profile/inner.js +++ b/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 = $('