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:
commit
81488b27e2
4 changed files with 46 additions and 11 deletions
12
res/img/button-new-window.svg
Normal file
12
res/img/button-new-window.svg
Normal 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 |
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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.",
|
||||
|
|
Loading…
Reference in a new issue