diff --git a/examples/trivial/img b/examples/trivial/img new file mode 120000 index 0000000000..0d3ef0e2f2 --- /dev/null +++ b/examples/trivial/img @@ -0,0 +1 @@ +../../skins/base/img \ No newline at end of file diff --git a/examples/trivial/index.html b/examples/trivial/index.html index 4ec5b9093a..b5f4175f26 100644 --- a/examples/trivial/index.html +++ b/examples/trivial/index.html @@ -3,6 +3,7 @@ Matrix React SDK Example +
diff --git a/skins/base/css/atoms/MessageTimestamp.css b/skins/base/css/atoms/MessageTimestamp.css index 62b3065661..b3c6850949 100644 --- a/skins/base/css/atoms/MessageTimestamp.css +++ b/skins/base/css/atoms/MessageTimestamp.css @@ -15,6 +15,4 @@ limitations under the License. */ .mx_MessageTimestamp { - display: table-cell; - white-space: pre; } diff --git a/skins/base/css/common.css b/skins/base/css/common.css index 5153f97065..7fe0bca6c9 100644 --- a/skins/base/css/common.css +++ b/skins/base/css/common.css @@ -15,9 +15,21 @@ limitations under the License. */ body { - font-family: Helvetica, Arial, Sans-Serif; + font-family: 'Muli', Helvetica, Arial, Sans-Serif; + font-weight: 300; + font-size: 15px; + color: #747474; + border: 0px; + margin: 0px; } div.error { color: red; } + +h2 { + font-weight: 400; + font-size: 20px; + margin-top: 16px; + margin-bottom: 16px; +} diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css new file mode 100644 index 0000000000..a01947e3f0 --- /dev/null +++ b/skins/base/css/molecules/MemberTile.css @@ -0,0 +1,37 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_MemberTile { + cursor: pointer; + display: table-row; +} + +.mx_MemberTile_avatar { + display: table-cell; + padding-right: 12px; + padding-top: 3px; + padding-bottom: 3px; + vertical-align: middle; + width: 32px; + height: 32px; +} + +.mx_MemberTile_name { + display: table-cell; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/skins/base/css/molecules/MessageComposer.css b/skins/base/css/molecules/MessageComposer.css index 829e25a938..9ef77ba5e7 100644 --- a/skins/base/css/molecules/MessageComposer.css +++ b/skins/base/css/molecules/MessageComposer.css @@ -14,7 +14,50 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MessageComposer textarea { - width: 100%; +.mx_MessageComposer_wrapper { + max-width: 720px; + height: 50px; + vertical-align: middle; margin: auto; + border-top: 1px solid #d8d8d8; + border-left: 1px solid #d8d8d8; + border-right: 1px solid #d8d8d8; } + +.mx_MessageComposer_row { + display: table-row; + width: 100%; + height: 50px; +} + +.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; +} + +.mx_MessageComposer_input { + display: table-cell; + width: 100%; + padding-right: 1em; + vertical-align: middle; +} + +.mx_MessageComposer_input textarea { + font-size: 15px; + width: 100%; + height: 1em; + 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 diff --git a/skins/base/css/molecules/MessageTile.css b/skins/base/css/molecules/MessageTile.css index dae12e1a2b..f0b3379831 100644 --- a/skins/base/css/molecules/MessageTile.css +++ b/skins/base/css/molecules/MessageTile.css @@ -15,11 +15,31 @@ limitations under the License. */ .mx_MessageTile { - display: table-row; + width: 100%; + clear: both; + margin-top: 32px; +} + +.mx_MessageTile_avatar { + padding-left: 12px; + padding-right: 12px; + margin-top: -7px; + float: left; +} + +.mx_MessageTile .mx_SenderProfile { + color: #acacac; + font-size: 13px; + display: block; +} + +.mx_MessageTile .mx_MessageTimestamp { + color: #acacac; + font-size: 13px; + float: right; } .mx_MessageTile_content { - display: table-cell; } .mx_MessageTile_sending { diff --git a/skins/base/css/molecules/RoomDropTarget.css b/skins/base/css/molecules/RoomDropTarget.css new file mode 100644 index 0000000000..946b409120 --- /dev/null +++ b/skins/base/css/molecules/RoomDropTarget.css @@ -0,0 +1,27 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_RoomDropTarget { + font-size: 14px; + text-align: center; + margin-left: -8px; + margin-right: -8px; + padding-top: 16px; + padding-bottom: 16px; + background-color: #fbfbfb; + border: 1px dashed #d7d7d7; + border-radius: 8px; +} diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css index 63d6fc33fb..bbf4e8e2ef 100644 --- a/skins/base/css/molecules/RoomHeader.css +++ b/skins/base/css/molecules/RoomHeader.css @@ -15,6 +15,45 @@ limitations under the License. */ .mx_RoomHeader { - height: 1em; - padding: 0px; } + +.mx_RoomHeader_wrapper { + max-width: 720px; + margin: auto; + height: 50px; +} + +.mx_RoomHeader_leftRow { + display: table-row; + height: 50px; + float: left; +} + +.mx_RoomHeader_rightRow { + display: table-row; + height: 50px; + float: right; +} + +.mx_RoomHeader_name { + display: table-cell; + vertical-align: middle; + height: 50px; + font-weight: 400; + font-size: 20px; + padding-left: 16px; + padding-right: 16px; +} + +.mx_RoomHeader_avatar { + display: table-cell; + height: 50px; + vertical-align: middle; +} + +.mx_RoomHeader_button { + height: 50px; + display: table-cell; + vertical-align: middle; + padding-right: 16px; +} \ No newline at end of file diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css index 719551cb57..b3f4018cda 100644 --- a/skins/base/css/molecules/RoomTile.css +++ b/skins/base/css/molecules/RoomTile.css @@ -15,31 +15,40 @@ limitations under the License. */ .mx_RoomTile { - padding: 5px; cursor: pointer; + display: table-row; } -.mx_RoomTile.selected { +.mx_RoomTile_selected { text-decoration: underline; } -.mx_RoomTile_name { +.mx_RoomTile_avatar { + display: table-cell; + padding-right: 12px; + padding-top: 3px; + padding-bottom: 3px; + vertical-align: middle; + width: 32px; + height: 32px; } -.mx_RoomTile div { +.mx_RoomTile_name { + display: table-cell; + vertical-align: middle; overflow: hidden; text-overflow: ellipsis; } -.mx_RoomTile.unread { +.mx_RoomTile_unread { font-weight: bold; } -.mx_RoomTile.highlight { +.mx_RoomTile_highlight { background-color: lime; } -.mx_RoomTile.invited { +.mx_RoomTile_invited { font-weight: bold; } diff --git a/skins/base/css/molecules/SenderProfile.css b/skins/base/css/molecules/SenderProfile.css index 549b598458..18523a9b3f 100644 --- a/skins/base/css/molecules/SenderProfile.css +++ b/skins/base/css/molecules/SenderProfile.css @@ -15,6 +15,4 @@ limitations under the License. */ .mx_SenderProfile { - display: table-cell; - padding: 0px 1em 0em 1em; } diff --git a/skins/base/css/organisms/LeftPanel.css b/skins/base/css/organisms/LeftPanel.css new file mode 100644 index 0000000000..36bc5933cf --- /dev/null +++ b/skins/base/css/organisms/LeftPanel.css @@ -0,0 +1,88 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_LeftPanel { + position: relative; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + flex-direction: column; + -webkit-flex-direction: column; + + border-right: 1px solid #d8d8d8; +} + +.mx_LeftPanel_hideButton { + position: absolute; + top: 10px; + right: 10px; +} + +.mx_LeftPanel .mx_RoomList { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + order: 1; + + padding-left: 16px; + padding-right: 16px; + + /* background-color: #0ff; */ + height: 100%; + overflow-y: scroll; +} + +.mx_LeftPanel .mx_RoomCreate { + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; + + padding-left: 16px; + padding-right: 16px; + min-height: 46px; + + border-top: 1px solid #d8d8d8; + border-bottom: 1px solid #d8d8d8; +} + +.mx_LeftPanel .mx_RoomCreate .mx_RoomCreate_table { + display: table; + width: 100%; + height: 46px; +} + +.mx_LeftPanel .mx_DirectoryMenu { + -webkit-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -ms-flex-order: 3; + -webkit-order: 3; + order: 3; + + min-height: 150px; + padding-left: 16px; + padding-right: 16px; +} + +.mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options { + 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 new file mode 100644 index 0000000000..4831b86f93 --- /dev/null +++ b/skins/base/css/organisms/MemberList.css @@ -0,0 +1,42 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_MemberList { + width: 100%; + height: 100%; + margin-bottom: 100px; +} + +.mx_MemberList_chevron { + position: absolute; + right: 20px; + margin-top: -5px; +} + +.mx_MemberList_wrapper { + border: 1px solid #d8d8d8; + margin: 8px; + overflow-y: scroll; + height: auto; + max-height: 75%; + border-radius: 8px; + padding: 20px 24px 14px 24px; + table-layout: fixed; +} + +.mx_MemberList h2 { + margin-top: 0px; +} diff --git a/skins/base/css/organisms/RightPanel.css b/skins/base/css/organisms/RightPanel.css new file mode 100644 index 0000000000..d4b33c3029 --- /dev/null +++ b/skins/base/css/organisms/RightPanel.css @@ -0,0 +1,54 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_RightPanel { + position: relative; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + flex-direction: column; + -webkit-flex-direction: column; +} + +.mx_RightPanel_header { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + order: 1; + flex: 0 0 50px; + + text-align: right; + + height: 50px; + border-bottom: 1px solid #d8d8d8; +} + +.mx_RightPanel_headerButton { + margin-top: 9px; + margin-right: 16px; +} + +.mx_RightPanel .mx_MemberList { + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; +} diff --git a/skins/base/css/organisms/RoomList.css b/skins/base/css/organisms/RoomList.css index e2dec3c9fd..31962824ca 100644 --- a/skins/base/css/organisms/RoomList.css +++ b/skins/base/css/organisms/RoomList.css @@ -16,3 +16,10 @@ limitations under the License. .mx_RoomList { } + +.mx_RoomList_recents { + margin-top: -12px; + display: table; + table-layout: fixed; + width: 100%; +} \ No newline at end of file diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index 4176c4b8cc..460a02f8b5 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/skins/base/css/organisms/RoomView.css @@ -17,66 +17,74 @@ limitations under the License. .mx_RoomView { word-wrap: break-word; position: relative; -} -.mx_RoomView .mx_RoomHeader { - height: 30px; -} - -.mx_RoomView_roomWrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; - display: flex; - position: absolute; + display: flex; width: 100%; - top: 32px; - bottom: 0px; + flex-direction: column; + -webkit-flex-direction: column; } -.mx_RoomView_messagePanel { +.mx_RoomView .mx_RoomHeader { -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; */ + + flex: 0 0 50px; + border-bottom: 1px solid #d8d8d8; } -.mx_RoomView_messageListWrapper { - height: 100%; - overflow-y: scroll; -} - -.mx_RoomView_MessageList { - display: table; -} - -.mx_RoomView_invitePrompt { -} - -.mx_RoomView .mx_MemberList { +.mx_RoomView_auxPanel { -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%; + width: 100%; + height: 0%; } -.mx_RoomView .mx_MemberList ul { - margin: 0px; - padding: 0px; +.mx_RoomView_messagePanel { + -webkit-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -ms-flex-order: 3; + -webkit-order: 3; + order: 3; + + width: 100%; + height: 100%; + margin-bottom: 60px; + /* background-color: #ff0; */ + + overflow-y: scroll; +} + +.mx_RoomView_messageListWrapper { + max-width: 720px; + margin: auto; +} + +.mx_RoomView_MessageList { + width: 100%; +} + +.mx_RoomView_invitePrompt { } .mx_RoomView .mx_MessageComposer { + -webkit-box-ordinal-group: 4; + -moz-box-ordinal-group: 4; + -ms-flex-order: 4; + -webkit-order: 4; + order: 4; + width: 100%; - bottom: 0px; + flex: 0 0 50px; + /* background-color: #ff0; */ } diff --git a/skins/base/css/pages/MatrixChat.css b/skins/base/css/pages/MatrixChat.css index 7ce88ec7ff..22a53aea08 100644 --- a/skins/base/css/pages/MatrixChat.css +++ b/skins/base/css/pages/MatrixChat.css @@ -18,62 +18,23 @@ limitations under the License. position: relative; width: 100%; height: 100%; -} - -.mx_MatrixChat_chatWrapper { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - position: absolute; - 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; - -webkit-flex-direction: column; - - /* background-color: #f00; */ - width: 250px; - height: 100%; } -.mx_MatrixChat_leftPanel .mx_MatrixToolbar { +.mx_MatrixChat .mx_LeftPanel { -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 { - -webkit-box-ordinal-group: 2; - -moz-box-ordinal-group: 2; - -ms-flex-order: 2; - -webkit-order: 2; - order: 2; - - /* background-color: #0ff; */ - width: 100%; + flex: 0 0 230px; height: 100%; - overflow-y: scroll; } .mx_MatrixChat .mx_RoomView { @@ -87,3 +48,14 @@ limitations under the License. width: 100%; height: 100%; } + +.mx_MatrixChat .mx_RightPanel { + -webkit-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -ms-flex-order: 3; + -webkit-order: 3; + order: 3; + + flex: 0 0 230px; + height: 100%; +} diff --git a/skins/base/img/attach.png b/skins/base/img/attach.png new file mode 100644 index 0000000000..1bcb70045d Binary files /dev/null and b/skins/base/img/attach.png differ diff --git a/skins/base/img/chevron.png b/skins/base/img/chevron.png new file mode 100644 index 0000000000..3c908d1ca9 Binary files /dev/null and b/skins/base/img/chevron.png differ diff --git a/skins/base/img/create.png b/skins/base/img/create.png new file mode 100644 index 0000000000..2d6107ac50 Binary files /dev/null and b/skins/base/img/create.png differ diff --git a/skins/base/img/file.png b/skins/base/img/file.png new file mode 100644 index 0000000000..2ea4f280f5 Binary files /dev/null and b/skins/base/img/file.png differ diff --git a/skins/base/img/hide.png b/skins/base/img/hide.png new file mode 100644 index 0000000000..5485df2d88 Binary files /dev/null and b/skins/base/img/hide.png differ diff --git a/skins/base/img/info.png b/skins/base/img/info.png new file mode 100644 index 0000000000..699fd64e01 Binary files /dev/null and b/skins/base/img/info.png differ diff --git a/skins/base/img/members.png b/skins/base/img/members.png new file mode 100644 index 0000000000..9c35bcdf11 Binary files /dev/null and b/skins/base/img/members.png differ diff --git a/skins/base/img/placeholder.png b/skins/base/img/placeholder.png new file mode 100644 index 0000000000..7da32f259c Binary files /dev/null and b/skins/base/img/placeholder.png differ diff --git a/skins/base/img/search.png b/skins/base/img/search.png new file mode 100644 index 0000000000..f67ba892e9 Binary files /dev/null and b/skins/base/img/search.png differ diff --git a/skins/base/img/video.png b/skins/base/img/video.png new file mode 100644 index 0000000000..d83640a4ff Binary files /dev/null and b/skins/base/img/video.png differ diff --git a/skins/base/img/voip.png b/skins/base/img/voip.png new file mode 100644 index 0000000000..95f5741152 Binary files /dev/null and b/skins/base/img/voip.png differ diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js new file mode 100644 index 0000000000..bd3b07abb4 --- /dev/null +++ b/skins/base/views/molecules/DirectoryMenu.js @@ -0,0 +1,50 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use strict'; + +var React = require('react'); +var classNames = require('classnames'); + +//var DirectoryMenuController = require("../../../../src/controllers/molecules/DirectoryMenuController"); + +var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); + +module.exports = React.createClass({ + displayName: 'DirectoryMenu', + // mixins: [DirectoryMenuController], + render: function() { + return ( +
+

Directory

+
+
+
+ (+) +
+
Users
+
+
+
+ (+) +
+
Rooms
+
+
+
+ ); + } +}); diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js index 60d1cadd84..7ed4eadc20 100644 --- a/skins/base/views/molecules/MemberTile.js +++ b/skins/base/views/molecules/MemberTile.js @@ -26,6 +26,7 @@ module.exports = React.createClass({ render: function() { return (
+
()
{this.props.member.name}
); diff --git a/skins/base/views/molecules/MessageComposer.js b/skins/base/views/molecules/MessageComposer.js index 89c426cb2b..7cecb79c27 100644 --- a/skins/base/views/molecules/MessageComposer.js +++ b/skins/base/views/molecules/MessageComposer.js @@ -27,7 +27,16 @@ module.exports = React.createClass({ render: function() { return (
-