css prettification
This commit is contained in:
Matthew Hodgson
parent
e2644e3c13
commit
5248b0c631
5 changed files with 69 additions and 29 deletions
|
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||
width: 720px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_input {
|
||||
|
|
@ -31,8 +32,33 @@ limitations under the License.
|
|||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_tableWrapper {
|
||||
overflow-y: scroll;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table th {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table td {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table .mx_RoomDirectory_name {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table .mx_RoomDirectory_topic {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table td,
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton")
|
|||
var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias");
|
||||
var Presets = ComponentBroker.get("atoms/create_room/Presets");
|
||||
var UserSelector = ComponentBroker.get("molecules/UserSelector");
|
||||
var RoomHeader = ComponentBroker.get("molecules/RoomHeader");
|
||||
|
||||
var Loader = require("react-loader");
|
||||
|
||||
|
|
@ -141,16 +142,27 @@ module.exports = React.createClass({
|
|||
}
|
||||
return (
|
||||
<div className="mx_CreateRoom">
|
||||
<input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
|
||||
<textarea ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Description"/> <br />
|
||||
<RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/> <br />
|
||||
<UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
|
||||
<Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
|
||||
<label><input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/> Make this room private</label>
|
||||
<label><input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/> Share message history with new users</label>
|
||||
<label><input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged}/> Encrypt room</label>
|
||||
<CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
|
||||
{error_box}
|
||||
<RoomHeader simpleHeader="Create room" />
|
||||
<div className="mx_CreateRoom_body">
|
||||
<input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
|
||||
<textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />
|
||||
<RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/> <br />
|
||||
<UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
|
||||
<Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
|
||||
<div>
|
||||
<label><input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/> Make this room private</label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/> Share message history with new users</label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged}/> Encrypt room</label>
|
||||
</div>
|
||||
<div>
|
||||
<CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
|
||||
</div>
|
||||
{error_box}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,26 +76,26 @@ module.exports = React.createClass({
|
|||
|
||||
var rooms = this.state.publicRooms.filter(function(a) {
|
||||
// FIXME: if incrementally typing, keep narrowing down the search set
|
||||
return (a.aliases[0].search(filter) >= 0);
|
||||
return (a.aliases[0].search(filter) >= 0 && a.num_joined_members > 0);
|
||||
}).sort(function(a,b) {
|
||||
return a.num_joined_members > b.num_joined_members;
|
||||
return a.num_joined_members - b.num_joined_members;
|
||||
});
|
||||
var rows = [];
|
||||
var self = this;
|
||||
for (var i = 0; i < rooms.length; i++) {
|
||||
var name = rooms[i].name;
|
||||
if (!name) {
|
||||
if (rooms[i].aliases[0]) name = rooms[i].aliases[0]
|
||||
}
|
||||
else {
|
||||
if (rooms[i].aliases[0]) name += " (" + rooms[i].aliases[0] + ")";
|
||||
}
|
||||
// <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/>
|
||||
rows.unshift(
|
||||
<tr key={ rooms[i].room_id } onClick={self.joinRoom.bind(null, rooms[i].room_id)}>
|
||||
<td><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/> { name }</td>
|
||||
<td>{ rooms[i].topic }</td>
|
||||
<td style={ {'text-align' : 'center'} }>{ rooms[i].num_joined_members }</td>
|
||||
</tr>
|
||||
<tbody key={ rooms[i].room_id }>
|
||||
<tr onClick={self.joinRoom.bind(null, rooms[i].room_id)}>
|
||||
<td className="mx_RoomDirectory_name">{ name }</td>
|
||||
<td>{ rooms[i].aliases[0] }</td>
|
||||
<td>{ rooms[i].num_joined_members }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="mx_RoomDirectory_topic" colSpan="3">{ rooms[i].topic }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
return rows;
|
||||
|
|
@ -118,10 +118,12 @@ module.exports = React.createClass({
|
|||
<RoomHeader simpleHeader="Public Rooms" />
|
||||
<div className="mx_RoomDirectory_list">
|
||||
<input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
|
||||
<table className="mx_RoomDirectory_table">
|
||||
<tr><th>Room</th><th>Topic</th><th>Users</th></tr>
|
||||
{ this.getRows(this.state.roomAlias) }
|
||||
</table>
|
||||
<div className="mx_RoomDirectory_tableWrapper">
|
||||
<table className="mx_RoomDirectory_table">
|
||||
<tr><th>Room</th><th>Alias</th><th>Members</th></tr>
|
||||
{ this.getRows(this.state.roomAlias) }
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ module.exports = React.createClass({
|
|||
<div className="mx_Login">
|
||||
<div className="mx_Login_box">
|
||||
<div className="mx_Login_logo">
|
||||
<img src="img/logo.png" width="249" height="76" alt="vector"/>
|
||||
<img src="img/logo.png" width="249" height="78" alt="vector"/>
|
||||
</div>
|
||||
{this.loginContent()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@ module.exports = React.createClass({
|
|||
<div className="mx_Login">
|
||||
<div className="mx_Login_box">
|
||||
<div className="mx_Login_logo">
|
||||
<img src="img/logo.png" width="249" height="76" alt="vector"/>
|
||||
<img src="img/logo.png" width="249" height="78" alt="vector"/>
|
||||
</div>
|
||||
{this.registerContent()}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue