diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css index 6c5844486..1e3825602 100644 --- a/skins/base/css/molecules/MemberTile.css +++ b/skins/base/css/molecules/MemberTile.css @@ -30,7 +30,7 @@ limitations under the License. } .mx_MemberTile_avatar img { - border-radius: 16px; + border-radius: 20px; background-color: #dbdbdb; } diff --git a/skins/base/css/molecules/MessageComposer.css b/skins/base/css/molecules/MessageComposer.css index 1b0e4d750..f4e071dd8 100644 --- a/skins/base/css/molecules/MessageComposer.css +++ b/skins/base/css/molecules/MessageComposer.css @@ -19,9 +19,9 @@ limitations under the License. height: 50px; vertical-align: middle; margin: auto; - border-top: 1px solid #d8d8d8; - border-left: 1px solid #d8d8d8; - border-right: 1px solid #d8d8d8; + background-color: #fff; + border-radius: 25px; + border: 1px solid #e1e1e1; } .mx_MessageComposer_row { @@ -32,32 +32,44 @@ limitations under the License. .mx_MessageComposer .mx_MessageComposer_avatar { display: table-cell; - padding-left: 12px; - padding-right: 12px; - padding-top: 3px; - padding-bottom: 3px; - vertical-align: middle; - width: 32px; - height: 32px; + padding-left: 5px; + padding-right: 10px; + height: 50px; +} + +.mx_MessageComposer .mx_MessageComposer_avatar img { + margin-top: 5px; + border-radius: 20px; + background-color: #bdbdbd; } .mx_MessageComposer_input { display: table-cell; width: 100%; - padding-right: 1em; vertical-align: middle; + height: 50px; } .mx_MessageComposer_input textarea { font-size: 15px; width: 100%; height: 1em; + padding-top: 0.7em; + padding-bottom: 0.7em; border: 0px; resize: none; outline: none; - padding-top: 0.7em; - padding-bottom: 0.7em; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -} \ No newline at end of file +} + +.mx_MessageComposer_upload { + display: table-cell; + vertical-align: middle; + padding-right: 15px; +} + +.mx_MessageComposer_upload img { + margin-top: 5px; +} diff --git a/skins/base/css/molecules/MessageTile.css b/skins/base/css/molecules/MessageTile.css index 82bfad059..fb5edb73b 100644 --- a/skins/base/css/molecules/MessageTile.css +++ b/skins/base/css/molecules/MessageTile.css @@ -31,7 +31,7 @@ limitations under the License. .mx_MessageTile_avatar img { background-color: #dbdbdb; - border-radius: 16px; + border-radius: 20px; border: 0px; } diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css index a2f107f04..35e97a636 100644 --- a/skins/base/css/molecules/RoomHeader.css +++ b/skins/base/css/molecules/RoomHeader.css @@ -20,42 +20,85 @@ limitations under the License. .mx_RoomHeader_wrapper { max-width: 720px; margin: auto; - height: 50px; + height: 86px; + margin-top: 18px; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; } .mx_RoomHeader_leftRow { display: table-row; margin-left: 12px; - height: 50px; - float: left; + height: 48px; + + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + order: 1; } .mx_RoomHeader_rightRow { display: table-row; - height: 50px; - margin-right: -26px; - float: right; + height: 48px; + background-color: #fff; + border-radius: 48px; + border: 1px solid #e1e1e1; + + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; + + -webkit-flex: 0 0 200px; + flex: 0 0 200px; +} + +.mx_RoomHeader_info { + display: table-cell; + height: 48px; + vertical-align: middle; } .mx_RoomHeader_name { - display: table-cell; vertical-align: middle; - height: 50px; + height: 28px; + color: #80cef4; font-weight: 400; - font-size: 20px; + font-size: 18px; padding-left: 16px; padding-right: 16px; } +.mx_RoomHeader_topic { + vertical-align: bottom; + float: left; + max-height: 38px; + color: #80cef4; + padding-left: 16px; + padding-right: 16px; + overflow: scroll; +} + .mx_RoomHeader_avatar { display: table-cell; height: 50px; vertical-align: middle; } +.mx_RoomHeader_avatar img { + border-radius: 24px; +} + .mx_RoomHeader_button { - height: 50px; + height: 48px; display: table-cell; vertical-align: middle; - padding-right: 16px; + padding-left: 8px; + padding-right: 8px; } \ No newline at end of file diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css index 685755512..26da6ea92 100644 --- a/skins/base/css/molecules/RoomTile.css +++ b/skins/base/css/molecules/RoomTile.css @@ -34,7 +34,7 @@ limitations under the License. } .mx_RoomTile_avatar img { - border-radius: 16px; + border-radius: 20px; background-color: #dbdbdb; } @@ -47,15 +47,14 @@ limitations under the License. .mx_RoomTile_badge { float: right; - background-color: #d8d8d8; - color: #747474; + background-color: #80cef4; + color: #fff; border-radius: 10px; font-weight: 400; font-size: 14px; - line-height: 22px; - width: 34px; - height: 20px; - vertical-align: top; + line-height: 28px; + width: 26px; + height: 26px; text-align: center; } diff --git a/skins/base/css/organisms/LeftPanel.css b/skins/base/css/organisms/LeftPanel.css index 36bc5933c..70a4b6f77 100644 --- a/skins/base/css/organisms/LeftPanel.css +++ b/skins/base/css/organisms/LeftPanel.css @@ -49,6 +49,7 @@ limitations under the License. overflow-y: scroll; } +/* .mx_LeftPanel .mx_RoomCreate { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; @@ -69,6 +70,7 @@ limitations under the License. width: 100%; height: 46px; } +*/ .mx_LeftPanel .mx_DirectoryMenu { -webkit-box-ordinal-group: 3; @@ -77,12 +79,14 @@ limitations under the License. -webkit-order: 3; order: 3; - min-height: 150px; + -webkit-flex: 0 0 170px; + flex: 0 0 170px; + padding-left: 16px; padding-right: 16px; } .mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options { - margin-top: -12px; + margin-top: 12px; width: 100%; } \ No newline at end of file diff --git a/skins/base/css/organisms/MemberList.css b/skins/base/css/organisms/MemberList.css index b2cc01375..f0ededa1a 100644 --- a/skins/base/css/organisms/MemberList.css +++ b/skins/base/css/organisms/MemberList.css @@ -22,7 +22,7 @@ limitations under the License. .mx_MemberList_chevron { position: absolute; - right: 20px; + right: 35px; margin-top: -13px; } @@ -33,6 +33,7 @@ limitations under the License. max-height: 75%; border-radius: 8px; padding: 20px 14px 14px 24px; + background-color: #fff; } .mx_MemberList_wrapper { diff --git a/skins/base/css/organisms/RightPanel.css b/skins/base/css/organisms/RightPanel.css index 52d7077a6..11f425b82 100644 --- a/skins/base/css/organisms/RightPanel.css +++ b/skins/base/css/organisms/RightPanel.css @@ -33,18 +33,28 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 50px; - flex: 0 0 50px; + -webkit-flex: 0 0 66px; + flex: 0 0 66px; +} - text-align: right; +/** Fixme - factor this out with the main header **/ - height: 50px; - border-bottom: 1px solid #d8d8d8; +.mx_RightPanel_headerButtonGroup { + margin-top: 18px; + height: 48px; + float: right; + background-color: #fff; + border-radius: 48px; + border: 1px solid #e1e1e1; + margin-right: 22px; } .mx_RightPanel_headerButton { - margin-top: 9px; - margin-right: 16px; + height: 48px; + display: table-cell; + vertical-align: middle; + padding-left: 8px; + padding-right: 8px; } .mx_RightPanel .mx_MemberList { diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index 2069f1647..298a54b04 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/skins/base/css/organisms/RoomView.css @@ -35,9 +35,8 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 50px; - flex: 0 0 50px; - border-bottom: 1px solid #d8d8d8; + -webkit-flex: 0 0 86px; + flex: 0 0 86px; } .mx_RoomView_auxPanel { @@ -47,7 +46,10 @@ limitations under the License. -webkit-order: 2; order: 2; + max-width: 720px; width: 100%; + margin: auto; + border-top: 1px solid #a8dbf3; height: 0%; } @@ -86,7 +88,7 @@ limitations under the License. order: 4; width: 100%; - -webkit-flex: 0 0 50px; - flex: 0 0 50px; - /* background-color: #ff0; */ + -webkit-flex: 0 0 63px; + flex: 0 0 63px; + margin-left: 3px; } diff --git a/skins/base/css/pages/MatrixChat.css b/skins/base/css/pages/MatrixChat.css index 7f7f12643..5ff442cf2 100644 --- a/skins/base/css/pages/MatrixChat.css +++ b/skins/base/css/pages/MatrixChat.css @@ -45,7 +45,7 @@ limitations under the License. -webkit-order: 2; order: 2; - /* background-color: #00f; */ + background-color: #f3f8fa; width: 100%; height: 100%; } @@ -57,6 +57,7 @@ limitations under the License. -webkit-order: 3; order: 3; + background-color: #f3f8fa; -webkit-flex: 0 0 230px; flex: 0 0 230px; height: 100%; diff --git a/skins/base/img/file.png b/skins/base/img/file.png index 2ea4f280f..26a644ccf 100644 Binary files a/skins/base/img/file.png and b/skins/base/img/file.png differ diff --git a/skins/base/img/hide.png b/skins/base/img/hide.png index 5485df2d8..3e64618b0 100644 Binary files a/skins/base/img/hide.png and b/skins/base/img/hide.png differ diff --git a/skins/base/img/members.png b/skins/base/img/members.png index 9c35bcdf1..cc572c0b0 100644 Binary files a/skins/base/img/members.png and b/skins/base/img/members.png differ diff --git a/skins/base/img/search.png b/skins/base/img/search.png index f67ba892e..2cbfeb200 100644 Binary files a/skins/base/img/search.png and b/skins/base/img/search.png differ diff --git a/skins/base/img/video.png b/skins/base/img/video.png index d83640a4f..74a1583cd 100644 Binary files a/skins/base/img/video.png and b/skins/base/img/video.png differ diff --git a/skins/base/img/voip.png b/skins/base/img/voip.png index 95f574115..4fd14ee4b 100644 Binary files a/skins/base/img/voip.png and b/skins/base/img/voip.png differ diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js index bd3b07abb..b6c0f8080 100644 --- a/skins/base/views/molecules/DirectoryMenu.js +++ b/skins/base/views/molecules/DirectoryMenu.js @@ -29,19 +29,24 @@ module.exports = React.createClass({ render: function() { return (
-

Directory

- (+) +
-
Users
+
Create Room
- (+) +
-
Rooms
+
Directory
+
+
+
+ +
+
Settings
diff --git a/skins/base/views/molecules/MessageComposer.js b/skins/base/views/molecules/MessageComposer.js index 7cecb79c2..4f033e99e 100644 --- a/skins/base/views/molecules/MessageComposer.js +++ b/skins/base/views/molecules/MessageComposer.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); +var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); var MessageComposerController = require("../../../../src/controllers/molecules/MessageComposer"); module.exports = React.createClass({ @@ -25,16 +26,20 @@ module.exports = React.createClass({ mixins: [MessageComposerController], render: function() { + var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId); return (
- (+) +