Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add ability to remove avatars #3719

Closed
wants to merge 8 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@
"file-saver": "^1.3.3",
"filesize": "3.5.6",
"flux": "2.1.1",
"focus-trap-react": "^3.0.5",
"focus-visible": "^5.0.2",
"fuse.js": "^2.2.0",
"gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
Expand All @@ -100,6 +99,7 @@
"react-addons-css-transition-group": "15.6.2",
"react-beautiful-dnd": "^4.0.1",
"react-dom": "^16.9.0",
"react-focus-lock": "^2.2.1",
"react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594",
"resize-observer-polyfill": "^1.5.0",
"sanitize-html": "^1.18.4",
Expand Down
2 changes: 2 additions & 0 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
@import "./views/auth/_Welcome.scss";
@import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/context_menus/_AvatarContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
Expand Down Expand Up @@ -175,6 +176,7 @@
@import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss";
@import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
Expand Down
43 changes: 43 additions & 0 deletions res/css/views/context_menus/_AvatarContextMenu.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
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.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_AvatarContextMenu {
padding: 6px;
}

.mx_AvatarContextMenu_field, .mx_AvatarContextMenu_leave {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
line-height: 16px;
}

.mx_AvatarContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
border-color: $menu-border-color;
}

.mx_AvatarContextMenu_leave {
color: $warning-color;
}
105 changes: 105 additions & 0 deletions res/css/views/settings/_AvatarSetting.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/*
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.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_AvatarSetting_avatar {
width: 88px;
height: 88px;
margin-left: 13px;
position: relative;
}

.mx_AvatarSetting_avatar > *,
.mx_AvatarSetting_avatar img {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarOverlay_disabled {
cursor: default;
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
background-color: $settings-profile-placeholder-bg-color;
}

.mx_AvatarSetting_avatarOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
text-align: center;
vertical-align: middle;
font-size: 10px;
pointer-events: none;
}

.mx_AvatarSetting_avatar:hover .mx_AvatarSetting_avatarOverlay:not(.mx_AvatarSetting_avatarOverlay_disabled) {
display: inline-block;
opacity: 0.5 !important;
color: $settings-profile-overlay-fg-color !important;
background-color: $settings-profile-overlay-bg-color !important;
}

.mx_AvatarSetting_avatarOverlay_show {
display: inline-block;
opacity: 1;
color: $settings-profile-overlay-placeholder-fg-color;
background-color: $settings-profile-overlay-placeholder-bg-color;
}

.mx_AvatarSetting_avatarOverlayText {
display: block;
margin-top: 17px;
margin-bottom: 8px;
}

.mx_AvatarSetting_noAvatarText {
display: block;
margin: 34px auto auto;
}

.mx_AvatarSetting_avatarOverlayImgContainer {
position: relative;
width: 14px;
height: 14px;
margin: auto;
}

.mx_AvatarSetting_avatarOverlayImg::before {
background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-customised/upload.svg");
mask-repeat: no-repeat;
mask-size: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.mx_AvatarSetting_avatar:hover .mx_AvatarSetting_avatarOverlayImg::before {
background-color: $settings-profile-overlay-fg-color !important;
}

.mx_AvatarSetting_avatarUpload {
display: none;
}
85 changes: 0 additions & 85 deletions res/css/views/settings/_ProfileSettings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,91 +38,6 @@ limitations under the License.
}
}

.mx_ProfileSettings_avatar {
width: 88px;
height: 88px;
margin-left: 13px;
position: relative;
}

.mx_ProfileSettings_avatar > * {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
}

.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled {
cursor: default;
}

.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
background-color: $settings-profile-placeholder-bg-color;
}

.mx_ProfileSettings_avatarOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
text-align: center;
vertical-align: middle;
font-size: 10px;
cursor: pointer;
}

.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
display: inline-block;
opacity: 0.5 !important;
color: $settings-profile-overlay-fg-color !important;
background-color: $settings-profile-overlay-bg-color !important;
}

.mx_ProfileSettings_avatarOverlay_show {
display: inline-block;
opacity: 1;
color: $settings-profile-overlay-placeholder-fg-color;
background-color: $settings-profile-overlay-placeholder-bg-color;
}

.mx_ProfileSettings_avatarOverlayText {
display: block;
margin-top: 17px;
margin-bottom: 8px;
}

.mx_ProfileSettings_noAvatarText {
display: block;
margin: 34px auto auto;
}

.mx_ProfileSettings_avatarOverlayImgContainer {
position: relative;
width: 14px;
height: 14px;
margin: auto;
}

.mx_ProfileSettings_avatarOverlayImg::before {
background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-customised/upload.svg");
mask-repeat: no-repeat;
mask-size: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg::before {
background-color: $settings-profile-overlay-fg-color !important;
}

.mx_ProfileSettings_avatarUpload {
display: none;
}
50 changes: 50 additions & 0 deletions src/components/views/context_menus/AvatarContextMenu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
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.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React from 'react';
import PropTypes from 'prop-types';
import {_t} from "../../../languageHandler";
import {MenuItem} from "../../structures/ContextMenu";

export default class AvatarContextMenu extends React.PureComponent {
static propTypes = {
uploadAvatar: PropTypes.func.isRequired,
removeAvatar: PropTypes.func.isRequired,
onFinished: PropTypes.func.isRequired,
};

_onUploadAvatarClick = () => {
this.props.uploadAvatar();
setImmediate(this.props.onFinished);
};

_onRemoveAvatarClick = () => {
this.props.removeAvatar();
setImmediate(this.props.onFinished);
};

render() {
return <div className="mx_AvatarContextMenu">
<MenuItem className="mx_AvatarContextMenu_field" onClick={this._onUploadAvatarClick}>
{ _t('Upload new image') }
</MenuItem>
<hr className="mx_AvatarContextMenu_separator" />
<MenuItem className="mx_AvatarContextMenu_leave" onClick={this._onRemoveAvatarClick}>
{ _t('Remove') }
</MenuItem>
</div>;
}
}
28 changes: 16 additions & 12 deletions src/components/views/dialogs/BaseDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ limitations under the License.

import React from 'react';
import createReactClass from 'create-react-class';
import FocusTrap from 'focus-trap-react';
import FocusLock from 'react-focus-lock';
import PropTypes from 'prop-types';
import classNames from 'classnames';

Expand Down Expand Up @@ -121,20 +121,24 @@ export default createReactClass({
}

return (
<FocusTrap onKeyDown={this._onKeyDown}
<FocusLock
returnFocus={true}
lockProps={{
onKeyDown: this._onKeyDown,
role: "dialog",
["aria-labelledby"]: "mx_BaseDialog_title",
// This should point to a node describing the dialog.
// If we were about to completely follow this recommendation we'd need to
// make all the components relying on BaseDialog to be aware of it.
// So instead we will use the whole content as the description.
// Description comes first and if the content contains more text,
// AT users can skip its presentation.
["aria-describedby"]: this.props.contentId,
}}
className={classNames({
[this.props.className]: true,
'mx_Dialog_fixedWidth': this.props.fixedWidth,
})}
role="dialog"
aria-labelledby='mx_BaseDialog_title'
// This should point to a node describing the dialog.
// If we were about to completely follow this recommendation we'd need to
// make all the components relying on BaseDialog to be aware of it.
// So instead we will use the whole content as the description.
// Description comes first and if the content contains more text,
// AT users can skip its presentation.
aria-describedby={this.props.contentId}
>
<div className={classNames('mx_Dialog_header', {
'mx_Dialog_headerWithButton': !!this.props.headerButton,
Expand All @@ -146,7 +150,7 @@ export default createReactClass({
{ cancelButton }
</div>
{ this.props.children }
</FocusTrap>
</FocusLock>
);
},
});
4 changes: 2 additions & 2 deletions src/components/views/elements/ToggleSwitch.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
};

const _onKeyDown = (e) => {
e.stopPropagation();
e.preventDefault();
if (disabled) return;

if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) {
onChange(!checked);
e.stopPropagation();
e.preventDefault();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unrelated changes should probably be in their own PR for next time

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup

}
};

Expand Down
Loading