PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Buttonified almost everything. Stylesheet is broken.

Browse source
This commit is contained in:
Jani Mustonen 2017-01-06 22:01:37 +02:00
parent 8d79716421
commit d2ff2715ce
3 changed files with 33 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/views/avatars/BaseAvatar.js
View file

@ -138,7 +138,7 @@ module.exports = React.createClass({
const { const {
name, idName, title, url, urls, width, height, resizeMethod, name, idName, title, url, urls, width, height, resizeMethod,
defaultToInitialLetter, defaultToInitialLetter, onClick,
...otherProps ...otherProps
} = this.props; } = this.props;
@ -156,12 +156,24 @@ module.exports = React.createClass({
</span> </span>
); );
} }
return ( if (onClick != null) {
<img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl} return (
onError={this.onError} <button className="mx_BaseAvatar" onClick={onClick}>
width={width} height={height} <img className="mx_BaseAvatar_image" src={imageUrl}
title={title} alt="" onError={this.onError}
{...otherProps} /> width={width} height={height}
); title={title} alt=""
{...otherProps} />
</button>
);
} else {
return (
<img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
onError={this.onError}
width={width} height={height}
title={title} alt=""
{...otherProps} />
);
}
} }
}); });

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

@ -152,7 +152,7 @@ module.exports = React.createClass({
var av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />; var av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
return ( return (
<div className={mainClassName} title={ this.props.title } <button 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_EntityTile_avatar"> <div className="mx_EntityTile_avatar">
@ -161,7 +161,7 @@ module.exports = React.createClass({
</div> </div>
{ nameEl } { nameEl }
{ inviteButton } { inviteButton }
</div> </button>
); );
} }
}); });

22
src/components/views/rooms/MemberInfo.js
View file

@ -612,7 +612,7 @@ module.exports = WithMatrixClient(React.createClass({
mx_MemberInfo_createRoom_label: true, mx_MemberInfo_createRoom_label: true,
mx_RoomTile_name: true, mx_RoomTile_name: true,
}); });
const startNewChat = <div const startNewChat = <button
className="mx_MemberInfo_createRoom" className="mx_MemberInfo_createRoom"
onClick={this.onNewDMClick} onClick={this.onNewDMClick}
> >
@ -620,7 +620,7 @@ module.exports = WithMatrixClient(React.createClass({
<img src="img/create-big.svg" width="26" height="26" /> <img src="img/create-big.svg" width="26" height="26" />
</div> </div>
<div className={labelClasses}><i>Start new chat</i></div> <div className={labelClasses}><i>Start new chat</i></div>
</div> </button>
startChat = <div> startChat = <div>
<h3>Direct chats</h3> <h3>Direct chats</h3>
@ -635,26 +635,26 @@ module.exports = WithMatrixClient(React.createClass({
} }
if (this.state.can.kick) { if (this.state.can.kick) {
kickButton = <div className="mx_MemberInfo_field" onClick={this.onKick}> kickButton = <button className="mx_MemberInfo_field" onClick={this.onKick}>
{ this.props.member.membership === "invite" ? "Disinvite" : "Kick" } { this.props.member.membership === "invite" ? "Disinvite" : "Kick" }
</div>; </button>;
} }
if (this.state.can.ban) { if (this.state.can.ban) {
banButton = <div className="mx_MemberInfo_field" onClick={this.onBan}> banButton = <button className="mx_MemberInfo_field" onClick={this.onBan}>
Ban Ban
</div>; </button>;
} }
if (this.state.can.mute) { if (this.state.can.mute) {
var muteLabel = this.state.muted ? "Unmute" : "Mute"; var muteLabel = this.state.muted ? "Unmute" : "Mute";
muteButton = <div className="mx_MemberInfo_field" onClick={this.onMuteToggle}> muteButton = <button className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
{muteLabel} {muteLabel}
</div>; </button>;
} }
if (this.state.can.toggleMod) { if (this.state.can.toggleMod) {
var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator"; var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator";
giveModButton = <div className="mx_MemberInfo_field" onClick={this.onModToggle}> giveModButton = <button className="mx_MemberInfo_field" onClick={this.onModToggle}>
{giveOpLabel} {giveOpLabel}
</div> </button>
} }
// TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet // TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet
@ -682,7 +682,7 @@ module.exports = WithMatrixClient(React.createClass({
const EmojiText = sdk.getComponent('elements.EmojiText'); const EmojiText = sdk.getComponent('elements.EmojiText');
return ( return (
<div className="mx_MemberInfo"> <div className="mx_MemberInfo">
<img className="mx_MemberInfo_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.onCancel}/> <button className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></button>
<div className="mx_MemberInfo_avatar"> <div className="mx_MemberInfo_avatar">
<MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} /> <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
</div> </div>