From b9e06bcf66275fca1f7221a59f787b4134c60995 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
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 51ab3de8..6b885273 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({
<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>
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 3eca1f76..eca63c78 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 <wm.wragg@gmail.com>
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 1a186178..1f068526 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;
}