IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into feature/ASC.Files.Core

Browse Source
This commit is contained in:
pavelbannov 2020-07-16 14:28:39 +03:00
commit 224454fe3f
11 changed files with 76 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/install/docker/Dockerfile
View File

@ -166,7 +166,6 @@ RUN cd /app/onlyoffice/src/ && \
cd ../../../ && \
yarn install --cwd common/ASC.Thumbnails --frozen-lockfile && \
mkdir -p /var/www/services/thumb/client && cp -Rf common/ASC.Thumbnails/* /var/www/services/thumb/client && \
cd ../../../ && \
cd common/services/ASC.UrlShortener.Svc && \
dotnet -d publish -o /services/urlshortener/service && \
cd ../../../ && \

2
web/ASC.Web.Components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-components",
"version": "1.0.363",
"version": "1.0.364",
"description": "Ascensio System SIA component library",
"license": "AGPL-3.0",
"main": "dist/asc-web-components.js",

2
web/ASC.Web.Components/src/components/button/README.md
View File

@ -32,6 +32,6 @@ import { Button } from "asc-web-components";
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
| `scale` | `bool` | - | - | `false` | Scale width of button to 100% |
| `size` | `oneOf` | - | `base`, `middle`, `big` | `base` | Size of button |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `large` | `base` | Size of button |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `tabIndex` | `number` | - | - | `-1` | Button tab index |

2
web/ASC.Web.Components/src/components/button/all.buttons.stories.js
View File

@ -12,7 +12,7 @@ function onClick(e) {
const getButtons = (primary) => {
const sizes = ['big', 'medium', 'base'];
const sizes = ['large', 'big', 'medium', 'base'];
const states = ['isActivated', 'isHovered', 'isClicked', 'isDisabled'];
const baseButton = {

2
web/ASC.Web.Components/src/components/button/button.stories.js
View File

@ -13,7 +13,7 @@ storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => {
const sizeOptions = ['base', 'medium', 'big'];
const sizeOptions = ['base', 'medium', 'big', 'large'];
const iconNames = orderBy(Object.keys(Icons), [name => name.toLowerCase()], ['asc']);
const iconName = select("icon", ['', ...iconNames], '');

8
web/ASC.Web.Components/src/components/button/button.test.js
View File

@ -119,6 +119,10 @@ describe('<Button />', () => {
expect(wrapper.prop('size')).toEqual('big');
expect(wrapper.prop('primary')).toEqual(true);
wrapper.setProps({size: 'large', primary: true});
expect(wrapper.prop('size')).toEqual('large');
expect(wrapper.prop('primary')).toEqual(true);
wrapper.setProps({scale: true});
expect(wrapper.prop('scale')).toEqual(true);
});
@ -138,5 +142,9 @@ describe('<Button />', () => {
wrapper.setProps({size: 'medium', primary: true});
expect(wrapper.prop('size')).toEqual('medium');
expect(wrapper.prop('primary')).toEqual(true);
wrapper.setProps({size: 'large', primary: true});
expect(wrapper.prop('size')).toEqual('large');
expect(wrapper.prop('primary')).toEqual(true);
});
});

74
web/ASC.Web.Components/src/components/button/index.js
View File

@ -35,7 +35,7 @@ const ButtonWrapper = ({primary, scale, size, isHovered, isClicked, isDisabled,
ButtonWrapper.propTypes = {
label: PropTypes.string,
primary: PropTypes.bool,
size: PropTypes.oneOf(['base', 'medium', 'big']),
size: PropTypes.oneOf(['base', 'medium', 'big', 'large']),
scale: PropTypes.bool,
icon: PropTypes.node,
@ -53,19 +53,26 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
disabled: props.isDisabled || props.isLoading ? 'disabled' : '',
tabIndex: props.tabIndex
}))`
min-width: ${props =>
props.size === 'base' ? '60px' : '100px'
};
height: ${props =>
(props.size === 'large' && '44px') ||
(props.size === 'big' && '36px') ||
(props.size === 'medium' && '32px') ||
(props.size === 'base' && '24px')
(props.size === 'base' && '24px')
};
line-height: ${props =>
(props.size === 'big' && '19px') ||
(props.size === 'medium' && '18px') ||
(props.size === 'large' && '20px') ||
(props.size === 'big' && '18px') ||
(props.size === 'medium' && '15px') ||
(props.size === 'base' && '16px')
};
font-size: ${props =>
(props.size === 'large' && '16px') ||
(props.size === 'big' && '14px') ||
(props.size === 'medium' && '13px') ||
(props.size === 'base' && '12px')
@ -82,41 +89,51 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
${props => props.scale && `width: 100%;`}
padding: ${props =>
(props.size === 'big' && (props.primary
(props.size === 'large' && (props.primary
? (props.icon
? (props.label ? '8px 24px 9px 24px' : '8px 10px 9px 10px')
: (props.label ? '8px 28px 9px 28px' : '8px 10px 9px 10px')
? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
: (props.label ? '12px 20px 12px 20px' : '12px 20px 12px 20px')
)
: (props.icon
? (props.label ? '8px 24px 9px 24px' : '8px 10px 9px 10px')
: (props.label ? '8px 27px 9px 28px' : '8px 10px 9px 10px')
? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
: (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
))
) ||
(props.size === 'big' && (props.primary
? (props.icon
? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
: (props.label ? '8px 16px 8px 16px' : '8px 10px 9px 16px')
)
: (props.icon
? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
: (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
))
) ||
(props.size === 'medium' && (props.primary
? (props.icon
? (props.label ? '7px 24px 7px 24px' : '7px 10px 7px 10px')
: (props.label ? '7px 24px 7px 24px' : '7px 10px 7px 10px')
? (props.label ? '6px 16px 9px 16px' : '6px 16px 8px 16px')
: (props.label ? '7px 16px 8px 16px' : '6px 16px 8px 16px')
)
: (props.icon
? (props.label ? '7px 24px 7px 24px' : '7px 10px 7px 10px')
: (props.label ? '7px 24px 7px 24px' : '7px 10px 7px 10px')
? (props.label ? '6px 16px 9px 16px' : '6px 16px 8px 16px')
: (props.label ? '7px 16px 8px 16px' : '6px 16px 8px 16px')
))
) ||
(props.size === 'base' && (props.primary
? (props.icon
? (props.label ? '3px 20px 5px 20px' : '3px 5px 5px 5px')
: (props.label ? '3px 24px 5px 24px' : '3px 5px 5px 5px')
? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
: (props.label ? '4px 12px 5px 12px' : '4px 12px 5px 12px')
)
: (props.icon
? (props.label ? '3px 20px 5px 20px' : '3px 5px 5px 5px')
: (props.label ? '3px 24px 5px 24px' : '3px 5px 5px 5px')
? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
: (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
))
)
};
cursor: ${props => props.isDisabled || props.isLoading ? 'default !important' : 'pointer'};
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', normal;
border: none;
margin: 0;
display: inline-block;
@ -171,6 +188,15 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
vertical-align: text-top;
}
.loader {
vertical-align: ${props => ( props.size === 'large' || props.size === 'base' )
? 'middle'
: props.size === 'medium'
? 'text-bottom'
: 'text-top'};
}
}
${props => props.label && css`
.btnIcon,
.loader {
@ -184,7 +210,11 @@ const Icon = ({size, primary, icon}) => (
{ icon && React.cloneElement(icon,
{
isfill: true,
size: size === "big" ? "medium" : "small",
size: size === "large"
? "large"
: size === "big"
? "medium"
: "small",
color: primary ? "#FFFFFF" : '#333333'
})}
</div>
@ -207,7 +237,9 @@ const Button = React.forwardRef((props, ref) => {
<StyledButton innerRef={ref} {...props} >
{(isLoading || icon)
? (isLoading
? <Loader type="oval" size={size === "big" ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
? <Loader type="oval" size={
size === "large" ? '18px' : size === 'big' ? '16px' : '14px'
} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
: <Icon {...iconProps} />)
: ""
}
@ -219,7 +251,7 @@ const Button = React.forwardRef((props, ref) => {
Button.propTypes = {
label: PropTypes.string,
primary: PropTypes.bool,
size: PropTypes.oneOf(['base', 'medium', 'big']),
size: PropTypes.oneOf(['base', 'medium', 'big', 'large']),
scale: PropTypes.bool,
icon: PropTypes.node,

2
web/ASC.Web.Components/src/components/text-input/README.md
View File

@ -39,7 +39,7 @@ const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
| `onFocus` | `func` | - | - | - | Called when field is focused |
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. |
| `size` | `string` | | `base`, `middle`, `big`, `huge`, `large` | `base` | Supported size of the input fields. |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
| `value` | `string` | ✅ | - | - | Value of the input |

3
web/ASC.Web.Components/src/components/text-input/common-input-styles.js
View File

@ -6,7 +6,8 @@ const commonInputStyle = css`
(props.size === 'base' && '173px') ||
(props.size === 'middle' && '300px') ||
(props.size === 'big' && '350px') ||
(props.size === 'huge' && '500px')
(props.size === 'huge' && '500px') ||
(props.size === 'large' && '550px')
};
background-color: ${props => props.isDisabled ? '#F8F9F9' : '#fff'};
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};

11
web/ASC.Web.Components/src/components/text-input/index.js
View File

@ -37,13 +37,15 @@ const StyledInput = styled(Input).attrs((props) => ({
(props.size === 'base' && '20px') ||
(props.size === 'middle' && '20px') ||
(props.size === 'big' && '20px') ||
(props.size === 'huge' && '21px')
(props.size === 'huge' && '21px') ||
(props.size === 'large' && '21px')
};
font-size: ${props =>
(props.size === 'base' && '13px') ||
(props.size === 'middle' && '14px') ||
(props.size === 'big' && '16px') ||
(props.size === 'huge' && '18px')
(props.size === 'huge' && '18px') ||
(props.size === 'large' && '16px')
};
font-weight: ${props => props.fontWeight
@ -57,7 +59,8 @@ const StyledInput = styled(Input).attrs((props) => ({
(props.size === 'base' && '5px 7px') ||
(props.size === 'middle' && '8px 12px') ||
(props.size === 'big' && '8px 16px') ||
(props.size === 'huge' && '8px 20px')
(props.size === 'huge' && '8px 20px') ||
(props.size === 'large' && '11px 16px')
};
transition: all 0.2s ease 0s;
@ -110,7 +113,7 @@ TextInput.propTypes = {
mask: PropTypes.oneOfType([ PropTypes.array, PropTypes.func ]),
keepCharPositions: PropTypes.bool,
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'large']),
scale: PropTypes.bool,
onChange: PropTypes.func,

2
web/ASC.Web.Components/src/components/text-input/text-input.stories.js
View File

@ -9,7 +9,7 @@ import TextInput from '.';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
const sizeOptions = ['base', 'middle', 'big', 'huge', 'large'];
storiesOf('Components|Input', module)
.addDecorator(withKnobs)