mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-05 05:38:41 +03:00
Use default AppTile menu bar.
This commit is contained in:
parent
f3943bef51
commit
7b75dbbd15
2 changed files with 79 additions and 61 deletions
|
@ -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> - </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> - { 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,
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue