mirror of https://github.com/vector-im/riot-web
Moved mute state to mentions only
parent
a190862ed3
commit
b9e06bcf66
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue