From f593bff3c30113c6eb94e3309716cf62e5b2aabd Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 22 Nov 2018 17:03:23 +0000
Subject: [PATCH] show right panel tabs inside panel instead of room header in
 grid mode

---
 res/css/structures/_GroupGridView.scss     | 26 +++++++++++++++++++++-
 res/css/views/rooms/_MemberList.scss       |  4 ++++
 src/components/structures/GroupGridView.js | 13 +++++++++--
 src/components/structures/RoomView.js      |  7 +++++-
 src/components/views/rooms/RoomHeader.js   |  2 +-
 5 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_GroupGridView.scss b/res/css/structures/_GroupGridView.scss
index 14c46d1370..0464026ed4 100644
--- a/res/css/structures/_GroupGridView.scss
+++ b/res/css/structures/_GroupGridView.scss
@@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_GroupGridView {
+    display: flex;
+    flex-direction: column;
+}
+
 .mx_GroupGridView_rooms {
     display: grid;
     grid-template-columns: repeat(3, calc(100% / 3));
@@ -21,11 +26,30 @@ limitations under the License.
     flex: 1 1 0;
 }
 
-.mx_GroupGridView {
+
+.mx_GroupGridView_rightPanel {
     display: flex;
     flex-direction: column;
+
+    .mx_GroupGridView_tabs {
+        flex: 0 0 52px;
+        border-bottom: 1px solid $primary-hairline-color;
+        display: flex;
+        align-items: center;
+
+        > div {
+            justify-content: flex-end;
+            width: 100%;
+            margin-right: 10px;
+        }
+    }
+
+    .mx_RightPanel {
+        flex: 1 0 auto !important;
+    }
 }
 
+
 .mx_GroupGridView > .mx_MainSplit {
     flex: 1 1 0;
     display: flex;
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 2695ebcf31..8e59eb85d5 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -53,6 +53,10 @@ limitations under the License.
 .mx_MemberList_query,
 .mx_GroupMemberList_query,
 .mx_GroupRoomList_query {
+    flex: 0 0 auto;
+}
+
+.mx_MemberList .gm-scrollbar-container {
     flex: 1 1 0;
 }
 
diff --git a/src/components/structures/GroupGridView.js b/src/components/structures/GroupGridView.js
index d6268ff14c..abfd343309 100644
--- a/src/components/structures/GroupGridView.js
+++ b/src/components/structures/GroupGridView.js
@@ -23,6 +23,7 @@ import RoomView from './RoomView';
 import classNames from 'classnames';
 import MainSplit from './MainSplit';
 import RightPanel from './RightPanel';
+import RoomHeaderButtons from '../views/right_panel/RoomHeaderButtons';
 
 export default class RoomGridView extends React.Component {
 
@@ -93,7 +94,15 @@ export default class RoomGridView extends React.Component {
             roomStores = roomStores.concat(emptyTiles);
         }
         const activeRoomId = this.state.activeRoomStore && this.state.activeRoomStore.getRoomId();
-        const rightPanel = activeRoomId ? <RightPanel roomId={activeRoomId} /> : undefined;
+        let rightPanel;
+        if (activeRoomId) {
+            rightPanel = (
+                <div className="mx_GroupGridView_rightPanel">
+                    <div className="mx_GroupGridView_tabs"><RoomHeaderButtons /></div>
+                    <RightPanel roomId={activeRoomId} />
+                </div>
+            );
+        }
 
         return (<main className="mx_GroupGridView">
             <MainSplit panel={rightPanel}>
@@ -107,7 +116,7 @@ export default class RoomGridView extends React.Component {
                             });
                             return (<section onClick={() => {this._setActive(i)}} key={roomStore.getRoomId()} className={tileClasses}>
                                 <RoomView
-                                    collapsedRhs={true}
+                                    isGrid={true}
                                     roomViewStore={roomStore}
                                     isActive={isActive}
                                 />
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index f6b9381080..af389c804a 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1509,6 +1509,7 @@ module.exports = React.createClass({
                         <RoomHeader ref="header"
                             room={this.state.room}
                             oobData={this.props.oobData}
+                            isGrid={this.props.isGrid}
                             collapsedRhs={this.props.collapsedRhs}
                         />
                         <div className="mx_RoomView_body">
@@ -1555,6 +1556,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomView">
                         <RoomHeader
                             ref="header"
+                            isGrid={this.props.isGrid}
                             room={this.state.room}
                             collapsedRhs={this.props.collapsedRhs}
                         />
@@ -1813,11 +1815,14 @@ module.exports = React.createClass({
             },
         );
 
-        const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
+        const rightPanel = this.state.room && !this.props.isGrid ?
+            <RightPanel roomId={this.state.room.roomId} /> :
+            undefined;
 
         return (
             <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
                 <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
+                    isGrid={this.props.isGrid}
                     oobData={this.props.oobData}
                     editing={this.state.editingRoomSettings}
                     saving={this.state.uploadingRoomSettings}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 3b85730e11..abf9c7c093 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -433,7 +433,7 @@ module.exports = React.createClass({
                     { saveButton }
                     { cancelButton }
                     { rightRow }
-                    <RoomHeaderButtons />
+                    { !this.props.isGrid ? <RoomHeaderButtons /> : undefined }
                 </div>
             </div>
         );