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

Add invite button JSX

Browse source
This commit is contained in:
Kegan Dougal 2016-01-18 16:47:31 +00:00
parent 71009d81b6
commit c758c0f84f
2 changed files with 24 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -23,9 +23,9 @@ var sdk = require('../../../index');
var PRESENCE_CLASS = { var PRESENCE_CLASS = {
"offline": "mx_MemberTile_offline", "offline": "mx_EntityTile_offline",
"online": "mx_MemberTile_online", "online": "mx_EntityTile_online",
"unavailable": "mx_MemberTile_unavailable" "unavailable": "mx_EntityTile_unavailable"
}; };
module.exports = React.createClass({ module.exports = React.createClass({
@ -73,19 +73,19 @@ module.exports = React.createClass({
render: function() { render: function() {
var presenceClass = PRESENCE_CLASS[this.props.presenceState]; var presenceClass = PRESENCE_CLASS[this.props.presenceState];
var mainClassName = "mx_MemberTile "; var mainClassName = "mx_EntityTile ";
mainClassName += presenceClass; mainClassName += presenceClass;
if (this.state.hover) { if (this.state.hover) {
mainClassName += " mx_MemberTile_hover"; mainClassName += " mx_EntityTile_hover";
} }
var nameEl; var nameEl;
if (this.state.hover) { if (this.state.hover) {
var PresenceLabel = sdk.getComponent("rooms.PresenceLabel"); var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
nameEl = ( nameEl = (
<div className="mx_MemberTile_details"> <div className="mx_EntityTile_details">
<img className="mx_MemberTile_chevron" src="img/member_chevron.png" width="8" height="12"/> <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
<div className="mx_MemberTile_userId">{ this.props.name }</div> <div className="mx_EntityTile_name_hover">{ this.props.name }</div>
<PresenceLabel activeAgo={this.props.presenceActiveAgo} <PresenceLabel activeAgo={this.props.presenceActiveAgo}
presenceState={this.props.presenceState} /> presenceState={this.props.presenceState} />
</div> </div>
@ -93,12 +93,22 @@ module.exports = React.createClass({
} }
else { else {
nameEl = ( nameEl = (
<div className="mx_MemberTile_name"> <div className="mx_EntityTile_name">
{ this.props.name } { this.props.name }
</div> </div>
); );
} }
var inviteButton;
if (this.props.showInviteButton) {
inviteButton = (
<div className="mx_EntityTile_invite">
<img src="img/plus.svg" width="24" height="24" />
</div>
);
}
var MemberAvatar = sdk.getComponent('avatars.MemberAvatar'); var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
@ -108,10 +118,11 @@ module.exports = React.createClass({
<div className={mainClassName} title={ this.props.title } <div className={mainClassName} title={ this.props.title }
onClick={ this.props.onClick } onMouseEnter={ this.mouseEnter } onClick={ this.props.onClick } onMouseEnter={ this.mouseEnter }
onMouseLeave={ this.mouseLeave }> onMouseLeave={ this.mouseLeave }>
<div className="mx_MemberTile_avatar"> <div className="mx_EntityTile_avatar">
{av} {av}
</div> </div>
{ nameEl } { nameEl }
{ inviteButton }
</div> </div>
); );
} }

8
src/components/views/rooms/SearchableEntityList.js
View file

@ -27,8 +27,7 @@ var SearchableEntityList = React.createClass({
searchPlaceholderText: React.PropTypes.string, searchPlaceholderText: React.PropTypes.string,
emptyQueryShowsAll: React.PropTypes.bool, emptyQueryShowsAll: React.PropTypes.bool,
onSubmit: React.PropTypes.func, // fn(inputText) onSubmit: React.PropTypes.func, // fn(inputText)
entities: React.PropTypes.array, entities: React.PropTypes.array
onEntityClick: React.PropTypes.func
}, },
getDefaultProps: function() { getDefaultProps: function() {
@ -36,8 +35,7 @@ var SearchableEntityList = React.createClass({
searchPlaceholderText: "Search", searchPlaceholderText: "Search",
entities: [], entities: [],
emptyQueryShowsAll: false, emptyQueryShowsAll: false,
onSubmit: function() {}, onSubmit: function() {}
onEntityClick: function() {}
}; };
}, },
@ -80,7 +78,7 @@ var SearchableEntityList = React.createClass({
</form> </form>
<div className="mx_SearchableEntityList_list"> <div className="mx_SearchableEntityList_list">
{this.state.results.map((entity) => { {this.state.results.map((entity) => {
return entity.getJsx(this.props.onEntityClick); return entity.getJsx();
})} })}
</div> </div>
</div> </div>