Merge pull request #2235 from vector-im/wmwragg/two-state-sublist-headers

Wmwragg/two state sublist headers

src/components/structures/RoomSubList.js

@@ -85,8 +85,7 @@ var RoomSubList = React.createClass({
     getInitialState: function() {
         return {
             hidden: this.props.startAsHidden || false,
-            capTruncate: this.props.list.length > TRUNCATE_AT,
-            truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1,
+            truncateAt: TRUNCATE_AT,
             sortedList: [],
         };
     },
@@ -218,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,14 +430,26 @@ var RoomSubList = React.createClass({
     },
 
     _createOverflowTile: function(overflowCount, totalCount) {
-        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        // XXX: this is duplicated from RoomTile - factor it out
+        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_RoomTile mx_RoomTile_ellipsis" onClick={this._showFullMemberList}>
-                <div className="mx_RoomTile_avatar">
-                    <BaseAvatar url="img/ellipsis.svg" name="..." width={24} height={24} />
-                </div>
-                <div className="mx_RoomTile_name">and { overflowCount } others...</div>
+            <div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
+                <div className="mx_RoomSubList_line"></div>
+                <div className="mx_RoomSubList_more">more</div>
+            <div className={ badgeClasses }>{ content }</div>
             </div>
         );
     },

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

@@ -25,8 +25,8 @@ limitations under the License.
 .mx_RoomTile_tooltip {
     display: inline-block;
     position: relative;
-    top: -62px;
-    left: 46px;
+    top: -54px;
+    left: -12px;
 }
 
 
@@ -113,18 +113,12 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
-.mx_RoomTile_ellipsis .mx_RoomTile_name {
-    font-style: italic;
-    color: #454545;
-}
-
 .mx_RoomTile_invite {
-/*    color: rgba(69, 69, 69, 0.5);
-*/
+/*    color: rgba(69, 69, 69, 0.5); */
 }
 
 .collapsed .mx_RoomTile_nameContainer {
-    height: 0;
+    width: 60px; /* colapsed panel width */
 }
 
 .collapsed .mx_RoomTile_name {

src/skins/vector/css/vector-web/structures/RoomSubList.css

@@ -147,3 +147,95 @@ limitations under the License.
     border-left: 6px solid #76cfa6;
     border-bottom: 5px solid transparent;
 }
+
+/* The overflow section */
+.mx_RoomSubList_ellipsis {
+    display: block;
+    line-height: 11px;
+    height: 18px;
+    position: relative;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.collapsed .mx_RoomSubList_ellipsis {
+    height: 20px;
+}
+
+.mx_RoomSubList_line {
+    display: inline-block;
+    width: 159px;
+    border-top: dotted 2px #76cfa6;
+    vertical-align: middle;
+}
+
+.collapsed .mx_RoomSubList_line {
+    display: none;
+}
+
+.mx_RoomSubList_more {
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: 600;
+    text-align: left;
+    color: #76cfa6;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-left: 7px;
+    vertical-align: middle;
+}
+
+.collapsed .mx_RoomSubList_more {
+    display: none;
+}
+
+.mx_RoomSubList_moreBadge {
+    display: inline-block;
+    min-width: 15px;
+    height: 13px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: -2px;
+    border-radius: 8px;
+    border: solid 1px #76cfa6;
+    color: #fff;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    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;
+    margin-top: 2px;
+}
+
+.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown {
+    position: relative;
+    top: 4px;
+    left: 2px;
+}
+
+

src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css

@@ -48,5 +48,6 @@ limitations under the License.
     pointer-events: none;
     line-height: 14px;
     font-size: 13px;
+    color: rgba(0, 0, 0, 0.7);
 }