Merge pull request #2181 from vector-im/wmwragg/chat-multi-invite

Wmwragg/chat multi invite

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({
                 </div>
                 { panel }
                 <div className="mx_RightPanel_footer">
+                    <div className="mx_RightPanel_invite" >
+                        <div className="mx_RightPanel_icon" onClick={ this.onInviteButtonClick } >
+                            <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
+                        </div>
+                        <div className="mx_RightPanel_message">Invite to this room</div>
+                    </div>
                 </div>
             </aside>
         );

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;
 }

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 {

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 */
+}

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;

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;
 }

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
+}