imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2224 from matrix-org/bwindels/removedndmore

Browse source 
Redesign: remove room list truncation and DND
This commit is contained in:
Bruno Windels 2018-10-19 13:30:18 +00:00 • committed by GitHub
commit f2ee8307dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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',
@ -44,7 +42,6 @@ const RoomSubList = React.createClass({
list: PropTypes.arrayOf(PropTypes.object).isRequired,
label: PropTypes.string.isRequired,
tagName: PropTypes.string,
editable: PropTypes.bool,
order: PropTypes.string.isRequired,
@ -68,7 +65,6 @@ const RoomSubList = React.createClass({
getInitialState: function() {
return {
hidden: this.props.startAsHidden || false,
truncateAt: -1, // TRUNCATE_AT,
sortedList: [],
};
},
@ -144,12 +140,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 +168,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 +178,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;
@ -217,15 +204,9 @@ const RoomSubList = React.createClass({
},
makeRoomTiles: function() {
const DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
const RoomTile = sdk.getComponent("rooms.RoomTile");
return this.state.sortedList.map((room, index) => {
// XXX: is it evil to pass in this as a prop to RoomTile? Yes.
// We should only use <DNDRoomTile /> when editable
const RoomTileComponent = this.props.editable ? DNDRoomTile : RoomTile;
return <RoomTileComponent
index={index} // For DND
return <RoomTile
room={room}
roomSubList={this}
tagName={this.props.tagName}
@ -356,44 +337,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) {
@ -420,36 +364,14 @@ 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.sortedList.length > 0 || this.props.extraTiles.length > 0) {
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>
return <div className={"mx_RoomSubList"}>
{this._getHeaderJsx()}
{subList}
</div>;
return this.props.editable ?
<Droppable
droppableId={"room-sub-list-droppable_" + this.props.tagName}
type="draggable-RoomTile"
>
{(provided, snapshot) => (
<div ref={provided.innerRef}>
{subListContent}
</div>
)}
</Droppable> : subListContent;
} else {
const Loader = sdk.getComponent("elements.Spinner");
if (this.props.showSpinner) {