Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases 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

48
src/components/structures/RoomSubList.js
View File

@ -217,22 +217,30 @@ var RoomSubList = React.createClass({
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;
return this.props.list.reduce(function(result, room) {
var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
var notificationCount = room.getUnreadNotificationCount();
return this.props.list.reduce(function(result, room, index) {
if (truncateAt === undefined || index >= truncateAt) {
var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
var notificationCount = room.getUnreadNotificationCount();
const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
const badges = notifBadges || mentionBadges;
const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
const badges = notifBadges || mentionBadges;
if (badges) {
result[0] += notificationCount;
if (highlight) {
result[1] = true;
if (badges) {
result[0] += notificationCount;
if (highlight) {
result[1] = true;
}
}
}
return result;
@ -423,11 +431,25 @@ var RoomSubList = React.createClass({
_createOverflowTile: function(overflowCount, totalCount) {
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 (
<div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
<div className="mx_RoomSubList_line"></div>
<div className="mx_RoomSubList_more">more</div>
<div className="mx_RoomSubList_moreBadge">{ content }</div>
<div className={ badgeClasses }>{ content }</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 {
display: block;
line-height: 11px;
height: auto;
margin-bottom: 4px;
height: 18px;
position: relative;
cursor: pointer;
font-size: 13px;
}
.collapsed .mx_RoomSubList_ellipsis {
height: 16px;
height: 20px;
}
.mx_RoomSubList_line {
@ -205,12 +204,28 @@ limitations under the License.
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
padding-left: 3px;
padding-right: 3px;
background-color: #fff;
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 {
position: static;
margin-left: 16px;