- ![{_t('Warning!')}]({require("../../../../res/img/warning.svg")})
+ ![{_t('Warning!')}]({require("../../../../res/img/feather-icons/warning-triangle.svg")})
+
{ _t('Do you want to load widget from URL:') } { this.state.curlBase }
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 85d28baee70..f7c2bd1aca7 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -24,9 +24,9 @@ import PropTypes from 'prop-types';
import MatrixClientPeg from '../../../MatrixClientPeg';
import ScalarAuthClient from '../../../ScalarAuthClient';
import WidgetMessaging from '../../../WidgetMessaging';
-import TintableSvgButton from './TintableSvgButton';
+import AccessibleButton from './AccessibleButton';
import Modal from '../../../Modal';
-import { _t, _td } from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
import sdk from '../../../index';
import AppPermission from './AppPermission';
import AppWarning from './AppWarning';
@@ -34,6 +34,7 @@ import MessageSpinner from './MessageSpinner';
import WidgetUtils from '../../../utils/WidgetUtils';
import dis from '../../../dispatcher';
import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
+import classNames from 'classnames';
const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
const ENABLE_REACT_PERF = false;
@@ -51,6 +52,7 @@ export default class AppTile extends React.Component {
this._onLoaded = this._onLoaded.bind(this);
this._onEditClick = this._onEditClick.bind(this);
this._onDeleteClick = this._onDeleteClick.bind(this);
+ this._onCancelClick = this._onCancelClick.bind(this);
this._onSnapshotClick = this._onSnapshotClick.bind(this);
this.onClickMenuBar = this.onClickMenuBar.bind(this);
this._onMinimiseClick = this._onMinimiseClick.bind(this);
@@ -267,55 +269,59 @@ export default class AppTile extends React.Component {
_onDeleteClick() {
if (this.props.onDeleteClick) {
this.props.onDeleteClick();
- } else {
- if (this._canUserModify()) {
- // Show delete confirmation dialog
- const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
- Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
- title: _t("Delete Widget"),
- description: _t(
- "Deleting a widget removes it for all users in this room." +
- " Are you sure you want to delete this widget?"),
- button: _t("Delete widget"),
- onFinished: (confirmed) => {
- if (!confirmed) {
- return;
- }
- this.setState({deleting: true});
-
- // HACK: This is a really dirty way to ensure that Jitsi cleans up
- // its hold on the webcam. Without this, the widget holds a media
- // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
- if (this.refs.appFrame) {
- // In practice we could just do `+= ''` to trick the browser
- // into thinking the URL changed, however I can foresee this
- // being optimized out by a browser. Instead, we'll just point
- // the iframe at a page that is reasonably safe to use in the
- // event the iframe doesn't wink away.
- // This is relative to where the Riot instance is located.
- this.refs.appFrame.src = 'about:blank';
- }
-
- WidgetUtils.setRoomWidget(
- this.props.room.roomId,
- this.props.id,
- ).catch((e) => {
- console.error('Failed to delete widget', e);
- const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-
- Modal.createTrackedDialog('Failed to remove widget', '', ErrorDialog, {
- title: _t('Failed to remove widget'),
- description: _t('An error ocurred whilst trying to remove the widget from the room'),
- });
- }).finally(() => {
- this.setState({deleting: false});
+ } else if (this._canUserModify()) {
+ // Show delete confirmation dialog
+ const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+ Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+ title: _t("Delete Widget"),
+ description: _t(
+ "Deleting a widget removes it for all users in this room." +
+ " Are you sure you want to delete this widget?"),
+ button: _t("Delete widget"),
+ onFinished: (confirmed) => {
+ if (!confirmed) {
+ return;
+ }
+ this.setState({deleting: true});
+
+ // HACK: This is a really dirty way to ensure that Jitsi cleans up
+ // its hold on the webcam. Without this, the widget holds a media
+ // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
+ if (this.refs.appFrame) {
+ // In practice we could just do `+= ''` to trick the browser
+ // into thinking the URL changed, however I can foresee this
+ // being optimized out by a browser. Instead, we'll just point
+ // the iframe at a page that is reasonably safe to use in the
+ // event the iframe doesn't wink away.
+ // This is relative to where the Riot instance is located.
+ this.refs.appFrame.src = 'about:blank';
+ }
+
+ WidgetUtils.setRoomWidget(
+ this.props.room.roomId,
+ this.props.id,
+ ).catch((e) => {
+ console.error('Failed to delete widget', e);
+ const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+ Modal.createTrackedDialog('Failed to remove widget', '', ErrorDialog, {
+ title: _t('Failed to remove widget'),
+ description: _t('An error ocurred whilst trying to remove the widget from the room'),
});
- },
- });
- } else {
- console.log("Revoke widget permissions - %s", this.props.id);
- this._revokeWidgetPermission();
- }
+ }).finally(() => {
+ this.setState({deleting: false});
+ });
+ },
+ });
+ }
+ }
+
+ _onCancelClick() {
+ if (this.props.onDeleteClick) {
+ this.props.onDeleteClick();
+ } else {
+ console.log("Revoke widget permissions - %s", this.props.id);
+ this._revokeWidgetPermission();
}
}
@@ -394,15 +400,6 @@ export default class AppTile extends React.Component {
});
}
- // Widget labels to render, depending upon user permissions
- // These strings are translated at the point that they are inserted in to the DOM, in the render method
- _deleteWidgetLabel() {
- if (this._canUserModify()) {
- return _td('Delete widget');
- }
- return _td('Revoke widget access');
- }
-
/* TODO -- Store permission in account data so that it is persisted across multiple devices */
_grantWidgetPermission() {
console.warn('Granting permission to load widget - ', this.state.widgetUrl);
@@ -580,23 +577,14 @@ export default class AppTile extends React.Component {
}
// editing is done in scalar
- const showEditButton = Boolean(this._scalarClient && this._canUserModify());
- const deleteWidgetLabel = this._deleteWidgetLabel();
- let deleteIcon = require("../../../../res/img/cancel_green.svg");
- let deleteClasses = 'mx_AppTileMenuBarWidget';
- if (this._canUserModify()) {
- deleteIcon = require("../../../../res/img/icon-delete-pink.svg");
- deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
- }
-
+ const canUserModify = this._canUserModify();
+ const showEditButton = Boolean(this._scalarClient && canUserModify);
+ const showDeleteButton = canUserModify;
+ const showCancelButton = !showDeleteButton;
// Picture snapshot - only show button when apps are maximised.
const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
- const showPictureSnapshotIcon = require("../../../../res/img/camera_green.svg");
- const popoutWidgetIcon = require("../../../../res/img/button-new-window.svg");
- const reloadWidgetIcon = require("../../../../res/img/button-refresh.svg");
- const minimizeIcon = require("../../../../res/img/minimize.svg");
- const maximizeIcon = require("../../../../res/img/maximize.svg");
- const windowStateIcon = (this.props.show ? minimizeIcon : maximizeIcon);
+ const showMinimiseButton = this.props.showMinimise && this.props.show;
+ const showMaximiseButton = this.props.showMinimise && !this.props.show;
let appTileClass;
if (this.props.miniMode) {
@@ -607,71 +595,67 @@ export default class AppTile extends React.Component {
appTileClass = 'mx_AppTile';
}
+ const menuBarClasses = classNames({
+ mx_AppTileMenuBar: true,
+ mx_AppTileMenuBar_expanded: this.props.show,
+ });
+
return (
{ this.props.showMenubar &&
-
+
- { this.props.showMinimise &&
}