diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index 582cc01a57..c96ce9f775 100644 --- a/src/components/views/elements/AppTile.js +++ b/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"); - const src = this._scalarClient.getScalarInterfaceUrlForRoom( - this.props.room.roomId, 'type_' + this.props.type, this.props.id); - Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, { - src: src, - }, "mx_IntegrationsManager"); + 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); + 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()) { - // 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}); - }); - }, - }); + if (this.props.onDeleteClick) { + this.props.onDeleteClick(); } else { - console.log("Revoke widget permissions - %s", this.props.id); - this._revokeWidgetPermission(); + if (this._canUserModify()) { + // 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> - </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.state.widgetPageTitle && this.state.widgetPageTitle != this.formatAppTileName() && ( - <span> - { this.state.widgetPageTitle }</span> - ) } + /> } + { this.props.showTitle && this._getTileTitle() } </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, }; diff --git a/src/components/views/rooms/Stickerpack.js b/src/components/views/rooms/Stickerpack.js index 3722818bf6..6a61618b2c 100644 --- a/src/components/views/rooms/Stickerpack.js +++ b/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 {