diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 2ddf383fde..26526f403a 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -127,81 +127,6 @@ limitations under the License. transform: rotateZ(-90deg); } -/* The overflow section */ -.mx_RoomSubList_ellipsis { - display: block; - line-height: 11px; - height: 18px; - position: relative; - cursor: pointer; - font-size: 13px; - - background-color: $secondary-accent-color; -} - -.mx_RoomSubList_line { - display: inline-block; - width: 159px; - border-top: dotted 2px $accent-color; - vertical-align: middle; -} - -.mx_RoomSubList_more { - display: inline-block; - text-transform: uppercase; - font-size: 10px; - font-weight: 600; - text-align: left; - color: $accent-color; - padding-left: 7px; - padding-right: 7px; - padding-left: 7px; - vertical-align: middle; -} - -.mx_RoomSubList_moreBadge { - display: inline-block; - min-width: 15px; - height: 13px; - position: absolute; - right: 8px; /*gutter */ - top: -2px; - border-radius: 8px; - border: solid 1px $accent-color; - color: $accent-fg-color; - font-weight: 600; - font-size: 10px; - text-align: center; - padding-top: 1px; - padding-left: 3px; - padding-right: 3px; - background-color: $primary-bg-color; - vertical-align: middle; -} - -.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify { - background-color: $accent-color; - border: 0; - padding-top: 3px; - padding-left: 4px; - padding-right: 4px; -} - -.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight { - background-color: $warning-color; - border: 0; - padding-top: 3px; - padding-left: 4px; - padding-right: 4px; -} - -.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown { - position: relative; - top: 4px; - left: 2px; -} - - .collapsed { .mx_RoomSubList_label { height: 17px; diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 61bbffb647..b00130f13d 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -33,8 +33,6 @@ import PropTypes from 'prop-types'; // turn this on for drop & drag console debugging galore const debug = false; -const TRUNCATE_AT = 10; - const RoomSubList = React.createClass({ displayName: 'RoomSubList', @@ -68,7 +66,6 @@ const RoomSubList = React.createClass({ getInitialState: function() { return { hidden: this.props.startAsHidden || false, - truncateAt: -1, // TRUNCATE_AT, sortedList: [], }; }, @@ -144,12 +141,6 @@ const RoomSubList = React.createClass({ // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic const isHidden = !this.state.hidden; this.setState({hidden: isHidden}); - - if (isHidden) { - // as good a way as any to reset the truncate state - this.setState({truncateAt: TRUNCATE_AT}); - } - this.props.onShowMoreRooms(); this.props.onHeaderClick(isHidden); } else { @@ -178,10 +169,9 @@ const RoomSubList = React.createClass({ /** * Total up all the notification counts from the rooms * - * @param {Number} truncateAt 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) { + roomNotificationCount: function() { const self = this; if (this.props.isInvite) { @@ -189,20 +179,18 @@ const RoomSubList = React.createClass({ } return this.props.list.reduce(function(result, room, index) { - if (truncateAt === undefined || index >= truncateAt) { - const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); - const highlight = room.getUnreadNotificationCount('highlight') > 0; - const notificationCount = room.getUnreadNotificationCount(); + const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); + const highlight = room.getUnreadNotificationCount('highlight') > 0; + const 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; @@ -356,44 +344,7 @@ const RoomSubList = React.createClass({ //
{ roomCount }
}, - _createOverflowTile: function(overflowCount, totalCount) { - let content =
; - - const overflowNotifications = this.roomNotificationCount(TRUNCATE_AT); - const overflowNotifCount = overflowNotifications[0]; - const overflowNotifHighlight = overflowNotifications[1]; - if (overflowNotifCount && !this.props.collapsed) { - content = FormattingUtils.formatCount(overflowNotifCount); - } - - const badgeClasses = classNames({ - 'mx_RoomSubList_moreBadge': true, - 'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed, - 'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed, - }); - - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - return ( - -
-
{_t("more")}
-
{content}
- - ); - }, - - _showFullMemberList: function() { - this.setState({ - truncateAt: -1, - }); - - this.props.onShowMoreRooms(); - this.props.onHeaderClick(false); - }, - render: function() { - const TruncatedList = sdk.getComponent('elements.TruncatedList'); - let content; if (this.props.showEmpty) { @@ -421,20 +372,10 @@ const RoomSubList = React.createClass({ } if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0 || this.props.editable) { - let subList; - const classes = "mx_RoomSubList"; - if (!this.state.hidden) { - subList = - {content} - ; - } else { - subList = - ; - } + const subList = this.state.hidden ? undefined : content; - const subListContent =
+ const subListContent =
{this._getHeaderJsx()} {subList}
;