Feature/avatar edit action

packages/asc-web-components/avatar/avatar.stories.js

@@ -27,5 +27,4 @@ Default.args = {
   source: "",
   userName: "",
   editing: false,
-  editLabel: "Edit photo",
 };

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 ? (
     <StyledImage src={source} />
@@ -83,21 +74,13 @@ const Avatar = (props) => {
         {avatarContent}
       </AvatarWrapper>
       {editing && size === "max" && (
-        <EditContainer gradient={!!source}>
-          <EditLink>
-            <Link
-              type="action"
-              title={editLabel}
-              isTextOverflow={true}
-              isHovered={true}
-              fontSize="14px"
-              fontWeight={600}
-              color={whiteColor}
-              onClick={editAction}
-            >
-              {editLabel}
-            </Link>
-          </EditLink>
+        <EditContainer>
+          <IconButton
+            color={whiteColor}
+            iconName="/static/images/pencil.react.svg"
+            onClick={editAction}
+            size={16}
+          />
         </EditContainer>
       )}
       <RoleWrapper size={size}>{roleIcon}</RoleWrapper>
@@ -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,
 };

packages/asc-web-components/avatar/styled-avatar.js

@@ -5,45 +5,24 @@ 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};
 `;
 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 };
 
@@ -129,7 +108,6 @@ const StyledAvatar = styled.div`
 StyledAvatar.defaultProps = { theme: Base };
 
 export {
-  EditLink,
   EmptyIcon,
   EditContainer,
   AvatarWrapper,

packages/asc-web-components/themes/base.js

@@ -917,28 +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: "0px",
+      bottom: "0px",
+      backgroundColor: "#265a8f",
       borderRadius: "50%",
-      linearGradient:
-        "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)",
-      transparent: "transparent",
-    },
-
-    editLink: {
-      paddingLeft: "10px",
-      paddingRight: "10px",
-      borderBottom: "none",
-      display: "inline-block",
-      maxWidth: "100%",
-      textDecoration: "underline dashed",
+      height: "32px",
+      width: "32px",
     },
 
     image: {

packages/asc-web-components/themes/dark.js

@@ -880,29 +880,14 @@ 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: "0px",
+      bottom: "0px",
+      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: {
-      paddingLeft: "10px",
-      paddingRight: "10px",
-      borderBottom: "none",
-      display: "inline-block",
-      maxWidth: "100%",
-      textDecoration: "underline dashed",
-    },
     image: {
       width: "100%",
       height: "100%",

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,
 

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,

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,

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,

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,

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,

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,

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,

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,

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
               }