Implement simple GroupRoomInfo

See matrix-org/matrix-react-sdk#1563

src/components/structures/RightPanel.js

@@ -205,7 +205,6 @@ module.exports = React.createClass({
                 } else if (this.props.groupId) {
                     this.setState({
                         phase: this.Phase.GroupMemberList,
-                        groupId: payload.groupId,
                         member: payload.member,
                     });
                 }
@@ -213,13 +212,20 @@ module.exports = React.createClass({
         } else if (payload.action === "view_group") {
             this.setState({
                 phase: this.Phase.GroupMemberList,
-                groupId: payload.groupId,
                 member: null,
             });
+        } else if (payload.action === "view_group_room") {
+            this.setState({
+                phase: this.Phase.GroupRoomInfo,
+                groupRoom: payload.groupRoom,
+            });
+        } else if (payload.action === "view_group_room_list") {
+            this.setState({
+                phase: this.Phase.GroupRoomList,
+            });
         } else if (payload.action === "view_group_user") {
             this.setState({
                 phase: this.Phase.GroupMemberInfo,
-                groupId: payload.groupId,
                 member: payload.member,
             });
         } else if (payload.action === "view_room") {
@@ -242,6 +248,7 @@ module.exports = React.createClass({
         const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
         const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
         const GroupRoomList = sdk.getComponent('groups.GroupRoomList');
+        const GroupRoomInfo = sdk.getComponent('groups.GroupRoomInfo');
 
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
@@ -340,6 +347,11 @@ module.exports = React.createClass({
                     groupMember={this.state.member}
                     groupId={this.props.groupId}
                     key={this.state.member.user_id} />;
+            } else if (this.state.phase == this.Phase.GroupRoomInfo) {
+                panel = <GroupRoomInfo
+                    groupRoom={this.state.groupRoom}
+                    groupId={this.props.groupId}
+                    key={this.state.groupRoom.roomId} />;
             } else if (this.state.phase == this.Phase.NotificationPanel) {
                 panel = <NotificationPanel />;
             } else if (this.state.phase == this.Phase.FilePanel) {

src/skins/vector/css/matrix-react-sdk/views/groups/_GroupRoomList.scss

@@ -19,18 +19,3 @@ limitations under the License.
     color: $primary-fg-color;
     cursor: pointer;
 }
-
-.mx_GroupRoomTile_delete {
-    opacity: 0.4;
-    position: absolute;
-    top: 6px;
-    right: 10px;
-    cursor: pointer;
-
-    display: none;
-}
-
-.mx_GroupRoomTile:hover > .mx_GroupRoomTile_delete {
-    display: initial;
-}
-

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

@@ -57,7 +57,7 @@ limitations under the License.
     font-size: 14px;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 135px;
+    max-width: 155px;
 }
 
 .mx_EntityTile_details {