{ this.props.children }
-
+
);
},
});
diff --git a/src/components/views/dialogs/KeyShareDialog.js b/src/components/views/dialogs/KeyShareDialog.js
index 01e3479bb1..ba8918e79c 100644
--- a/src/components/views/dialogs/KeyShareDialog.js
+++ b/src/components/views/dialogs/KeyShareDialog.js
@@ -99,7 +99,7 @@ export default createReactClass({
this.props.onFinished(true);
}
},
- });
+ }, null, /* priority = */ false, /* static = */ true);
},
_onShareClicked: function() {
diff --git a/src/components/views/dialogs/SetMxIdDialog.js b/src/components/views/dialogs/SetMxIdDialog.js
index 0294c1c700..b3c6cc9378 100644
--- a/src/components/views/dialogs/SetMxIdDialog.js
+++ b/src/components/views/dialogs/SetMxIdDialog.js
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg';
import classnames from 'classnames';
-import { KeyCode } from '../../../Keyboard';
+import { Key } from '../../../Keyboard';
import { _t } from '../../../languageHandler';
import { SAFE_LOCALPART_REGEX } from '../../../Registration';
@@ -101,7 +101,7 @@ export default createReactClass({
},
onKeyUp: function(ev) {
- if (ev.keyCode === KeyCode.ENTER) {
+ if (ev.key === Key.ENTER) {
this.onSubmit();
}
},
diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js
index 1ccb7d0796..d708a44ab2 100644
--- a/src/components/views/elements/AccessibleButton.js
+++ b/src/components/views/elements/AccessibleButton.js
@@ -17,7 +17,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { KeyCode } from '../../../Keyboard';
+import {Key} from '../../../Keyboard';
/**
* AccessibleButton is a generic wrapper for any element that should be treated
@@ -40,23 +40,23 @@ export default function AccessibleButton(props) {
// Browsers handle space and enter keypresses differently and we are only adjusting to the
// inconsistencies here
restProps.onKeyDown = function(e) {
- if (e.keyCode === KeyCode.ENTER) {
+ if (e.key === Key.ENTER) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
- if (e.keyCode === KeyCode.SPACE) {
+ if (e.key === Key.SPACE) {
e.stopPropagation();
e.preventDefault();
}
};
restProps.onKeyUp = function(e) {
- if (e.keyCode === KeyCode.SPACE) {
+ if (e.key === Key.SPACE) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
- if (e.keyCode === KeyCode.ENTER) {
+ if (e.key === Key.ENTER) {
e.stopPropagation();
e.preventDefault();
}
diff --git a/src/components/views/elements/DeviceVerifyButtons.js b/src/components/views/elements/DeviceVerifyButtons.js
index 15678b7d7a..bb08f8b234 100644
--- a/src/components/views/elements/DeviceVerifyButtons.js
+++ b/src/components/views/elements/DeviceVerifyButtons.js
@@ -59,7 +59,7 @@ export default createReactClass({
Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
userId: this.props.userId,
device: this.state.device,
- });
+ }, null, /* priority = */ false, /* static = */ true);
},
onUnverifyClick: function() {
diff --git a/src/components/views/elements/Dropdown.js b/src/components/views/elements/Dropdown.js
index 4c5e14b3ba..03ab8c5c68 100644
--- a/src/components/views/elements/Dropdown.js
+++ b/src/components/views/elements/Dropdown.js
@@ -1,6 +1,7 @@
/*
Copyright 2017 Vector Creations Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,11 +16,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
+import React, {createRef} from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import AccessibleButton from './AccessibleButton';
import { _t } from '../../../languageHandler';
+import {Key} from "../../../Keyboard";
class MenuOption extends React.Component {
constructor(props) {
@@ -48,9 +50,14 @@ class MenuOption extends React.Component {
mx_Dropdown_option_highlight: this.props.highlighted,
});
- return
{ child }
);
});
if (options.length === 0) {
- return [
diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js
index d6baa30c8e..545d1fd7ed 100644
--- a/src/components/views/rooms/E2EIcon.js
+++ b/src/components/views/rooms/E2EIcon.js
@@ -17,24 +17,62 @@ limitations under the License.
import classNames from 'classnames';
import { _t } from '../../../languageHandler';
import AccessibleButton from '../elements/AccessibleButton';
+import SettingsStore from '../../../settings/SettingsStore';
export default function(props) {
+ const { isUser } = props;
+ const isNormal = props.status === "normal";
const isWarning = props.status === "warning";
const isVerified = props.status === "verified";
const e2eIconClasses = classNames({
mx_E2EIcon: true,
mx_E2EIcon_warning: isWarning,
+ mx_E2EIcon_normal: isNormal,
mx_E2EIcon_verified: isVerified,
}, props.className);
let e2eTitle;
- if (isWarning) {
- e2eTitle = props.isUser ?
- _t("Some devices for this user are not trusted") :
- _t("Some devices in this encrypted room are not trusted");
- } else if (isVerified) {
- e2eTitle = props.isUser ?
- _t("All devices for this user are trusted") :
- _t("All devices in this encrypted room are trusted");
+
+ const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing");
+ if (crossSigning && isUser) {
+ if (isWarning) {
+ e2eTitle = _t(
+ "This user has not verified all of their devices.",
+ );
+ } else if (isNormal) {
+ e2eTitle = _t(
+ "You have not verified this user. " +
+ "This user has verified all of their devices.",
+ );
+ } else if (isVerified) {
+ e2eTitle = _t(
+ "You have verified this user. " +
+ "This user has verified all of their devices.",
+ );
+ }
+ } else if (crossSigning && !isUser) {
+ if (isWarning) {
+ e2eTitle = _t(
+ "Some users in this encrypted room are not verified by you or " +
+ "they have not verified their own devices.",
+ );
+ } else if (isVerified) {
+ e2eTitle = _t(
+ "All users in this encrypted room are verified by you and " +
+ "they have verified their own devices.",
+ );
+ }
+ } else if (!crossSigning && isUser) {
+ if (isWarning) {
+ e2eTitle = _t("Some devices for this user are not trusted");
+ } else if (isVerified) {
+ e2eTitle = _t("All devices for this user are trusted");
+ }
+ } else if (!crossSigning && !isUser) {
+ if (isWarning) {
+ e2eTitle = _t("Some devices in this encrypted room are not trusted");
+ } else if (isVerified) {
+ e2eTitle = _t("All devices in this encrypted room are trusted");
+ }
}
let style = null;
diff --git a/src/components/views/rooms/ForwardMessage.js b/src/components/views/rooms/ForwardMessage.js
index 4a6c560d2c..ac803bb23d 100644
--- a/src/components/views/rooms/ForwardMessage.js
+++ b/src/components/views/rooms/ForwardMessage.js
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher';
-import { KeyCode } from '../../../Keyboard';
+import {Key} from '../../../Keyboard';
module.exports = createReactClass({
@@ -52,8 +52,8 @@ module.exports = createReactClass({
},
_onKeyDown: function(ev) {
- switch (ev.keyCode) {
- case KeyCode.ESCAPE:
+ switch (ev.key) {
+ case Key.ESCAPE:
this.props.onCancelClick();
break;
}
diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index 2e3a3915d0..ee63cd1bb7 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -1,5 +1,6 @@
/*
Copyright 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -19,6 +20,7 @@ import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import { linkifyElement } from '../../../HtmlUtils';
import SettingsStore from "../../../settings/SettingsStore";
+import { _t } from "../../../languageHandler";
const sdk = require('../../../index');
const MatrixClientPeg = require('../../../MatrixClientPeg');
@@ -125,6 +127,7 @@ module.exports = createReactClass({
;
}
+ const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return (
{ this.props.children }
;
@@ -66,6 +73,7 @@ MenuOption.propTypes = {
dropdownKey: PropTypes.string,
onClick: PropTypes.func.isRequired,
onMouseEnter: PropTypes.func.isRequired,
+ inputRef: PropTypes.any,
};
/*
@@ -86,8 +94,6 @@ export default class Dropdown extends React.Component {
this._onRootClick = this._onRootClick.bind(this);
this._onDocumentClick = this._onDocumentClick.bind(this);
this._onMenuOptionClick = this._onMenuOptionClick.bind(this);
- this._onInputKeyPress = this._onInputKeyPress.bind(this);
- this._onInputKeyUp = this._onInputKeyUp.bind(this);
this._onInputChange = this._onInputChange.bind(this);
this._collectRoot = this._collectRoot.bind(this);
this._collectInputTextBox = this._collectInputTextBox.bind(this);
@@ -111,6 +117,7 @@ export default class Dropdown extends React.Component {
}
componentWillMount() {
+ this._button = createRef();
// Listen for all clicks on the document so we can close the
// menu when the user clicks somewhere else
document.addEventListener('click', this._onDocumentClick, false);
@@ -169,40 +176,49 @@ export default class Dropdown extends React.Component {
}
}
- _onMenuOptionClick(dropdownKey) {
+ _close() {
this.setState({
expanded: false,
});
- this.props.onOptionChange(dropdownKey);
- }
-
- _onInputKeyPress(e) {
- // This needs to be on the keypress event because otherwise
- // it can't cancel the form submission
- if (e.key == 'Enter') {
- this.setState({
- expanded: false,
- });
- this.props.onOptionChange(this.state.highlightedOption);
- e.preventDefault();
+ // their focus was on the input, its getting unmounted, move it to the button
+ if (this._button.current) {
+ this._button.current.focus();
}
}
- _onInputKeyUp(e) {
- // These keys don't generate keypress events and so needs to
- // be on keyup
- if (e.key == 'Escape') {
- this.setState({
- expanded: false,
- });
- } else if (e.key == 'ArrowDown') {
- this.setState({
- highlightedOption: this._nextOption(this.state.highlightedOption),
- });
- } else if (e.key == 'ArrowUp') {
- this.setState({
- highlightedOption: this._prevOption(this.state.highlightedOption),
- });
+ _onMenuOptionClick(dropdownKey) {
+ this._close();
+ this.props.onOptionChange(dropdownKey);
+ }
+
+ _onInputKeyDown = (e) => {
+ let handled = true;
+
+ // These keys don't generate keypress events and so needs to be on keyup
+ switch (e.key) {
+ case Key.ENTER:
+ this.props.onOptionChange(this.state.highlightedOption);
+ // fallthrough
+ case Key.ESCAPE:
+ this._close();
+ break;
+ case Key.ARROW_DOWN:
+ this.setState({
+ highlightedOption: this._nextOption(this.state.highlightedOption),
+ });
+ break;
+ case Key.ARROW_UP:
+ this.setState({
+ highlightedOption: this._prevOption(this.state.highlightedOption),
+ });
+ break;
+ default:
+ handled = false;
+ }
+
+ if (handled) {
+ e.preventDefault();
+ e.stopPropagation();
}
}
@@ -250,20 +266,34 @@ export default class Dropdown extends React.Component {
return keys[(index - 1) % keys.length];
}
+ _scrollIntoView(node) {
+ if (node) {
+ node.scrollIntoView({
+ block: "nearest",
+ behavior: "auto",
+ });
+ }
+ }
+
_getMenuOptions() {
const options = React.Children.map(this.props.children, (child) => {
+ const highlighted = this.state.highlightedOption === child.key;
return (
-
+ return [
{ _t("No results") }
];
}
@@ -279,23 +309,35 @@ export default class Dropdown extends React.Component {
let menu;
if (this.state.expanded) {
if (this.props.searchEnabled) {
- currentValue = ;
+ currentValue = (
+
+ );
}
- menu =
- { this._getMenuOptions() }
-
;
+ menu = (
+
+ { this._getMenuOptions() }
+
+ );
}
if (!currentValue) {
const selectedChild = this.props.getShortOption ?
this.props.getShortOption(this.props.value) :
this.childrenByKey[this.props.value];
- currentValue =
+ currentValue =
{ options }
;
diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js
index 5de249f214..b067840792 100644
--- a/src/components/views/elements/ToggleSwitch.js
+++ b/src/components/views/elements/ToggleSwitch.js
@@ -19,46 +19,32 @@ import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
-import {KeyCode} from "../../../Keyboard";
+import sdk from "../../../index";
-// Controlled Toggle Switch element
+// Controlled Toggle Switch element, written with Accessibility in mind
const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
const _onClick = (e) => {
- e.stopPropagation();
- e.preventDefault();
if (disabled) return;
-
onChange(!checked);
};
- const _onKeyDown = (e) => {
- e.stopPropagation();
- e.preventDefault();
- if (disabled) return;
-
- if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) {
- onChange(!checked);
- }
- };
-
const classes = classNames({
"mx_ToggleSwitch": true,
"mx_ToggleSwitch_on": checked,
"mx_ToggleSwitch_enabled": !disabled,
});
+ const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
return (
- 
;
- }
-
- const avatarOverlayClasses = classNames({
- "mx_ProfileSettings_avatarOverlay": true,
- "mx_ProfileSettings_avatarOverlay_show": showOverlayAnyways,
- });
- let avatarHoverElement = (
-
-
{ selectedChild }
;
}
@@ -311,9 +353,18 @@ export default class Dropdown extends React.Component {
// Note the menu sits inside the AccessibleButton div so it's anchored
// to the input, but overflows below it. The root contains both.
return
-
+
{ currentValue }
-
+
{ menu }
;
@@ -321,6 +372,7 @@ export default class Dropdown extends React.Component {
}
Dropdown.propTypes = {
+ id: PropTypes.string.isRequired,
// The width that the dropdown should be. If specified,
// the dropped-down part of the menu will be set to this
// width.
@@ -340,4 +392,6 @@ Dropdown.propTypes = {
value: PropTypes.string,
// negative for consistency with HTML
disabled: PropTypes.bool,
+ // ARIA label
+ label: PropTypes.string.isRequired,
};
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js
index 0a737d963a..cee33205d7 100644
--- a/src/components/views/elements/Field.js
+++ b/src/components/views/elements/Field.js
@@ -66,10 +66,14 @@ export default class Field extends React.PureComponent {
this.state = {
valid: undefined,
feedback: undefined,
+ focused: false,
};
}
onFocus = (ev) => {
+ this.setState({
+ focused: true,
+ });
this.validate({
focused: true,
});
@@ -88,6 +92,9 @@ export default class Field extends React.PureComponent {
};
onBlur = (ev) => {
+ this.setState({
+ focused: false,
+ });
this.validate({
focused: false,
});
@@ -112,7 +119,9 @@ export default class Field extends React.PureComponent {
allowEmpty,
});
- if (feedback) {
+ // this method is async and so we may have been blurred since the method was called
+ // if we have then hide the feedback as withValidation does
+ if (this.state.focused && feedback) {
this.setState({
valid,
feedback,
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index b2f6d0abbb..2b27c27e78 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -28,6 +28,7 @@ const AccessibleButton = require('../../../components/views/elements/AccessibleB
const Modal = require('../../../Modal');
const sdk = require('../../../index');
import { _t } from '../../../languageHandler';
+import {Key} from "../../../Keyboard";
export default class ImageView extends React.Component {
static propTypes = {
@@ -62,7 +63,7 @@ export default class ImageView extends React.Component {
}
onKeyDown = (ev) => {
- if (ev.keyCode === 27) { // escape
+ if (ev.key === Key.ESCAPE) {
ev.stopPropagation();
ev.preventDefault();
this.props.onFinished();
diff --git a/src/components/views/elements/LanguageDropdown.js b/src/components/views/elements/LanguageDropdown.js
index 451c97d958..ebe26cfad8 100644
--- a/src/components/views/elements/LanguageDropdown.js
+++ b/src/components/views/elements/LanguageDropdown.js
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
import sdk from '../../../index';
import * as languageHandler from '../../../languageHandler';
import SettingsStore from "../../../settings/SettingsStore";
+import { _t } from "../../../languageHandler";
function languageMatchesSearchQuery(query, language) {
if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
@@ -105,9 +106,14 @@ export default class LanguageDropdown extends React.Component {
value = this.props.value || language;
}
- return
-
+
);
};
diff --git a/src/components/views/messages/MKeyVerificationRequest.js b/src/components/views/messages/MKeyVerificationRequest.js
index b2a1724fc6..4faa1b20aa 100644
--- a/src/components/views/messages/MKeyVerificationRequest.js
+++ b/src/components/views/messages/MKeyVerificationRequest.js
@@ -52,7 +52,7 @@ export default class MKeyVerificationRequest extends React.Component {
const verifier = MatrixClientPeg.get().acceptVerificationDM(this.props.mxEvent, verificationMethods.SAS);
Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
verifier,
- });
+ }, null, /* priority = */ false, /* static = */ true);
};
_onRejectClicked = () => {
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index af8b4616f8..d1d7aa0371 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -58,9 +58,20 @@ const _disambiguateDevices = (devices) => {
}
};
-const _getE2EStatus = (devices) => {
- const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
- return hasUnverifiedDevice ? "warning" : "verified";
+const _getE2EStatus = (cli, userId, devices) => {
+ if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+ const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
+ return hasUnverifiedDevice ? "warning" : "verified";
+ }
+ const userVerified = cli.checkUserTrust(userId).isCrossSigningVerified();
+ const allDevicesVerified = devices.every(device => {
+ const { deviceId } = device;
+ return cli.checkDeviceTrust(userId, deviceId).isCrossSigningVerified();
+ });
+ if (allDevicesVerified) {
+ return userVerified ? "verified" : "normal";
+ }
+ return "warning";
};
async function unverifyUser(matrixClient, userId) {
@@ -98,14 +109,14 @@ function openDMForUser(matrixClient, userId) {
}
function useIsEncrypted(cli, room) {
- const [isEncrypted, setIsEncrypted] = useState(cli.isRoomEncrypted(room.roomId));
+ const [isEncrypted, setIsEncrypted] = useState(room ? cli.isRoomEncrypted(room.roomId) : undefined);
const update = useCallback((event) => {
if (event.getType() === "m.room.encryption") {
setIsEncrypted(cli.isRoomEncrypted(room.roomId));
}
}, [cli, room]);
- useEventEmitter(room.currentState, "RoomState.events", update);
+ useEventEmitter(room ? room.currentState : undefined, "RoomState.events", update);
return isEncrypted;
}
@@ -114,7 +125,7 @@ function verifyDevice(userId, device) {
Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
userId: userId,
device: device,
- });
+ }, null, /* priority = */ false, /* static = */ true);
}
function DeviceItem({userId, device}) {
@@ -1264,7 +1275,8 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
let e2eIcon;
if (isRoomEncrypted && devices) {
- e2eIcon =
- {_t("Upload room avatar")}
-
- );
- if (!this.state.canSetAvatar) {
- if (!showOverlayAnyways) {
- avatarHoverElement = null;
- } else {
- const disabledOverlayClasses = classNames({
- "mx_ProfileSettings_avatarOverlay": true,
- "mx_ProfileSettings_avatarOverlay_show": true,
- "mx_ProfileSettings_avatarOverlay_disabled": true,
- });
- avatarHoverElement = (
-
-
-
-
- {_t("No room avatar")}
-
- );
- }
- }
-
+ const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+ const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
return (
- {avatarElement}
- {avatarHoverElement}
-
+
{ img }
@@ -135,9 +138,10 @@ module.exports = createReactClass({
{ p["og:description"] }
- ![]({require("../../../../res/img/cancel.svg")}){kind=small}
+
+
+ { avatarElement }
+ { uploadAvatarBtn }
+ { removeAvatarBtn }
+
;
+};
+
+AvatarSetting.propTypes = {
+ avatarUrl: PropTypes.string,
+ avatarName: PropTypes.string.isRequired, // name of user/room the avatar belongs to
+ uploadAvatar: PropTypes.func,
+ removeAvatar: PropTypes.func,
+ avatarAltText: PropTypes.string.isRequired,
+};
+
+export default AvatarSetting;
diff --git a/src/components/views/settings/IntegrationManager.js b/src/components/views/settings/IntegrationManager.js
index 1ab17ca8a0..e97d9d4c64 100644
--- a/src/components/views/settings/IntegrationManager.js
+++ b/src/components/views/settings/IntegrationManager.js
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
import sdk from '../../../index';
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher';
+import {Key} from "../../../Keyboard";
export default class IntegrationManager extends React.Component {
static propTypes = {
@@ -52,7 +53,7 @@ export default class IntegrationManager extends React.Component {
}
onKeyDown = (ev) => {
- if (ev.keyCode === 27) { // escape
+ if (ev.key === Key.ESCAPE) {
ev.stopPropagation();
ev.preventDefault();
this.props.onFinished();
diff --git a/src/components/views/settings/ProfileSettings.js b/src/components/views/settings/ProfileSettings.js
index a878a8cc3f..480b414911 100644
--- a/src/components/views/settings/ProfileSettings.js
+++ b/src/components/views/settings/ProfileSettings.js
@@ -18,10 +18,9 @@ import React, {createRef} from 'react';
import {_t} from "../../../languageHandler";
import MatrixClientPeg from "../../../MatrixClientPeg";
import Field from "../elements/Field";
-import AccessibleButton from "../elements/AccessibleButton";
-import classNames from 'classnames';
import {User} from "matrix-js-sdk";
import { getHostingLink } from '../../../utils/HostingLink';
+import sdk from "../../../index";
export default class ProfileSettings extends React.Component {
constructor() {
@@ -52,13 +51,20 @@ export default class ProfileSettings extends React.Component {
this._avatarUpload = createRef();
}
- _uploadAvatar = (e) => {
- e.stopPropagation();
- e.preventDefault();
-
+ _uploadAvatar = () => {
this._avatarUpload.current.click();
};
+ _removeAvatar = () => {
+ // clear file upload field so same file can be selected
+ this._avatarUpload.current.value = "";
+ this.setState({
+ avatarUrl: undefined,
+ avatarFile: undefined,
+ enableProfileSave: true,
+ });
+ };
+
_saveProfile = async (e) => {
e.stopPropagation();
e.preventDefault();
@@ -117,29 +123,6 @@ export default class ProfileSettings extends React.Component {
};
render() {
- // TODO: Why is rendering a box with an overlay so complicated? Can the DOM be reduced?
-
- let showOverlayAnyways = true;
- let avatarElement = ;
- if (this.state.avatarUrl) {
- showOverlayAnyways = false;
- avatarElement =
- {_t("Upload profile picture")}
-
- );
-
const hostingSignupLink = getHostingLink('user-settings');
let hostingSignup = null;
if (hostingSignupLink) {
@@ -156,6 +139,8 @@ export default class ProfileSettings extends React.Component {
;
}
+ const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+ const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
return (
-
-
-