From b9e06bcf66275fca1f7221a59f787b4134c60995 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 4 Aug 2016 16:17:47 +0100 Subject: [PATCH 1/2] Moved mute state to mentions only --- .../NotificationStateContextMenu.js | 25 +++++---- .../matrix-react-sdk/views/rooms/RoomTile.css | 51 +++---------------- 2 files changed, 20 insertions(+), 56 deletions(-) diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 51ab3de8ba..6b8852730b 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -48,26 +48,27 @@ module.exports = React.createClass({ }; }, - _save: function( isMuted ) { + _save: function( areNotifsMuted ) { var self = this; const roomId = this.props.room.roomId; var cli = MatrixClientPeg.get(); if (!cli.isGuest()) { - cli.setRoomMutePushRule( - "global", roomId, isMuted - ).then(function() { - self.setState({areNotifsMuted: isMuted}); + // Wrapping this in a q promise, as setRoomMutePushRule can return + // a promise or a value + q(cli.setRoomMutePushRule("global", roomId, areNotifsMuted)) + .then(function(s) { + self.setState({areNotifsMuted: areNotifsMuted}); // delay slightly so that the user can see their state change // before closing the menu - q.delay(500).then(function() { + return q.delay(500).then(function() { // tell everyone that wants to know of the change in // notification state dis.dispatch({ action: 'notification_change', roomId: self.props.room.roomId, - isMuted: isMuted, + areNotifsMuted: areNotifsMuted, }); // Close the context menu @@ -91,11 +92,11 @@ module.exports = React.createClass({ }, _onClickMentions: function() { - // Placeholder + this._save(true); }, _onClickMute: function() { - this._save(true); + // Placeholder }, render: function() { @@ -113,12 +114,12 @@ module.exports = React.createClass({ var mentionsClasses = classNames({ 'mx_NotificationStateContextMenu_field': true, - 'mx_NotificationStateContextMenu_fieldDisabled': true, + 'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted, }); var muteNotifsClasses = classNames({ 'mx_NotificationStateContextMenu_field': true, - 'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted, + 'mx_NotificationStateContextMenu_fieldDisabled': true, }); return ( @@ -127,6 +128,7 @@ module.exports = React.createClass({
+ All messages (loud)
@@ -136,6 +138,7 @@ module.exports = React.createClass({ All messages
+ Mentions only
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 3eca1f76dd..eca63c782b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -22,10 +22,6 @@ limitations under the License. height: 34px; } -.mx_RoomTile .mx_RoomTile_mute { - opacity: 0.4; -} - .mx_RoomTile_nameContainer { display: inline-block; width: 180px; @@ -85,30 +81,13 @@ limitations under the License. z-index: 200; } -/* Position mute icon when room muted and collapsed - invisible at the moment */ -.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { - background-color: rgba(0,0,0,0); - opacity: 0; - top: -2px; -} - -/* Position menu icon when room muted and collapsed */ -.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, -.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { - display: inline-block; - background-color: rgb(214, 214, 214); - letter-spacing: 0.1em; - opacity: 1; - top: -2px; -} - /* Hide the bottom of speech bubble */ -.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after { +.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after { display: none; } -/* This is the bottom of the speech bubble - not drawn when room muted */ -.mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after { +/* This is the bottom of the speech bubble */ +.mx_RoomTile_highlight .mx_RoomTile_badge:after { content: ""; position: absolute; display: block; @@ -142,22 +121,9 @@ limitations under the License. opacity: 1; } -/* Position menu icon when room muted */ -.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, -.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute { +.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, +.mx_RoomTile.mx_RoomTile_menu.mx_RoomTile_noBadges .mx_RoomTile_badge { background-color: rgb(214, 214, 214); - letter-spacing: 0.1em; - opacity: 1; - top: 9px; - right: 8px; /* gutter */ -} - -/* Position mute icon when room muted */ -.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute { - background-color: rgba(0,0,0,0); - opacity: 1; - top: 11px; - right: 6px; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { @@ -168,11 +134,6 @@ limitations under the License. background-color: #ff0064; } -.mx_RoomTile_read .mx_RoomTile_badge { - background-color: rgb(214, 214, 214); - opacity: 0; -} - .mx_RoomTile_unread, .mx_RoomTile_highlight { font-weight: 800; } @@ -182,7 +143,7 @@ limitations under the License. } .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown { - width: 144px; + width: 140px; } .mx_RoomTile_arrow { From b99e7598f925a94102d9460e82ab876c482dea8b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 4 Aug 2016 17:05:19 +0100 Subject: [PATCH 2/2] notification menu now has cickable radio buttons --- .../views/context_menus/NotificationStateContextMenu.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css index 1a186178e1..1f0685264b 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css +++ b/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css @@ -24,7 +24,7 @@ limitations under the License. padding-top: 4px; padding-right: 6px; padding-bottom: 10px; - padding-left: 20px; + padding-left: 8px; /* 20px */ cursor: pointer; white-space: nowrap; display: flex; @@ -33,7 +33,6 @@ limitations under the License. .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet { font-weight: bold; - padding-left: 8px; } .mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled { @@ -46,11 +45,12 @@ limitations under the License. } .mx_NotificationStateContextMenu_activeIcon { - display: none; + display: inline-block; + opacity: 0; position: relative; left: -5px; } .mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon { - display: inline-block; + opacity: 1; }