From bfe0cdcfd1e5f88cb8feefa74069ba49c9ecd38f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 13 Jul 2015 01:51:24 +0100 Subject: [PATCH] vector wireframes --- examples/trivial/img | 1 + examples/trivial/index.html | 1 + skins/base/css/atoms/MessageTimestamp.css | 2 - skins/base/css/common.css | 14 ++- skins/base/css/molecules/MemberTile.css | 37 ++++++++ skins/base/css/molecules/MessageComposer.css | 47 +++++++++- skins/base/css/molecules/MessageTile.css | 24 ++++- skins/base/css/molecules/RoomDropTarget.css | 27 ++++++ skins/base/css/molecules/RoomHeader.css | 43 ++++++++- skins/base/css/molecules/RoomTile.css | 23 +++-- skins/base/css/molecules/SenderProfile.css | 2 - skins/base/css/organisms/LeftPanel.css | 88 ++++++++++++++++++ skins/base/css/organisms/MemberList.css | 42 +++++++++ skins/base/css/organisms/RightPanel.css | 54 +++++++++++ skins/base/css/organisms/RoomList.css | 7 ++ skins/base/css/organisms/RoomView.css | 78 +++++++++------- skins/base/css/pages/MatrixChat.css | 54 +++-------- skins/base/img/attach.png | Bin 0 -> 369 bytes skins/base/img/chevron.png | Bin 0 -> 2920 bytes skins/base/img/create.png | Bin 0 -> 807 bytes skins/base/img/file.png | Bin 0 -> 308 bytes skins/base/img/hide.png | Bin 0 -> 341 bytes skins/base/img/info.png | Bin 0 -> 660 bytes skins/base/img/members.png | Bin 0 -> 910 bytes skins/base/img/placeholder.png | Bin 0 -> 394 bytes skins/base/img/search.png | Bin 0 -> 651 bytes skins/base/img/video.png | Bin 0 -> 471 bytes skins/base/img/voip.png | Bin 0 -> 541 bytes skins/base/views/molecules/DirectoryMenu.js | 50 ++++++++++ skins/base/views/molecules/MemberTile.js | 1 + skins/base/views/molecules/MessageComposer.js | 11 ++- skins/base/views/molecules/MessageTile.js | 3 + skins/base/views/molecules/RoomCreate.js | 43 +++++++++ skins/base/views/molecules/RoomDropTarget.js | 36 +++++++ skins/base/views/molecules/RoomHeader.js | 23 ++++- skins/base/views/molecules/RoomTile.js | 9 +- skins/base/views/organisms/LeftPanel.js | 40 ++++++++ skins/base/views/organisms/MemberList.js | 18 ++-- skins/base/views/organisms/RightPanel.js | 39 ++++++++ skins/base/views/organisms/RoomList.js | 15 ++- skins/base/views/organisms/RoomView.js | 16 ++-- skins/base/views/pages/MatrixChat.js | 14 +-- src/ComponentBroker.js | 7 ++ 43 files changed, 741 insertions(+), 128 deletions(-) create mode 120000 examples/trivial/img create mode 100644 skins/base/css/molecules/MemberTile.css create mode 100644 skins/base/css/molecules/RoomDropTarget.css create mode 100644 skins/base/css/organisms/LeftPanel.css create mode 100644 skins/base/css/organisms/MemberList.css create mode 100644 skins/base/css/organisms/RightPanel.css create mode 100644 skins/base/img/attach.png create mode 100644 skins/base/img/chevron.png create mode 100644 skins/base/img/create.png create mode 100644 skins/base/img/file.png create mode 100644 skins/base/img/hide.png create mode 100644 skins/base/img/info.png create mode 100644 skins/base/img/members.png create mode 100644 skins/base/img/placeholder.png create mode 100644 skins/base/img/search.png create mode 100644 skins/base/img/video.png create mode 100644 skins/base/img/voip.png create mode 100644 skins/base/views/molecules/DirectoryMenu.js create mode 100644 skins/base/views/molecules/RoomCreate.js create mode 100644 skins/base/views/molecules/RoomDropTarget.js create mode 100644 skins/base/views/organisms/LeftPanel.js create mode 100644 skins/base/views/organisms/RightPanel.js 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 0000000000000000000000000000000000000000..1bcb70045d457e1b96c03a89b6652c3c720137e5 GIT binary patch literal 369 zcmV-%0gnEOP)S8 zD2f_}0rz*kj^}wVo+3va$H$j^2uKSak7=Ig0D$#ek|d%iE<06KHBGagoTf=t)ono( zMbBP@8Wm$${Y!350zb()-4S(;FBps*d9|bJS>bkyb2_SuazX~t_q8w+Y1HH_H P00000NkvXXu0mjfe{z=) literal 0 HcmV?d00001 diff --git a/skins/base/img/chevron.png b/skins/base/img/chevron.png new file mode 100644 index 0000000000000000000000000000000000000000..3c908d1ca9f00fedd1eb5b9da1e15986d2273cd1 GIT binary patch literal 2920 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 S##K=O0000(RCwC7md$D!Q544~Nx$yJCJ6a z&P>#vg>q-^{hf2~J#+qNN7FRP&Zg7pa5x-~$CJr~q0i^@`~7=+dy1miuHCV40QchJ z;`;h}Fc^eFA;IOj@N{!?6AT6uiNwLdfrTe?2ea9%*=#l%jbt(jA{vd#vTT^MSS&i7 z4(_k6uF~mrDwXnjy^b98`~70E7>PtOnM@!Muswv)XjG|Gy4`LrmkWo(#@E_IYq#5l zLV;iHk;anK)6>h#OT+UA4tNc{*XwC(8Czcs?%n}hLST}%fdMgus5>BG&d$!(I2qHk z0tHYE_1qw5xK*-6+Sq`A0w{*E$agZ5oRPL}5KW=~9&gAn1d*^_SPzhqOn6y>nCcpxhsbbWb)kut!oABiT~^b{_;#_7RaF!uSy4QuE5TA0ck1;zf7xu-yr6#n^5N5G z>tNr$`}lg_q?(q?Wqi1;7kh%w@<(~ewH&zJYU}ICdG*avKJJplMXRd&`4f)?!A*&$ zJpA)0clQrp?cbkQXL@ozdGYcv;o!b5Qb6hP5x=;=mJfNFDao6~`S0%#QdRkd4BmeE}k$^5&e zSX-7wh=#_(*tYPR5Y}s3O#7Yx-gw!!j))y{WZF6sZ>!aMbn9r*{0ilmEN!Fa*R*{H lN`YiZ3B!}a_Wh3l0{{dzLWKWE_s{?U002ovPDHLkV1ng%k_i9+ literal 0 HcmV?d00001 diff --git a/skins/base/img/file.png b/skins/base/img/file.png new file mode 100644 index 0000000000000000000000000000000000000000..2ea4f280f52336c7ac2a9c6892aac42a48cb306a GIT binary patch literal 308 zcmV-40n7f0P)j1{xbLg0000F(EK6P2F~bJ$>3!c1!w^LgAp|o|@K42k-*sIt%Mym6Wm(9tuz=$@s;auK zD+mJ9H1Rh^S+wtaQ53dq`@WB~{w?;TZQHUeYnp}$=@}5m@i>l5RMLxvwWw`du^XUL z1WV5I+;JSw^LUrc5mRU{RDn09(u=0?dfIhenx^Zzel4b-g2ygN5@$+eO nI7TV`<_^>^Qvv=K@DgAE-GM6u`V|KC00000NkvXXu0mjf;D(g? literal 0 HcmV?d00001 diff --git a/skins/base/img/info.png b/skins/base/img/info.png new file mode 100644 index 0000000000000000000000000000000000000000..699fd64e013954b01bca869c67ce3868eb82338b GIT binary patch literal 660 zcmV;F0&D$=P)-bA>~pwRsOBqVpKY)2 z+h?7%zqK`zB)vToKi-~CKSS%Ke zMs+&zi|+UPX0zF7G{WI2#=frHb5cx8-vA=LuA&;xAR+s8UgoKqU~s z2{@}tVS2qj5{cYXvXDR}5WoP=PVgWgIa}5f-BhE|2n1xx-v%TmlSv?e1LKj83qS&u zKmdQofgcxu1S)|*Fc`$&Rcibm5Dp2ANFd;FIPd_W&)g5fA^F(mK2;IDiSBW2mSD5l z)y76R0`sf@0000Id9V7oTbM+iiuY!ieFgBF$*U7?HA=5(b-ELKNZ zQR?jMwApNg<>24|zOk{fo}QlEnXRp@U@$l}H6_0zQ@D8S{QNv|&s*N#-{5*%Adf^MWHlG} ze8lSO>y<^)*x1PKuW)M`z94|3CZOJ_NU3Hl77KAumJoJ!rDuTvj+$U+XNOEmC^$Sm zJ}L>Yvnv@vpg+_E7Z(@$lBccAX0wvOWHLQJKkIWt+SCL*nO>C~(&;on#R%Ayj39_1 zHAt7Os;ZJ48X6j|uCDYqWl^d6&H@1(H32%K2cmD=+uP{_$xgy(k(QPg$qoWIY63EL zdwZ+DX@7tJ-rk;M+~4058K+>#9~h-le4q4DCpVQSsNc6ho^io9gOn#u-x6 z)z#JA-3_9_V31@O=y-OKYP6l6K*mvQG4twq;P?CKUPgk;6mv$pb+LuIkrll3Q}dIVO#S$LzCS;c^Z8(Upzk05DyR#O$MfZ1 k#ozcB{r{V0*G~Zk0M~sfGW4*&p8x;=07*qoM6N<$f)7Z)xBvhE literal 0 HcmV?d00001 diff --git a/skins/base/img/placeholder.png b/skins/base/img/placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..7da32f259c1a90d721dfc9abc4ad427ab9e7c5bf GIT binary patch literal 394 zcmV;50d@X~P)ntlanzq{fbCjfCT%hE_`W?6RRV+Y`~D2n@8z07%@=Tuia0Fgm_4E7hI zgjnH=q~EA_vkiP0O6pa0H)#llu-yUw)TKgXy87Bio%`#m+c~Zt`?=?wZny3lKJ4|| zd#(Ta@2$9AuPKF z>7CJuU@*v8WvGa*R;yJi^ECS{LZJ}5>GgV|05s!rxgOU2@nWSi91b@c4N(A!L^HBv z?(ukLvl+S&0-*Qjs(2r-udgPP3Hb^Em?oW0CwEqv1{Mkdm{q1pE`a)Q4j}+eAaU4- z!OXM7Y&Hu4@EM#y7GOG^QdNV&AOv7`@EM#y98j;<{eHiwOz}uu44)CqKAB9$<8dGm zkZ~X2k+>KW_cS{$l+Wj*(Wq9dl>tC=cx1U;#*}EF#NN~CG}h8=HgOBt_rYqlx;ZvZ zz^wjKAxP%7R;y7N_D=TEXoNHpiG*6MmI1g0E{4yLky+(r=p99(8M;c{sSG>F<#N&t z#nWfYEibdmIneu^BA+r8AAc7~Gd|%}K}PbD9R{Sko`24>c}jLZtuz002ovPDHLkV1i!QG86y+ literal 0 HcmV?d00001 diff --git a/skins/base/img/video.png b/skins/base/img/video.png new file mode 100644 index 0000000000000000000000000000000000000000..d83640a4ff69ce9505bf4320404a5296962ee2ee GIT binary patch literal 471 zcmV;|0Vw{7P)jl%V^V_{s0FAIO>q7C^`)hyzkdBf ziDY27^YQVKY5`CST7(@uco1SG6B85lQ_P*YQL zb#C>mQst@GlC-1tizA>Gphh?sm{{Mxe?Mo=oPYoRq5A+> zdz?LcmQ+^*wE#6Di`d!OK}4W-(7M85L~eM|qRM0(ZP|@lKrsLaFaS4s~@Fx|S>vzXq_ zIq!4cw`b;g#;Pca#mpcqCWq+;UpjTG)vDX=ilTTp9Bek5&*#fzG9*cAZnWyDLBHQ0 z33-sVltUjDwXYadxZl54)*bOLeKFFg@VK3xWa(| z2m5M~7mGzG6uL_R2m7kQe!ssx{^b&2|N3|Es|GB~>df*$`KiH625OtK+wHsE?ydkh z*o*RM1A-uq$73K6n9t{T1;D{V1EmpzU@$nF&CoBK&F1YTfB**z4U|R zN8axgoLa3GvX@FFwbTYD+Ua!a^?IYxC?1caKRcby&1Qr04u?aEqSEQ~g9_^%nFv{y zd7fV`m*ep`8jbq>{#Y#LcDuEADo+N(Fi+_}z34svMb&B*Z;rZNuh%Y@OI_oQDwoS| fF! +

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 (
-