Use default AppTile menu bar.

src/components/views/elements/AppTile.js

@@ -274,6 +274,9 @@ export default class AppTile extends React.Component {
 
     _onEditClick(e) {
         console.log("Edit widget ID ", this.props.id);
+        if (this.props.onEditClick) {
+            this.props.onEditClick();
+        } else {
             const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
             const src = this._scalarClient.getScalarInterfaceUrlForRoom(
                 this.props.room.roomId, 'type_' + this.props.type, this.props.id);
@@ -281,6 +284,7 @@ export default class AppTile extends React.Component {
                 src: src,
             }, "mx_IntegrationsManager");
         }
+    }
 
     _onSnapshotClick(e) {
         console.warn("Requesting widget snapshot");
@@ -298,6 +302,9 @@ export default class AppTile extends React.Component {
      * otherwise revoke access for the widget to load in the user's browser
     */
     _onDeleteClick() {
+        if (this.props.onDeleteClick) {
+            this.props.onDeleteClick();
+        } else {
             if (this._canUserModify()) {
                 // Show delete confirmation dialog
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@@ -328,6 +335,7 @@ export default class AppTile extends React.Component {
                 this._revokeWidgetPermission();
             }
         }
+    }
 
     /**
      * Called when widget iframe has finished loading
@@ -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 {