From 26183d14bf5abf23b6325c74e7711a3626f4d4d6 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 20 Oct 2021 00:41:05 +0300 Subject: [PATCH 1/5] Web: add new pencil icon --- public/images/pencil.react.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 public/images/pencil.react.svg diff --git a/public/images/pencil.react.svg b/public/images/pencil.react.svg new file mode 100644 index 00000000000..335ff09ebed --- /dev/null +++ b/public/images/pencil.react.svg @@ -0,0 +1,3 @@ + + + From cad7c309ceb7bc87ac3da02c2be1f6bdf1aefd3d Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 20 Oct 2021 00:41:42 +0300 Subject: [PATCH 2/5] 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 39ee1197d3b..c565f59acb0 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 d89e4132cde..efd5051b785 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 e6edc02676b..37468c520f3 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 d3ccfbe5deb..04ef3d299c6 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 394091912ae..0b6b55d886a 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: { From a75a49dc9aa40d4ffe83cac222d5ae053b59f954 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 20 Oct 2021 11:10:51 +0300 Subject: [PATCH 3/5] Web: Components: delete useless --- .../asc-web-components/avatar/styled-avatar.js | 17 ----------------- packages/asc-web-components/themes/base.js | 9 --------- packages/asc-web-components/themes/dark.js | 8 -------- 3 files changed, 34 deletions(-) diff --git a/packages/asc-web-components/avatar/styled-avatar.js b/packages/asc-web-components/avatar/styled-avatar.js index 37468c520f3..30115ac9d78 100644 --- a/packages/asc-web-components/avatar/styled-avatar.js +++ b/packages/asc-web-components/avatar/styled-avatar.js @@ -5,22 +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}; - - a:hover { - border-bottom: ${(props) => props.theme.avatar.editLink.borderBottom}; - } - - span { - display: ${(props) => props.theme.avatar.editLink.display}; - max-width: ${(props) => props.theme.avatar.editLink.maxWidth}; - text-decoration: ${(props) => props.theme.avatar.editLink.textDecoration}; - } -`; -EditLink.defaultProps = { theme: Base }; - const EmptyIcon = styled(CameraIcon)` ${commonIconsStyles} border-radius: ${(props) => props.theme.avatar.image.borderRadius}; @@ -124,7 +108,6 @@ const StyledAvatar = styled.div` StyledAvatar.defaultProps = { theme: Base }; export { - EditLink, EmptyIcon, EditContainer, AvatarWrapper, diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js index 04ef3d299c6..7d01538b126 100644 --- a/packages/asc-web-components/themes/base.js +++ b/packages/asc-web-components/themes/base.js @@ -925,15 +925,6 @@ const Base = { width: "32px", }, - editLink: { - paddingLeft: "10px", - paddingRight: "10px", - borderBottom: "none", - display: "inline-block", - maxWidth: "100%", - textDecoration: "underline dashed", - }, - image: { width: "100%", height: "auto", diff --git a/packages/asc-web-components/themes/dark.js b/packages/asc-web-components/themes/dark.js index 0b6b55d886a..8ea7374115f 100644 --- a/packages/asc-web-components/themes/dark.js +++ b/packages/asc-web-components/themes/dark.js @@ -888,14 +888,6 @@ const Dark = { width: "32px", }, - editLink: { - paddingLeft: "10px", - paddingRight: "10px", - borderBottom: "none", - display: "inline-block", - maxWidth: "100%", - textDecoration: "underline dashed", - }, image: { width: "100%", height: "100%", From f35ea7d172c7659426f30d6e8df3cc56b2a5eff4 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 20 Oct 2021 11:21:28 +0300 Subject: [PATCH 4/5] Web: People: delete useless --- .../pages/ProfileAction/Section/Body/FormFields/ContactField.js | 2 -- .../ProfileAction/Section/Body/FormFields/ContactsField.js | 2 -- .../pages/ProfileAction/Section/Body/FormFields/DateField.js | 2 -- .../ProfileAction/Section/Body/FormFields/DepartmentField.js | 2 -- .../pages/ProfileAction/Section/Body/FormFields/EmailField.js | 2 -- .../ProfileAction/Section/Body/FormFields/PasswordField.js | 2 -- .../pages/ProfileAction/Section/Body/FormFields/RadioField.js | 2 -- .../ProfileAction/Section/Body/FormFields/TextChangeField.js | 2 -- .../pages/ProfileAction/Section/Body/FormFields/TextField.js | 2 -- .../src/pages/ProfileAction/Section/Body/updateUserForm.js | 2 -- 10 files changed, 20 deletions(-) diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js index 213ede6319b..0dcab07946f 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js @@ -21,8 +21,6 @@ class ContactField extends React.Component { } render() { - console.log("ContactField render"); - const { isDisabled, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js index 5c6dfabcb5b..7934d07d8e3 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js @@ -66,8 +66,6 @@ class ContactsField extends React.Component { } render() { - console.log("ContactsField render"); - const { pattern, contacts, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js index 7a9e78772e4..c47a3ff3237 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js @@ -9,8 +9,6 @@ class DateField extends React.Component { } render() { - console.log("DateField render"); - const { isRequired, hasError, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js index 4187c70b0ae..0f747d04f43 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js @@ -16,8 +16,6 @@ class DepartmentField extends React.Component { }; render() { - console.log("DepartmentField render"); - const { isRequired, isDisabled, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js index 9254125500b..39d1894c500 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js @@ -9,8 +9,6 @@ class EmailField extends React.Component { } render() { - console.log("EmailField render"); - const { isRequired, hasError, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js index e8b3a494ab7..af01550b52a 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js @@ -11,8 +11,6 @@ class PasswordField extends React.Component { } render() { - console.log("PasswordField render"); - const { isRequired, hasError, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js index 1e3b7bc29ec..47dc5b9e4f2 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js @@ -9,8 +9,6 @@ class RadioField extends React.Component { } render() { - //console.log("RadioField render"); - const { isRequired, hasError, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js index e80c98d36a2..39eaca95da1 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js @@ -18,8 +18,6 @@ class TextChangeField extends React.Component { } render() { - console.log("TextChangeField render"); - const { isRequired, hasError, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js index 2050a968a42..9f690ac8a4d 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js @@ -9,8 +9,6 @@ class TextField extends React.Component { } render() { - console.log("TextField render"); - const { isRequired, hasError, diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js index 9556d50f784..c90638b5db1 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js @@ -499,7 +499,6 @@ class UpdateUserForm extends React.Component { this.setState({ isLoading: true }); const { profile, setAvatarMax, personal } = this.props; - console.log("profile", profile); if (isUpdate) { createThumbnailsAvatar(profile.id, { x: Math.round(result.x * avatar.defaultWidth - result.width / 2), @@ -727,7 +726,6 @@ class UpdateUserForm extends React.Component { source={this.props.avatarMax || profile.avatarMax} userName={profile.displayName} editing={true} - editLabel={t("Common:EditAvatar")} editAction={ isMobile ? this.openAvatarEditorPage : this.openAvatarEditor } From f895cde8130e652414d7fe4de730098df02627f3 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 20 Oct 2021 12:09:01 +0300 Subject: [PATCH 5/5] Web: Components: fix avatar edit button position --- packages/asc-web-components/themes/base.js | 4 ++-- packages/asc-web-components/themes/dark.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js index 7d01538b126..d4ccd35faf2 100644 --- a/packages/asc-web-components/themes/base.js +++ b/packages/asc-web-components/themes/base.js @@ -917,8 +917,8 @@ const Base = { }, editContainer: { - right: "4px", - bottom: "4px", + right: "0px", + bottom: "0px", backgroundColor: "#265a8f", borderRadius: "50%", height: "32px", diff --git a/packages/asc-web-components/themes/dark.js b/packages/asc-web-components/themes/dark.js index 8ea7374115f..ee89540de5a 100644 --- a/packages/asc-web-components/themes/dark.js +++ b/packages/asc-web-components/themes/dark.js @@ -880,8 +880,8 @@ const Dark = { }, }, editContainer: { - right: "4px", - bottom: "4px", + right: "0px", + bottom: "0px", backgroundColor: "#265a8f", borderRadius: "50%", height: "32px",