Merge branches 'develop' and 't3chguy/m.relates_to' of github.com:matrix-org/matrix-react-sdk into t3chguy/m.relates_to

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 */ }
-                      { showPictureSnapshotButton && <TintableSvgButton
-                          src={showPictureSnapshotIcon}
-                          className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
-                          title={_t('Picture')}
-                          onClick={this._onSnapshotClick}
-                          width="10"
-                          height="10"
-                      /> }
+                        { /* Popout widget */ }
+                        { this.props.showPopout && <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
@@ -670,6 +689,8 @@ AppTile.propTypes = {
     handleMinimisePointerEvents: PropTypes.bool,
     // Optionally hide the delete icon
     showDelete: PropTypes.bool,
+    // Optionally hide the popout widget icon
+    showPopout: PropTypes.bool,
     // Widget apabilities to allow by default (without user confirmation)
     // NOTE -- Use with caution. This is intended to aid better integration / UX
     // basic widget capabilities, e.g. injecting sticker message events.
@@ -686,6 +707,7 @@ AppTile.defaultProps = {
     showTitle: true,
     showMinimise: true,
     showDelete: true,
+    showPopout: true,
     handleMinimisePointerEvents: false,
     whitelistCapabilities: [],
 };

src/components/views/elements/DialogButtons.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Aidan Gauland
+Copyright 2018 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-"use strict";
-
 import React from "react";
 import PropTypes from "prop-types";
 import { _t } from '../../../languageHandler';
@@ -33,10 +32,26 @@ module.exports = React.createClass({
         // onClick handler for the primary button.
         onPrimaryButtonClick: PropTypes.func.isRequired,
 
+        // should there be a cancel button? default: true
+        hasCancel: PropTypes.bool,
+
         // onClick handler for the cancel button.
-        onCancel: PropTypes.func.isRequired,
+        onCancel: PropTypes.func,
 
         focus: PropTypes.bool,
+
+        disabled: PropTypes.bool,
+    },
+
+    getDefaultProps: function() {
+        return {
+            hasCancel: true,
+            disabled: false,
+        };
+    },
+
+    _onCancelClick: function() {
+        this.props.onCancel();
     },
 
     render: function() {
@@ -44,18 +59,23 @@ module.exports = React.createClass({
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;
         }
+        let cancelButton;
+        if (this.props.hasCancel) {
+            cancelButton = <button onClick={this._onCancelClick} disabled={this.props.disabled}>
+                { _t("Cancel") }
+            </button>;
+        }
         return (
             <div className="mx_Dialog_buttons">
                 <button className={primaryButtonClassName}
                     onClick={this.props.onPrimaryButtonClick}
                     autoFocus={this.props.focus}
+                    disabled={this.props.disabled}
                 >
                     { this.props.primaryButton }
                 </button>
                 { this.props.children }
-                <button onClick={this.props.onCancel}>
-                    { _t("Cancel") }
-                </button>
+                { cancelButton }
             </div>
         );
     },

src/components/views/elements/TagTile.js

@@ -24,6 +24,7 @@ import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
 import ContextualMenu from '../../structures/ContextualMenu';
 
 import FlairStore from '../../../stores/FlairStore';
+import GroupStore from '../../../stores/GroupStore';
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -57,6 +58,8 @@ export default React.createClass({
         if (this.props.tag[0] === '+') {
             FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);
             this._onFlairStoreUpdated();
+            // New rooms or members may have been added to the group, fetch async
+            this._refreshGroup(this.props.tag);
         }
     },
 
@@ -80,6 +83,11 @@ export default React.createClass({
         });
     },
 
+    _refreshGroup(groupId) {
+        GroupStore.refreshGroupRooms(groupId);
+        GroupStore.refreshGroupMembers(groupId);
+    },
+
     onClick: function(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -89,6 +97,10 @@ export default React.createClass({
             ctrlOrCmdKey: isOnlyCtrlOrCmdIgnoreShiftKeyEvent(e),
             shiftKey: e.shiftKey,
         });
+        if (this.props.tag[0] === '+') {
+            // New rooms or members may have been added to the group, fetch async
+            this._refreshGroup(this.props.tag);
+        }
     },
 
     onContextButtonClick: function(e) {

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