From 7227049c2a98db1b1c7fee33a342e7be7a86055b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 8 Jan 2019 12:05:39 +0100
Subject: [PATCH] add right panel toggle button to room header when in grid

---
 res/img/feather-icons/toggle-right-panel.svg | 17 +++++++++++++++++
 src/components/structures/GroupGridView.js   |  7 ++++---
 src/components/views/rooms/RoomHeader.js     | 17 +++++++++++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 res/img/feather-icons/toggle-right-panel.svg

diff --git a/res/img/feather-icons/toggle-right-panel.svg b/res/img/feather-icons/toggle-right-panel.svg
new file mode 100644
index 0000000000..4cadf89564
--- /dev/null
+++ b/res/img/feather-icons/toggle-right-panel.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="14px" viewBox="0 0 22 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="multi-room-test-copy-8" transform="translate(-826.000000, -15.000000)" stroke="#929EB4" stroke-width="1.6">
+            <g id="Group-4" transform="translate(341.000000, 7.000000)">
+                <g id="Group-2" transform="translate(486.000000, 8.000000)">
+                    <path d="M20,1 L2.30926389e-14,1" id="Line-10"></path>
+                    <path d="M20,7 L3,7" id="Line-10-Copy"></path>
+                    <path d="M20,13 L6,13" id="Line-10-Copy-2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/structures/GroupGridView.js b/src/components/structures/GroupGridView.js
index 2eb3c357df..b5e511db41 100644
--- a/src/components/structures/GroupGridView.js
+++ b/src/components/structures/GroupGridView.js
@@ -96,14 +96,14 @@ export default class RoomGridView extends React.Component {
         if (activeRoomId) {
             rightPanel = (
                 <div className="mx_GroupGridView_rightPanel">
-                    <div className="mx_GroupGridView_tabs"><RoomHeaderButtons collapsedRhs={this.props.collapsedRhs} /></div>
-                    { !this.props.collapsedRhs ? <RightPanel roomId={activeRoomId} /> : undefined }
+                    <div className="mx_GroupGridView_tabs"><RoomHeaderButtons /></div>
+                    <RightPanel roomId={activeRoomId} />
                 </div>
             );
         }
 
         return (<main className="mx_GroupGridView">
-            <MainSplit panel={rightPanel} disableSizing={this.props.collapsedRhs} >
+            <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs} >
                 <div className="mx_GroupGridView_rooms">
                     { roomStores.map((roomStore, i) => {
                         if (roomStore) {
@@ -118,6 +118,7 @@ export default class RoomGridView extends React.Component {
                                     className={tileClasses}
                                 >
                                     <RoomView
+                                        collapsedRhs={this.props.collapsedRhs}
                                         isGrid={true}
                                         roomViewStore={roomStore}
                                         isActive={isActive}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 940c5e3424..12258154ef 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -24,6 +24,7 @@ import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from "../../../Modal";
 import RateLimitedFunc from '../../../ratelimitedfunc';
+import dis from '../../../dispatcher';
 
 import * as linkify from 'linkifyjs';
 import linkifyElement from 'linkifyjs/element';
@@ -152,6 +153,14 @@ module.exports = React.createClass({
         });
     },
 
+    onToggleRightPanelClick: function(ev) {
+        if (this.props.collapsedRhs) {
+            dis.dispatch({action: "show_right_panel"});
+        } else {
+            dis.dispatch({action: "hide_right_panel"});
+        }
+    },
+
     _hasUnreadPins: function() {
         const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
         if (!currentPinEvent) return false;
@@ -409,6 +418,13 @@ module.exports = React.createClass({
                 </div>;
         }
 
+        let toggleRightPanelButton;
+        if (this.props.isGrid) {
+            toggleRightPanelButton = <AccessibleButton className="mx_RoomHeader_button" onClick={this.onToggleRightPanelClick} title={_t('Toggle right panel')}>
+                    <TintableSvg src="img/feather-icons/toggle-right-panel.svg" width="20" height="20" />
+                </AccessibleButton>;
+        }
+
         return (
             <div className={"mx_RoomHeader light-panel " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
                 <div className="mx_RoomHeader_wrapper">
@@ -420,6 +436,7 @@ module.exports = React.createClass({
                     { cancelButton }
                     { rightRow }
                     { !this.props.isGrid ? <RoomHeaderButtons collapsedRhs={this.props.collapsedRhs} /> : undefined }
+                    { toggleRightPanelButton }
                 </div>
             </div>
         );