Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
d95cab19f3
@ -23,5 +23,5 @@ Required to display user avatar on page.
|
|||||||
| `size` | `oneOf` | - | `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 |
|
| `role` | `oneOf` | - | `owner`, `admin`, `guest`, `user` | ` ` | Adds a user role table |
|
||||||
| `source` | `string` | - | - | ` ` | Avatar image source |
|
| `source` | `string` | - | - | ` ` | Avatar image source |
|
||||||
| `userName` | `string` | - | - | ` ` | If you want to generate an avatar with initials |
|
| `userName` | `string` | - | - | ` ` | If you want to create an avatar with initials. Only the first letter of the first two words of the line is used.|
|
||||||
| `editing` | `bool` | - | - | `false` | Displays avatar edit layer |
|
| `editing` | `bool` | - | - | `false` | Displays avatar edit layer |
|
||||||
|
@ -14,7 +14,7 @@ storiesOf('Components|Avatar', module)
|
|||||||
.addDecorator(withReadme(Readme))
|
.addDecorator(withReadme(Readme))
|
||||||
.add('base', () => {
|
.add('base', () => {
|
||||||
const size = select('size', sizeOptions, 'max');
|
const size = select('size', sizeOptions, 'max');
|
||||||
const editing = size === 'max' ? boolean('editing', false) : {};
|
const editing = size === 'max' ? boolean('editing', false) : false;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Section>
|
<Section>
|
@ -28,64 +28,64 @@ storiesOf('Components|Link', module)
|
|||||||
</Row>
|
</Row>
|
||||||
<Row style={rowStyle}>
|
<Row style={rowStyle}>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "page" color = "black" href="https://github.com" isBold = {true}>Bold black page link</Link>
|
<Link type = "page" color = "black" href="https://github.com" isBold = {true} text = 'Bold black page link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "action" color = "black" isBold = {true}>Bold black action link</Link>
|
<Link type = "action" color = "black" isBold = {true} text = 'Bold black action link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col><Link type = "action" color = "black" dropdownType = 'alwaysDotted'>Simple dropdown</Link></Col>
|
<Col><Link type = "action" color = "black" dropdownType = 'alwaysDotted' text = 'Simple dropdown' /></Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row style={rowStyle}>
|
<Row style={rowStyle}>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "page" color = "black" href="https://github.com">Black page link</Link>
|
<Link type = "page" color = "black" href="https://github.com" text = 'Black page link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "action" color = "black">Black action link</Link>
|
<Link type = "action" color = "black" text = 'Black action link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col> <Link type = "action" color = "gray" dropdownType = 'appearDottedAfterHover'>Gray dropdown and dotted appear after hover</Link></Col>
|
<Col> <Link type = "action" color = "gray" dropdownType = 'appearDottedAfterHover' text = 'Gray dropdown and dotted appear after hover' /></Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row style={rowStyle}>
|
<Row style={rowStyle}>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "page" color = "black" href="https://github.com" isHovered = {true}>Black hovered page link</Link>
|
<Link type = "page" color = "black" href="https://github.com" isHovered = {true} text = 'Black hovered page link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "action" color = "black" isHovered = {true}>Black hovered action link</Link>
|
<Link type = "action" color = "black" isHovered = {true} text = 'Black hovered action link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col></Col>
|
<Col></Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row style={rowStyle}>
|
<Row style={rowStyle}>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "page" color = "gray" href="https://github.com">Gray page link</Link>
|
<Link type = "page" color = "gray" href="https://github.com" text = 'Gray page link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "action" color = "gray">Gray action link</Link>
|
<Link type = "action" color = "gray" text = 'Gray action link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col></Col>
|
<Col></Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row style={rowStyle}>
|
<Row style={rowStyle}>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "page" color = "gray" href="https://github.com" isHovered = {true}>Gray hovered page link</Link>
|
<Link type = "page" color = "gray" href="https://github.com" isHovered = {true} text = 'Gray hovered page link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "action" color = "gray" isHovered = {true}>Gray hovered action link</Link>
|
<Link type = "action" color = "gray" isHovered = {true} text = 'Gray hovered action link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col></Col>
|
<Col></Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row style={rowStyle}>
|
<Row style={rowStyle}>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "page" color = "blue" href="https://github.com">Blue page link</Link>
|
<Link type = "page" color = "blue" href="https://github.com" text = 'Blue page link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "action" color = "blue">Blue action link</Link>
|
<Link type = "action" color = "blue" text = 'Blue action link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col></Col>
|
<Col></Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row style={rowStyle}>
|
<Row style={rowStyle}>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "page" color = "blue" href="https://github.com" isHovered = {true}>Blue hovered page link</Link>
|
<Link type = "page" color = "blue" href="https://github.com" isHovered = {true} text = 'Blue hovered page link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Link type = "action" color = "blue" isHovered = {true}>Blue hovered action link</Link>
|
<Link type = "action" color = "blue" isHovered = {true} text = 'Blue hovered action link' />
|
||||||
</Col>
|
</Col>
|
||||||
<Col></Col>
|
<Col></Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
@ -32,6 +32,8 @@ It is a link with 2 types:
|
|||||||
| `isTextOverflow` | `bool` | - | - | `true` |Activate or deactivate *text-overflow* CSS property with ellipsis (' … ') value |
|
| `isTextOverflow` | `bool` | - | - | `true` |Activate or deactivate *text-overflow* CSS property with ellipsis (' … ') value |
|
||||||
| `isHovered` | `bool` | - | - | `false` | Show hovered state of link. Only for demo |
|
| `isHovered` | `bool` | - | - | `false` | Show hovered state of link. Only for demo |
|
||||||
|
|
|
|
||||||
|
| `text` | `string` | - | - | - | Text of link |
|
||||||
|
|
|
||||||
|
|
||||||
#### Properties (only for \'action\' type of link)
|
#### Properties (only for \'action\' type of link)
|
||||||
|
|
||||||
|
@ -33,12 +33,13 @@ return (
|
|||||||
fontSize={number('fontSize', 12)}
|
fontSize={number('fontSize', 12)}
|
||||||
href={text('href', undefined)}
|
href={text('href', undefined)}
|
||||||
isBold={boolean('isBold', false)}
|
isBold={boolean('isBold', false)}
|
||||||
title={text('title', '')}
|
title={text('title', undefined )}
|
||||||
target={select('target', target, '_top')}
|
target={select('target', target, '_top')}
|
||||||
isTextOverflow={boolean('isTextOverflow', false)}
|
isTextOverflow={boolean('isTextOverflow', false)}
|
||||||
isHovered={boolean('isHovered', false)}
|
isHovered={boolean('isHovered', false)}
|
||||||
|
text={text('text', 'Simple link')}
|
||||||
{...userProps}
|
{...userProps}
|
||||||
>Simple link</Link>
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -125,7 +125,7 @@ const Avatar = props => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const setNamedAvatar = userName => {
|
const setNamedAvatar = userName => {
|
||||||
let initials = userName.split(/\s/).reduce((response,word)=> response+=word.slice(0,1),'').substring(0,3)
|
let initials = userName.split(/\s/).reduce((response,word)=> response+=word.slice(0,1),'').substring(0,2)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NamedAvatar {...props}>{initials}</NamedAvatar>
|
<NamedAvatar {...props}>{initials}</NamedAvatar>
|
||||||
@ -141,7 +141,7 @@ const Avatar = props => {
|
|||||||
</AvatarWrapper>
|
</AvatarWrapper>
|
||||||
{editing && (size === 'max') &&
|
{editing && (size === 'max') &&
|
||||||
<EditContainer {...props}>
|
<EditContainer {...props}>
|
||||||
<Link type='action' isHovered={true}>{editLabel}</Link>
|
<Link type='action' isHovered={true} text={editLabel}/>
|
||||||
</EditContainer>}
|
</EditContainer>}
|
||||||
<RoleWrapper {... props}>
|
<RoleWrapper {... props}>
|
||||||
{role === 'guest' && <Icons.GuestIcon size='scale' />}
|
{role === 'guest' && <Icons.GuestIcon size='scale' />}
|
||||||
|
@ -2,6 +2,8 @@ import React from 'react';
|
|||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const SimpleLink = ({ rel, isBold, fontSize, isTextOverflow, isHovered, type, color, text, target, dropdownType, ...props }) => <a {...props}>{text}</a>;
|
||||||
|
|
||||||
const arrowDropdown = css`
|
const arrowDropdown = css`
|
||||||
border-left: 4px solid transparent;
|
border-left: 4px solid transparent;
|
||||||
border-right: 4px solid transparent;
|
border-right: 4px solid transparent;
|
||||||
@ -43,7 +45,7 @@ const dottedCss = css`
|
|||||||
border-bottom: 1px dotted;
|
border-bottom: 1px dotted;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledLink = styled.a.attrs((props) => ({
|
const StyledLink = styled(SimpleLink).attrs((props) => ({
|
||||||
href: props.href,
|
href: props.href,
|
||||||
target: props.target,
|
target: props.target,
|
||||||
rel: props.target === '_blank' && 'noopener noreferrer',
|
rel: props.target === '_blank' && 'noopener noreferrer',
|
||||||
@ -125,6 +127,7 @@ Link.propTypes = {
|
|||||||
isTextOverflow: PropTypes.bool,
|
isTextOverflow: PropTypes.bool,
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
target: PropTypes.oneOf(['_blank', '_self', '_parent', '_top']),
|
target: PropTypes.oneOf(['_blank', '_self', '_parent', '_top']),
|
||||||
|
text: PropTypes.string,
|
||||||
title: PropTypes.string,
|
title: PropTypes.string,
|
||||||
type: PropTypes.oneOf(['action', 'page'])
|
type: PropTypes.oneOf(['action', 'page'])
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user