implement the correct design for memberlist, modulo gemini

This commit is contained in:
Matthew Hodgson 2016-01-20 22:04:49 +00:00
parent 161cdef36e
commit 3aaf934c97
3 changed files with 14 additions and 11 deletions

View file

@ -72,7 +72,7 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
var presenceClass = PRESENCE_CLASS[this.props.presenceState]; var presenceClass = PRESENCE_CLASS[this.props.presenceState] || "mx_EntityTile_offline";
var mainClassName = "mx_EntityTile "; var mainClassName = "mx_EntityTile ";
mainClassName += presenceClass; mainClassName += presenceClass;
if (this.state.hover) { if (this.state.hover) {

View file

@ -362,7 +362,7 @@ module.exports = React.createClass({
invitedSection = ( invitedSection = (
<div className="mx_MemberList_invited"> <div className="mx_MemberList_invited">
<h2>Invited</h2> <h2>Invited</h2>
<div className="mx_MemberList_wrapper"> <div autoshow={true} className="mx_MemberList_wrapper">
{invitedMemberTiles} {invitedMemberTiles}
</div> </div>
</div> </div>
@ -370,15 +370,15 @@ module.exports = React.createClass({
} }
return ( return (
<div className="mx_MemberList"> <div className="mx_MemberList">
<GeminiScrollbar autoshow={true} className="mx_MemberList_border">
{this.inviteTile()} {this.inviteTile()}
<div> <div autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
<div className="mx_MemberList_wrapper"> <div className="mx_MemberList_wrapper">
{this.makeMemberTiles('join', this.state.searchQuery)} {this.makeMemberTiles('join', this.state.searchQuery)}
</div> </div>
{invitedSection}
</div>
<div className="mx_MemberList_bottom">
</div> </div>
{invitedSection}
</GeminiScrollbar>
</div> </div>
); );
} }

View file

@ -104,13 +104,16 @@ var SearchableEntityList = React.createClass({
} }
return ( return (
<div> <div className={ "mx_SearchableEntityList " + (this.state.results.length ? "mx_SearchableEntityList_expanded" : "") }>
{inputBox} {inputBox}
<div className="mx_SearchableEntityList_list"> <div className="mx_SearchableEntityList_listWrapper">
{this.state.results.map((entity) => { <div autoshow={true} className="mx_SearchableEntityList_list">
return entity.getJsx(); {this.state.results.map((entity) => {
})} return entity.getJsx();
})}
</div>
</div> </div>
{ this.state.results.length ? <div className="mx_SearchableEntityList_hrWrapper"><hr/></div> : '' }
</div> </div>
); );
} }