mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-26 04:35:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add a suitable overflow tile for the member list

Browse source
This commit is contained in:
Kegan Dougal 2016-01-21 11:41:28 +00:00
parent 9f362e488c
commit eed83f982e
3 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/views/elements/TruncatedList.js
View file

@ -19,8 +19,12 @@ module.exports = React.createClass({
displayName: 'TruncatedList',
propTypes: {
// The number of elements to show before truncating
truncateAt: React.PropTypes.number,
// The className to apply to the wrapping div
className: React.PropTypes.string,
// A function which will be invoked when an overflow element is required.
// This will be inserted after the children.
createOverflowElement: React.PropTypes.func
},

12
src/components/views/rooms/EntityTile.js
View file

@ -39,7 +39,8 @@ module.exports = React.createClass({
presenceActiveAgo: React.PropTypes.number,
showInviteButton: React.PropTypes.bool,
shouldComponentUpdate: React.PropTypes.func,
onClick: React.PropTypes.func
onClick: React.PropTypes.func,
suppressOnHover: React.PropTypes.bool
},
getDefaultProps: function() {
@ -49,6 +50,7 @@ module.exports = React.createClass({
presenceState: "offline",
presenceActiveAgo: -1,
showInviteButton: false,
suppressOnHover: false
};
},
@ -75,12 +77,10 @@ module.exports = React.createClass({
var presenceClass = PRESENCE_CLASS[this.props.presenceState] || "mx_EntityTile_offline";
var mainClassName = "mx_EntityTile ";
mainClassName += presenceClass;
if (this.state.hover) {
mainClassName += " mx_EntityTile_hover";
}
var nameEl;
if (this.state.hover) {
if (this.state.hover && !this.props.suppressOnHover) {
mainClassName += " mx_EntityTile_hover";
var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
nameEl = (
<div className="mx_EntityTile_details">

17
src/components/views/rooms/MemberList.js
View file

@ -260,7 +260,21 @@ module.exports = React.createClass({
return to_display;
},
_createOverflowTile: function(overflowCount, totalCount) {
// For now we'll pretend this is any entity. It should probably be a separate tile.
var EntityTile = sdk.getComponent("rooms.EntityTile");
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
return (
<EntityTile avatarJsx={
<BaseAvatar name="+" width={36} height={36} />
} key="overflow" name={`and ${overflowCount} more`} presenceState="online"
suppressOnHover={true} onClick={this._showFullMemberList} />
);
},
_showFullMemberList: function() {
console.log("TODO");
},
memberSort: function(userIdA, userIdB) {
var userA = this.memberDict[userIdA].user;
@ -373,7 +387,8 @@ module.exports = React.createClass({
<div className="mx_MemberList">
{this.inviteTile()}
<GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
<TruncatedList className="mx_MemberList_wrapper">
<TruncatedList className="mx_MemberList_wrapper"
createOverflowElement={this._createOverflowTile}>
{this.makeMemberTiles('join', this.state.searchQuery)}
</TruncatedList>
{invitedSection}