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