mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 11:15:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Notification counts now done correctly, as well as highlights

Browse source
This commit is contained in:
wmwragg 2016-09-16 13:25:39 +01:00
parent 72e108c4f9
commit 7af765976b
2 changed files with 55 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/structures/RoomSubList.js
View file

@ -217,10 +217,17 @@ var RoomSubList = React.createClass({
return roomNotifState != RoomNotifs.MUTE; return roomNotifState != RoomNotifs.MUTE;
}, },
roomNotificationCount: function() { /**
* Total up all the notification counts from the rooms
*
* @param {Number} If supplied will only total notifications for rooms outside the truncation number
* @returns {Array} The array takes the form [total, highlight] where highlight is a bool
*/
roomNotificationCount: function(truncateAt) {
var self = this; var self = this;
return this.props.list.reduce(function(result, room) { return this.props.list.reduce(function(result, room, index) {
if (truncateAt === undefined || index >= truncateAt) {
var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites'; var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
var notificationCount = room.getUnreadNotificationCount(); var notificationCount = room.getUnreadNotificationCount();
@ -235,6 +242,7 @@ var RoomSubList = React.createClass({
result[1] = true; result[1] = true;
} }
} }
}
return result; return result;
}, [0, false]); }, [0, false]);
}, },
@ -423,11 +431,25 @@ var RoomSubList = React.createClass({
_createOverflowTile: function(overflowCount, totalCount) { _createOverflowTile: function(overflowCount, totalCount) {
var content = <div className="mx_RoomSubList_chevronDown"></div>; var content = <div className="mx_RoomSubList_chevronDown"></div>;
var overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
var overflowNotifCount = overflowNotifications[0];
var overflowNotifHighlight = overflowNotifications[1];
if (overflowNotifCount && !this.props.collapsed) {
content = overflowNotifCount;
}
var badgeClasses = classNames({
'mx_RoomSubList_moreBadge': true,
'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed,
'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed,
});
return ( return (
<div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}> <div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
<div className="mx_RoomSubList_line"></div> <div className="mx_RoomSubList_line"></div>
<div className="mx_RoomSubList_more">more</div> <div className="mx_RoomSubList_more">more</div>
<div className="mx_RoomSubList_moreBadge">{ content }</div> <div className={ badgeClasses }>{ content }</div>
</div> </div>
); );
}, },

25
src/skins/vector/css/vector-web/structures/RoomSubList.css
View file

@ -152,15 +152,14 @@ limitations under the License.
.mx_RoomSubList_ellipsis { .mx_RoomSubList_ellipsis {
display: block; display: block;
line-height: 11px; line-height: 11px;
height: auto; height: 18px;
margin-bottom: 4px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
} }
.collapsed .mx_RoomSubList_ellipsis { .collapsed .mx_RoomSubList_ellipsis {
height: 16px; height: 20px;
} }
.mx_RoomSubList_line { .mx_RoomSubList_line {
@ -205,12 +204,28 @@ limitations under the License.
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
padding-left: 4px; padding-left: 3px;
padding-right: 4px; padding-right: 3px;
background-color: #fff; background-color: #fff;
vertical-align: middle; vertical-align: middle;
} }
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
background-color: #76cfa6;
border: 0;
padding-top: 3px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
background-color: #ff0064;
border: 0;
padding-top: 3px;
padding-left: 4px;
padding-right: 4px;
}
.collapsed .mx_RoomSubList_moreBadge { .collapsed .mx_RoomSubList_moreBadge {
position: static; position: static;
margin-left: 16px; margin-left: 16px;