From ffac30083eac839579e508662ea401e3cf432c5c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 7 Jul 2015 02:10:10 +0100 Subject: [PATCH 1/2] 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 5a999dd3..62b30656 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 1d3d1710..5153f970 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 2a333196..829e25a9 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 3e484079..28289223 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 782b8b74..1db470ce 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 848b0492..549b5984 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 2e2f86ef..e2dec3c9 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 c4af6620..26f50fcd 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 15c3e1ae..d5a5d6af 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 410fa15f..48a9e952 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 42457454..34ff3c6a 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 1d97f4e8..e7613786 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 fb65fa04..f8be66f7 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 c8a943ee..e8bdc177 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 08809e3e..ba0c712d 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) { From abea8af59b3d69561d43bbb861bf804e616f2779 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 7 Jul 2015 02:37:14 +0100 Subject: [PATCH 2/2] s/mx_MessageTileType/mx_messageTileType/ to fit dave's naming convention --- skins/base/css/molecules/MessageTile.css | 2 +- skins/base/views/molecules/MEmoteTile.js | 2 +- skins/base/views/molecules/MNoticeTile.js | 2 +- skins/base/views/molecules/MTextTile.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/skins/base/css/molecules/MessageTile.css b/skins/base/css/molecules/MessageTile.css index 28289223..fac9d347 100644 --- a/skins/base/css/molecules/MessageTile.css +++ b/skins/base/css/molecules/MessageTile.css @@ -18,7 +18,7 @@ limitations under the License. display: table-row; } -.mx_MessageTile .mx_MessageTileType { +.mx_MessageTile .mx_messageTileType { display: table-cell; } diff --git a/skins/base/views/molecules/MEmoteTile.js b/skins/base/views/molecules/MEmoteTile.js index 48a9e952..b8559dce 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 34ff3c6a..1ea72a8d 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 e7613786..8b36f7bb 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} );