diff --git a/web/ASC.Web.Components/src/components/avatar/index.js b/web/ASC.Web.Components/src/components/avatar/index.js
index 24fc9240e0..79d4eaf84b 100644
--- a/web/ASC.Web.Components/src/components/avatar/index.js
+++ b/web/ASC.Web.Components/src/components/avatar/index.js
@@ -2,55 +2,49 @@ import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { Icons } from '../icons'
+import Link from '../link'
const whiteColor = '#FFFFFF';
const avatarBackground = '#ECEEF1';
+const namedAvatarBackground = '#2DA7DB';
const StyledAvatar = styled.div`
position: relative;
width: ${props =>
- (props.size === 'max' && '160px') ||
- (props.size === 'big' && '82px') ||
- (props.size === 'medium' && '48px') ||
- (props.size === 'small' && '32px')
- };
+ (props.size === 'max' && '160px') ||
+ (props.size === 'big' && '82px') ||
+ (props.size === 'medium' && '48px') ||
+ (props.size === 'small' && '32px')
+ };
height: ${props =>
- (props.size === 'max' && '160px') ||
- (props.size === 'big' && '82px') ||
- (props.size === 'medium' && '48px') ||
- (props.size === 'small' && '32px')
- };
+ (props.size === 'max' && '160px') ||
+ (props.size === 'big' && '82px') ||
+ (props.size === 'medium' && '48px') ||
+ (props.size === 'small' && '32px')
+ };
- font-family: 'Open Sans';
+ font-family: 'Open Sans',sans-serif,Arial;
font-style: normal;
`;
const RoleWrapper = styled.div`
position: absolute;
left: ${props =>
- (props.size === 'max' && '0px') ||
- (props.size === 'big' && '-2px') ||
- (props.size === 'medium' && '0px') ||
- (props.size === 'small' && '-2px')
- };
+ (props.size === 'max' && '0px') ||
+ (props.size === 'big' && '-2px') ||
+ (props.size === 'medium' && '0px') ||
+ (props.size === 'small' && '-2px')
+ };
bottom: ${props =>
- (props.size === 'max' && '0px') ||
- (props.size === 'big' && '4px') ||
- (props.size === 'medium' && '0px') ||
- (props.size === 'small' && '3px')
- };
+ (props.size === 'max' && '0px') ||
+ (props.size === 'big' && '4px') ||
+ (props.size === 'medium' && '0px') ||
+ (props.size === 'small' && '3px')
+ };
width: ${props =>
- (props.size === 'max' && '24px') ||
- (props.size === 'big' && '12px') ||
- (props.size === 'medium' && '12px') ||
- (props.size === 'small' && '12px')
- };
+ (props.size === 'max' && '24px') || '12px' };
height: ${props =>
- (props.size === 'max' && '24px') ||
- (props.size === 'big' && '12px') ||
- (props.size === 'medium' && '12px') ||
- (props.size === 'small' && '12px')
- };
+ (props.size === 'max' && '24px') || '12px' };
`;
const ImageStyled = styled.img`
@@ -62,7 +56,11 @@ const ImageStyled = styled.img`
const AvatarWrapper = styled.div`
border-radius: 50%;
height: 100%;
- background-color: ${avatarBackground};
+ background-color: ${props =>
+ (props.source === ''
+ && props.userName !== ''
+ && namedAvatarBackground)
+ || avatarBackground};
& > svg {
display: block;
@@ -77,15 +75,13 @@ const NamedAvatar = styled.div`
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-
font-weight: 600;
font-size: ${props =>
- (props.size === 'max' && '72px') ||
- (props.size === 'big' && '34px') ||
- (props.size === 'medium' && '20px') ||
- (props.size === 'small' && '12px')
+ (props.size === 'max' && '72px') ||
+ (props.size === 'big' && '34px') ||
+ (props.size === 'medium' && '20px') ||
+ (props.size === 'small' && '12px')
};
-
color: ${whiteColor};
`;
@@ -93,99 +89,97 @@ const EditContainer = styled.div`
position: absolute;
width: 100%;
height: 100%;
-
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-
padding: 75% 16px 5px;
text-align: center;
- font-size: 14px;
line-height: 19px;
-
border-radius: 50%;
background: linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%);
`;
-const EditLink = styled.a`
- border-bottom: 1px dotted;
- font-family: Open Sans;
- font-style: normal;
- font-weight: 600;
- font-size: 14px;
- line-height: 19px;
-
- color: ${whiteColor} !important;
+const EditLink = styled.div`
+ & > a {
+ color: ${whiteColor} !important;
+
+ span {
+ color: ${whiteColor};
+ }
+ }
&:hover{
color: ${whiteColor} !important;
cursor: pointer;
}
-
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- -o-text-overflow: ellipsis;
- -moz-text-overflow: ellipsis;
- -webkit-text-overflow: ellipsis;
`;
const EmptyIcon = styled(Icons.CameraIcon)`
- border-radius: '50%';
+ border-radius: 50%;
`;
const getInitials = userName => {
- const initials = userName
- ? userName
- .split(/\s/)
- .reduce((response, word) => response += word.slice(0, 1), '')
- .substring(0, 2)
- : "";
- return initials;
+ const initials = userName
+ ? userName
+ .split(/\s/)
+ .reduce((response, word) => response += word.slice(0, 1), '')
+ .substring(0, 2)
+ : "";
+ return initials;
};
const Avatar = React.memo(props => {
- //console.log("Avatar render");
- const { size, source, userName, role, editing, editLabel, editAction } = props;
+ //console.log("Avatar render");
+ const { size, source, userName, role, editing, editLabel, editAction } = props;
- const initials = getInitials(userName);
+ const initials = getInitials(userName);
- return (
-
-
- {source !== '' && }
- {(source === '' && userName !== '') && {initials}}
- {(source === '' && userName === '') && }
-
- {editing && (size === 'max') &&
-
- {editLabel}
- }
-
- {role === 'guest' && }
- {role === 'admin' && }
- {role === 'owner' && }
-
-
- );
+ return (
+
+
+ {source !== '' && }
+ {(source === '' && userName !== '') && {initials}}
+ {(source === '' && userName === '') && }
+
+ {editing && (size === 'max') &&
+
+
+
+ {editLabel}
+
+
+ }
+
+ {role === 'guest' && }
+ {role === 'admin' && }
+ {role === 'owner' && }
+
+
+ );
});
Avatar.propTypes = {
- size: PropTypes.oneOf(['max', 'big', 'medium', 'small']),
- role: PropTypes.oneOf(['owner', 'admin', 'guest', 'user']),
- source: PropTypes.string,
- editLabel: PropTypes.string,
- userName: PropTypes.string,
- editing: PropTypes.bool
+ size: PropTypes.oneOf(['max', 'big', 'medium', 'small']),
+ role: PropTypes.oneOf(['owner', 'admin', 'guest', 'user']),
+ source: PropTypes.string,
+ editLabel: PropTypes.string,
+ userName: PropTypes.string,
+ editing: PropTypes.bool
};
Avatar.defaultProps = {
- size: 'medium',
- role: '',
- source: '',
- editLabel: 'Edit photo',
- userName: '',
- editing: false
+ size: 'medium',
+ role: '',
+ source: '',
+ editLabel: 'Edit photo',
+ userName: '',
+ editing: false
};
export default Avatar;
\ No newline at end of file