Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
d4ed02e4ea
@ -2,12 +2,15 @@ import React, { useState, useCallback, useEffect } from 'react';
|
||||
import { withRouter } from "react-router";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import i18n from './i18n';
|
||||
import { Button, TextInput, PageLayout, Text, PasswordInput } from 'asc-web-components';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
import { Button, TextInput, PageLayout, Text, PasswordInput, FieldContainer } from 'asc-web-components';
|
||||
import styled from 'styled-components';
|
||||
import { welcomePageTitle } from './../../../helpers/customNames';
|
||||
|
||||
const ConfirmContainer = styled(Container)`
|
||||
const ConfirmContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.confirm-block-title {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
@ -15,8 +18,30 @@ const ConfirmContainer = styled(Container)`
|
||||
.login-row {
|
||||
margin: 23px 0 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
|
||||
margin-left: 13%;
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
margin-left: 22%;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.join-button {
|
||||
align-self: baseline;
|
||||
}
|
||||
`;
|
||||
const mdOptions = { size: 6, offset: 3 };
|
||||
|
||||
const passwordSettings = {
|
||||
minLength: 6,
|
||||
@ -100,23 +125,18 @@ const Confirm = (props) => {
|
||||
return (
|
||||
<ConfirmContainer>
|
||||
|
||||
<Row className='confirm-block-title'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<Text.Body as='p' fontSize={18}>{t('InviteTitle')}</Text.Body>
|
||||
</Col>
|
||||
</Row>
|
||||
<Text.Body className='confirm-block-title' as='p' fontSize={18}>{t('InviteTitle')}</Text.Body>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<div className='login-row'>
|
||||
<a href='/login'>
|
||||
<img className='login-row' src="images/dark_general.png" alt="Logo" />
|
||||
<img src="images/dark_general.png" alt="Logo" />
|
||||
</a>
|
||||
<Text.Body as='p' fontSize={24} color='#116d9d'>{t('CustomWelcomePageTitle', { welcomePageTitle })}</Text.Body>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<div className='input-container login-row'>
|
||||
|
||||
<FieldContainer isVertical={true} className=''>
|
||||
<TextInput
|
||||
id='name'
|
||||
name='name'
|
||||
@ -136,11 +156,11 @@ const Confirm = (props) => {
|
||||
}}
|
||||
onKeyDown={event => onKeyPress(event.target)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer isVertical={true} className=''>
|
||||
|
||||
<TextInput
|
||||
id='surname'
|
||||
name='surname'
|
||||
@ -159,11 +179,10 @@ const Confirm = (props) => {
|
||||
}}
|
||||
onKeyDown={event => onKeyPress(event.target)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer isVertical={true} className=''>
|
||||
<TextInput
|
||||
type="email"
|
||||
id='email'
|
||||
@ -183,11 +202,10 @@ const Confirm = (props) => {
|
||||
}}
|
||||
onKeyDown={event => onKeyPress(event.target)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer isVertical={true} className=''>
|
||||
<PasswordInput
|
||||
inputName="password"
|
||||
emailInputName="email"
|
||||
@ -197,6 +215,7 @@ const Confirm = (props) => {
|
||||
scale={true}
|
||||
tabIndex={4}
|
||||
maxLength={30}
|
||||
inputWidth='400px'
|
||||
hasError={!passwordValid}
|
||||
onChange={event => {
|
||||
setPassword(event.target.value);
|
||||
@ -216,11 +235,9 @@ const Confirm = (props) => {
|
||||
passwordSettings={passwordSettings}
|
||||
isDisabled={isLoading}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</FieldContainer>
|
||||
|
||||
<Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
<div className='login-row join-button'>
|
||||
<Button
|
||||
primary
|
||||
size='big'
|
||||
@ -230,13 +247,14 @@ const Confirm = (props) => {
|
||||
isLoading={isLoading}
|
||||
onClick={onSubmit}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* <Row className='login-row'>
|
||||
<Col sm="12" md={mdOptions}>
|
||||
|
||||
<Text.Body as='p' fontSize={14}>{t('LoginWithAccount')}</Text.Body>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
*/}
|
||||
</ConfirmContainer>
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-components",
|
||||
"version": "1.0.48",
|
||||
"version": "1.0.49",
|
||||
"description": "Ascensio System SIA component library",
|
||||
"license": "AGPL-3.0",
|
||||
"main": "dist/asc-web-components.cjs.js",
|
||||
|
@ -6,14 +6,18 @@ import isEqual from 'lodash/isEqual';
|
||||
import throttle from 'lodash/throttle';
|
||||
import FilterBlock from './filter-block';
|
||||
import SortComboBox from './sort-combobox';
|
||||
import { mobile } from '../../utils/device';
|
||||
|
||||
const StyledFilterInput = styled.div`
|
||||
min-width: 380px;
|
||||
width: 100%;
|
||||
`;
|
||||
const StyledSearchInput = styled.div`
|
||||
display: block;
|
||||
float: left;
|
||||
width: calc(80% - 8px);
|
||||
@media ${mobile} {
|
||||
width: calc(100% - 58px);
|
||||
}
|
||||
`;
|
||||
const StyledFilterBlock = styled.div`
|
||||
display: flex;
|
||||
|
@ -6,6 +6,7 @@ import DropDownItem from '../drop-down-item';
|
||||
import RadioButtonGroup from '../radio-button-group'
|
||||
import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import { mobile } from '../../utils/device'
|
||||
|
||||
const StyledIconButton = styled.div`
|
||||
transform: ${state => !state.sortDirection ? 'scale(1, -1)' : 'scale(1)'};
|
||||
@ -18,6 +19,14 @@ const StyledComboBox = styled(ComboBox)`
|
||||
.display-block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
width: 50px;
|
||||
.optionalBlock ~ div:first-child{
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
class SortComboBox extends React.Component {
|
||||
@ -27,6 +36,9 @@ class SortComboBox extends React.Component {
|
||||
this.state = {
|
||||
sortDirection: this.props.sortDirection
|
||||
}
|
||||
|
||||
this.combobox = React.createRef();
|
||||
|
||||
this.onChangeSortId = this.onChangeSortId.bind(this);
|
||||
this.onChangeSortDirection = this.onChangeSortDirection.bind(this);
|
||||
this.onButtonClick = this.onButtonClick.bind(this);
|
||||
@ -47,9 +59,15 @@ class SortComboBox extends React.Component {
|
||||
sortDirection: +e.target.value
|
||||
});
|
||||
typeof this.props.onChangeSortDirection === 'function' && this.props.onChangeSortDirection(+e.target.value);
|
||||
|
||||
}
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
//TODO
|
||||
/*const comboboxText = this.combobox.current.ref.current.children[0].children[1];
|
||||
if(comboboxText.scrollWidth > Math.round(comboboxText.getBoundingClientRect().width)){
|
||||
comboboxText.style.opacity = "0";
|
||||
}else{
|
||||
comboboxText.style.opacity = "1";
|
||||
}*/
|
||||
if (this.props.sortDirection !== nextProps.sortDirection) {
|
||||
this.setState({
|
||||
sortDirection: nextProps.sortDirection
|
||||
@ -97,6 +115,7 @@ class SortComboBox extends React.Component {
|
||||
);
|
||||
return (
|
||||
<StyledComboBox
|
||||
ref={this.combobox}
|
||||
options={[]}
|
||||
advancedOptions={advancedOptions}
|
||||
isDisabled={this.props.isDisabled}
|
||||
|
Loading…
Reference in New Issue
Block a user