diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index e45556588b..56de89dfe4 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -109,6 +109,14 @@ module.exports = React.createClass({ } }, + onInviteButtonClick: function() { + // call ChatInviteDialog + dis.dispatch({ + action: 'view_invite', + roomId: this.props.roomId, + }); + }, + onRoomStateMember: function(ev, state, member) { // redraw the badge on the membership list if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) { @@ -236,6 +244,12 @@ module.exports = React.createClass({ { panel }
+
+
+ +
+
Invite to this room
+
); diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css index e93510ffb1..f1cc7d4a1a 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css @@ -151,6 +151,6 @@ limitations under the License. } .mx_MatrixChat .mx_RightPanel.collapsed { - -webkit-flex: 0 0 72px; - flex: 0 0 72px; + -webkit-flex: 0 0 122px; + flex: 0 0 122px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index 8dce58a3cc..9fe5af9eee 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -42,33 +42,15 @@ limitations under the License. padding-right: 4px; padding-top: 1px; padding-bottom: 1px; - overflow: hidden; -} - -.mx_ChatInviteDialog_queryList { - position: absolute; - background-color: #fff; - width: 485px; - max-height: 116px; + max-height: 150px; + overflow-x: hidden; overflow-y: scroll; - border-radius: 3px; - background-color: #fff; - border: solid 1px #76cfa6; - cursor: pointer; } -.mx_ChatInviteDialog_queryListElement .mx_AddressTile { - background-color: #fff; - border: solid 1px #fff; -} - -.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected { - background-color: #eaf5f0; /* selected colour */ -} - -.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile { - background-color: #eaf5f0; /* selected colour */ - border: solid 1px #eaf5f0; /* selected colour */ +.mx_ChatInviteDialog_error { + position: absolute; + color: #ff0064; + line-height: 36px; } .mx_ChatInviteDialog_cancel { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css new file mode 100644 index 0000000000..62efee7c05 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css @@ -0,0 +1,45 @@ +/* +Copyright 2016 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_AddressSelector { + position: absolute; + background-color: #fff; + width: 485px; + max-height: 116px; + overflow-y: scroll; + border-radius: 3px; + background-color: #fff; + border: solid 1px #76cfa6; + cursor: pointer; +} + +.mx_AddressSelector.mx_AddressSelector_empty { + display: none; +} + +.mx_AddressSelector_addressListElement .mx_AddressTile { + background-color: #fff; + border: solid 1px #fff; +} + +.mx_AddressSelector_addressListElement.mx_AddressSelector_selected { + background-color: #eaf5f0; /* selected colour */ +} + +.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile { + background-color: #eaf5f0; /* selected colour */ + border: solid 1px #eaf5f0; /* selected colour */ +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css index 5e22ccaf8d..76c0e6032f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css @@ -23,6 +23,13 @@ limitations under the License. color: #454545; font-size: 14px; font-weight: normal; + margin-right: 4px; +} + +.mx_AddressTile.mx_AddressTile_error { + background-color: rgba(255, 0, 100, 0.1); + color: #ff0064; + border-color: #ff0064; } .mx_AddressTile_network { @@ -41,6 +48,13 @@ limitations under the License. vertical-align: middle; } +.mx_AddressTile_mx { + display: inline-block; + margin: 0; + border: 0; + padding: 0; +} + .mx_AddressTile_name { display: inline-block; padding-right: 4px; @@ -71,6 +85,47 @@ limitations under the License. vertical-align: middle; } +.mx_AddressTile_unknownMx { + display: inline-block; + font-weight: 600; + padding-right: 11px; +} + +.mx_AddressTile_unknownMxl.mx_AddressTile_justified { + width: 380px; /* name + id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.mx_AddressTile_email { + display: inline-block; + font-weight: 600; + padding-right: 11px; +} + +.mx_AddressTile_email.mx_AddressTile_justified { + width: 380px; /* name + id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.mx_AddressTile_unknown { + display: inline-block; + padding-right: 11px; +} + +.mx_AddressTile_unknown.mx_AddressTile_justified { + width: 380px; /* name + id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + .mx_AddressTile_dismiss { display: inline-block; padding-right: 11px; diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 5a71ac28c8..4e3281716e 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -91,19 +91,13 @@ limitations under the License. .collapsed .mx_BottomLeftMenu_createRoom, .collapsed .mx_BottomLeftMenu_people, .collapsed .mx_BottomLeftMenu_settings { - margin-left: 0px ! important; + margin-right: 0px ! important; padding-top: 3px ! important; padding-bottom: 3px ! important; } -.mx_LeftPanel .mx_BottomLeftMenu_directory { - margin-right: 10px; -} - -.mx_LeftPanel .mx_BottomLeftMenu_createRoom { - margin-right: 10px; -} - +.mx_LeftPanel .mx_BottomLeftMenu_directory, +.mx_LeftPanel .mx_BottomLeftMenu_createRoom, .mx_LeftPanel .mx_BottomLeftMenu_people { margin-right: 10px; } diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 211848f54e..0770f7df67 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -103,3 +103,30 @@ limitations under the License. -webkit-flex: 0 0 60px; flex: 0 0 60px; } + +.mx_RightPanel_footer .mx_RightPanel_invite { + line-height: 35px; + font-size: 14px; + color: #4A4A4A; + padding-top: 13px; + padding-left: 5px; +} + +.collapsed .mx_RightPanel_footer .mx_RightPanel_invite { + display: none; +} + +.mx_RightPanel_invite .mx_RightPanel_icon { + display: inline-block; + cursor: pointer; +} + +.mx_RightPanel_invite .mx_RightPanel_icon object { + pointer-events: none; +} + +.mx_RightPanel_invite .mx_RightPanel_message { + display: inline-block; + vertical-align: top; + padding-left: 10px +} diff --git a/src/skins/vector/img/avatar-error.svg b/src/skins/vector/img/avatar-error.svg new file mode 100644 index 0000000000..c5e168944c --- /dev/null +++ b/src/skins/vector/img/avatar-error.svg @@ -0,0 +1,15 @@ + + + + 5EF602F6-A36C-41EE-BAEC-50801DFD5492 + Created with sketchtool. + + + + + + + + + + diff --git a/src/skins/vector/img/icon-email-user.svg b/src/skins/vector/img/icon-email-user.svg new file mode 100644 index 0000000000..2d41e06f98 --- /dev/null +++ b/src/skins/vector/img/icon-email-user.svg @@ -0,0 +1,17 @@ + + + + 6F488856-F8EF-479C-9747-AB6E0945C7DE + Created with sketchtool. + + + + + + + + + + + + diff --git a/src/skins/vector/img/icon-invite-people.svg b/src/skins/vector/img/icon-invite-people.svg new file mode 100644 index 0000000000..f13a03ed70 --- /dev/null +++ b/src/skins/vector/img/icon-invite-people.svg @@ -0,0 +1,24 @@ + + + + 9BA71BF4-DC4F-42D2-B2D0-9EAE0F7F8D45 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + diff --git a/src/skins/vector/img/icon-mx-user.svg b/src/skins/vector/img/icon-mx-user.svg new file mode 100644 index 0000000000..661803094c --- /dev/null +++ b/src/skins/vector/img/icon-mx-user.svg @@ -0,0 +1,55 @@ + + + + 7EB955F8-D226-4EEE-B1DF-E97BA41D1247 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +