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

Merge pull request #14 from ONLYOFFICE/refactoring/text-heading

Browse Source 
Refactoring/text heading
This commit is contained in:
Daniil Senkiv 2019-12-11 13:54:11 +03:00 committed by GitHub
commit fbe1c4f1ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
104 changed files with 494 additions and 427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
products/ASC.People/Client/src/App.js
View File

@ -20,7 +20,7 @@ const App = ({ settings }) => {
<Router history={history}>
<StudioLayout>
<Suspense
fallback={<Loader className="pageLoader" type="rombs" size={40} />}
fallback={<Loader className="pageLoader" type="rombs" size='40px' />}
>
<Switch>
<Redirect exact from="/" to={`${homepage}`} />

5
products/ASC.People/Client/src/components/Article/Header/index.js
View File

@ -1,11 +1,10 @@
import React from 'react';
import { connect } from 'react-redux';
import { Header } from 'asc-web-components';
import { store } from 'asc-web-common';
import { store, Headline } from 'asc-web-common';
const { getCurrentModule } = store.auth.selectors;
const ArticleHeaderContent = ({currentModuleName}) => {
return <Header type="menu">{currentModuleName}</Header>;
return <Headline type="menu">{currentModuleName}</Headline>;
}
const mapStateToProps = (state) => {

5
products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js
View File

@ -2,7 +2,8 @@ import React from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router";
import PropTypes from "prop-types";
import { IconButton, Header } from "asc-web-components";
import { IconButton } from "asc-web-components";
import { Headline } from 'asc-web-common';
import { withTranslation } from "react-i18next";
import { department } from "./../../../../../helpers/customNames";
import { resetGroup } from "../../../../../store/group/actions";
@ -36,7 +37,7 @@ class SectionHeaderContent extends React.Component {
size="16"
onClick={this.onBackClick}
/>
<Header type="content" style={textStyle}>{headerText}</Header>
<Headline type="content" style={textStyle}>{headerText}</Headline>
</div>
);
}

2
products/ASC.People/Client/src/components/pages/GroupAction/index.js
View File

@ -50,7 +50,7 @@ class GroupAction extends React.Component {
articleHeaderContent={<ArticleHeaderContent />}
articleMainButtonContent={<ArticleMainButtonContent />}
articleBodyContent={<ArticleBodyContent />}
sectionBodyContent={<Loader className="pageLoader" type="rombs" size={40} />}
sectionBodyContent={<Loader className="pageLoader" type="rombs" size='40px' />}
/>
}
</I18nextProvider>

12
products/ASC.People/Client/src/components/pages/Home/Section/Body/userContent.js
View File

@ -29,7 +29,7 @@ const getFormatedGroups = (user, status) => {
containerWidth='160px'
type='action'
title={temp[0].label}
fontSize={12}
fontSize='12px'
color={linkColor}
onClick={temp[0].onClick}
>
@ -41,7 +41,7 @@ const getFormatedGroups = (user, status) => {
isTextOverflow={true}
containerWidth='160px'
title={temp[0].label}
fontSize={12}
fontSize='12px'
color={linkColor}
data={temp}
>
@ -80,7 +80,7 @@ const UserContent = ({ user, history, settings }) => {
return (
<RowContent>
<Link type='page' title={displayName} isBold={true} fontSize={15} color={nameColor} onClick={onUserNameClick} >{displayName}</Link>
<Link type='page' title={displayName} isBold={true} fontSize='15px' color={nameColor} onClick={onUserNameClick} >{displayName}</Link>
<>
{status === 'pending' && <Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />}
{status === 'disabled' && <Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />}
@ -91,7 +91,7 @@ const UserContent = ({ user, history, settings }) => {
style={headDepartmentStyle}
as="span"
color={sideInfoColor}
fontSize={12}
fontSize='12px'
title={title}
truncate={true}
>
@ -100,8 +100,8 @@ const UserContent = ({ user, history, settings }) => {
: <div style={headDepartmentStyle}></div>
}
{groups}
<Link type='page' title={mobilePhone} fontSize={12} color={sideInfoColor} onClick={onPhoneClick} >{mobilePhone}</Link>
<Link containerWidth='220px' type='page' title={email} fontSize={12} color={sideInfoColor} onClick={onEmailClick} >{email}</Link>
<Link type='page' title={mobilePhone} fontSize='12px' color={sideInfoColor} onClick={onPhoneClick} >{mobilePhone}</Link>
<Link containerWidth='220px' type='page' title={email} fontSize='12px' color={sideInfoColor} onClick={onEmailClick} >{email}</Link>
</RowContent>
);
};

6
products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
View File

@ -4,11 +4,11 @@ import { withRouter } from "react-router";
import {
GroupButtonsMenu,
DropDownItem,
Header,
toastr,
ContextMenuButton,
IconButton
} from "asc-web-components";
import { Headline } from 'asc-web-common';
import { connect } from "react-redux";
import {
getSelectedGroup,
@ -210,7 +210,7 @@ const SectionHeaderContent = props => {
<div className="header-container">
{group ? (
<>
<Header type="content" truncate={true}>{group.name}</Header>
<Headline type="content" truncate={true}>{group.name}</Headline>
{isAdmin && (
<ContextMenuButton
directionX="right"
@ -225,7 +225,7 @@ const SectionHeaderContent = props => {
</>
) : (
<>
<Header type="content">Departments</Header>
<Headline type="content">Departments</Headline>
{isAdmin && (
<IconButton
className="add-group-button"

4
products/ASC.People/Client/src/components/pages/Home/index.js
View File

@ -104,10 +104,10 @@ class PureHome extends React.Component {
<RequestLoader
visible={this.state.isLoading}
zIndex={256}
loaderSize={16}
loaderSize='16px'
loaderColor={"#999"}
label={`${t('LoadingProcessing')} ${t('LoadingDescription')}`}
fontSize={12}
fontSize='12px'
fontColor={"#999"}
/>
<PageLayout

8
products/ASC.People/Client/src/components/pages/Import/Section/Body/index.js
View File

@ -235,7 +235,11 @@ class SectionBodyContent extends React.Component {
return (
<>
<Text fontSize={14} >
<Text fontSize='18px' >
Functionality at development stage.
</Text>
<br />
<Text fontSize='14px' >
Files are formatted according to <b>CSV RFC 4180</b> rules. <br />
<b>Column Order:</b> FirstName, LastName, Email. <br />
Comma delimiter, strings in unix format. <br />
@ -249,7 +253,7 @@ class SectionBodyContent extends React.Component {
</StyledFileInput>
</SelectSourceWrapper>
<br />
<Text fontSize={14} >
<Text fontSize='14px' >
Ready for import: {splittedLines.length} of {splittedLines.length}
</Text>
<LoadCsvWrapper>

7
products/ASC.People/Client/src/components/pages/Import/Section/Header/index.js
View File

@ -1,6 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { Header, IconButton, Badge } from "asc-web-components";
import { IconButton } from "asc-web-components";
import { Headline } from 'asc-web-common';
import { withRouter } from "react-router";
import { useTranslation } from 'react-i18next';
@ -28,9 +29,9 @@ const SectionHeaderContent = props => {
onClick={() => history.push(settings.homepage)}
/>
</div>
<Header type="content" truncate={true} style={textStyle}>
<Headline type="content" truncate={true} style={textStyle}>
Add users to the portal (Development)
</Header>
</Headline>
</div>
);
};

6
products/ASC.People/Client/src/components/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js
View File

@ -77,7 +77,7 @@ const getFormattedDepartments = departments => {
const formattedDepartments = departments.map((department, index) => {
return (
<span key={index}>
<Link type="page" fontSize={13} isHovered={true} onClick={onGroupClick.bind(this, department)}>
<Link type="page" fontSize='13px' isHovered={true} onClick={onGroupClick.bind(this, department)}>
{department.name}
</Link>
{departments.length - 1 !== index ? ", " : ""}
@ -207,7 +207,7 @@ class ProfileInfo extends React.PureComponent {
const formatedDepartments = department && getFormattedDepartments(groups);
const supportEmail = "documentation@onlyoffice.com";
const tooltipLanguage =
<Text fontSize={13}>
<Text fontSize='13px'>
<Trans i18nKey="NotFoundLanguage" i18n={i18n}>
"In case you cannot find your language in the list of the
available ones, feel free to write to us at
@ -248,7 +248,7 @@ class ProfileInfo extends React.PureComponent {
}
<Link
type="page"
fontSize={13}
fontSize='13px'
isHovered={true}
title={email}
onClick={this.onEmailClick.bind(email)}

6
products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js
View File

@ -11,8 +11,8 @@ import {
Button,
ModalDialog,
AvatarEditor,
Header
} from "asc-web-components";
import { Headline } from 'asc-web-common';
import { withRouter } from "react-router";
import {
getUserStatus,
@ -44,7 +44,7 @@ const wrapperStyle = {
alignItems: "center"
};
const HeaderContainer = styled(Header)`
const HeaderContainer = styled(Headline)`
margin-left: 16px;
margin-right: 16px;
max-width: calc(100vw - 430px);
@ -318,7 +318,7 @@ class SectionHeaderContent extends React.PureComponent {
User <b>{user.displayName}</b> will be deleted.
</Text>
<Text>Note: this action cannot be undone.</Text>
<Text color="#c30" fontSize="18" style={{ margin: "20px 0" }}>
<Text color="#c30" fontSize="18px" style={{ margin: "20px 0" }}>
Warning!
</Text>
<Text>

2
products/ASC.People/Client/src/components/pages/Profile/index.js
View File

@ -57,7 +57,7 @@ class PureProfile extends React.Component {
sectionHeaderContent: <SectionHeaderContent />,
sectionBodyContent: <SectionBodyContent />
} : {
sectionBodyContent: <Loader className="pageLoader" type="rombs" size={40} />
sectionBodyContent: <Loader className="pageLoader" type="rombs" size='40px' />
};
return <PageLayout {...articleProps} {...sectionProps} />;

4
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/InfoFieldContainer.js
View File

@ -1,12 +1,12 @@
import React from "react";
import styled from "styled-components";
import { Header } from "asc-web-components";
import { Headline } from 'asc-web-common';
const Container = styled.div`
margin: 0 0 40px 0;
`;
const StyledHeader = styled(Header)`
const StyledHeader = styled(Headline)`
margin: 0 0 24px 0;
line-height: unset;
`;

2
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js
View File

@ -385,7 +385,7 @@ class CreateUserForm extends React.Component {
helpButtonHeaderContent={t("Mail")}
tooltipContent={
<Text fontSize={13} as="div">
<Text fontSize='13px' as="div">
<Trans i18nKey="EmailPopupHelper" i18n={i18n}>
The main e-mail is needed to restore access to the portal in case of loss of the password and send notifications.
<p className="tooltip_email" style={{margin: "1rem 0"}} >

12
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/updateUserForm.js
View File

@ -459,26 +459,26 @@ class UpdateUserForm extends React.Component {
<>
<Text
style={{paddingBottom: 17}}
fontSize={13}>
fontSize='13px'>
{t("ProfileTypePopupHelper")}
</Text>
<Text fontSize={12} as="div">
<Text fontSize='12px' as="div">
<Table>
<tbody>
<tr>
<Th>
<Text isBold fontSize={13}>
<Text isBold fontSize='13px'>
{t("ProductsAndInstruments_Products")}
</Text>
</Th>
<Th>
<Text isBold fontSize={13}>
<Text isBold fontSize='13px'>
{t("Employee")}
</Text>
</Th>
<Th>
<Text isBold fontSize={13}>
<Text isBold fontSize='13px'>
{t("GuestCaption")}
</Text>
</Th>
@ -568,7 +568,7 @@ class UpdateUserForm extends React.Component {
helpButtonHeaderContent={t("Mail")}
tooltipContent={
<Text fontSize={13} as="div">
<Text fontSize='13px' as="div">
<Trans i18nKey="EmailPopupHelper" i18n={i18n}>
The main e-mail is needed to restore access to the portal in case of loss of the password and send notifications.
<p style={{margin: "1rem 0"/*, height: "0", visibility: "hidden"*/}}>

9
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js
View File

@ -2,16 +2,17 @@ import React, { useCallback } from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import { withRouter } from "react-router";
import { IconButton, Header, utils } from 'asc-web-components';
import { IconButton, utils } from 'asc-web-components';
import { Headline } from 'asc-web-common';
import { useTranslation } from 'react-i18next';
import {typeUser, typeGuest } from './../../../../../helpers/customNames';
import { typeUser, typeGuest } from './../../../../../helpers/customNames';
const Wrapper = styled.div`
display: flex;
align-Items: center;
`;
const HeaderContainer = styled(Header)`
const HeaderContainer = styled(Headline)`
margin-left: 16px;
max-width: calc(100vw - 430px);
@media ${utils.device.tablet} {
@ -38,7 +39,7 @@ const SectionHeaderContent = (props) => {
return (
<Wrapper>
<IconButton iconName={'ArrowPathIcon'} size="16" onClick={onClick}/>
<IconButton iconName={'ArrowPathIcon'} size="16" onClick={onClick} />
<HeaderContainer type='content' truncate={true}>{headerText}</HeaderContainer>
</Wrapper>
);

2
products/ASC.People/Client/src/components/pages/ProfileAction/index.js
View File

@ -66,7 +66,7 @@ class ProfileAction extends React.Component {
}
: {
sectionBodyContent: (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
)
};

7
products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js
View File

@ -1,6 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { Header, IconButton } from "asc-web-components";
import { IconButton } from "asc-web-components";
import { Headline } from 'asc-web-common';
import { withRouter } from "react-router";
import { useTranslation } from 'react-i18next';
@ -28,12 +29,12 @@ const SectionHeaderContent = props => {
onClick={() => history.push(settings.homepage)}
/>
</div>
<Header type="content" truncate={true} style={textStyle}>
<Headline type="content" truncate={true} style={textStyle}>
{/* {profile.displayName}
{profile.isLDAP && ` (${t('LDAPLbl')})`}
- */}
{t('ReassignmentData')}
</Header>
</Headline>
</div>
);
};

14
products/ASC.People/Client/yarn.lock
View File

@ -2473,13 +2473,13 @@ asap@~2.0.6:
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
"asc-web-common@file:../../../packages/asc-web-common":
version "1.0.13"
version "1.0.12"
dependencies:
axios "^0.19.0"
history "4.9.0"
"asc-web-components@file:../../../packages/asc-web-components":
version "1.0.219"
version "1.0.218"
dependencies:
email-addresses "^3.1.0"
html-to-react "^1.4.2"
@ -2891,6 +2891,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap@4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@ -6954,6 +6959,11 @@ jest@24.9.0:
import-local "^2.0.0"
jest-cli "^24.9.0"
jquery@3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
js-base64@^2.1.8:
version "2.5.1"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"

2
web/ASC.Web.Client/src/App.js
View File

@ -13,7 +13,7 @@ const App = () => {
<Router history={history}>
<StudioLayout>
<Suspense
fallback={<Loader className="pageLoader" type="rombs" size={40} />}
fallback={<Loader className="pageLoader" type="rombs" size='40px' />}
>
<Switch>
<PublicRoute exact path={["/login","/login/error=:error", "/login/confirmed-email=:confirmedEmail"]} component={Login} />

28
web/ASC.Web.Client/src/components/pages/About/index.js
View File

@ -74,24 +74,24 @@ const Body = ({language}) => {
</p>
<VersionStyle>
<Text className="text_p" fontSize={14} color="#A3A9AE">
<Text className="text_p" fontSize='14px' color="#A3A9AE">
{`${t("AboutCompanyVersion")}: ${version.version}`}
</Text>
</VersionStyle>
<Text className="copyright-line" fontSize={14}>
<Text className="copyright-line" fontSize='14px'>
{t("AboutCompanyLicensor")}
</Text>
<Text className="text_p" fontSize={16} isBold={true}>
<Text className="text_p" fontSize='16px' isBold={true}>
Ascensio System SIA
</Text>
<Style>
<Text className="text_p" fontSize={12}>
<Text className="text_p" fontSize='12px'>
<Text
className="text_span"
fontSize={12}
fontSize='12px'
as="span"
color="#A3A9AE"
>
@ -101,21 +101,21 @@ const Body = ({language}) => {
</Text>
<Text
fontSize={12}
fontSize='12px'
className="text_span"
as="span"
color="#A3A9AE"
>
{t("AboutCompanyEmailTitle")}:{" "}
<Link href="mailto:support@onlyoffice.com" fontSize={12}>
<Link href="mailto:support@onlyoffice.com" fontSize='12px'>
support@onlyoffice.com
</Link>
</Text>
<div style={{ marginTop: "4px" }}>
<Text className="text_p" fontSize={12}>
<Text className="text_p" fontSize='12px'>
<Text
fontSize={12}
fontSize='12px'
className="text_span"
as="span"
color="#A3A9AE"
@ -126,28 +126,28 @@ const Body = ({language}) => {
</Text>
</div>
<Link href="http://www.onlyoffice.com" fontSize={12}>
<Link href="http://www.onlyoffice.com" fontSize='12px'>
www.onlyoffice.com
</Link>
<div style={{ marginTop: "20px" }}>
<Text className="text_p" fontSize={12}>
<Text className="text_p" fontSize='12px'>
{t("LicensedUnder", {license: "GNU GPL v.3"} )}:{" "}
<Link
href="https://www.gnu.org/licenses/gpl-3.0.html"
isHovered={true}
fontSize={12}
fontSize='12px'
>
GNU GPL v.3
</Link>{" "}
</Text>
<Text className="text_p" fontSize={12}>
<Text className="text_p" fontSize='12px'>
{t("SourceCode")}:{" "}
<Link
href="https://github.com/ONLYOFFICE/CommunityServer"
isHovered={true}
fontSize={12}
fontSize='12px'
>
GitHub
</Link>

2
web/ASC.Web.Client/src/components/pages/Confirm/index.js
View File

@ -24,7 +24,7 @@ const Confirm = ({ match, language }) => {
return (
<I18nextProvider i18n={i18n}>
<Suspense
fallback={<Loader className="pageLoader" type="rombs" size={40} />}
fallback={<Loader className="pageLoader" type="rombs" size='40px' />}
>
<Switch>
<ConfirmRoute

2
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateEmail.js
View File

@ -27,7 +27,7 @@ class ActivateEmail extends React.PureComponent {
render() {
// console.log('Activate email render');
return (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
);
}
}

10
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/activateUser.js
View File

@ -184,19 +184,19 @@ class Confirm extends React.PureComponent {
return (
!isConfirmLoaded
? (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
)
: (
<ConfirmContainer>
<div className='start-basis'>
<div className='margin-left'>
<Text className='confirm-row' as='p' fontSize={18}>{t('InviteTitle')}</Text>
<Text className='confirm-row' as='p' fontSize='18px'>{t('InviteTitle')}</Text>
<div className='confirm-row full-width break-word'>
<a href='/login'>
<img src="images/dark_general.png" alt="Logo" />
</a>
<Text as='p' fontSize={24} color='#116d9d'>{greetingTitle}</Text>
<Text as='p' fontSize='24px' color='#116d9d'>{greetingTitle}</Text>
</div>
</div>
@ -293,11 +293,11 @@ class Confirm extends React.PureComponent {
{/* <Row className='confirm-row'>
<Text as='p' fontSize={14}>{t('LoginWithAccount')}</Text>
<Text as='p' fontSize='14px'>{t('LoginWithAccount')}</Text>
</Row>
*/}
<Text className="confirm-row" fontSize={14} color="#c30">
<Text className="confirm-row" fontSize='14px' color="#c30">
{this.state.errorText}
</Text>
</div>

2
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeEmail.js
View File

@ -43,7 +43,7 @@ class ChangeEmail extends React.PureComponent {
render() {
console.log('Change email render');
return (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
);
}
}

4
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changeOwner.js
View File

@ -79,7 +79,7 @@ class Form extends React.PureComponent {
alt="Logo"
/>
<Text className="owner-title">{greetingTitle}</Text>
<Text className="owner-confirm_text" fontSize={18}>
<Text className="owner-confirm_text" fontSize='18px'>
{t("ConfirmOwnerPortalTitle", { newOwner: "NEW OWNER" })}
</Text>
{this.state.showButtons ? (
@ -103,7 +103,7 @@ class Form extends React.PureComponent {
/>
</>
) : (
<Text className="owner-confirm-message" fontSize={12}>
<Text className="owner-confirm-message" fontSize='12px'>
{t("ConfirmOwnerPortalSuccessMessage")}
</Text>
)}

4
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePassword.js
View File

@ -126,7 +126,7 @@ class Form extends React.PureComponent {
const { isLoading, password, passwordEmpty } = this.state;
return !isConfirmLoaded ? (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
) : (
<BodyStyle>
<div className="password-header">
@ -139,7 +139,7 @@ class Form extends React.PureComponent {
{greetingTitle}
</Heading>
</div>
<Text className="password-text" fontSize={14}>
<Text className="password-text" fontSize='14px'>
{t("PassworResetTitle")}
</Text>
<PasswordInput

6
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/changePhone.js
View File

@ -68,9 +68,9 @@ const PhoneForm = props => {
{greetingTitle}
</div>
</div>
<Text className="edit-text" isBold fontSize={14}>{subTitleTranslation}</Text>
<Text fontSize={13}>{infoTranslation}: <b>+{currentPhone}</b></Text>
<Text className="edit-text" fontSize={13}>{subInfoTranslation}</Text>
<Text className="edit-text" isBold fontSize='14px'>{subTitleTranslation}</Text>
<Text fontSize='13px'>{infoTranslation}: <b>+{currentPhone}</b></Text>
<Text className="edit-text" fontSize='13px'>{subInfoTranslation}</Text>
<TextInput
id="phone"
name="phone"

10
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js
View File

@ -200,19 +200,19 @@ class Confirm extends React.PureComponent {
return (
!isConfirmLoaded
? (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
)
: (
<ConfirmContainer>
<div className='start-basis'>
<div className='margin-left'>
<Text className='confirm-row' as='p' fontSize={18}>{t('InviteTitle')}</Text>
<Text className='confirm-row' as='p' fontSize='18px'>{t('InviteTitle')}</Text>
<div className='confirm-row full-width break-word'>
<a href='/login'>
<img src="images/dark_general.png" alt="Logo" />
</a>
<Text as='p' fontSize={24} color='#116d9d'>{greetingTitle}</Text>
<Text as='p' fontSize='24px' color='#116d9d'>{greetingTitle}</Text>
</div>
</div>
@ -314,11 +314,11 @@ class Confirm extends React.PureComponent {
{/* <Row className='confirm-row'>
<Text as='p' fontSize={14}>{t('LoginWithAccount')}</Text>
<Text as='p' fontSize='14px'>{t('LoginWithAccount')}</Text>
</Row>
*/}
<Text className='confirm-row' fontSize={14} color="#c30">
<Text className='confirm-row' fontSize='14px' color="#c30">
{this.state.errorText}
</Text>
</div>

10
web/ASC.Web.Client/src/components/pages/Confirm/sub-components/profileRemove.js
View File

@ -70,13 +70,13 @@ class ProfileRemove extends React.PureComponent {
<a href='/login'>
<img src="images/dark_general.png" alt="Logo" />
</a>
<Text as='p' fontSize={24} color='#116d9d'>{greetingTitle}</Text>
<Text as='p' fontSize='24px' color='#116d9d'>{greetingTitle}</Text>
</div>
{!isProfileDeleted
? <>
<Text className='confirm-row' as='p' fontSize={18} >{t('DeleteProfileConfirmation')}</Text>
<Text className='confirm-row' as='p' fontSize={16} >{t('DeleteProfileConfirmationInfo')}</Text>
<Text className='confirm-row' as='p' fontSize='18px' >{t('DeleteProfileConfirmation')}</Text>
<Text className='confirm-row' as='p' fontSize='16px' >{t('DeleteProfileConfirmationInfo')}</Text>
<Button
className='confirm-row'
@ -89,8 +89,8 @@ class ProfileRemove extends React.PureComponent {
/>
</>
: <>
<Text className='confirm-row' as='p' fontSize={18} >{t('DeleteProfileSuccessMessage')}</Text>
<Text className='confirm-row' as='p' fontSize={16} >{t('DeleteProfileSuccessMessageInfo')}</Text>
<Text className='confirm-row' as='p' fontSize='18px' >{t('DeleteProfileSuccessMessage')}</Text>
<Text className='confirm-row' as='p' fontSize='16px' >{t('DeleteProfileSuccessMessageInfo')}</Text>
</>
}

4
web/ASC.Web.Client/src/components/pages/Home/index.js
View File

@ -76,7 +76,7 @@ const Body = ({ modules, match, history, isLoaded }) => {
return (
!isLoaded
? (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
)
: (
<HomeContainer>
@ -84,7 +84,7 @@ const Body = ({ modules, match, history, isLoaded }) => {
<Tiles modules={modules} isPrimary={false} history={history} />
{!modules || !modules.length ? (
<Text className="home-error-text" fontSize={14} color="#c30">
<Text className="home-error-text" fontSize='14px' color="#c30">
{t('NoOneModulesAvailable')}
</Text>
) : null}

4
web/ASC.Web.Client/src/components/pages/Settings/Layout/Article/Header/index.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import { Header } from 'asc-web-components';
import { Headline } from 'asc-web-common';
import { useTranslation } from 'react-i18next';
const ArticleHeaderContent = () => {
const { t } = useTranslation();
return <Header type="menu">{t('Settings')}</Header>;
return <Headline type="menu">{t('Settings')}</Headline>;
}
export default ArticleHeaderContent;

5
web/ASC.Web.Client/src/components/pages/Settings/Layout/Section/Header/index.js
View File

@ -1,11 +1,12 @@
import React from "react";
import { withRouter } from "react-router";
import { Header, utils } from 'asc-web-components';
import { utils } from 'asc-web-components';
import { Headline } from 'asc-web-common';
import styled from 'styled-components';
import { withTranslation } from 'react-i18next';
import { getKeyByLink, settingsTree, getTKeyByKey } from '../../../utils';
const HeaderContainer = styled(Header)`
const HeaderContainer = styled(Headline)`
margin-right: 16px;
max-width: calc(100vw - 430px);
@media ${utils.device.tablet} {

8
web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js
View File

@ -153,7 +153,7 @@ class Customization extends React.Component {
const { isLoadedData, languages, language, isLoading, timezones, timezone, greetingTitle, isLoadingGreetingSave, isLoadingGreetingRestore } = this.state;
const supportEmail = "documentation@onlyoffice.com";
const tooltipLanguage =
<Text fontSize={13}>
<Text fontSize='13px'>
<Trans i18nKey="NotFoundLanguage" i18n={i18n}>
"In case you cannot find your language in the list of the
available ones, feel free to write to us at
@ -169,11 +169,11 @@ class Customization extends React.Component {
console.log("CustomizationSettings render");
return (
!isLoadedData ?
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
: <>
<StyledComponent>
<div className='settings-block'>
<Text fontSize={16}>{t('StudioTimeLanguageSettings')}</Text>
<Text fontSize='16px'>{t('StudioTimeLanguageSettings')}</Text>
<FieldContainer
id='fieldContainerLanguage'
className='margin-top field-container-width'
@ -224,7 +224,7 @@ class Customization extends React.Component {
</div>
<div className='settings-block'>
<Text fontSize={16}>{t('GreetingSettingsTitle')}</Text>
<Text fontSize='16px'>{t('GreetingSettingsTitle')}</Text>
<FieldContainer
id='fieldContainerWelcomePage'
className='margin-top field-container-width'

2
web/ASC.Web.Client/src/components/pages/Settings/categories/common/index.js
View File

@ -10,7 +10,7 @@ const Common = ({ match }) => {
const basePath = '/settings/common';
return (
<Suspense fallback={<Loader className="pageLoader" type="rombs" size={40} />}>
<Suspense fallback={<Loader className="pageLoader" type="rombs" size='40px' />}>
<Switch>
<Route
exact

6
web/ASC.Web.Client/src/components/pages/Settings/categories/common/whitelabel.js
View File

@ -196,14 +196,14 @@ class WhiteLabel extends React.Component {
console.log("WhiteLabelSettings render");
return (
!isLoadedData ?
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
: <>
<StyledComponent>
<div className='settings-block'>
<Text fontSize={16}>{t('LogoSettings')}</Text>
<Text fontSize='16px'>{t('LogoSettings')}</Text>
<Text
className='margin-top'
fontSize={14}>
fontSize='14px'>
<Trans i18nKey="LogoUploadRecommendation">
We recommended that you use images in <strong>PNG</strong> format with transparent background
</Trans>

2
web/ASC.Web.Client/src/components/pages/Settings/categories/security/index.js
View File

@ -9,7 +9,7 @@ const Security = () => {
const basePath = "/settings/security";
return (
<Suspense fallback={<Loader className="pageLoader" type="rombs" size={40} />}>
<Suspense fallback={<Loader className="pageLoader" type="rombs" size='40px' />}>
<Switch>
<Route
exact

8
web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/admins.js
View File

@ -339,16 +339,16 @@ class PureAdminsSettings extends Component {
return (
<>
{showLoader ? (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
) : (
<>
<RequestLoader
visible={isLoading}
zIndex={256}
loaderSize={16}
loaderSize='16px'
loaderColor={"#999"}
label={`${t("LoadingProcessing")} ${t("LoadingDescription")}`}
fontSize={12}
fontSize='12px'
fontColor={"#999"}
className="page_loader"
/>
@ -442,7 +442,7 @@ class PureAdminsSettings extends Component {
type="page"
title={user.displayName}
isBold={true}
fontSize={15}
fontSize='15px'
color={nameColor}
href={user.profileUrl}
>

4
web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/modules.js
View File

@ -101,12 +101,12 @@ class PureModulesSettings extends Component {
/>
</RadioButtonContainer>
<ProjectsBody>
<Text className="projects_margin" fontSize={12}>
<Text className="projects_margin" fontSize='12px'>
{t("AccessRightsProductUsersCan", {
category: t("People")
})}
</Text>
<Text fontSize={12}>
<Text fontSize='12px'>
<li>{t("ViewProfilesAndGroups")}</li>
</Text>
</ProjectsBody>

20
web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/owner.js
View File

@ -168,21 +168,21 @@ class PureOwnerSettings extends Component {
return (
<>
{showLoader ? (
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
) : (
<OwnerContainer>
<RequestLoader
visible={isLoading}
zIndex={256}
loaderSize={16}
loaderSize='16px'
loaderColor={"#999"}
label={`${t("LoadingProcessing")} ${t("LoadingDescription")}`}
fontSize={12}
fontSize='12px'
fontColor={"#999"}
className="page_loader"
/>
<HeaderContainer>
<Text fontSize={18}>{t("PortalOwner")}</Text>
<Text fontSize='18px'>{t("PortalOwner")}</Text>
</HeaderContainer>
<BodyContainer>
@ -197,7 +197,7 @@ class PureOwnerSettings extends Component {
<div className="avatar_body">
<Text
className="avatar_text"
fontSize={16}
fontSize='16px'
isBold={true}
>
{owner.displayName}
@ -205,7 +205,7 @@ class PureOwnerSettings extends Component {
{owner.groups &&
owner.groups.map(group => (
<Link
fontSize={12}
fontSize='12px'
key={group.id}
href={owner.profileUrl}
>
@ -215,10 +215,10 @@ class PureOwnerSettings extends Component {
</div>
</AvatarContainer>
<ProjectsBody>
<Text className="portal_owner" fontSize={12}>
<Text className="portal_owner" fontSize='12px'>
{t("AccessRightsOwnerCan")}:
</Text>
<Text fontSize={12}>
<Text fontSize='12px'>
{OwnerOpportunities.map((item, key) => (
<li key={key}>{item};</li>
))}
@ -226,7 +226,7 @@ class PureOwnerSettings extends Component {
</ProjectsBody>
</BodyContainer>
<Text fontSize={12} className="text-body_wrapper">
<Text fontSize='12px' className="text-body_wrapper">
{t("AccessRightsChangeOwnerText")}
</Text>
@ -248,7 +248,7 @@ class PureOwnerSettings extends Component {
/>
<Text
className="text-body_inline"
fontSize={12}
fontSize='12px'
color="#A3A9AE"
>
{t("AccessRightsChangeOwnerConfirmText")}

2
web/ASC.Web.Client/src/components/pages/Settings/index.js
View File

@ -12,7 +12,7 @@ const Settings = () => {
return (
<Layout key='1'>
<Suspense fallback={<Loader className="pageLoader" type="rombs" size={40} />}>
<Suspense fallback={<Loader className="pageLoader" type="rombs" size='40px' />}>
<Switch>
<Route
path={`${basePath}/security`}

2
web/ASC.Web.Client/src/helpers/confirmRoute.js
View File

@ -80,7 +80,7 @@ class ConfirmRoute extends React.Component {
!this.state.isLoaded ? (
<PageLayout
sectionBodyContent={
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
}
/>
) : (

14
web/ASC.Web.Client/yarn.lock
View File

@ -2473,13 +2473,13 @@ asap@~2.0.6:
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
"asc-web-common@file:../../packages/asc-web-common":
version "1.0.13"
version "1.0.12"
dependencies:
axios "^0.19.0"
history "4.9.0"
"asc-web-components@file:../../packages/asc-web-components":
version "1.0.219"
version "1.0.218"
dependencies:
email-addresses "^3.1.0"
html-to-react "^1.4.2"
@ -2891,6 +2891,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap@4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@ -6947,6 +6952,11 @@ jest@24.9.0:
import-local "^2.0.0"
jest-cli "^24.9.0"
jquery@3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
js-base64@^2.1.8:
version "2.5.1"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"

22
web/ASC.Web.Components/src/components/header/README.md → web/ASC.Web.Common/src/components/headline/README.md
View File

@ -1,29 +1,29 @@
# Header
# Headline
Component that displays header text
Component that displays Heading text with custom styles
### Usage
```js
import { Header } from "asc-web-components";
import { Headline } from "asc-web-common";
```
```jsx
<Header type="content" title="Some title" isInline>
<Headline type="content" title="Some title" isInline>
Some text
</Header>
</Headline>
```
```jsx
<Header type="menu" title="Some title">
<Headline type="menu" title="Some title">
Some text
</Header>
</Headline>
```
##### If you need to override styles add forwardedAs instead of as
#### If you need to override styles add forwardedAs instead of as
```js
const StyledText = styled(Header)`
const StyledText = styled(Headline)`
&:hover {
border-bottom: 1px dotted;
}
@ -36,12 +36,12 @@ const StyledText = styled(Header)`
</StyledText>
```
### Properties Header
### Properties
| Props | Type | Required | Values | Default | Description |
| ---------- | :------: | :------: | :-------------: | :-------: | ---------------------------------------------------- |
| `color` | `string` | - | - | `#333333` | Specifies the contentHeader color |
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
| `type` | `oneOf` | ✅ | `menu, content` | - | Sets the size of text: menu (27px) or content (21px) |

12
web/ASC.Web.Components/src/components/header/header.stories.js → web/ASC.Web.Common/src/components/headline/headline.stories.js
View File

@ -1,14 +1,15 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { text, boolean, withKnobs, color, select } from '@storybook/addon-knobs/react';
import Header from '.';
import Heading from '.';
import Section from '../../../.storybook/decorators/section';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
const type = ['content', 'menu'];
const levels = [1, 2, 3, 4, 5, 6];
storiesOf('Components|Header', module)
storiesOf('Components|Heading', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
@ -16,15 +17,16 @@ storiesOf('Components|Header', module)
<Section>
<div style={{ width: "100%" }}>
<Header
<Heading
type={select('type', type, 'content')}
color={color('color', '#333333')}
level={select('level', levels, 1)}
title={text('title', '')}
truncate={boolean('truncate', false)}
isInline={boolean('isInline', false)}
>
{text('Text', 'Sample text Header')}
</Header>
{text('Text', 'Sample text Heading')}
</Heading>
</div>
</Section>
));

8
web/ASC.Web.Components/src/components/header/header.test.js → web/ASC.Web.Common/src/components/headline/headline.test.js
View File

@ -1,13 +1,13 @@
import React from 'react';
import { mount } from 'enzyme';
import Header from '.';
import Headline from '.';
describe('<Header />', () => {
describe('<Headline />', () => {
it('renders without error', () => {
const wrapper = mount(
<Header as='span' title='Some title'>
<Headline level={1} title='Some title'>
Some text
</Header>
</Headline>
);
expect(wrapper).toExist();

27
web/ASC.Web.Components/src/components/header/index.js → web/ASC.Web.Common/src/components/headline/index.js
View File

@ -1,7 +1,7 @@
import React from "react";
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import commonTextStyles from '../text/common-text-styles';
import { Heading } from 'asc-web-components';
const fontSize = css`
${props =>
@ -10,29 +10,23 @@ const fontSize = css`
}
`;
const styles = css`
const StyledHeading = styled(Heading)`
margin: 0;
line-height: 56px;
font-size: ${fontSize}px;
font-weight: 700;
${props => props.isInline && css`display: inline-block;`}
`;
const StyledHeader = styled.h1`
${styles};
${commonTextStyles};
`;
const Header = ({ title, tag, as, children, ...rest }) => {
//console.log("Header render");
const Headline = (props) => {
//console.log("Headline render");
return (
<StyledHeader as={!as && tag ? tag : as} title={title} {...rest}>{children}</StyledHeader>
<StyledHeading
{...props} />
);
};
Header.propTypes = {
as: PropTypes.string,
tag: PropTypes.string,
Headline.propTypes = {
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
children: PropTypes.any,
color: PropTypes.string,
title: PropTypes.string,
@ -41,11 +35,12 @@ Header.propTypes = {
type: PropTypes.oneOf(['menu', 'content']),
};
Header.defaultProps = {
Headline.defaultProps = {
color: '#333333',
title: '',
truncate: false,
isInline: false,
level: 1
};
export default Header;
export default Headline;

1
web/ASC.Web.Common/src/components/index.js
View File

@ -3,3 +3,4 @@ export { default as PublicRoute } from "./routing/publicRoute";
export { default as Login } from "./login";
export { default as StudioLayout } from "./layout";
export { default as ModuleTile } from "./module-tile";
export { default as Headline } from "./headline";

8
web/ASC.Web.Common/src/components/login/index.js
View File

@ -270,13 +270,13 @@ class Form extends Component {
className="login-tooltip"
helpButtonHeaderContent={t("CookieSettingsTitle")}
tooltipContent={
<Text fontSize={12}>{t("RememberHelper")}</Text>
<Text fontSize='12px'>{t("RememberHelper")}</Text>
}
/>
</div>
<Link
fontSize={12}
fontSize='12px'
className="login-link"
type="page"
isHovered={true}
@ -311,11 +311,11 @@ class Form extends Component {
/>
{params.confirmedEmail && (
<Text isBold={true} fontSize={16}>
<Text isBold={true} fontSize='16px'>
{t("MessageEmailConfirmed")} {t("MessageAuthorize")}
</Text>
)}
<Text fontSize={14} color="#c30">
<Text fontSize='14px' color="#c30">
{errorText}
</Text>
</FormContainer>

4
web/ASC.Web.Common/src/components/login/sub-components/modal-dialog.js
View File

@ -17,7 +17,7 @@ class SubModalDialog extends React.Component {
<ModalDialog
visible={openDialog}
headerContent={
<Text isBold={false} fontSize={21}>
<Text isBold={false} fontSize='21px'>
{t("PasswordRecoveryTitle")}
</Text>
}
@ -26,7 +26,7 @@ class SubModalDialog extends React.Component {
key="text-body"
className="text-body"
isBold={false}
fontSize={13}
fontSize='13px'
>
{t("MessageSendPasswordRecoveryInstructionsOnEmail")}
</Text>,

6
web/ASC.Web.Common/src/components/module-tile/index.js
View File

@ -97,10 +97,10 @@ const ModuleTile = props => {
<div className="title-text-wrapper">
<div onClick={handleClick.bind(link)} className="title-text">
<Text fontSize={36} className="title-text-header selectable">
<Text fontSize='36px' className="title-text-header selectable">
{title}
</Text>
<Text fontSize={12} className="title-text-description">
<Text fontSize='12px' className="title-text-description">
{description}
</Text>
</div>
@ -118,7 +118,7 @@ const ModuleTile = props => {
<div>
<div>
<Text
fontSize={18}
fontSize='18px'
className="sub-title-text"
onClick={handleClick.bind(link)}
>

2
web/ASC.Web.Common/src/components/routing/externalRedirect.js
View File

@ -16,7 +16,7 @@ export class ExternalRedirect extends Component {
return (
<PageLayout
sectionBodyContent={
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
}
/>
);

2
web/ASC.Web.Common/src/components/routing/privateRoute.js
View File

@ -37,7 +37,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<PageLayout
sectionBodyContent={
<Loader className="pageLoader" type="rombs" size={40} />
<Loader className="pageLoader" type="rombs" size='40px' />
}
/>
);

7
web/ASC.Web.Common/yarn.lock
View File

@ -2841,7 +2841,7 @@ asap@~2.0.3:
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
"asc-web-components@file:../../packages/asc-web-components":
version "1.0.219"
version "1.0.218"
dependencies:
email-addresses "^3.1.0"
html-to-react "^1.4.2"
@ -3473,6 +3473,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
boxen@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/boxen/-/boxen-3.2.0.tgz#fbdff0de93636ab4450886b6ff45b92d098f45eb"

2
web/ASC.Web.Components/src/components/advanced-selector/index.js
View File

@ -518,7 +518,7 @@ class AdvancedSelector extends React.Component {
<Text
as="p"
className="group_header"
fontSize={15}
fontSize='15px'
isBold={true}
>
Groups

18
web/ASC.Web.Components/src/components/all/all.stories.js
View File

@ -17,7 +17,6 @@ import Textarea from "../textarea";
import ContextMenuButton from "../context-menu-button";
import DatePicker from "../date-picker";
import FieldContainer from "../field-container";
import Header from "../header";
import Heading from "../heading";
import Link from "../link";
import Loader from "../loader";
@ -181,11 +180,6 @@ storiesOf("Components|All", module)
Heading text
</Heading>
</div>
<div style={{ padding: "8px 0" }}>
<Header type="content" title="Some title" isInline>
Header text
</Header>
</div>
<div style={{ padding: "8px 0" }}>
<Text as="p" title="Some title">
Text as "p"
@ -225,13 +219,13 @@ storiesOf("Components|All", module)
getContent={dataTip =>
dataTip ? (
<div>
<Text isBold={true} fontSize={16}>
<Text isBold={true} fontSize='16px'>
{arrayUsers[dataTip].name}
</Text>
<Text color="#A3A9AE" fontSize={13}>
<Text color="#A3A9AE" fontSize='13px'>
{arrayUsers[dataTip].email}
</Text>
<Text fontSize={13}>{arrayUsers[dataTip].position}</Text>
<Text fontSize='13px'>{arrayUsers[dataTip].position}</Text>
</div>
) : null
}
@ -484,13 +478,13 @@ storiesOf("Components|All", module)
</div>
<div style={{ justifySelf: "center" }}>
<div style={{ padding: "8px 0" }}>
<Loader type="base" color="black" size={30} label="Loading..." />
<Loader type="base" color="black" size='30px' label="Loading..." />
</div>
<div style={{ padding: "8px 0", marginLeft: 45 }}>
<Loader type="oval" color="black" size={30} label="Loading" />
<Loader type="oval" color="black" size='30px' label="Loading" />
</div>
<div style={{ padding: "8px 0", marginLeft: 45 }}>
<Loader type="dual-ring" color="black" size={30} label="Loading" />
<Loader type="dual-ring" color="black" size='30px' label="Loading" />
</div>
</div>
<div style={{ justifySelf: "center" }}>

2
web/ASC.Web.Components/src/components/avatar/index.js
View File

@ -183,7 +183,7 @@ const Avatar = memo(props => {
type='action'
title={editLabel}
isTextOverflow={true}
fontSize={14}
fontSize='14px'
color={whiteColor}
onClick={editAction}
>

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

@ -212,7 +212,7 @@ class Button extends React.Component {
<StyledButton {...this.props}>
{(isLoading || icon) &&
isLoading
? <Loader type="oval" size={size === "big" ? 16 : 14} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
? <Loader type="oval" size={size === "big" ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
: <Icon {...this.props} />
}
{label}

33
web/ASC.Web.Components/src/components/date-picker/index.js
View File

@ -10,8 +10,7 @@ import isEmpty from "lodash/isEmpty";
import Aside from "../layout/sub-components/aside";
import { desktop } from "../../utils/device";
import Backdrop from "../backdrop";
import Text from "../text";
import Header from "../header";
import Heading from "../heading";
import throttle from "lodash/throttle";
const DateInputStyle = styled.div`
@ -31,9 +30,16 @@ const Content = styled.div`
width: 100%;
background-color: #fff;
padding: 0 16px 16px;
.header {
max-width: 500px;
margin: 0;
line-height: 56px;
font-weight: 700 !important;
}
`;
const StyledHeader = styled.div`
const Header = styled.div`
display: flex;
align-items: center;
border-bottom: 1px solid #dee2e6;
@ -44,13 +50,6 @@ const Body = styled.div`
padding: 16px 0;
`;
const HeaderText = styled(Header)`
max-width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
class DatePicker extends Component {
constructor(props) {
super(props);
@ -375,13 +374,15 @@ class DatePicker extends Component {
/>
<Aside visible={isOpen} scale={false} zIndex={zIndex}>
<Content>
<StyledHeader>
<HeaderText type='content'>
<Text isBold={true} fontSize={20}>
<Header>
<Heading
className='header'
size='medium'
truncate={true}
>
{calendarHeaderContent}
</Text>
</HeaderText>
</StyledHeader>
</Heading>
</Header>
<Body>{this.renderBody()}</Body>
</Content>
</Aside>

4
web/ASC.Web.Components/src/components/empty-screen-container/index.js
View File

@ -81,11 +81,11 @@ const EmptyScreenContainer = props => {
<EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} className="ec-image" />
{headerText && (
<Text as="span" color="#333333" fontSize={24} className="ec-header">{headerText}</Text>
<Text as="span" color="#333333" fontSize='24px' className="ec-header">{headerText}</Text>
)}
{descriptionText && (
<Text as="span" color="#737373" fontSize={14} className="ec-desc">{descriptionText}</Text>
<Text as="span" color="#737373" fontSize='14px' className="ec-desc">{descriptionText}</Text>
)}
{buttons && (

10
web/ASC.Web.Components/src/components/examples/people.row.stories.js
View File

@ -135,18 +135,18 @@ storiesOf('EXAMPLES|Row', module)
contextOptions={user.contextOptions}
>
<RowContent>
<Link type='page' title={user.userName} isBold={true} fontSize={15} color={nameColor} >{user.userName}</Link>
<Link type='page' title={user.userName} isBold={true} fontSize='15px' color={nameColor} >{user.userName}</Link>
<>
{user.status === 'pending' && <Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />}
{user.status === 'disabled' && <Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />}
</>
{user.isHead
? <Link type='page' title='Head of department' fontSize={12} color={sideInfoColor} >Head of department</Link>
? <Link type='page' title='Head of department' fontSize='12px' color={sideInfoColor} >Head of department</Link>
: <></>
}
<Link type='action' title={user.department} fontSize={12} color={sideInfoColor} >{user.department}</Link>
<Link type='page' title={user.mobilePhone} fontSize={12} color={sideInfoColor} >{user.mobilePhone}</Link>
<Link type='page' title={user.email} fontSize={12} color={sideInfoColor} >{user.email}</Link>
<Link type='action' title={user.department} fontSize='12px' color={sideInfoColor} >{user.department}</Link>
<Link type='page' title={user.mobilePhone} fontSize='12px' color={sideInfoColor} >{user.mobilePhone}</Link>
<Link type='page' title={user.email} fontSize='12px' color={sideInfoColor} >{user.email}</Link>
</RowContent>
</Row>
);

2
web/ASC.Web.Components/src/components/field-container/index.js
View File

@ -127,7 +127,7 @@ class FieldContainer extends React.Component {
<div className="field-body">
{children}
{hasError ? (
<Text className="error-label" fontSize={10} color={errorColor}>
<Text className="error-label" fontSize='10px' color={errorColor}>
{errorMessage}
</Text>
) : null}

6
web/ASC.Web.Components/src/components/heading/README.md
View File

@ -33,10 +33,10 @@ const StyledHeading = styled(Heading)`
### Properties
| Props | Type | Required | Values | Default | Description |
| ---------- | :------: | :------: | :----------------------: | :-------: | ------------------------------------------------------------------------------------------------------------------------------------- |
| ---------- | :------: | :------: | :--------------------------------------------: | :-------: | ------------------------------------------------------------------------------------------------------------------------------------- |
| `color` | `string` | - | - | `#333333` | Specifies the headline color |
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
| `level` | `oneOf` | - | 1, 2, 3, 4, 5, 6 | `1` | The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. |
| `size` | `oneOF` | - | `xsmall`, `small`, `medium`, `large`, `xlarge` | `large` | Sets the size of headline |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
| `size` | `oneOF` | - | `big`, `medium`, `small` | `big` | Sets the size of headline |

4
web/ASC.Web.Components/src/components/heading/heading.stories.js
View File

@ -7,7 +7,7 @@ import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
const levels = [1, 2, 3, 4, 5, 6];
const size = ['big', 'medium', 'small'];
const size = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
storiesOf('Components|Heading', module)
.addDecorator(withKnobs)
@ -21,7 +21,7 @@ storiesOf('Components|Heading', module)
title={text('title', '')}
truncate={boolean('truncate', false)}
isInline={boolean('isInline', false)}
size={select('size', size, 'big')}
size={select('size', size, 'large')}
>
{text('Text', 'Sample text Heading')}
</Heading>

21
web/ASC.Web.Components/src/components/heading/index.js
View File

@ -5,9 +5,11 @@ import commonTextStyles from '../text/common-text-styles';
const fontSize = css`
${props =>
(props.size === 'big' && 23) ||
(props.size === 'medium' && 19) ||
(props.size === 'small' && 15)
(props.size === 'xlarge' && 27) ||
(props.size === 'large' && 23) ||
(props.size === 'medium' && 21) ||
(props.size === 'small' && 19) ||
(props.size === 'xsmall' && 15)
}
`;
@ -22,13 +24,10 @@ const StyledHeading = styled.h1`
${commonTextStyles};
`;
const Heading = ({ title, level, color, ...rest }) => {
const Heading = ({ level, ...rest }) => {
return (
<StyledHeading
as={`h${level}`}
level={+level}
title={title}
color={color}
{...rest}>
</StyledHeading>
);
@ -40,7 +39,8 @@ Heading.propTypes = {
title: PropTypes.string,
truncate: PropTypes.bool,
isInline: PropTypes.bool,
size: PropTypes.oneOf(['big', 'medium', 'small']),
size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
className: PropTypes.string,
};
Heading.defaultProps = {
@ -48,8 +48,9 @@ Heading.defaultProps = {
title: '',
truncate: false,
isInline: false,
size: 'big',
level: 1
size: 'large',
level: 1,
className: ''
};
export default Heading;

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

@ -29,7 +29,7 @@ storiesOf("Components|Buttons", module)
<HelpButton
displayType="dropdown"
tooltipContent={
<Text fontSize={13}>
<Text fontSize='13px'>
Paste you tooltip content here
</Text>
}

5
web/ASC.Web.Components/src/components/help-button/help-button.test.js
View File

@ -9,6 +9,11 @@ describe("<HelpButton />", () => {
expect(wrapper).toExist();
});
it("HelpButton renders without error in Aside mode", () => {
const wrapper = mount(<HelpButton tooltipContent={tooltipContent} displayType="aside" helpButtonHeaderContent="Header text" />);
expect(wrapper).toExist();
});
it("HelpButton componentWillUnmount test", () => {
const wrapper = mount(<HelpButton tooltipContent={tooltipContent} />);
const componentWillUnmount = jest.spyOn(

26
web/ASC.Web.Components/src/components/help-button/index.js
View File

@ -7,8 +7,7 @@ import uniqueId from "lodash/uniqueId";
import Aside from "../layout/sub-components/aside";
import { desktop } from "../../utils/device";
import Backdrop from "../backdrop";
import Text from "../text";
import Header from "../header";
import Heading from "../heading";
import throttle from "lodash/throttle";
import styled from "styled-components";
@ -17,6 +16,13 @@ const Content = styled.div`
width: 100%;
background-color: #fff;
padding: 0 16px 16px;
.header {
max-width: 500px;
margin: 0;
line-height: 56px;
font-weight: 700;
}
`;
const HeaderContent = styled.div`
@ -30,12 +36,6 @@ const Body = styled.div`
padding: 16px 0;
`;
const HeaderText = styled(Header)`
max-width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
class HelpButton extends React.Component {
constructor(props) {
super(props);
@ -161,11 +161,13 @@ class HelpButton extends React.Component {
<Content>
{helpButtonHeaderContent && (
<HeaderContent>
<HeaderText type='content'>
<Text isBold={true} fontSize={21}>
<Heading
className='header'
size='medium'
truncate={true}
>
{helpButtonHeaderContent}
</Text>
</HeaderText>
</Heading>
</HeaderContent>
)}
<Body>{tooltipContent}</Body>

12
web/ASC.Web.Components/src/components/layout/layout.stories.js
View File

@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
import styled from '@emotion/styled';
import Layout from '.';
import PageLayout from '../page-layout';
import Header from '../header';
import Heading from '../heading';
import IconButton from '../icon-button';
import ContextMenuButton from '../context-menu-button';
import MainButton from '../main-button';
@ -109,6 +109,12 @@ const currentModuleId = '44444444-4444-4444-4444-444444444444';
const onLogoClick = (e) => action('Logo Clicked')(e);
const HeaderText = styled(Heading)`
margin: 0;
line-height: 56px;
font-weight: 700;
`;
const HeaderContent = styled.div`
display: flex;
align-items: center;
@ -146,7 +152,7 @@ const perPageItems = [
const asideContent = <p style={{ padding: 40 }}>Aside Content</p>;
const articleHeaderContent = <Header type="menu">Article Header</Header>;
const articleHeaderContent = <HeaderText size='xlarge'>Article Header</HeaderText>;
const articleMainButtonContent = <MainButton
text='Actions'
@ -161,7 +167,7 @@ const sectionHeaderContent = <HeaderContent>
size='16'
onClick={(e) => action('ArrowPathIcon Clicked')(e)}
/>
<Header type="content">Section Header</Header>
<HeaderText size='medium'>Section Header</HeaderText>
<IconButton
iconName={"PlusIcon"}
size='16'

16
web/ASC.Web.Components/src/components/layout/sub-components/header.js
View File

@ -3,11 +3,11 @@ import PropTypes from "prop-types";
import styled from "styled-components";
import { tablet } from "../../../utils/device";
import NavItem from "./nav-item";
import Header from "../../header";
import Heading from "../../heading";
const backgroundColor = "#0F4071";
const StyledHeader = styled.header`
const Header = styled.header`
align-items: center;
background-color: ${backgroundColor};
display: none;
@ -18,21 +18,27 @@ const StyledHeader = styled.header`
@media ${tablet} {
display: flex;
}
.heading {
margin: 0;
line-height: 56px;
font-weight: 700;
}
`;
const HeaderComponent = React.memo(props => {
//console.log("Header render");
return (
<StyledHeader>
<Header>
<NavItem
iconName="MenuIcon"
badgeNumber={props.badgeNumber}
onClick={props.onClick}
/>
<Header type="menu" color="#FFFFFF">
<Heading className="heading" size='xlarge' color="#FFFFFF">
{props.currentModule && props.currentModule.title}
</Heading>
</Header>
</StyledHeader>
);
});

2
web/ASC.Web.Components/src/components/layout/sub-components/nav-item.js
View File

@ -67,7 +67,7 @@ const NavItem = React.memo(props => {
})}
{children && (
<NavItemLabel opened={opened}>
<Text color={color} isBold fontSize={16}>
<Text color={color} isBold fontSize='16px'>
{children}
</Text>
</NavItemLabel>

2
web/ASC.Web.Components/src/components/link-with-dropdown/README.md
View File

@ -25,7 +25,7 @@ import { LinkWithDropdown } from "asc-web-components";
| `color` | `oneOf` | - | `gray`, `black`, `blue` | `black` | Color of link in all states - hover, active, visited |
| `data` | `array` | - | - | - | Array of objects, each can contain `<DropDownItem />` props |
| `dropdownType` | `oneOf` | ✅ | `alwaysDotted, appearDottedAfterHover` | - | Type of dropdown: alwaysDotted is always show dotted style and icon of arrow, appearDottedAfterHover is show dotted style and icon arrow only after hover |
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
| `fontSize` | `string` | - | - | `13px` | Font size of link |
| `id` | `string` | - | - | - | Accepts id |
| `isBold` | `bool` | - | - | `false` | Set font weight |
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status | |

4
web/ASC.Web.Components/src/components/link-with-dropdown/index.js
View File

@ -236,7 +236,7 @@ LinkWithDropdown.propTypes = {
color: PropTypes.string,
data: PropTypes.array,
dropdownType: PropTypes.oneOf(["alwaysDashed", "appearDashedAfterHover"]).isRequired,
fontSize: PropTypes.number,
fontSize: PropTypes.string,
isBold: PropTypes.bool,
isSemitransparent: PropTypes.bool,
isTextOverflow: PropTypes.bool,
@ -252,7 +252,7 @@ LinkWithDropdown.defaultProps = {
color: "#333333",
data: [],
dropdownType: "alwaysDashed",
fontSize: 13,
fontSize: '13px',
isBold: false,
isSemitransparent: false,
isTextOverflow: true,

4
web/ASC.Web.Components/src/components/link-with-dropdown/link-with-dropdown.stories.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import LinkWithDropdown from '.';
import Readme from './README.md';
import { text, boolean, withKnobs, select, number, color } from '@storybook/addon-knobs/react';
import { text, boolean, withKnobs, select, color } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Section from '../../../.storybook/decorators/section';
@ -39,7 +39,7 @@ storiesOf('Components|LinkWithDropdown', module)
<LinkWithDropdown
dropdownType={select('dropdownType', dropdownType, 'alwaysDashed')}
color={color('color', '#333333')}
fontSize={number('fontSize', 13)}
fontSize={text('fontSize', '13px')}
isBold={boolean('isBold', false)}
title={text('title', undefined)}
isTextOverflow={boolean('isTextOverflow', false)}

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

@ -28,7 +28,7 @@ import { Link } from "asc-web-components";
| ------------------- | :------------: | :------: | :--------------------------------------: | :-------------------: | ---------------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `color` | `string` | - | - | `#333333` | Color of link |
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
| `fontSize` | `string` | - | - | `13px` | Font size of link |
| `href` | `string` | - | - | `undefined` | Used as HTML `href` property |
| `id` | `string` | - | - | - | Accepts id |
| `isBold` | `bool` | - | - | `false` | Set font weight |

18
web/ASC.Web.Components/src/components/link/index.js
View File

@ -12,7 +12,9 @@ const hoveredCss = css`
text-decoration: ${props => (props.type === 'page' ? 'underline' : 'underline dashed')};
`;
const StyledLink = styled(Text)`
// eslint-disable-next-line react/prop-types, no-unused-vars
const PureText = ({type, color, ...props}) => <Text {...props}/>;
const StyledText = styled(PureText)`
text-decoration: none;
user-select: none;
cursor: pointer;
@ -26,6 +28,11 @@ const StyledLink = styled(Text)`
}
${props => props.isHovered && hoveredCss}
${props => props.isTextOverflow && css`
display: inline-block;
max-width: 100%;
`}
`;
// eslint-disable-next-line react/display-name
@ -33,19 +40,20 @@ const Link = memo(({ isTextOverflow, children, ...rest }) => {
// console.log("Link render", rest);
return (
<StyledLink
<StyledText
tag="a"
isTextOverflow={isTextOverflow}
truncate={isTextOverflow}
{...rest}
>
{children}
</StyledLink>
</StyledText>
);
});
Link.propTypes = {
color: PropTypes.string,
fontSize: PropTypes.number,
fontSize: PropTypes.string,
href: PropTypes.string,
isBold: PropTypes.bool,
isHovered: PropTypes.bool,
@ -65,7 +73,7 @@ Link.propTypes = {
Link.defaultProps = {
color: "#333333",
fontSize: 13,
fontSize: '13px',
href: undefined,
isBold: false,
isHovered: false,

4
web/ASC.Web.Components/src/components/link/link.stories.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import Link from '.';
import Readme from './README.md';
import { text, boolean, withKnobs, select, number, color } from '@storybook/addon-knobs/react';
import { text, boolean, withKnobs, select, color } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Section from '../../../.storybook/decorators/section';
import { action } from '@storybook/addon-actions';
@ -33,7 +33,7 @@ storiesOf('Components|Link', module)
<Link
type={select('type', type, 'page')}
color={color('color', '#333333')}
fontSize={number('fontSize', 13)}
fontSize={text('fontSize', '13px')}
isBold={boolean('isBold', false)}
title={text('title', undefined)}
target={select('target', target, '_blank')}

6
web/ASC.Web.Components/src/components/loader/README.md
View File

@ -12,7 +12,7 @@ import { Loader } from "asc-web-components";
<Loader
type="base"
color="black"
size={18}
size='18px'
label="Loading"
/>
```
@ -20,11 +20,11 @@ import { Loader } from "asc-web-components";
### Properties
| Props | Type | Required | Values | Default | Description |
| ----------- | :---------------: | :------: | :----------------------------------: | :-----: | ----------------- |
| ----------- | :------------: | :------: | :----------------------------------: | :-----: | ----------------- |
| `className` | `string` | - | - | - | Class name |
| `color` | `string` | - | - | - | Font color |
| `id` | `string` | - | - | - | Accepts id |
| `label` | `string` | - | - | - | Text label |
| `size` | `number`,`string` | - | - | - | Font size |
| `size` | `string` | - | - | `40px` | Font size |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `type` | `oneOf` | - | `base`, `oval`, `dual-ring`, `rombs` | `base` | - |

4
web/ASC.Web.Components/src/components/loader/index.js
View File

@ -37,7 +37,7 @@ const Loader = (props) => {
Loader.propTypes = {
color: PropTypes.string,
type: PropTypes.oneOf(['base', 'oval', 'dual-ring', 'rombs']),
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
size: PropTypes.string,
label: PropTypes.string,
className: PropTypes.string,
id: PropTypes.string,
@ -47,7 +47,7 @@ const Loader = (props) => {
Loader.defaultProps = {
color: "#63686a",
type: "base",
size: 40,
size: '40px',
label: "Loading content, please wait."
};

8
web/ASC.Web.Components/src/components/loader/loader.stories.js
View File

@ -16,7 +16,7 @@ storiesOf('Components|Loaders', module)
<Loader
type={select('type', typeOptions, 'base')}
color={color('color', '#63686a')}
size={number('size', 18)}
size={text('size', '18px')}
label={text('label', "Loading content, please wait...")} />
</Section>
))
@ -25,7 +25,7 @@ storiesOf('Components|Loaders', module)
<Loader
type={select('type', typeOptions, 'dual-ring')}
color={color('color', '#63686a')}
size={number('size', 40)}
size={text('size', '40px')}
label={text('label', "Loading content, please wait.")} />
</Section>
))
@ -34,7 +34,7 @@ storiesOf('Components|Loaders', module)
<Loader
type={select('type', typeOptions, 'oval')}
color={color('color', '#63686a')}
size={number('size', 40)}
size={text('size', '40px')}
label={text('label', "Loading content, please wait.")} />
</Section>
))
@ -42,6 +42,6 @@ storiesOf('Components|Loaders', module)
<Section>
<Loader
type={select('type', typeOptions, 'rombs')}
size={number('size', 40)} />
size={text('size', '40px')} />
</Section>
));

2
web/ASC.Web.Components/src/components/loader/loader.test.js
View File

@ -5,7 +5,7 @@ import Loader from '.';
const baseProps = {
type:"base",
color: "black",
size: 18,
size: '18px',
label: "Loading"
};

8
web/ASC.Web.Components/src/components/loader/types/rombs.js
View File

@ -37,8 +37,8 @@ export const keyFrameGreen = keyframes`
`;
const Romb = styled.div`
width: ${props => props.size}px;
height: ${props => props.size}px;
width: ${props => props.size};
height: ${props => props.size};
-ms-transform: rotate(135deg) skew(20deg, 20deg);
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
-moz-transform: rotate(135deg) skew(20deg, 20deg);
@ -85,11 +85,11 @@ const Rombs = ({ size }) => (
);
Rombs.protoTypes = {
size: PropTypes.number.isRequired
size: PropTypes.string.isRequired
};
Rombs.defaultProps = {
size: 40
size: '40px'
}
export { Rombs };

2
web/ASC.Web.Components/src/components/main-button/index.js
View File

@ -166,7 +166,7 @@ class MainButton extends React.PureComponent {
return (
<GroupMainButton {...this.props} ref={this.ref}>
<StyledMainButton {...this.props} onClick={this.onMainButtonClick}>
<Text fontSize={16} isBold color="#fff">
<Text fontSize='16px' isBold color="#fff">
{this.props.text}
</Text>
</StyledMainButton>

35
web/ASC.Web.Components/src/components/modal-dialog/index.js
View File

@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import styled from "styled-components";
import Backdrop from "../backdrop";
import Aside from "../layout/sub-components/aside";
import Header from "../header";
import Heading from "../heading";
import { desktop } from "../../utils/device";
import throttle from "lodash/throttle";
@ -23,6 +23,12 @@ const Content = styled.div`
background-color: #fff;
padding: 0 16px 16px;
box-sizing: border-box;
.heading {
max-width: 500px;
margin: 0;
line-height: 56px;
font-weight: 700;
}
`;
const StyledHeader = styled.div`
@ -31,13 +37,6 @@ const StyledHeader = styled.div`
border-bottom: 1px solid #dee2e6;
`;
const HeaderText = styled(Header)`
max-width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const CloseButton = styled.a`
cursor: pointer;
position: absolute;
@ -136,7 +135,13 @@ class ModalDialog extends React.Component {
<Dialog>
<Content>
<StyledHeader>
<HeaderText type='content'>{headerContent}</HeaderText>
<Heading
className='heading'
size='medium'
truncate={true}
>
{headerContent}
</Heading>
<CloseButton onClick={onClose}></CloseButton>
</StyledHeader>
<Body>{bodyContent}</Body>
@ -153,10 +158,16 @@ class ModalDialog extends React.Component {
<Backdrop visible={visible} onClick={onClose} zIndex={zIndex} />
<Aside visible={visible} scale={scale} zIndex={zIndex} className="modal-dialog-aside">
<Content>
<Header>
<HeaderText>{headerContent}</HeaderText>
<StyledHeader>
<Heading
className='heading'
size='medium'
truncate={true}
>
{headerContent}
</Heading>
{scale ? <CloseButton onClick={onClose}></CloseButton> : ""}
</Header>
</StyledHeader>
<Body>{bodyContent}</Body>
<Footer className="modal-dialog-aside-footer">{footerContent}</Footer>
</Content>

12
web/ASC.Web.Components/src/components/page-layout/page-layout.stories.js
View File

@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
import styled from '@emotion/styled';
import Layout from '../layout';
import PageLayout from '.';
import Header from '../header';
import Heading from '../heading';
import IconButton from '../icon-button';
import ContextMenuButton from '../context-menu-button';
import MainButton from '../main-button';
@ -49,7 +49,13 @@ const perPageItems = [
}
];
const articleHeaderContent = <Header type="menu">Article Header</Header>;
const StyledHeading = styled(Heading)`
margin: 0;
line-height: 56px;
font-weight: 700;
`;
const articleHeaderContent = <StyledHeading size="xlarge">Article Header</StyledHeading>;
const articleMainButtonContent = <MainButton
text='Actions'
@ -64,7 +70,7 @@ const sectionHeaderContent = <HeaderContent>
size='16'
onClick={(e) => action('ArrowPathIcon Clicked')(e)}
/>
<Header type="content">Section Header</Header>
<StyledHeading size='medium'>Section Header</StyledHeading>
<IconButton
iconName={"PlusIcon"}
size='16'

2
web/ASC.Web.Components/src/components/password-input/index.js
View File

@ -403,7 +403,7 @@ class PasswordInput extends React.Component {
<Link
type="action"
isHovered={true}
fontSize={13}
fontSize='13px'
color={iconsColor}
isSemitransparent={disableCopyAction}
onClick={this.copyToClipboard.bind(this, emailInputName)}

6
web/ASC.Web.Components/src/components/radio-button-group/README.md
View File

@ -23,15 +23,15 @@ import { RadioButtonGroup } from "asc-web-components";
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------- | :------------: | :------: | :----------------------: | :----------: | ---------------------------------------------------------------------------------------- |
| ------------- | :------------: | :------: | :----------------------: | :----------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group |
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup |
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component |
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component |
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton |
| `spacing` | `string` | - | - | `15px` | Margin between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container |

4
web/ASC.Web.Components/src/components/radio-button/README.md
View File

@ -25,8 +25,8 @@ import { RadioButton } from "asc-web-components";
| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used |
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. |
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on component |
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
| `spacing` | `string` | - | - | `15px` | Margin between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `<input>` tag. Used for identification each radiobutton |
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container |

6
web/ASC.Web.Components/src/components/request-loader/README.md
View File

@ -15,14 +15,14 @@ import { RequestLoader } from "asc-web-components";
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------- | :---------------: | :------: | :----: | :-------------------------: | ----------------------------- |
| ------------- | :------------: | :------: | :----: | :-------------------------: | ----------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `fontColor` | `string` | - | - | `#999` | Text label font color |
| `fontSize` | `number`,`string` | - | - | `12` | Text label font size |
| `fontSize` | `string` | - | - | `12px` | Text label font size |
| `id` | `string` | - | - | - | Accepts id |
| `label` | `string` | - | - | `Loading... Please wait...` | Svg aria-label and text label |
| `loaderColor` | `string` | - | - | `#999` | Svg color |
| `loaderSize` | `number`,`string` | - | - | `16` | Svg height and width value |
| `loaderSize` | `string` | - | - | `16px` | Svg height and width value |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `visible` | `bool` | - | - | `false` | Visibility |
| `zIndex` | `string` | - | - | `256` | CSS z-index |

8
web/ASC.Web.Components/src/components/request-loader/index.js
View File

@ -60,10 +60,10 @@ const RequestLoader = props => {
RequestLoader.propTypes = {
visible: PropTypes.bool,
zIndex: PropTypes.number,
loaderSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
loaderSize: PropTypes.string,
loaderColor: PropTypes.string,
label: PropTypes.string,
fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
fontSize: PropTypes.string,
fontColor: PropTypes.string,
className: PropTypes.string,
id: PropTypes.string,
@ -73,10 +73,10 @@ RequestLoader.propTypes = {
RequestLoader.defaultProps = {
visible: false,
zIndex: 256,
loaderSize: 16,
loaderSize: '16px',
loaderColor: '#999',
label: 'Loading... Please wait...',
fontSize: 12,
fontSize: '12px',
fontColor: '#999'
};

4
web/ASC.Web.Components/src/components/request-loader/request-loader.stories.js
View File

@ -14,10 +14,10 @@ storiesOf('Components|Loaders', module)
<RequestLoader
visible={boolean('visible', true)}
zIndex={number('zIndex', 256)}
loaderSize={number('loaderSize', 16)}
loaderSize={text('loaderSize', '16px')}
loaderColor={color('loaderColor', '#999')}
label={text('label', 'Loading... Please wait...')}
fontSize={number('fontSize', 12)}
fontSize={text('fontSize', '12px')}
fontColor={color('fontColor', '#999')} />
</Section>
));

10
web/ASC.Web.Components/src/components/row-container/row-container.stories.js
View File

@ -67,18 +67,18 @@ storiesOf('Components|RowContainer', module)
contextOptions={user.contextOptions}
>
<RowContent>
<Link type='page' title={user.userName} isBold={true} fontSize={15} color={nameColor} >{user.userName}</Link>
<Link type='page' title={user.userName} isBold={true} fontSize='15px' color={nameColor} >{user.userName}</Link>
<>
{user.status === 'pending' && <Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />}
{user.status === 'disabled' && <Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />}
</>
{user.isHead
? <Link containerWidth='120px' type='page' title='Head of department' fontSize={12} color={sideInfoColor} >Head of department</Link>
? <Link containerWidth='120px' type='page' title='Head of department' fontSize='12px' color={sideInfoColor} >Head of department</Link>
: <div></div>
}
<Link containerWidth='160px' type='action' title={user.department} fontSize={12} color={sideInfoColor} >{user.department}</Link>
<Link type='page' title={user.mobilePhone} fontSize={12} color={sideInfoColor} >{user.mobilePhone}</Link>
<Link containerWidth='180px' type='page' title={user.email} fontSize={12} color={sideInfoColor} >{user.email}</Link>
<Link containerWidth='160px' type='action' title={user.department} fontSize='12px' color={sideInfoColor} >{user.department}</Link>
<Link type='page' title={user.mobilePhone} fontSize='12px' color={sideInfoColor} >{user.mobilePhone}</Link>
<Link containerWidth='180px' type='page' title={user.email} fontSize='12px' color={sideInfoColor} >{user.email}</Link>
</RowContent>
</Row>
);

10
web/ASC.Web.Components/src/components/row-content/README.md
View File

@ -10,33 +10,33 @@ import { RowContent } from "asc-web-components";
```jsx
<RowContent>
<Link type="page" title="Demo" isBold={true} fontSize={15} color="#333333">
<Link type="page" title="Demo" isBold={true} fontSize='15px' color="#333333">
Demo
</Link>
<>
<Icons.SendClockIcon size="small" isfill={true} color="#3B72A7" />
<Icons.CatalogSpamIcon size="small" isfill={true} color="#3B72A7" />
</>
<Link type="page" title="Demo" fontSize={12} color="#A3A9AE">
<Link type="page" title="Demo" fontSize='12px' color="#A3A9AE">
Demo
</Link>
<Link
containerWidth="160px"
type="action"
title="Demo"
fontSize={12}
fontSize='12px'
color="#A3A9AE"
>
Demo
</Link>
<Link type="page" title="0 000 0000000" fontSize={12} color="#A3A9AE">
<Link type="page" title="0 000 0000000" fontSize='12px' color="#A3A9AE">
0 000 0000000
</Link>
<Link
containerWidth="160px"
type="page"
title="demo@demo.com"
fontSize={12}
fontSize='12px'
color="#A3A9AE"
>
demo@demo.com

38
web/ASC.Web.Components/src/components/row-content/row-content.stories.js
View File

@ -18,43 +18,43 @@ storiesOf('Components|RowContent', module)
<h3>Base demo</h3>
<div style={{height: '16px'}}></div>
<RowContent>
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
<>
<Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />
<Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />
</>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link containerWidth='160px' type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link containerWidth='160px' type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link containerWidth='160px' type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
<Link containerWidth='160px' type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
</RowContent>
<RowContent>
<Link type='page' title='Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo</Link>
<Link type='page' title='Demo Demo' isBold={true} fontSize='15px' color='#333333' >Demo Demo</Link>
<>
<Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />
</>
<></>
<Link containerWidth='160px' type='action' title='Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link containerWidth='160px' type='page' title='demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo@demo.com</Link>
<Link containerWidth='160px' type='action' title='Demo Demo' fontSize='12px' color='#A3A9AE' >Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
<Link containerWidth='160px' type='page' title='demo.demo@demo.com' fontSize='12px' color='#A3A9AE' >demo.demo@demo.com</Link>
</RowContent>
<RowContent>
<Link type='page' title='Demo Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo Demo</Link>
<Link type='page' title='Demo Demo Demo' isBold={true} fontSize='15px' color='#333333' >Demo Demo Demo</Link>
<></>
<></>
<Link containerWidth='160px' type='action' title='Demo Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link containerWidth='160px' type='page' title='demo.demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo.demo@demo.com</Link>
<Link containerWidth='160px' type='action' title='Demo Demo Demo' fontSize='12px' color='#A3A9AE' >Demo Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
<Link containerWidth='160px' type='page' title='demo.demo.demo@demo.com' fontSize='12px' color='#A3A9AE' >demo.demo.demo@demo.com</Link>
</RowContent>
<RowContent>
<Link type='page' title='Demo Demo Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo Demo Demo</Link>
<Link type='page' title='Demo Demo Demo Demo' isBold={true} fontSize='15px' color='#333333' >Demo Demo Demo Demo</Link>
<>
<Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />
</>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link containerWidth='160px' type='action' title='Demo Demo Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link containerWidth='160px' type='page' title='demo.demo.demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo.demo.demo@demo.com</Link>
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link containerWidth='160px' type='action' title='Demo Demo Demo Demo' fontSize='12px' color='#A3A9AE' >Demo Demo Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
<Link containerWidth='160px' type='page' title='demo.demo.demo.demo@demo.com' fontSize='12px' color='#A3A9AE' >demo.demo.demo.demo@demo.com</Link>
</RowContent>
<div style={{height: '36px'}}></div>
<h3>Custom elements</h3>
@ -62,7 +62,7 @@ storiesOf('Components|RowContent', module)
<RowContent
disableSideInfo={true}
>
<Link type='page' title='John Doe' isBold={true} fontSize={15} color='#333333' >John Doe</Link>
<Link type='page' title='John Doe' isBold={true} fontSize='15px' color='#333333' >John Doe</Link>
<></>
<BooleanValue>
{({ value, toggle }) => (

40
web/ASC.Web.Components/src/components/row-content/row-content.test.js
View File

@ -7,11 +7,11 @@ describe('<RowContent />', () => {
it('renders without error', () => {
const wrapper = mount(
<RowContent>
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
</RowContent>
);
@ -21,11 +21,11 @@ describe('<RowContent />', () => {
it('accepts id', () => {
const wrapper = mount(
<RowContent id="testId">
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
</RowContent>
);
@ -35,11 +35,11 @@ describe('<RowContent />', () => {
it('accepts className', () => {
const wrapper = mount(
<RowContent className="test">
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
</RowContent>
);
@ -49,11 +49,11 @@ describe('<RowContent />', () => {
it('accepts style', () => {
const wrapper = mount(
<RowContent style={{ color: 'red' }}>
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
</RowContent>
);

2
web/ASC.Web.Components/src/components/tabs-container/index.js
View File

@ -224,7 +224,7 @@ class TabContainer extends Component {
selected={activeTab === index}
isDisabled={isDisabled}
>
<Text className="title_style" fontSize={13}>
<Text className="title_style" fontSize='13px'>
{item.title}
</Text>
</Label>

18
web/ASC.Web.Components/src/components/text/README.md
View File

@ -33,15 +33,15 @@ const StyledText = styled(Text)`
### Properties
| Props | Type | Required | Values | Default | Description |
| ----------------- | :------: | :------: | :----: | :-------: | -------------------------------------------------- |
| `fontSize` | `oneOfType(number, string)` | - | - | `13` | Sets the font size |
| ----------------- | :-------------------------: | :------: | :----: | :-------: | -------------------------------------------------- |
| `as` | `string` | - | - | `p` | Sets the tag through which to render the component |
| `backgroundColor` | `string` | - | - | - | Sets background color |
| `color` | `string` | - | - | `#333333` | Specifies the text color |
| `display` | `string` | - | - | - | Sets the 'display' property |
| `fontSize` | `oneOfType(number, string)` | - | - | `13` | Sets the font size |
| `fontWeight` | `number` | - | - | - | Sets the font weight |
| `isBold` | `bool` | - | - | `false` | Sets font weight value ​​to bold |
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
| `isItalic` | `bool` | - | - | `false` | Sets the font style |
| `title` | `bool` | - | - | - | Title |
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
| `display` | `string` | - | - | - | Sets the 'display' property |
| `color` | `string` | - | - | `#333333` | Specifies the text color |
| `isBold` | `bool` | - | - | `false` | Sets font weight value ​​to bold |
| `isItalic` | `bool` | - | - | `false` | Sets the font style |
| `backgroundColor` | `string` | - | - | - | Sets background color |
| `fontWeight` | `number` | - | - | - | Sets the font weight |

10
web/ASC.Web.Components/src/components/text/index.js
View File

@ -4,10 +4,8 @@ import styled, { css } from 'styled-components';
import commonTextStyles from './common-text-styles';
const styleCss = css`
outline: 0 !important;
${props => (typeof (props.fontSize) === 'string' && css`font-size: ${props.fontSize};`) ||
(typeof (props.fontSize) === 'number' && css`font-size: ${props.fontSize}px;`)};
font-weight: ${props => props.fontWeight
font-size: ${props => props.fontSize};
outline: 0 !important; font-weight: ${props => props.fontWeight
? props.fontWeight
: props.isBold == true ? 700 : 500};
${props => props.isItalic == true && css`font-style: italic;`}
@ -35,7 +33,7 @@ Text.propTypes = {
tag: PropTypes.string,
title: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
fontSize: PropTypes.string,
fontWeight: PropTypes.number,
backgroundColor: PropTypes.string,
truncate: PropTypes.bool,
@ -48,7 +46,7 @@ Text.propTypes = {
Text.defaultProps = {
title: '',
color: '#333333',
fontSize: 13,
fontSize: '13px',
truncate: false,
isBold: false,
isInline: false,

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

@ -18,7 +18,7 @@ storiesOf('Components|Text', module)
<Text
title={text('title', '')}
as={select('as', textTags , 'p')}
fontSize={number('fontSize', 13)}
fontSize={text('fontSize', '13px')}
fontWeight={number('fontWeight')}
truncate={boolean('truncate', false)}
color={color('color', '#333333')}

1
web/ASC.Web.Components/src/components/textarea/index.js
View File

@ -54,7 +54,6 @@ const StyledTextarea = styled(ClearTextareaAutosize)`
class Textarea extends React.PureComponent {
render() {
// console.log('Textarea render');
console.warn('Textarea render');
return (
<StyledScrollbar
className={this.props.className}

Some files were not shown because too many files have changed in this diff Show More