Merge pull request #1313 from matrix-org/luke/feature-app-tile-ux

Add behaviour to toggle app draw on app tile header click

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';
@@ -187,6 +188,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;
 
@@ -223,7 +239,7 @@ export default React.createClass({
                         />
                     </div>
                 );
-            } else {
+            } else if (this.props.show) {
                 appTileBody = (
                     <div className="mx_AppTileBody">
                         <iframe
@@ -258,7 +274,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>

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
@@ -184,18 +185,26 @@ module.exports = React.createClass({
                     fullWidth={arr.length<2 ? true : false}
                     room={this.props.room}
                     userId={this.props.userId}
+                    show={this.props.showApps}
                     creatorUserId={app.creatorUserId}
                 />);
             });
 
-        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">

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 (