Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
DASenkiv
commit
a3bf39843d
@ -13,15 +13,15 @@ Required to display user avatar on page.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
<Avatar size='max' role='admin' source='' pending={false} disabled={false} />
|
||||
<Avatar size='max' role='admin' source='' userName='' editing={false} />
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------ | -------- | :------: | ----------------------------------------- | --------- | ----------------------------------------------------- |
|
||||
| `size` | `oneOf` | - | `retina`, `max`, `big`, `medium`, `small` | `medium` | Tells what size avatar should be displayed |
|
||||
| `size` | `oneOf` | - | `max`, `big`, `medium`, `small` | `medium` | Tells what size avatar should be displayed |
|
||||
| `role` | `oneOf` | - | `owner`, `admin`, `guest`, `user` | ` ` | Adds a user role table |
|
||||
| `source` | `string` | - | - | ` ` | Avatar image source |
|
||||
| `pending` | `bool` | - | - | `false` | Reports account pending |
|
||||
| `disabled` | `bool` | - | - | `false` | Reports that account is disabled |
|
||||
| `userName` | `string` | - | - | ` ` | If you want to generate an avatar with initials |
|
||||
| `editing` | `bool` | - | - | `false` | Displays avatar edit layer |
|
||||
|
||||
@ -7,19 +7,24 @@ import { Avatar } from 'asc-web-components';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
|
||||
const roleOptions = ['owner', 'admin','guest','user'];
|
||||
const sizeOptions = ['retina', 'max', 'big', 'medium', 'small'];
|
||||
const sizeOptions = ['max', 'big', 'medium', 'small'];
|
||||
|
||||
storiesOf('Components|Avatar', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => (
|
||||
.add('base', () => {
|
||||
const size = select('size', sizeOptions, 'max');
|
||||
const editing = size === 'max' ? boolean('editing', false) : {};
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<Avatar
|
||||
size={select('size', sizeOptions, 'max')}
|
||||
size={size}
|
||||
role={select('role', roleOptions, 'admin')}
|
||||
source={text('source', '')}
|
||||
pending={boolean('pending', false)}
|
||||
disabled={boolean('disabled', false)}
|
||||
userName={text('userName', '')}
|
||||
editing={editing}
|
||||
/>
|
||||
</Section>
|
||||
));
|
||||
);
|
||||
});
|
||||
@ -2,54 +2,51 @@ import React from 'react'
|
||||
import styled, { css } from 'styled-components'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Icons } from '../icons'
|
||||
import Link from '../link'
|
||||
|
||||
const whiteColor = '#FFFFFF';
|
||||
const avatarBackground = '#ECEEF1';
|
||||
|
||||
const StyledAvatar = styled.div`
|
||||
position: relative;
|
||||
width: ${props =>
|
||||
(props.size === 'retina' && '360px') ||
|
||||
(props.size === 'max' && '200px') ||
|
||||
(props.size === 'max' && '160px') ||
|
||||
(props.size === 'big' && '82px') ||
|
||||
(props.size === 'medium' && '48px') ||
|
||||
(props.size === 'small' && '32px')
|
||||
};
|
||||
height: ${props =>
|
||||
(props.size === 'retina' && '360px') ||
|
||||
(props.size === 'max' && '200px') ||
|
||||
(props.size === 'max' && '160px') ||
|
||||
(props.size === 'big' && '82px') ||
|
||||
(props.size === 'medium' && '48px') ||
|
||||
(props.size === 'small' && '32px')
|
||||
};
|
||||
border: 1px solid ${props => (props.size === 'max') ? '#bfbfbf' : '#c7c7c7'};
|
||||
border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
|
||||
-moz-border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
|
||||
-webkit-border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
|
||||
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
`;
|
||||
|
||||
const Role = styled.div`
|
||||
const RoleWrapper = styled.div`
|
||||
position: absolute;
|
||||
left: ${props =>
|
||||
(props.size === 'retina' && '8px') ||
|
||||
(props.size === 'max' && '6px') ||
|
||||
(props.size === 'big' && '-2px') ||
|
||||
(props.size === 'medium' && '-2px') ||
|
||||
(props.size === 'small' && '-2px')
|
||||
};
|
||||
bottom: ${props =>
|
||||
(props.size === 'retina' && '8px') ||
|
||||
(props.size === 'max' && '6px') ||
|
||||
(props.size === 'big' && '4px') ||
|
||||
(props.size === 'medium' && '4px') ||
|
||||
(props.size === 'small' && '4px')
|
||||
};
|
||||
width: ${props =>
|
||||
(props.size === 'retina' && '40px') ||
|
||||
(props.size === 'max' && '22px') ||
|
||||
(props.size === 'big' && '12px') ||
|
||||
(props.size === 'medium' && '12px') ||
|
||||
(props.size === 'small' && '12px')
|
||||
};
|
||||
height: ${props =>
|
||||
(props.size === 'retina' && '40px') ||
|
||||
(props.size === 'max' && '22px') ||
|
||||
(props.size === 'big' && '12px') ||
|
||||
(props.size === 'medium' && '12px') ||
|
||||
@ -57,84 +54,120 @@ const Role = styled.div`
|
||||
};
|
||||
`;
|
||||
|
||||
const Pending = styled.div`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: ${props => (props.size === 'retina' || props.size === 'max') ? 'none repeat scroll 0 0 white' : 'transparent'};
|
||||
border: ${props => (props.size === 'retina' || props.size === 'max') ? '1px solid #919191' : 'none'};
|
||||
color: #7D7D7D;
|
||||
opacity: ${props => (props.size === 'retina' || props.size === 'max') ? '0.9' : '1'};
|
||||
text-align: center;
|
||||
width: auto;
|
||||
border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
padding: 42px 16px 5px;
|
||||
|
||||
& > svg {
|
||||
position: absolute;
|
||||
top: ${props => (props.size === 'retina' || props.size === 'max') ? '40%' : '50%'};
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
`;
|
||||
|
||||
const Disabled = styled(Pending)`
|
||||
color: #a83200;
|
||||
`;
|
||||
|
||||
const ImageStyled = styled.img`
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
`;
|
||||
|
||||
const AvatarWrapper= styled.div`
|
||||
border-radius: 50%;
|
||||
height: 100%;
|
||||
background-color: ${avatarBackground};
|
||||
|
||||
& > svg {
|
||||
display: block;
|
||||
width: 50% !important;
|
||||
height: 100% !important;
|
||||
margin: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const NamedAvatar = styled.div`
|
||||
position: absolute;
|
||||
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')
|
||||
};
|
||||
line-height: 120px;
|
||||
|
||||
color: ${whiteColor};
|
||||
`;
|
||||
|
||||
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%);
|
||||
|
||||
& > a {
|
||||
color: ${whiteColor} !important;
|
||||
|
||||
&:hover{
|
||||
color: ${whiteColor} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Avatar = props => {
|
||||
const {size, source, role, pending, disabled, pendingLabel, disabledLabel} = props;
|
||||
const {size, source, userName, role, editing, editLabel} = props;
|
||||
|
||||
const round = {
|
||||
borderRadius: '50%'
|
||||
};
|
||||
|
||||
const setNamedAvatar = userName => {
|
||||
let initials = userName.split(/\s/).reduce((response,word)=> response+=word.slice(0,1),'').substring(0,3)
|
||||
|
||||
return (
|
||||
<NamedAvatar {...props}>{initials}</NamedAvatar>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledAvatar {... props}>
|
||||
{source === '' && <Icons.PeopleIcon size='scale' />}
|
||||
{source !== '' && <ImageStyled src={source} />}
|
||||
<Role {... props}>
|
||||
<StyledAvatar {...props}>
|
||||
<AvatarWrapper {...props}>
|
||||
{source !== '' && <ImageStyled src={source} />}
|
||||
{(source === '' && userName !== '') && setNamedAvatar(userName)}
|
||||
{(source === '' && userName === '') && <Icons.CameraIcon size='scale' style={round} />}
|
||||
</AvatarWrapper>
|
||||
{editing && (size === 'max') &&
|
||||
<EditContainer {...props}>
|
||||
<Link type='action' isHovered={true}>{editLabel}</Link>
|
||||
</EditContainer>}
|
||||
<RoleWrapper {... props}>
|
||||
{role === 'guest' && <Icons.GuestIcon size='scale' />}
|
||||
{role === 'admin' && <Icons.AdministratorIcon size='scale' />}
|
||||
{role === 'owner' && <Icons.OwnerIcon size='scale' />}
|
||||
</Role>
|
||||
{pending &&
|
||||
<Pending {... props}>
|
||||
{(size !== 'max' || size !== 'retina') && <Icons.CalendarIcon size={size === 'small' ? 'small' : 'big'}/>}
|
||||
{(size === 'max' || size === 'retina') && pendingLabel}
|
||||
</Pending>}
|
||||
{disabled &&
|
||||
<Disabled {... props}>
|
||||
{(size !== 'max' || size !== 'retina') && <Icons.CalendarIcon size={size === 'small' ? 'small' : 'big'} color='#a83200' />}
|
||||
{(size === 'max' || size === 'retina') && disabledLabel}
|
||||
</Disabled>}
|
||||
</RoleWrapper>
|
||||
</StyledAvatar>
|
||||
);
|
||||
};
|
||||
|
||||
Avatar.propTypes = {
|
||||
size: PropTypes.oneOf(['retina', 'max', 'big', 'medium', 'small']),
|
||||
size: PropTypes.oneOf(['max', 'big', 'medium', 'small']),
|
||||
role: PropTypes.oneOf(['owner', 'admin','guest', 'user']),
|
||||
pending: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
source: PropTypes.string,
|
||||
pendingLabel: PropTypes.string,
|
||||
disabledLabel: PropTypes.string
|
||||
editLabel: PropTypes.string,
|
||||
userName: PropTypes.string,
|
||||
editing: PropTypes.bool
|
||||
};
|
||||
|
||||
Avatar.defaultProps = {
|
||||
size: 'medium',
|
||||
role: '',
|
||||
pending: false,
|
||||
disabled: false,
|
||||
source: '',
|
||||
pendingLabel: 'Pending',
|
||||
disabledLabel: 'Disabled'
|
||||
editLabel: 'Edit photo',
|
||||
userName: '',
|
||||
editing: false
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
Loading…
Reference in New Issue
Block a user