Initial sub list notifications count. Still needs propagation of muting/unmuting etc. events from room tile up to sub list

pull/2028/head
wmwragg 2016-08-23 10:47:17 +01:00
parent ca4d506391
commit a980864886
2 changed files with 70 additions and 8 deletions

View File

@ -214,6 +214,38 @@ var RoomSubList = React.createClass({
this.setState({ sortedList: list.sort(comparator) }); this.setState({ sortedList: list.sort(comparator) });
}, },
roomNotificationCount: function() {
var self = this;
var subListCount = 0;
var subListHighlight = false;
var cli = MatrixClientPeg.get();
this.state.sortedList.map(function(room) {
var notifsMuted = false;
if (!cli.isGuest()) {
var roomPushRule = cli.getRoomPushRule("global", room.roomId);
if (roomPushRule) {
if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
notifsMuted = true;
}
}
}
var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
var notificationCount = room.getUnreadNotificationCount();
if (notificationCount > 0 && (!notifsMuted || (notifsMuted && highlight))) {
subListCount += notificationCount;
if (highlight) {
subListHighlight = true;
}
}
});
return [subListCount, subListHighlight];
},
moveRoomTile: function(room, atIndex) { moveRoomTile: function(room, atIndex) {
if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex); if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex);
//console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms)); //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms));
@ -329,12 +361,9 @@ var RoomSubList = React.createClass({
_getHeaderJsx: function() { _getHeaderJsx: function() {
var TintableSvg = sdk.getComponent("elements.TintableSvg"); var TintableSvg = sdk.getComponent("elements.TintableSvg");
var chevronClasses = classNames({ var subListNotifications = this.roomNotificationCount();
'mx_RoomSubList_chevron': true, var subListNotificationsCount = subListNotifications[0];
'mx_RoomSubList_chevronUp': this.state.hidden, var subListNotificationsHighlight = subListNotifications[1];
'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
});
var roomCount = this.props.list.length > 0 ? this.props.list.length : ''; var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
var isTruncatable = this.props.list.length > TRUNCATE_AT; var isTruncatable = this.props.list.length > TRUNCATE_AT;
@ -342,12 +371,24 @@ var RoomSubList = React.createClass({
roomCount = TRUNCATE_AT + " of " + roomCount; roomCount = TRUNCATE_AT + " of " + roomCount;
} }
var chevronClasses = classNames({
'mx_RoomSubList_chevron': true,
'mx_RoomSubList_chevronUp': this.state.hidden,
'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
});
var badgeClasses = classNames({
'mx_RoomSubList_badge': true,
'mx_RoomSubList_badgeHighlight': subListNotificationsHighlight,
});
return ( return (
<div onClick={ this.onClick } className="mx_RoomSubList_label"> <div onClick={ this.onClick } className="mx_RoomSubList_label">
{ this.props.collapsed ? '' : this.props.label } { this.props.collapsed ? '' : this.props.label }
<div className="mx_RoomSubList_roomCount">{roomCount}</div> <div className="mx_RoomSubList_roomCount">{roomCount}</div>
<div className={chevronClasses}></div> <div className={chevronClasses}></div>
<div className="mx_RoomSubList_badge">0</div> <div className={badgeClasses}>{subListNotificationsCount}</div>
</div> </div>
); );
}, },

View File

@ -66,13 +66,34 @@ limitations under the License.
padding-top: 1px; padding-top: 1px;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
background-color: #76cfa6; /* Temporary */ background-color: #76cfa6;
} }
.collapsed .mx_RoomSubList_badge { .collapsed .mx_RoomSubList_badge {
display: none; display: none;
} }
.mx_RoomSubList_badgeHighlight {
background-color: #ff0064;
}
/* This is the bottom of the speech bubble */
.mx_RoomSubList_badgeHighlight:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid #ff0064;
border-right: 7px solid transparent;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomSubList_badgeHighlight:after {
display: none;
}
.mx_RoomSubList_chevron { .mx_RoomSubList_chevron {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;