Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve badges and room tile layout

Browse Source
This commit is contained in:
Matthew Hodgson 2015-07-16 22:39:38 +01:00
parent 28dcfb2f12
commit a2ca5f2847
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
skins/base/css/molecules/RoomTile.css
View File

@ -29,8 +29,8 @@ limitations under the License.
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
vertical-align: middle; vertical-align: middle;
width: 32px; width: 40px;
height: 32px; height: 40px;
} }
.mx_RoomTile_avatar img { .mx_RoomTile_avatar img {
@ -38,6 +38,12 @@ limitations under the License.
background-color: #dbdbdb; background-color: #dbdbdb;
} }
.mx_RoomTile_nameBadge {
display: table;
width: 100%;
height: 50px;
}
.mx_RoomTile_name { .mx_RoomTile_name {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
@ -45,8 +51,13 @@ limitations under the License.
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mx_RoomTile_badgeCell {
display: table-cell;
vertical-align: middle;
width: 26px;
}
.mx_RoomTile_badge { .mx_RoomTile_badge {
float: right;
background-color: #80cef4; background-color: #80cef4;
color: #fff; color: #fff;
border-radius: 26px; border-radius: 26px;

9
skins/base/views/molecules/RoomTile.js
View File

@ -43,10 +43,17 @@ module.exports = React.createClass({
else if (this.props.unread) { else if (this.props.unread) {
badge = <div className="mx_RoomTile_badge">1</div>; badge = <div className="mx_RoomTile_badge">1</div>;
} }
var nameCell;
if (badge) {
nameCell = <div className="mx_RoomTile_nameBadge"><div className="mx_RoomTile_name">{name}</div><div className="mx_RoomTile_badgeCell">{badge}</div></div>;
}
else {
nameCell = <div className="mx_RoomTile_name">{name}</div>;
}
return ( return (
<div className={classes} onClick={this.onClick}> <div className={classes} onClick={this.onClick}>
<div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40"/></div> <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40"/></div>
<div className="mx_RoomTile_name">{name}{ badge }</div> { nameCell }
</div> </div>
); );
} }