Merge pull request #1851 from matrix-org/rxl881/popoutWidget

Add a button to 'pop out' widgets in to their own tab.
This commit is contained in:
David Baker 2018-04-25 15:36:07 +01:00 committed by GitHub
commit 81488b27e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 11 deletions

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="612px" viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
<path fill="#76CFA6" d="M612,149.5v135.983c0,22.802-27.582,33.979-43.531,18.032l-37.939-37.941L271.787,524.317
c-9.959,9.958-26.104,9.958-36.062,0l-24.041-24.042c-9.959-9.958-9.959-26.104,0-36.062l258.746-258.746l-37.935-37.937
C416.48,151.519,427.822,124,450.525,124H586.5C600.583,124,612,135.417,612,149.5z M432.469,411.719l-17,17
c-4.782,4.782-7.469,11.269-7.469,18.031V600H68V260h280.5c6.763,0,13.248-2.687,18.03-7.468l17-17
C399.595,219.467,388.218,192,365.5,192H51c-28.167,0-51,22.833-51,51v374c0,28.167,22.833,51,51,51h374c28.167,0,51-22.833,51-51
V429.749C476,407.031,448.532,395.654,432.469,411.719z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -54,6 +54,7 @@ export default class AppTile extends React.Component {
this._onInitialLoad = this._onInitialLoad.bind(this);
this._grantWidgetPermission = this._grantWidgetPermission.bind(this);
this._revokeWidgetPermission = this._revokeWidgetPermission.bind(this);
this._onPopoutWidgetClick = this._onPopoutWidgetClick.bind(this);
}
/**
@ -499,6 +500,13 @@ export default class AppTile extends React.Component {
}
}
_onPopoutWidgetClick(e) {
// Using Object.assign workaround as the following opens in a new window instead of a new tab.
// window.open(this._getSafeUrl(), '_blank', 'noopener=yes,noreferrer=yes');
Object.assign(document.createElement('a'),
{ target: '_blank', href: this._getSafeUrl(), rel: 'noopener noreferrer'}).click();
}
render() {
let appTileBody;
@ -581,6 +589,7 @@ export default class AppTile extends React.Component {
// Picture snapshot - only show button when apps are maximised.
const showPictureSnapshotButton = this._hasCapability('screenshot') && this.props.show;
const showPictureSnapshotIcon = 'img/camera_green.svg';
const popoutWidgetIcon = 'img/button-new-window.svg';
const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
return (
@ -599,15 +608,25 @@ export default class AppTile extends React.Component {
{ this.props.showTitle && this._getTileTitle() }
</span>
<span className="mx_AppTileMenuBarWidgets">
{ /* Snapshot widget */ }
{ showPictureSnapshotButton && <TintableSvgButton
src={showPictureSnapshotIcon}
className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
title={_t('Picture')}
onClick={this._onSnapshotClick}
width="10"
height="10"
/> }
{ /* Popout widget */ }
<TintableSvgButton
src={popoutWidgetIcon}
className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
title={_t('Popout widget')}
onClick={this._onPopoutWidgetClick}
width="10"
height="10"
/>
{ /* Snapshot widget */ }
{ showPictureSnapshotButton && <TintableSvgButton
src={showPictureSnapshotIcon}
className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
title={_t('Picture')}
onClick={this._onSnapshotClick}
width="10"
height="10"
/> }
{ /* Edit widget */ }
{ showEditButton && <TintableSvgButton

View File

@ -17,6 +17,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import TintableSvg from './TintableSvg';
import AccessibleButton from './AccessibleButton';
export default class TintableSvgButton extends React.Component {
@ -39,9 +40,11 @@ export default class TintableSvgButton extends React.Component {
width={this.props.width}
height={this.props.height}
></TintableSvg>
<span
<AccessibleButton
onClick={this.props.onClick}
element='span'
title={this.props.title}
onClick={this.props.onClick} />
/>
</span>
);
}

View File

@ -100,6 +100,7 @@
"You need to be logged in.": "You need to be logged in.",
"You need to be able to invite users to do that.": "You need to be able to invite users to do that.",
"Unable to create widget.": "Unable to create widget.",
"Popout widget": "Popout widget",
"Missing roomId.": "Missing roomId.",
"Failed to send request.": "Failed to send request.",
"This room is not recognised.": "This room is not recognised.",