diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index e4555658..56de89df 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 e93510ff..f1cc7d4a 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 8dce58a3..9fe5af9e 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 00000000..62efee7c
--- /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 5e22ccaf..76c0e603 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 5a71ac28..4e328171 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 211848f5..0770f7df 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 00000000..c5e16894
--- /dev/null
+++ b/src/skins/vector/img/avatar-error.svg
@@ -0,0 +1,15 @@
+
+
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 00000000..2d41e06f
--- /dev/null
+++ b/src/skins/vector/img/icon-email-user.svg
@@ -0,0 +1,17 @@
+
+
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 00000000..f13a03ed
--- /dev/null
+++ b/src/skins/vector/img/icon-invite-people.svg
@@ -0,0 +1,24 @@
+
+
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 00000000..66180309
--- /dev/null
+++ b/src/skins/vector/img/icon-mx-user.svg
@@ -0,0 +1,55 @@
+
+