Add toggle to alter visibility of room-group association

src/components/structures/RightPanel.js

@@ -90,6 +90,7 @@ module.exports = React.createClass({
         RoomMemberList: 'RoomMemberList',
         GroupMemberList: 'GroupMemberList',
         GroupRoomList: 'GroupRoomList',
+        GroupRoomInfo: 'GroupRoomInfo',
         FilePanel: 'FilePanel',
         NotificationPanel: 'NotificationPanel',
         RoomMemberInfo: 'RoomMemberInfo',
@@ -217,7 +218,7 @@ module.exports = React.createClass({
         } else if (payload.action === "view_group_room") {
             this.setState({
                 phase: this.Phase.GroupRoomInfo,
-                groupRoom: payload.groupRoom,
+                groupRoomId: payload.groupRoomId,
             });
         } else if (payload.action === "view_group_room_list") {
             this.setState({
@@ -312,7 +313,7 @@ module.exports = React.createClass({
                     analytics={['Right Panel', 'Group Member List Button', 'click']}
                 />,
                 <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room.svg"
-                    isHighlighted={this.state.phase === this.Phase.GroupRoomList}
+                    isHighlighted={[this.Phase.GroupRoomList, this.Phase.GroupRoomInfo].includes(this.state.phase)}
                     clickPhase={this.Phase.GroupRoomList}
                     analytics={['Right Panel', 'Group Room List Button', 'click']}
                 />,
@@ -349,9 +350,9 @@ module.exports = React.createClass({
                     key={this.state.member.user_id} />;
             } else if (this.state.phase == this.Phase.GroupRoomInfo) {
                 panel = <GroupRoomInfo
-                    groupRoom={this.state.groupRoom}
+                    groupRoomId={this.state.groupRoomId}
                     groupId={this.props.groupId}
-                    key={this.state.groupRoom.roomId} />;
+                    key={this.state.groupRoomId} />;
             } else if (this.state.phase == this.Phase.NotificationPanel) {
                 panel = <NotificationPanel />;
             } else if (this.state.phase == this.Phase.FilePanel) {

src/components/views/elements/InlineSpinner.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2017 New Vector 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.
+*/
+
+const React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'InlineSpinner',
+
+    render: function() {
+        var w = this.props.w || 16;
+        var h = this.props.h || 16;
+        var imgClass = this.props.imgClassName || "";
+
+        return (
+            <div className="mx_InlineSpinner">
+                <img src="img/spinner.gif" width={w} height={h} className={imgClass}/>
+            </div>
+        );
+    }
+});

src/skins/vector/css/_components.scss

@@ -55,6 +55,8 @@
 @import "./matrix-react-sdk/views/rooms/_MemberInfo.scss";
 @import "./matrix-react-sdk/views/rooms/_MemberList.scss";
 @import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
+@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss";
+@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
 @import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
 @import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
 @import "./matrix-react-sdk/views/rooms/_RoomList.scss";
@@ -68,8 +70,6 @@
 @import "./matrix-react-sdk/views/voip/_CallView.scss";
 @import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
 @import "./matrix-react-sdk/views/voip/_VideoView.scss";
-@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
-@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss";
 @import "./vector-web/_fonts.scss";
 @import "./vector-web/structures/_CompatibilityPage.scss";
 @import "./vector-web/structures/_HomePage.scss";
@@ -86,6 +86,7 @@
 @import "./vector-web/views/dialogs/_SetPasswordDialog.scss";
 @import "./vector-web/views/directory/_NetworkDropdown.scss";
 @import "./vector-web/views/elements/_ImageView.scss";
+@import "./vector-web/views/elements/_InlineSpinner.scss";
 @import "./vector-web/views/elements/_Spinner.scss";
 @import "./vector-web/views/globals/_MatrixToolbar.scss";
 @import "./vector-web/views/messages/_DateSeparator.scss";

src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss

@@ -94,3 +94,19 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_MemberInfo label {
+    font-size: 13px;
+}
+
+.mx_MemberInfo label .mx_MemberInfo_label_text {
+    display: inline-block;
+    max-width: 180px;
+    vertical-align: text-top;
+}
+
+.mx_MemberInfo input[type="radio"] {
+    vertical-align: -2px;
+    margin-right: 5px;
+    margin-left: 8px;
+}
+

src/skins/vector/css/vector-web/views/elements/_InlineSpinner.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2017 New Vector 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_InlineSpinner {
+    display: inline;
+}
+
+.mx_InlineSpinner img {
+    margin: 0px 6px;
+    vertical-align: -3px;
+}