From ffac30083eac839579e508662ea401e3cf432c5c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 7 Jul 2015 02:10:10 +0100 Subject: [PATCH] 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 --- skins/base/css/atoms/MessageTimestamp.css | 4 +- skins/base/css/common.css | 4 + skins/base/css/molecules/MessageComposer.css | 8 +- skins/base/css/molecules/MessageTile.css | 5 ++ skins/base/css/molecules/RoomTile.css | 8 +- skins/base/css/molecules/SenderProfile.css | 4 +- skins/base/css/organisms/RoomList.css | 9 --- skins/base/css/organisms/RoomView.css | 85 ++++++++++++-------- skins/base/css/pages/MatrixChat.css | 64 ++++++++++++--- skins/base/views/molecules/MEmoteTile.js | 2 +- skins/base/views/molecules/MNoticeTile.js | 2 +- skins/base/views/molecules/MTextTile.js | 2 +- skins/base/views/organisms/RoomList.js | 4 +- skins/base/views/organisms/RoomView.js | 16 ++-- skins/base/views/pages/MatrixChat.js | 10 ++- 15 files changed, 139 insertions(+), 88 deletions(-) diff --git a/skins/base/css/atoms/MessageTimestamp.css b/skins/base/css/atoms/MessageTimestamp.css index 5a999dd3fd..62b3065661 100644 --- a/skins/base/css/atoms/MessageTimestamp.css +++ b/skins/base/css/atoms/MessageTimestamp.css @@ -15,6 +15,6 @@ limitations under the License. */ .mx_MessageTimestamp { - width: 75px; - display: inline-block; + display: table-cell; + white-space: pre; } diff --git a/skins/base/css/common.css b/skins/base/css/common.css index 1d3d17106f..5153f97065 100644 --- a/skins/base/css/common.css +++ b/skins/base/css/common.css @@ -14,6 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ +body { + font-family: Helvetica, Arial, Sans-Serif; +} + div.error { color: red; } diff --git a/skins/base/css/molecules/MessageComposer.css b/skins/base/css/molecules/MessageComposer.css index 2a333196e4..829e25a938 100644 --- a/skins/base/css/molecules/MessageComposer.css +++ b/skins/base/css/molecules/MessageComposer.css @@ -14,13 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MessageComposer { -} - .mx_MessageComposer textarea { - position: absolute; width: 100%; - margin-left: auto; - margin-right: auto; - padding: 0px; + margin: auto; } diff --git a/skins/base/css/molecules/MessageTile.css b/skins/base/css/molecules/MessageTile.css index 3e484079ed..282892238d 100644 --- a/skins/base/css/molecules/MessageTile.css +++ b/skins/base/css/molecules/MessageTile.css @@ -15,6 +15,11 @@ limitations under the License. */ .mx_MessageTile { + display: table-row; +} + +.mx_MessageTile .mx_MessageTileType { + display: table-cell; } .mx_MessageTile.sending { diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css index 782b8b74e7..1db470ce3f 100644 --- a/skins/base/css/molecules/RoomTile.css +++ b/skins/base/css/molecules/RoomTile.css @@ -23,12 +23,10 @@ limitations under the License. } .mx_RoomTile.selected { - border: 2px inset #eee; + text-decoration: underline; } .mx_RoomTile_name { - font-size: 80%; - font-weight: bold; } .mx_RoomTile div { @@ -37,11 +35,11 @@ limitations under the License. } .mx_RoomTile.unread { - background-color: #66e; + font-weight: bold; } .mx_RoomTile.invited { - background-color: #6e6; + font-weight: bold; } .mx_RoomTile:hover { diff --git a/skins/base/css/molecules/SenderProfile.css b/skins/base/css/molecules/SenderProfile.css index 848b0492f9..549b598458 100644 --- a/skins/base/css/molecules/SenderProfile.css +++ b/skins/base/css/molecules/SenderProfile.css @@ -15,6 +15,6 @@ limitations under the License. */ .mx_SenderProfile { - display: inline-block; - width: 150px; + display: table-cell; + padding: 0px 1em 0em 1em; } diff --git a/skins/base/css/organisms/RoomList.css b/skins/base/css/organisms/RoomList.css index 2e2f86ef96..e2dec3c9fd 100644 --- a/skins/base/css/organisms/RoomList.css +++ b/skins/base/css/organisms/RoomList.css @@ -16,12 +16,3 @@ limitations under the License. .mx_RoomList { } - -.mx_RoomList ul { - padding: 0px; - margin: 0px; -} - -.mx_RoomList ul li { - list-style-type: none; -} diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index c4af6620fb..26f50fcdbe 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/skins/base/css/organisms/RoomView.css @@ -16,52 +16,67 @@ limitations under the License. .mx_RoomView { word-wrap: break-word; + position: relative; } -.mx_RoomView .mx_RoomHeader { - position: absolute; - top: 0px; - width: 100%; +.mx_RoomHeader { height: 30px; } -.mx_RoomView .mx_RoomView_MessageList { - padding: 0px; - margin: 0px; +.mx_RoomView_roomWrapper { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; position: absolute; - top: 35px; - bottom: 40px; - left: 0px; - right: 150px; + width: 100%; + top: 32px; + bottom: 0px; +} + +.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; +} + +.mx_RoomView_MessageList { + display: table; +} + +.mx_RoomView_invitePrompt { +} + +.mx_MemberList { + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; + + /* background-color: #0f0; */ + width: 250px; overflow-y: scroll; + height: 100%; } -.mx_RoomView ul li { - list-style-type: none; -} - -.mx_RoomView .mx_RoomView_invitePrompt { -} - -.mx_RoomView .mx_MemberList { - position: absolute; - top: 35px; - bottom: 40px; - right: 0px; - width: 150px; +.mx_MemberList ul { margin: 0px; padding: 0px; } -.mx_RoomView .mx_MemberList ul { - margin: 0px; - padding: 0px; -} - -.mx_RoomView .mx_MessageComposer { - position: absolute; - bottom: 5px; - right: 0px; - left: 0px; - height: 36px; +.mx_MessageComposer { + width: 100%; + bottom: 0px; } diff --git a/skins/base/css/pages/MatrixChat.css b/skins/base/css/pages/MatrixChat.css index 15c3e1ae9d..d5a5d6afc0 100644 --- a/skins/base/css/pages/MatrixChat.css +++ b/skins/base/css/pages/MatrixChat.css @@ -20,29 +20,69 @@ limitations under the License. height: 100%; } -.mx_MatrixChat_leftPanel { +.mx_MatrixChat_chatWrapper { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; 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; height: 100%; } .mx_MatrixChat_leftPanel .mx_MatrixToolbar { - position: absolute; - height: 20px; + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + order: 1; + + width: 100%; + height: 40px; } .mx_MatrixChat_leftPanel .mx_RoomList { - position: absolute; - top: 20px; - bottom: 0px; - width: 250px; + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; + + /* background-color: #0ff; */ + width: 100%; + height: 100%; overflow-y: scroll; } .mx_MatrixChat .mx_RoomView { - position: absolute; - left: 255px; - right: 0px; - height: 100%; + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; + + /* background-color: #00f; */ + width: 100%; + height: 100%; } diff --git a/skins/base/views/molecules/MEmoteTile.js b/skins/base/views/molecules/MEmoteTile.js index 410fa15fbe..48a9e9521a 100644 --- a/skins/base/views/molecules/MEmoteTile.js +++ b/skins/base/views/molecules/MEmoteTile.js @@ -29,7 +29,7 @@ module.exports = React.createClass({ var content = mxEvent.getContent(); var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); return ( - + {name} {content.body} ); diff --git a/skins/base/views/molecules/MNoticeTile.js b/skins/base/views/molecules/MNoticeTile.js index 424574549b..34ff3c6a81 100644 --- a/skins/base/views/molecules/MNoticeTile.js +++ b/skins/base/views/molecules/MNoticeTile.js @@ -27,7 +27,7 @@ module.exports = React.createClass({ render: function() { var content = this.props.mxEvent.getContent(); return ( - + {content.body} ); diff --git a/skins/base/views/molecules/MTextTile.js b/skins/base/views/molecules/MTextTile.js index 1d97f4e8dd..e7613786cf 100644 --- a/skins/base/views/molecules/MTextTile.js +++ b/skins/base/views/molecules/MTextTile.js @@ -27,7 +27,7 @@ module.exports = React.createClass({ render: function() { var content = this.props.mxEvent.getContent(); return ( - + {content.body} ); diff --git a/skins/base/views/organisms/RoomList.js b/skins/base/views/organisms/RoomList.js index fb65fa04d1..f8be66f76e 100644 --- a/skins/base/views/organisms/RoomList.js +++ b/skins/base/views/organisms/RoomList.js @@ -28,9 +28,7 @@ module.exports = React.createClass({ render: function() { return (
-
    - {this.makeRoomTiles()} -
+ {this.makeRoomTiles()}
); } diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js index c8a943ee92..e8bdc177e7 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/skins/base/views/organisms/RoomView.js @@ -39,7 +39,7 @@ module.exports = React.createClass({ getMessageTiles: function() { return this.state.room.timeline.map(function(mxEv) { return ( -
    • + ); }); }, @@ -71,13 +71,17 @@ module.exports = React.createClass({ return (
    -
    -
      - {this.getMessageTiles()} -
    +
    +
    +
    +
    + {this.getMessageTiles()} +
    +
    + +
    -
    ); } diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index 08809e3ed2..ba0c712dac 100644 --- a/skins/base/views/pages/MatrixChat.js +++ b/skins/base/views/pages/MatrixChat.js @@ -38,11 +38,13 @@ module.exports = React.createClass({ if (this.state.logged_in && this.state.ready) { return (
    -
    - - +
    +
    + + +
    +
    -
    ); } else if (this.state.logged_in) {