Use default AppTile menu bar.

This commit is contained in:
Richard Lewis 2018-02-07 14:44:01 +00:00
parent f3943bef51
commit 7b75dbbd15
2 changed files with 79 additions and 61 deletions

View file

@ -274,6 +274,9 @@ export default class AppTile extends React.Component {
_onEditClick(e) { _onEditClick(e) {
console.log("Edit widget ID ", this.props.id); console.log("Edit widget ID ", this.props.id);
if (this.props.onEditClick) {
this.props.onEditClick();
} else {
const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager"); const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
const src = this._scalarClient.getScalarInterfaceUrlForRoom( const src = this._scalarClient.getScalarInterfaceUrlForRoom(
this.props.room.roomId, 'type_' + this.props.type, this.props.id); this.props.room.roomId, 'type_' + this.props.type, this.props.id);
@ -281,6 +284,7 @@ export default class AppTile extends React.Component {
src: src, src: src,
}, "mx_IntegrationsManager"); }, "mx_IntegrationsManager");
} }
}
_onSnapshotClick(e) { _onSnapshotClick(e) {
console.warn("Requesting widget snapshot"); 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 * otherwise revoke access for the widget to load in the user's browser
*/ */
_onDeleteClick() { _onDeleteClick() {
if (this.props.onDeleteClick) {
this.props.onDeleteClick();
} else {
if (this._canUserModify()) { if (this._canUserModify()) {
// Show delete confirmation dialog // Show delete confirmation dialog
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@ -328,6 +335,7 @@ export default class AppTile extends React.Component {
this._revokeWidgetPermission(); this._revokeWidgetPermission();
} }
} }
}
/** /**
* Called when widget iframe has finished loading * Called when widget iframe has finished loading
@ -429,6 +437,22 @@ export default class AppTile extends React.Component {
return safeWidgetUrl; 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() { render() {
let appTileBody; let appTileBody;
@ -508,17 +532,14 @@ export default class AppTile extends React.Component {
{ this.props.showMenubar && { this.props.showMenubar &&
<div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}> <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
<span className="mx_AppTileMenuBarTitle"> <span className="mx_AppTileMenuBarTitle">
<TintableSvgButton { this.props.showMinimise && <TintableSvgButton
src={windowStateIcon} src={windowStateIcon}
className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding" className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
title={_t('Minimize apps')} title={_t('Minimize apps')}
width="10" width="10"
height="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>
<span className="mx_AppTileMenuBarWidgets"> <span className="mx_AppTileMenuBarWidgets">
{ /* Snapshot widget */ } { /* Snapshot widget */ }
@ -575,10 +596,20 @@ AppTile.propTypes = {
showMenubar: React.PropTypes.bool, showMenubar: React.PropTypes.bool,
// Should the AppTile render itself // Should the AppTile render itself
show: React.PropTypes.bool, 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 = { AppTile.defaultProps = {
url: "", url: "",
waitForIframeLoad: true, waitForIframeLoad: true,
showMenubar: true, showMenubar: true,
showTitle: true,
showMinimise: true,
}; };

View file

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