diff --git a/res/css/structures/_GroupGridView.scss b/res/css/structures/_GroupGridView.scss
index 4c54cb49b1..130d3e89f6 100644
--- a/res/css/structures/_GroupGridView.scss
+++ b/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%;
}
diff --git a/src/components/structures/GroupGridView.js b/src/components/structures/GroupGridView.js
index b72e689bc5..09bc0e300a 100644
--- a/src/components/structures/GroupGridView.js
+++ b/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 (
- { roomStores.map(roomStore => {
+ { roomStores.map((roomStore) => {
if (roomStore) {
- return (
+ const isActive = roomStore === this.state.currentRoomStore;
+ const tileClasses = classNames({
+ "mx_GroupGridView_tile": true,
+ "mx_GroupGridView_activeTile": isActive,
+ });
+ return ();
} else {
- return ();
+ return ();
}
}) }
);
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index c42daf2923..3d3aa52e57 100644
--- a/src/components/structures/MatrixChat.js
+++ b/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':
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index b1730ed96a..c7a0677262 100644
--- a/src/components/structures/RoomView.js
+++ b/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 ? : undefined;
return (
-
+