Use default AppTile menu bar.

src/components/views/elements/AppTile.js

@@ -274,12 +274,16 @@ export default class AppTile extends React.Component {
 
     _onEditClick(e) {
         console.log("Edit widget ID ", this.props.id);
-        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+        if (this.props.onEditClick) {
-        const src = this._scalarClient.getScalarInterfaceUrlForRoom(
+            this.props.onEditClick();
-            this.props.room.roomId, 'type_' + this.props.type, this.props.id);
+        } else {
-        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+            const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-            src: src,
+            const src = this._scalarClient.getScalarInterfaceUrlForRoom(
-        }, "mx_IntegrationsManager");
+                this.props.room.roomId, 'type_' + this.props.type, this.props.id);
+            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+                src: src,
+            }, "mx_IntegrationsManager");
+        }
     }
 
     _onSnapshotClick(e) {
@@ -298,34 +302,38 @@ export default class AppTile extends React.Component {
      * otherwise revoke access for the widget to load in the user's browser
     */
     _onDeleteClick() {
-        if (this._canUserModify()) {
+        if (this.props.onDeleteClick) {
-            // Show delete confirmation dialog
+            this.props.onDeleteClick();
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
-                title: _t("Delete Widget"),
-                description: _t(
-                    "Deleting a widget removes it for all users in this room." +
-                    " Are you sure you want to delete this widget?"),
-                button: _t("Delete widget"),
-                onFinished: (confirmed) => {
-                    if (!confirmed) {
-                        return;
-                    }
-                    this.setState({deleting: true});
-                    MatrixClientPeg.get().sendStateEvent(
-                        this.props.room.roomId,
-                        'im.vector.modular.widgets',
-                        {}, // empty content
-                        this.props.id,
-                    ).catch((e) => {
-                        console.error('Failed to delete widget', e);
-                        this.setState({deleting: false});
-                    });
-                },
-            });
         } else {
-            console.log("Revoke widget permissions - %s", this.props.id);
+            if (this._canUserModify()) {
-            this._revokeWidgetPermission();
+                // Show delete confirmation dialog
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                    title: _t("Delete Widget"),
+                    description: _t(
+                        "Deleting a widget removes it for all users in this room." +
+                        " Are you sure you want to delete this widget?"),
+                    button: _t("Delete widget"),
+                    onFinished: (confirmed) => {
+                        if (!confirmed) {
+                            return;
+                        }
+                        this.setState({deleting: true});
+                        MatrixClientPeg.get().sendStateEvent(
+                            this.props.room.roomId,
+                            'im.vector.modular.widgets',
+                            {}, // empty content
+                            this.props.id,
+                        ).catch((e) => {
+                            console.error('Failed to delete widget', e);
+                            this.setState({deleting: false});
+                        });
+                    },
+                });
+            } else {
+                console.log("Revoke widget permissions - %s", this.props.id);
+                this._revokeWidgetPermission();
+            }
         }
     }
 
@@ -429,6 +437,22 @@ export default class AppTile extends React.Component {
         return safeWidgetUrl;
     }
 
+    _getTileTitle() {
+        const name = this.formatAppTileName();
+        const titleSpacer = <span>&nbsp;-&nbsp;</span>;
+        let title = '';
+        if (this.state.widgetPageTitle && this.state.widgetPageTitle != this.formatAppTileName()) {
+            title = this.state.widgetPageTitle;
+        }
+
+        return (
+            <span>
+                <b>{ name }</b>
+                <span>{ title ? titleSpacer : '' }{ title }</span>
+            </span>
+        );
+    }
+
     render() {
         let appTileBody;
 
@@ -508,17 +532,14 @@ export default class AppTile extends React.Component {
                 { this.props.showMenubar &&
                 <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
                     <span className="mx_AppTileMenuBarTitle">
-                        <TintableSvgButton
+                        { this.props.showMinimise && <TintableSvgButton
                             src={windowStateIcon}
                             className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
                             title={_t('Minimize apps')}
                             width="10"
                             height="10"
-                        />
+                        /> }
-                        <b>{ this.formatAppTileName() }</b>
+                        { this.props.showTitle && this._getTileTitle() }
-                        { this.state.widgetPageTitle && this.state.widgetPageTitle != this.formatAppTileName() && (
-                            <span>&nbsp;-&nbsp;{ this.state.widgetPageTitle }</span>
-                        ) }
                     </span>
                     <span className="mx_AppTileMenuBarWidgets">
                       { /* Snapshot widget */ }
@@ -575,10 +596,20 @@ AppTile.propTypes = {
     showMenubar: React.PropTypes.bool,
     // Should the AppTile render itself
     show: React.PropTypes.bool,
+    // Optional onEditClickHandler (overrides default behaviour)
+    onEditClick: React.PropTypes.func,
+    // Optional onDeleteClickHandler (overrides default behaviour)
+    onDeleteClick: React.PropTypes.func,
+    // Optionally hide the tile title
+    showTitle: React.PropTypes.bool,
+    // Optionally hide the tile minimise icon
+    showMinimise: React.PropTypes.bool,
 };
 
 AppTile.defaultProps = {
     url: "",
     waitForIframeLoad: true,
     showMenubar: true,
+    showTitle: true,
+    showMinimise: true,
 };

src/components/views/rooms/Stickerpack.js

@@ -25,6 +25,8 @@ import sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import dis from '../../../dispatcher';
+import TintableSvgButton from '../elements/TintableSvgButton';
+
 
 export default class Stickerpack extends React.Component {
     constructor(props) {
@@ -103,6 +105,7 @@ export default class Stickerpack extends React.Component {
             stickerpackWidget.content.name = stickerpackWidget.name || "Stickerpack";
             console.warn('Stickerpack widget', stickerpackWidget);
             this.widgetId = stickerpackWidget.id;
+
             stickersContent = (
                 <div
                     style={{
@@ -115,18 +118,10 @@ export default class Stickerpack extends React.Component {
                         className='mx_Stickers_content'
                         style={{
                             border: 'none',
-                            height: this.popoverHeight - 30,
+                            height: this.popoverHeight,
                             width: this.popoverWidth,
                         }}
                     >
-                        <div
-                            style={{
-                                'float': 'right',
-                                'fontSize': 'smaller',
-                                'cursor': 'pointer',
-                            }}
-                            onClick={this._removeStickerpackWidgets}
-                        >X</div>
                         <AppTile
                             id={stickerpackWidget.id}
                             url={stickerpackWidget.content.url}
@@ -138,21 +133,13 @@ export default class Stickerpack extends React.Component {
                             creatorUserId={MatrixClientPeg.get().credentials.userId}
                             waitForIframeLoad={true}
                             show={true}
-                            showMenubar={false}
+                            showMenubar={true}
+                            onEditClick={this._launchManageIntegrations}
+                            onDeleteClick={this._removeStickerpackWidgets}
+                            showTitle={false}
+                            showMinimise={false}
                         />
                     </div>
-                    <div style={{
-                        height: '20px',
-                        position: 'absolute',
-                        bottom: '5px',
-                        right: '19px',
-                        width: '263px',
-                        textAlign: 'right',
-                        padding: '5px',
-                        borderTop: '1px solid #999',
-                    }}>
-                        <span className='mx_Stickers_addLink' onClick={this._launchManageIntegrations} > { _t("Manage sticker packs") } </span>
-                    </div>
                 </div>
             );
         } else {