From 57505c3a6190986264e1b46d2bfac11017c41aeb Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 16 Aug 2017 18:19:12 +0100
Subject: [PATCH] Add behaviour to toggle app draw on app tile header click

---
 src/components/views/elements/AppTile.js | 20 +++++++++++++++++--
 src/components/views/rooms/AppsDrawer.js | 25 ++++++++++++++++--------
 src/components/views/rooms/AuxPanel.js   |  6 ++++--
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index a78b802ad7..1b8689847e 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -28,6 +28,7 @@ import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
 import MessageSpinner from './MessageSpinner';
 import WidgetUtils from '../../../WidgetUtils';
+import dis from '../../../dispatcher';
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const betaHelpMsg = 'This feature is currently experimental and is intended for beta testing only';
@@ -182,6 +183,21 @@ export default React.createClass({
         return appTileName;
     },
 
+    onClickMenuBar: function(ev) {
+        ev.preventDefault();
+
+        // Ignore clicks on menu bar children
+        if (ev.target !== this.refs.menu_bar) {
+            return;
+        }
+
+        // Toggle the view state of the apps drawer
+        dis.dispatch({
+            action: 'appsDrawer',
+            show: !this.props.show,
+        });
+    },
+
     render: function() {
         let appTileBody;
 
@@ -218,7 +234,7 @@ export default React.createClass({
                         />
                     </div>
                 );
-            } else {
+            } else if (this.props.show) {
                 appTileBody = (
                     <div className="mx_AppTileBody">
                         <iframe
@@ -253,7 +269,7 @@ export default React.createClass({
 
         return (
             <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
-                <div className="mx_AppTileMenuBar">
+                <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
                     {this.formatAppTileName()}
                     <span className="mx_AppTileMenuBarWidgets">
                         <span className="mx_Beta" alt={betaHelpMsg} title={betaHelpMsg}>&#946;</span>
diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js
index 4bc98abb6f..07583dcc85 100644
--- a/src/components/views/rooms/AppsDrawer.js
+++ b/src/components/views/rooms/AppsDrawer.js
@@ -54,6 +54,7 @@ module.exports = React.createClass({
             this.scalarClient.connect().done(() => {
                 this.forceUpdate();
                 if (this.state.apps && this.state.apps.length < 1) {
+                    // XXX: This should not be called here, we should do something much nicer
                     this.onClickAddWidget();
                 }
             // TODO -- Handle Scalar errors
@@ -183,17 +184,25 @@ module.exports = React.createClass({
                     fullWidth={arr.length<2 ? true : false}
                     room={this.props.room}
                     userId={this.props.userId}
+                    show={this.props.showApps}
                 />);
             });
 
-        const addWidget = this.state.apps && this.state.apps.length < 2 && this._canUserModify() &&
-            (<div onClick={this.onClickAddWidget}
-                            role="button"
-                            tabIndex="0"
-                            className="mx_AddWidget_button"
-                            title={_t('Add a widget')}>
-                            [+] {_t('Add a widget')}
-                        </div>);
+        let addWidget;
+        if (this.props.showApps &&
+            this.state.apps &&
+            this.state.apps.length < 2 &&
+            this._canUserModify()
+        ) {
+            addWidget = <div
+                onClick={this.onClickAddWidget}
+                role="button"
+                tabIndex="0"
+                className="mx_AddWidget_button"
+                title={_t('Add a widget')}>
+                [+] {_t('Add a widget')}
+            </div>;
+        }
 
         return (
             <div className="mx_AppsDrawer">
diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js
index a50743a25d..65dedad61d 100644
--- a/src/components/views/rooms/AuxPanel.js
+++ b/src/components/views/rooms/AuxPanel.js
@@ -129,11 +129,13 @@ module.exports = React.createClass({
         );
 
         let appsDrawer = null;
-        if(UserSettingsStore.isFeatureEnabled('matrix_apps') && this.props.showApps) {
+        if(UserSettingsStore.isFeatureEnabled('matrix_apps')) {
             appsDrawer = <AppsDrawer ref="appsDrawer"
                 room={this.props.room}
                 userId={this.props.userId}
-                maxHeight={this.props.maxHeight}/>;
+                maxHeight={this.props.maxHeight}
+                showApps={this.props.showApps}
+            />;
         }
 
         return (