From cad7c309ceb7bc87ac3da02c2be1f6bdf1aefd3d Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 20 Oct 2021 00:41:42 +0300 Subject: [PATCH] Web: Components: add avatar edit button --- .../avatar/avatar.stories.js | 1 - packages/asc-web-components/avatar/index.js | 38 +++++-------------- .../avatar/styled-avatar.js | 23 +++++------ packages/asc-web-components/themes/base.js | 17 +++------ packages/asc-web-components/themes/dark.js | 17 +++------ 5 files changed, 28 insertions(+), 68 deletions(-) diff --git a/packages/asc-web-components/avatar/avatar.stories.js b/packages/asc-web-components/avatar/avatar.stories.js index 39ee1197d3..c565f59acb 100644 --- a/packages/asc-web-components/avatar/avatar.stories.js +++ b/packages/asc-web-components/avatar/avatar.stories.js @@ -27,5 +27,4 @@ Default.args = { source: "", userName: "", editing: false, - editLabel: "Edit photo", }; diff --git a/packages/asc-web-components/avatar/index.js b/packages/asc-web-components/avatar/index.js index d89e4132cd..efd5051b78 100644 --- a/packages/asc-web-components/avatar/index.js +++ b/packages/asc-web-components/avatar/index.js @@ -4,7 +4,6 @@ import styled from "styled-components"; import { GuestIcon, AdministratorIcon, OwnerIcon } from "./svg"; import { - EditLink, EmptyIcon, EditContainer, AvatarWrapper, @@ -13,7 +12,7 @@ import { StyledImage, StyledAvatar, } from "./styled-avatar"; -import Link from "../link"; +import IconButton from "../icon-button"; import commonIconsStyles from "../utils/common-icons-style"; const whiteColor = "#FFFFFF"; @@ -57,15 +56,7 @@ Initials.propTypes = { // eslint-disable-next-line react/display-name const Avatar = (props) => { //console.log("Avatar render"); - const { - size, - source, - userName, - role, - editing, - editLabel, - editAction, - } = props; + const { size, source, userName, role, editing, editAction } = props; const avatarContent = source ? ( @@ -83,21 +74,13 @@ const Avatar = (props) => { {avatarContent} {editing && size === "max" && ( - - - - {editLabel} - - + + )} {roleIcon} @@ -112,8 +95,6 @@ Avatar.propTypes = { role: PropTypes.oneOf(["owner", "admin", "guest", "user"]), /** The address of the image for an image avatar */ source: PropTypes.string, - /** Displays avatar edit layer */ - editLabel: PropTypes.string, userName: PropTypes.string, editing: PropTypes.bool, /** Function called when the avatar change button is pressed */ @@ -130,7 +111,6 @@ Avatar.defaultProps = { size: "medium", role: "", source: "", - editLabel: "Edit photo", userName: "", editing: false, }; diff --git a/packages/asc-web-components/avatar/styled-avatar.js b/packages/asc-web-components/avatar/styled-avatar.js index e6edc02676..37468c520f 100644 --- a/packages/asc-web-components/avatar/styled-avatar.js +++ b/packages/asc-web-components/avatar/styled-avatar.js @@ -5,7 +5,6 @@ import NoUserSelect from "../utils/commonStyles"; import { CameraIcon } from "./svg"; import commonIconsStyles from "../utils/common-icons-style"; - const EditLink = styled.div` padding-left: ${(props) => props.theme.avatar.editLink.paddingLeft}; padding-right: ${(props) => props.theme.avatar.editLink.paddingRight}; @@ -29,21 +28,17 @@ const EmptyIcon = styled(CameraIcon)` EmptyIcon.defaultProps = { theme: Base }; const EditContainer = styled.div` - box-sizing: ${(props) => props.theme.avatar.editContainer.boxSizing}; position: absolute; - width: ${(props) => props.theme.avatar.editContainer.width}; - height: ${(props) => props.theme.avatar.editContainer.height}; - top: ${(props) => props.theme.avatar.editContainer.top}; - left: ${(props) => props.theme.avatar.editContainer.left}; - transform: ${(props) => props.theme.avatar.editContainer.transform}; - padding: ${(props) => props.theme.avatar.editContainer.padding}; - text-align: ${(props) => props.theme.avatar.editContainer.textAlign}; - line-height: ${(props) => props.theme.avatar.editContainer.lineHeight}; + display: flex; + right: ${(props) => props.theme.avatar.editContainer.right}; + bottom: ${(props) => props.theme.avatar.editContainer.bottom}; + background-color: ${(props) => + props.theme.avatar.editContainer.backgroundColor}; border-radius: ${(props) => props.theme.avatar.editContainer.borderRadius}; - background: ${(props) => - props.gradient - ? props.theme.avatar.editContainer.linearGradient - : props.theme.avatar.editContainer.transparent}; + height: ${(props) => props.theme.avatar.editContainer.height}; + width: ${(props) => props.theme.avatar.editContainer.width}; + align-items: center; + justify-content: center; `; EditContainer.defaultProps = { theme: Base }; diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js index d3ccfbe5de..04ef3d299c 100644 --- a/packages/asc-web-components/themes/base.js +++ b/packages/asc-web-components/themes/base.js @@ -917,19 +917,12 @@ const Base = { }, editContainer: { - boxSizing: "border-box", - width: "100%", - height: "100%", - top: "50%", - left: "50%", - transform: "translate(-50%, -50%)", - padding: "75% 16px 5px", - textAlign: "center", - lineHeight: "19px", + right: "4px", + bottom: "4px", + backgroundColor: "#265a8f", borderRadius: "50%", - linearGradient: - "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)", - transparent: "transparent", + height: "32px", + width: "32px", }, editLink: { diff --git a/packages/asc-web-components/themes/dark.js b/packages/asc-web-components/themes/dark.js index 394091912a..0b6b55d886 100644 --- a/packages/asc-web-components/themes/dark.js +++ b/packages/asc-web-components/themes/dark.js @@ -880,19 +880,12 @@ const Dark = { }, }, editContainer: { - boxSizing: "border-box", - width: "100%", - height: "100%", - top: "50%", - left: "50%", - transform: "translate(-50%, -50%)", - padding: "75% 16px 5px", - textAlign: "center", - lineHeight: "19px", + right: "4px", + bottom: "4px", + backgroundColor: "#265a8f", borderRadius: "50%", - linearGradient: - "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)", - transparent: "transparent", + height: "32px", + width: "32px", }, editLink: {