rejig css:

* sans-serif font
 * use display: table for the message list so that everything lines up nicely
 * switch to flexbox layout rather than position absolutes to avoid assuming a full screen UI and improve maintainability (and better match atomify)
 * neutralise the colouring and styling of highlighted rooms in the recents list
 * switch from ul + li's to a series of divs in some places where the li's are achieving nothing but adding more complexity to the DOM
 * add mx_MessageTileType as a generic css base class for all message tiles
This commit is contained in:
Matthew Hodgson 2015-07-07 02:10:10 +01:00
parent aaa38d95ba
commit ffac30083e
15 changed files with 139 additions and 88 deletions

View File

@ -15,6 +15,6 @@ limitations under the License.
*/ */
.mx_MessageTimestamp { .mx_MessageTimestamp {
width: 75px; display: table-cell;
display: inline-block; white-space: pre;
} }

View File

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
body {
font-family: Helvetica, Arial, Sans-Serif;
}
div.error { div.error {
color: red; color: red;
} }

View File

@ -14,13 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_MessageComposer {
}
.mx_MessageComposer textarea { .mx_MessageComposer textarea {
position: absolute;
width: 100%; width: 100%;
margin-left: auto; margin: auto;
margin-right: auto;
padding: 0px;
} }

View File

@ -15,6 +15,11 @@ limitations under the License.
*/ */
.mx_MessageTile { .mx_MessageTile {
display: table-row;
}
.mx_MessageTile .mx_MessageTileType {
display: table-cell;
} }
.mx_MessageTile.sending { .mx_MessageTile.sending {

View File

@ -23,12 +23,10 @@ limitations under the License.
} }
.mx_RoomTile.selected { .mx_RoomTile.selected {
border: 2px inset #eee; text-decoration: underline;
} }
.mx_RoomTile_name { .mx_RoomTile_name {
font-size: 80%;
font-weight: bold;
} }
.mx_RoomTile div { .mx_RoomTile div {
@ -37,11 +35,11 @@ limitations under the License.
} }
.mx_RoomTile.unread { .mx_RoomTile.unread {
background-color: #66e; font-weight: bold;
} }
.mx_RoomTile.invited { .mx_RoomTile.invited {
background-color: #6e6; font-weight: bold;
} }
.mx_RoomTile:hover { .mx_RoomTile:hover {

View File

@ -15,6 +15,6 @@ limitations under the License.
*/ */
.mx_SenderProfile { .mx_SenderProfile {
display: inline-block; display: table-cell;
width: 150px; padding: 0px 1em 0em 1em;
} }

View File

@ -16,12 +16,3 @@ limitations under the License.
.mx_RoomList { .mx_RoomList {
} }
.mx_RoomList ul {
padding: 0px;
margin: 0px;
}
.mx_RoomList ul li {
list-style-type: none;
}

View File

@ -16,52 +16,67 @@ limitations under the License.
.mx_RoomView { .mx_RoomView {
word-wrap: break-word; word-wrap: break-word;
position: relative;
} }
.mx_RoomView .mx_RoomHeader { .mx_RoomHeader {
position: absolute;
top: 0px;
width: 100%;
height: 30px; height: 30px;
} }
.mx_RoomView .mx_RoomView_MessageList { .mx_RoomView_roomWrapper {
padding: 0px; display: -webkit-box;
margin: 0px; display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: absolute; position: absolute;
top: 35px; width: 100%;
bottom: 40px; top: 32px;
left: 0px; bottom: 0px;
right: 150px; }
.mx_RoomView_messagePanel {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
width: 100%;
height: 100%;
/* background-color: #ff0; */
}
.mx_RoomView_messageListWrapper {
height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
.mx_RoomView ul li { .mx_RoomView_MessageList {
list-style-type: none; display: table;
} }
.mx_RoomView .mx_RoomView_invitePrompt { .mx_RoomView_invitePrompt {
} }
.mx_RoomView .mx_MemberList { .mx_MemberList {
position: absolute; -webkit-box-ordinal-group: 2;
top: 35px; -moz-box-ordinal-group: 2;
bottom: 40px; -ms-flex-order: 2;
right: 0px; -webkit-order: 2;
width: 150px; order: 2;
/* background-color: #0f0; */
width: 250px;
overflow-y: scroll;
height: 100%;
}
.mx_MemberList ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
.mx_RoomView .mx_MemberList ul { .mx_MessageComposer {
margin: 0px; width: 100%;
padding: 0px; bottom: 0px;
}
.mx_RoomView .mx_MessageComposer {
position: absolute;
bottom: 5px;
right: 0px;
left: 0px;
height: 36px;
} }

View File

@ -20,29 +20,69 @@ limitations under the License.
height: 100%; height: 100%;
} }
.mx_MatrixChat_leftPanel { .mx_MatrixChat_chatWrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: absolute; position: absolute;
left: 0px; width: 100%;
top: 0px;
bottom: 42px;
}
.mx_MatrixChat_leftPanel {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
/* background-color: #f00; */
width: 250px; width: 250px;
height: 100%; height: 100%;
} }
.mx_MatrixChat_leftPanel .mx_MatrixToolbar { .mx_MatrixChat_leftPanel .mx_MatrixToolbar {
position: absolute; -webkit-box-ordinal-group: 1;
height: 20px; -moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
width: 100%;
height: 40px;
} }
.mx_MatrixChat_leftPanel .mx_RoomList { .mx_MatrixChat_leftPanel .mx_RoomList {
position: absolute; -webkit-box-ordinal-group: 2;
top: 20px; -moz-box-ordinal-group: 2;
bottom: 0px; -ms-flex-order: 2;
width: 250px; -webkit-order: 2;
order: 2;
/* background-color: #0ff; */
width: 100%;
height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
.mx_MatrixChat .mx_RoomView { .mx_MatrixChat .mx_RoomView {
position: absolute; -webkit-box-ordinal-group: 2;
left: 255px; -moz-box-ordinal-group: 2;
right: 0px; -ms-flex-order: 2;
-webkit-order: 2;
order: 2;
/* background-color: #00f; */
width: 100%;
height: 100%; height: 100%;
} }

View File

@ -29,7 +29,7 @@ module.exports = React.createClass({
var content = mxEvent.getContent(); var content = mxEvent.getContent();
var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
return ( return (
<span className="mx_MEmoteTile"> <span className="mx_MEmoteTile mx_MessageTileType">
{name} {content.body} {name} {content.body}
</span> </span>
); );

View File

@ -27,7 +27,7 @@ module.exports = React.createClass({
render: function() { render: function() {
var content = this.props.mxEvent.getContent(); var content = this.props.mxEvent.getContent();
return ( return (
<span className="mx_MNoticeTile"> <span className="mx_MNoticeTile mx_MessageTileType">
{content.body} {content.body}
</span> </span>
); );

View File

@ -27,7 +27,7 @@ module.exports = React.createClass({
render: function() { render: function() {
var content = this.props.mxEvent.getContent(); var content = this.props.mxEvent.getContent();
return ( return (
<span className="mx_MTextTile"> <span className="mx_MTextTile mx_MessageTileType">
{content.body} {content.body}
</span> </span>
); );

View File

@ -28,9 +28,7 @@ module.exports = React.createClass({
render: function() { render: function() {
return ( return (
<div className="mx_RoomList"> <div className="mx_RoomList">
<ul>
{this.makeRoomTiles()} {this.makeRoomTiles()}
</ul>
</div> </div>
); );
} }

View File

@ -39,7 +39,7 @@ module.exports = React.createClass({
getMessageTiles: function() { getMessageTiles: function() {
return this.state.room.timeline.map(function(mxEv) { return this.state.room.timeline.map(function(mxEv) {
return ( return (
<li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li> <MessageTile key={mxEv.getId()} mxEvent={mxEv} />
); );
}); });
}, },
@ -71,14 +71,18 @@ module.exports = React.createClass({
return ( return (
<div className="mx_RoomView"> <div className="mx_RoomView">
<RoomHeader room={this.state.room} /> <RoomHeader room={this.state.room} />
<div className="mx_RoomView_HSplit"> <div className="mx_RoomView_roomWrapper">
<ul className="mx_RoomView_MessageList" ref="messageList"> <div className="mx_RoomView_messagePanel">
<div className="mx_RoomView_messageListWrapper">
<div className="mx_RoomView_MessageList" ref="messageList">
{this.getMessageTiles()} {this.getMessageTiles()}
</ul> </div>
<MemberList roomId={this.props.roomId} key={this.props.roomId} />
</div> </div>
<MessageComposer roomId={this.props.roomId} /> <MessageComposer roomId={this.props.roomId} />
</div> </div>
<MemberList roomId={this.props.roomId} key={this.props.roomId} />
</div>
</div>
); );
} }
}, },

View File

@ -38,12 +38,14 @@ module.exports = React.createClass({
if (this.state.logged_in && this.state.ready) { if (this.state.logged_in && this.state.ready) {
return ( return (
<div className="mx_MatrixChat"> <div className="mx_MatrixChat">
<div className="mx_MatrixChat_chatWrapper">
<div className="mx_MatrixChat_leftPanel"> <div className="mx_MatrixChat_leftPanel">
<MatrixToolbar /> <MatrixToolbar />
<RoomList selectedRoom={this.state.currentRoom} /> <RoomList selectedRoom={this.state.currentRoom} />
</div> </div>
<RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} /> <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
</div> </div>
</div>
); );
} else if (this.state.logged_in) { } else if (this.state.logged_in) {
return ( return (