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

Add a button to 'pop out' widgets in to their own tab.

res/img/button-new-window.svg

@@ -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>

src/components/views/elements/AppTile.js

@@ -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 */ }
+                        { /* Popout widget */ }
-                      { showPictureSnapshotButton && <TintableSvgButton
+                        <TintableSvgButton
-                          src={showPictureSnapshotIcon}
+                            src={popoutWidgetIcon}
-                          className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
-                          title={_t('Picture')}
+                            title={_t('Popout widget')}
-                          onClick={this._onSnapshotClick}
+                            onClick={this._onPopoutWidgetClick}
-                          width="10"
+                            width="10"
-                          height="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

src/components/views/elements/TintableSvgButton.js

@@ -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>
         );
     }

src/i18n/strings/en_EN.json

@@ -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.",