gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Moved mute state to mentions only

This commit is contained in:
wmwragg 2016-08-04 16:17:47 +01:00
parent a190862ed3
commit b9e06bcf66
2 changed files with 20 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/views/context_menus/NotificationStateContextMenu.js
View File

@ -48,26 +48,27 @@ module.exports = React.createClass({
}; };
}, },
_save: function( isMuted ) { _save: function( areNotifsMuted ) {
var self = this; var self = this;
const roomId = this.props.room.roomId; const roomId = this.props.room.roomId;
var cli = MatrixClientPeg.get(); var cli = MatrixClientPeg.get();
if (!cli.isGuest()) { 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 // delay slightly so that the user can see their state change
// before closing the menu // 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 // tell everyone that wants to know of the change in
// notification state // notification state
dis.dispatch({ dis.dispatch({
action: 'notification_change', action: 'notification_change',
roomId: self.props.room.roomId, roomId: self.props.room.roomId,
isMuted: isMuted, areNotifsMuted: areNotifsMuted,
}); });
// Close the context menu // Close the context menu
@ -91,11 +92,11 @@ module.exports = React.createClass({
}, },
_onClickMentions: function() { _onClickMentions: function() {
// Placeholder this._save(true);
}, },
_onClickMute: function() { _onClickMute: function() {
this._save(true); // Placeholder
}, },
render: function() { render: function() {
@ -113,12 +114,12 @@ module.exports = React.createClass({
var mentionsClasses = classNames({ var mentionsClasses = classNames({
'mx_NotificationStateContextMenu_field': true, 'mx_NotificationStateContextMenu_field': true,
'mx_NotificationStateContextMenu_fieldDisabled': true, 'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted,
}); });
var muteNotifsClasses = classNames({ var muteNotifsClasses = classNames({
'mx_NotificationStateContextMenu_field': true, 'mx_NotificationStateContextMenu_field': true,
'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted, 'mx_NotificationStateContextMenu_fieldDisabled': true,
}); });
return ( return (
@ -127,6 +128,7 @@ module.exports = React.createClass({
<img src="img/notif-slider.svg" width="20" height="107" /> <img src="img/notif-slider.svg" width="20" height="107" />
</div> </div>
<div className={ alertMeClasses } onClick={this._onClickAlertMe} > <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" /> <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
All messages (loud) All messages (loud)
</div> </div>
@ -136,6 +138,7 @@ module.exports = React.createClass({
All messages All messages
</div> </div>
<div className={ mentionsClasses } onClick={this._onClickMentions} > <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" /> <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
Mentions only Mentions only
</div> </div>

51
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View File

@ -22,10 +22,6 @@ limitations under the License.
height: 34px; height: 34px;
} }
.mx_RoomTile .mx_RoomTile_mute {
opacity: 0.4;
}
.mx_RoomTile_nameContainer { .mx_RoomTile_nameContainer {
display: inline-block; display: inline-block;
width: 180px; width: 180px;
@ -85,30 +81,13 @@ limitations under the License.
z-index: 200; 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 */ /* 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; 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: ""; content: "";
position: absolute; position: absolute;
display: block; display: block;
@ -142,22 +121,9 @@ limitations under the License.
opacity: 1; 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); 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 { .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@ -168,11 +134,6 @@ limitations under the License.
background-color: #ff0064; background-color: #ff0064;
} }
.mx_RoomTile_read .mx_RoomTile_badge {
background-color: rgb(214, 214, 214);
opacity: 0;
}
.mx_RoomTile_unread, .mx_RoomTile_highlight { .mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: 800; font-weight: 800;
} }
@ -182,7 +143,7 @@ limitations under the License.
} }
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown { .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 144px; width: 140px;
} }
.mx_RoomTile_arrow { .mx_RoomTile_arrow {