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

WIP of new CSS

Browse source
This commit is contained in:
Matthew Hodgson 2015-10-23 02:32:49 +01:00
parent 82affac438
commit ad4e3418ff
39 changed files with 156 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/skins/vector/views/atoms/RoomAvatar.js
View file

@ -34,7 +34,7 @@ module.exports = React.createClass({
},
getFallbackAvatar: function() {
var images = [ '80cef4', '50e2c2', 'f4c371' ];
var images = [ '76cfa6', '50e2c2', 'f4c371' ];
var total = 0;
for (var i = 0; i < this.props.room.roomId.length; ++i) {
total += this.props.room.roomId.charCodeAt(i);

2
src/skins/vector/views/molecules/BottomLeftMenuTile.js
View file

@ -48,7 +48,7 @@ module.exports = React.createClass({
return (
<div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
<div className="mx_RoomTile_avatar">
<img src={ this.props.img } width="36" height="36"/>
<img src={ this.props.img } width="24" height="24"/>
</div>
{ label }
</div>

2
src/skins/vector/views/molecules/EventTile.js
View file

@ -110,7 +110,7 @@ module.exports = React.createClass({
if (this.props.mxEvent.sender) {
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar member={this.props.mxEvent.sender} />
<MemberAvatar member={this.props.mxEvent.sender} width="24" height="24" />
</div>
);
}

4
src/skins/vector/views/molecules/MemberTile.js
View file

@ -121,7 +121,7 @@ module.exports = React.createClass({
var power;
if (this.props.member && this.props.member.powerLevelNorm > 0) {
var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
power = <img src={ img } className="mx_MemberTile_power" width="48" height="48" alt=""/>;
power = <img src={ img } className="mx_MemberTile_power" width="44" height="44" alt=""/>;
}
var presenceClass = "mx_MemberTile_offline";
var mainClassName = "mx_MemberTile ";
@ -177,7 +177,7 @@ module.exports = React.createClass({
return (
<div className={mainClassName} title={ this.getPowerLabel() } onClick={ this.onClick } onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }>
<div className="mx_MemberTile_avatar">
<MemberAvatar member={this.props.member} />
<MemberAvatar member={this.props.member} width="36" height="36" />
{ power }
</div>
{ nameEl }

4
src/skins/vector/views/molecules/MessageComposer.js
View file

@ -49,10 +49,10 @@ module.exports = React.createClass({
<div className="mx_MessageComposer_wrapper">
<div className="mx_MessageComposer_row">
<div className="mx_MessageComposer_avatar">
<MemberAvatar member={me} />
<MemberAvatar member={me} width="24" height="24" />
</div>
<div className="mx_MessageComposer_input">
<textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" />
<textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message..." />
</div>
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
<img src="img/upload.png" width="32" height="32"/>

2
src/skins/vector/views/molecules/RoomTile.js
View file

@ -84,7 +84,7 @@ module.exports = React.createClass({
return (
<div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<div className="mx_RoomTile_avatar">
<RoomAvatar room={this.props.room} />
<RoomAvatar room={this.props.room} width="24" height="24" />
{ badge }
</div>
{ label }

2
src/skins/vector/views/organisms/LeftPanel.js
View file

@ -40,7 +40,7 @@ module.exports = React.createClass({
classes += " collapsed";
}
else {
collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
//collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
}
return (

6
src/skins/vector/views/organisms/MemberList.js
View file

@ -103,7 +103,7 @@ module.exports = React.createClass({
} else {
return (
<div className={ classes } onClick={ this.onClickInvite } >
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="36" height="36" alt=""/></div>
<div className="mx_MemberTile_name">
<EditableText ref="invite" label="Invite" placeHolder="@user:domain.com" initialValue="" onValueChanged={this.onPopulateInvite}/>
</div>
@ -127,12 +127,8 @@ module.exports = React.createClass({
}
return (
<div className="mx_MemberList">
<div className="mx_MemberList_chevron">
<img src="img/chevron.png" width="24" height="13"/>
</div>
<div className="mx_MemberList_border">
<div>
<h2>Members</h2>
<div className="mx_MemberList_wrapper">
{this.makeMemberTiles('join')}
</div>

10
src/skins/vector/views/organisms/RoomList.js
View file

@ -42,21 +42,21 @@ module.exports = React.createClass({
}
var recentsLabel = this.props.collapsed ?
<img style={{cursor: 'pointer'}} onClick={ this.onShowClick } src="img/menu.png" width="27" height="20" alt=">"/> :
"Recents";
<img style={{cursor: 'pointer'}} onClick={ this.onShowClick } src="img/menu.png" width="20" alt=">"/> :
"Recent";
return (
<div className="mx_RoomList" onScroll={this._repositionTooltip}>
{callElement}
<h2 className="mx_RoomList_favourites_label">Favourites</h2>
<h2 className="mx_RoomList_favouritesLabel">Favourites</h2>
<RoomDropTarget text="Drop here to favourite"/>
<h2 className="mx_RoomList_recents_label">{ recentsLabel }</h2>
<h2 className="mx_RoomList_recentsLabel">{ recentsLabel }</h2>
<div className="mx_RoomList_recents">
{this.makeRoomTiles()}
</div>
<h2 className="mx_RoomList_archive_label">Archive</h2>
<h2 className="mx_RoomList_archiveLabel">Archive</h2>
<RoomDropTarget text="Drop here to archive"/>
</div>
);

1
src/skins/vector/views/organisms/RoomView.js
View file

@ -238,6 +238,7 @@ module.exports = React.createClass({
</div>
<div className="mx_RoomView_statusArea">
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line"></div>
{statusBar}
</div>
</div>