From 9fa2680dc6028627f9537b189dce468240c74a11 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 16 Dec 2019 14:58:12 +0000 Subject: [PATCH] Implement new design for uploading/removing avatars --- res/css/_components.scss | 1 + res/css/views/settings/_AvatarSetting.scss | 82 ++++++++++++++++++ res/css/views/settings/_ProfileSettings.scss | 85 ------------------- .../room_settings/RoomProfileSettings.js | 68 +++++---------- .../views/settings/AvatarSetting.js | 61 +++++++++++++ .../views/settings/ProfileSettings.js | 52 +++++------- src/i18n/strings/en_EN.json | 11 +-- 7 files changed, 186 insertions(+), 174 deletions(-) create mode 100644 res/css/views/settings/_AvatarSetting.scss create mode 100644 src/components/views/settings/AvatarSetting.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 529ce9ac85..233c781d7f 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -175,6 +175,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"; diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss new file mode 100644 index 0000000000..32ece173cc --- /dev/null +++ b/res/css/views/settings/_AvatarSetting.scss @@ -0,0 +1,82 @@ +/* +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; + + & > * { + width: 88px; + box-sizing: border-box; + } + + .mx_AccessibleButton.mx_AccessibleButton_kind_primary { + margin-top: 8px; + + div { + position: relative; + height: 12px; + width: 12px; + display: inline; + padding-right: 6px; // 0.5 * 12px + left: -6px; // 0.5 * 12px + top: 3px; + } + + div::before { + content: ''; + position: absolute; + height: 12px; + width: 12px; + + background-color: $button-primary-fg-color; + mask-repeat: no-repeat; + mask-size: contain; + mask-image: url('$(res)/img/feather-customised/upload.svg'); + } + } + + .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm { + color: $button-danger-bg-color; + } + + & > img, + .mx_AvatarSetting_avatarPlaceholder { + display: block; + height: 88px; + border-radius: 4px; + } + + .mx_AvatarSetting_avatarPlaceholder::before { + background-color: $settings-profile-overlay-placeholder-fg-color; + mask: url("$(res)/img/feather-customised/user.svg"); + mask-repeat: no-repeat; + mask-size: 36px; + mask-position: center; + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} + +.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder { + background-color: $settings-profile-placeholder-bg-color; +} diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss index 432b713c1b..58624d1597 100644 --- a/res/css/views/settings/_ProfileSettings.scss +++ b/res/css/views/settings/_ProfileSettings.scss @@ -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; } diff --git a/src/components/views/room_settings/RoomProfileSettings.js b/src/components/views/room_settings/RoomProfileSettings.js index 76d2e5be84..ada2f093d1 100644 --- a/src/components/views/room_settings/RoomProfileSettings.js +++ b/src/components/views/room_settings/RoomProfileSettings.js @@ -19,8 +19,7 @@ import PropTypes from 'prop-types'; import {_t} from "../../../languageHandler"; import MatrixClientPeg from "../../../MatrixClientPeg"; import Field from "../elements/Field"; -import AccessibleButton from "../elements/AccessibleButton"; -import classNames from 'classnames'; +import sdk from "../../../index"; // TODO: Merge with ProfileSettings? export default class RoomProfileSettings extends React.Component { @@ -62,13 +61,20 @@ export default class RoomProfileSettings 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(); @@ -139,45 +145,8 @@ export default class RoomProfileSettings 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 = ; - } - - const avatarOverlayClasses = classNames({ - "mx_ProfileSettings_avatarOverlay": true, - "mx_ProfileSettings_avatarOverlay_show": showOverlayAnyways, - }); - let avatarHoverElement = ( -