Merge pull request #1926 from vector-im/wmwragg/mute-mention-state-fix

Wmwragg/mute mention state fix

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(
+            // Wrapping this in a q promise, as setRoomMutePushRule can return
-                "global", roomId, isMuted
+            // a promise or a value
-            ).then(function() {
+            q(cli.setRoomMutePushRule("global", roomId, areNotifsMuted))
-                self.setState({areNotifsMuted: isMuted});
+            .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({
                     <img src="img/notif-slider.svg" width="20" height="107" />
                 </div>
                 <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
                     <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
                     All messages (loud)
                 </div>
@@ -136,6 +138,7 @@ module.exports = React.createClass({
                     All messages
                 </div>
                 <div className={ mentionsClasses } onClick={this._onClickMentions} >
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
                     <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
                     Mentions only
                 </div>

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 */
+/* This is the bottom of the speech bubble */
-.mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after {
+.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_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
+.mx_RoomTile.mx_RoomTile_menu.mx_RoomTile_noBadges .mx_RoomTile_badge {
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
     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 {

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