mirror of
https://github.com/element-hq/element-web
synced 2024-11-22 17:25:50 +03:00
don't truncate room lists
This commit is contained in:
Bruno Windels
parent
c926aa2bfe
commit
874ef50273
2 changed files with 13 additions and 147 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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({
|
|||
// <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
|
||||
},
|
||||
|
||||
_createOverflowTile: function(overflowCount, totalCount) {
|
||||
let content = <div className="mx_RoomSubList_chevronDown" />;
|
||||
|
||||
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 (
|
||||
<AccessibleButton className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
|
||||
<div className="mx_RoomSubList_line" />
|
||||
<div className="mx_RoomSubList_more">{_t("more")}</div>
|
||||
<div className={badgeClasses}>{content}</div>
|
||||
</AccessibleButton>
|
||||
);
|
||||
},
|
||||
|
||||
_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 = <TruncatedList className={classes} truncateAt={this.state.truncateAt}
|
||||
createOverflowElement={this._createOverflowTile}>
|
||||
{content}
|
||||
</TruncatedList>;
|
||||
} else {
|
||||
subList = <TruncatedList className={classes}>
|
||||
</TruncatedList>;
|
||||
}
|
||||
const subList = this.state.hidden ? undefined : content;
|
||||
|
||||
const subListContent = <div>
|
||||
const subListContent = <div className={"mx_RoomSubList"}>
|
||||
{this._getHeaderJsx()}
|
||||
{subList}
|
||||
</div>;
|
||||
|
|
|
|||
Loading…
Reference in a new issue