allow changing active room in grid by clicking it

res/css/structures/_GroupGridView.scss

@@ -21,19 +21,24 @@ limitations under the License.
     background-color: red;
 }
 
-.mx_RoomGridView_emptyTile::before {
+
+.mx_GroupGridView_emptyTile::before {
     display: block;
     margin-top: 100px;
     text-align: center;
     content: "no room in this tile yet";
 }
 
-.mx_RoomGridView_tile {
+.mx_GroupGridView_tile {
     border-right: 1px solid $panel-divider-color;
     border-bottom: 1px solid $panel-divider-color;
 }
 
-.mx_RoomGridView_tile > .mx_RoomView {
+.mx_GroupGridView_activeTile {
+    border: 1px solid red !important;
+}
+
+.mx_GroupGridView_tile > .mx_RoomView {
     height: 100%;
 }
 

src/components/structures/GroupGridView.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import OpenRoomsStore from '../../stores/OpenRoomsStore';
 import dis from '../../dispatcher';
 import RoomView from './RoomView';
+import classNames from 'classnames';
 
 export default class RoomGridView extends React.Component {
 
@@ -49,6 +50,7 @@ export default class RoomGridView extends React.Component {
         if (this._unmounted) return;
         this.setState({
             roomStores: OpenRoomsStore.getRoomStores(),
+            currentRoomStore: OpenRoomsStore.getCurrentRoomStore(),
         });
     }
 
@@ -67,16 +69,21 @@ export default class RoomGridView extends React.Component {
             roomStores = roomStores.concat(emptyTiles);
         }
         return (<main className="mx_GroupGridView">
-            { roomStores.map(roomStore => {
+            { roomStores.map((roomStore) => {
                 if (roomStore) {
-                    return (<section key={roomStore.getRoomId()} className="mx_RoomGridView_tile">
+                    const isActive = roomStore === this.state.currentRoomStore;
+                    const tileClasses = classNames({
+                        "mx_GroupGridView_tile": true,
+                        "mx_GroupGridView_activeTile": isActive,
+                    });
+                    return (<section key={roomStore.getRoomId()} className={tileClasses}>
                         <RoomView
                             collapsedRhs={true}
                             roomViewStore={roomStore}
                         />
                     </section>);
                 } else {
-                    return (<section className={"mx_RoomGridView_emptyTile"} />);
+                    return (<section className={"mx_GroupGridView_emptyTile"} />);
                 }
             }) }
         </main>);

src/components/structures/MatrixChat.js

@@ -627,7 +627,7 @@ export default React.createClass({
             case 'view_group':
                 this._viewGroup(payload);
                 break;
-            case 'view_group_grid':
+            case 'group_grid_view':
                 this._viewGroupGrid(payload);
                 break;
             case 'view_home_page':

src/components/structures/RoomView.js

@@ -1470,6 +1470,10 @@ module.exports = React.createClass({
         }
     },
 
+    _onMainClicked: function() {
+        dis.dispatch({action: 'group_grid_set_active', room_id: this.state.room.roomId });
+    },
+
     render: function() {
         const RoomHeader = sdk.getComponent('rooms.RoomHeader');
         const MessageComposer = sdk.getComponent('rooms.MessageComposer');
@@ -1817,7 +1821,7 @@ module.exports = React.createClass({
         const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
 
         return (
-            <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
+            <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView" onClick={this._onMainClicked}>
                 <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
                     oobData={this.props.oobData}
                     editing={this.state.editingRoomSettings}

src/components/views/context_menus/TagTileContextMenu.js

@@ -56,7 +56,7 @@ export default class TagTileContextMenu extends React.Component {
 
     _onViewAsGridClick() {
         dis.dispatch({
-            action: 'view_group_grid',
+            action: 'group_grid_view',
             group_id: this.props.tag,
         });
         this.props.onFinished();

src/stores/OpenRoomsStore.js

@@ -133,10 +133,6 @@ class OpenRoomsStore extends Store {
         }
     }
 
-    _setCurrentGroupRoom(index) {
-        this._setState({currentIndex: index});
-    }
-
     __onDispatch(payload) {
         switch (payload.action) {
             // view_room:
@@ -192,7 +188,15 @@ class OpenRoomsStore extends Store {
             case 'forward_event':
                 this._forwardingEvent = payload.event;
                 break;
-            case 'view_group_grid':
+            case 'group_grid_set_active':
+                const proposedIndex = this._roomIndex(payload);
+                if (proposedIndex !== -1) {
+                    this._setState({
+                        currentIndex: proposedIndex
+                    });
+                }
+                break;
+            case 'group_grid_view':
                 if (payload.group_id !== this._state.group_id) {
                     this._cleanupRooms();
                     // TODO: register to GroupStore updates
@@ -213,8 +217,8 @@ class OpenRoomsStore extends Store {
                     this._setState({
                         rooms: roomStores,
                         group_id: payload.group_id,
+                        currentIndex: 0,
                     });
-                    this._setCurrentGroupRoom(0);
                 }
                 break;
         }