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

1. Web.Components: Text: change proptype fontSize from [number, string] to string. Applied to other components.

Browse Source 
2. Web.Components: Link: fixed isTextOverflow prop working
3.  Web.Components: RadioButtonGroup, RadioButton: fixed readme
This commit is contained in:
Daniil Senkiv 2019-12-10 17:12:38 +03:00
parent 426387cab6
commit d62de9827e
71 changed files with 244 additions and 237 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}`} />

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>

10
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' />}
@ -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>
);
};

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

4
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 ? ", " : ""}
@ -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)}

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} />;

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

@ -459,7 +459,7 @@ class UpdateUserForm extends React.Component {
<>
<Text
style={{paddingBottom: 17}}
fontSize={13}>
fontSize='13px'>
{t("ProfileTypePopupHelper")}
</Text>

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' />
)
};

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} />

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

@ -107,7 +107,7 @@ const Body = ({language}) => {
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>
@ -126,7 +126,7 @@ 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>
@ -136,18 +136,18 @@ const Body = ({language}) => {
<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}

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' />
}
/>
) : (

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' />
}
/>
);

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

@ -478,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}

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}

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>

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>
}

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 |

14
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,13 +40,14 @@ const Link = memo(({ isTextOverflow, children, ...rest }) => {
// console.log("Link render", rest);
return (
<StyledLink
<StyledText
tag="a"
isTextOverflow={isTextOverflow}
truncate={isTextOverflow}
{...rest}
>
{children}
</StyledLink>
</StyledText>
);
});

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')}

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

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

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)}

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

@ -22,16 +22,16 @@ 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 |
| `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) |
| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container |
| 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 |
| `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 |

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

@ -14,15 +14,15 @@ 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 |
| `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 |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `visible` | `bool` | - | - | `false` | Visibility |
| `zIndex` | `string` | - | - | `256` | CSS z-index |
| Props | Type | Required | Values | Default | Description |
| ------------- | :------------: | :------: | :----: | :-------------------------: | ----------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `fontColor` | `string` | - | - | `#999` | Text label font color |
| `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` | `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>

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

@ -4,8 +4,7 @@ import styled, { css } from 'styled-components';
import commonTextStyles from './common-text-styles';
const styleCss = css`
${props => (typeof (props.fontSize) === 'string' && css`font-size: ${props.fontSize};`) ||
(typeof (props.fontSize) === 'number' && css`font-size: ${props.fontSize}px;`)};
font-size: ${props => props.fontSize};
font-weight: ${props => props.fontWeight
? props.fontWeight
: props.isBold == true ? 700 : 500};
@ -34,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,
@ -47,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')}

8
web/ASC.Web.Components/src/components/tooltip/README.md
View File

@ -23,7 +23,7 @@ import { Tooltip, IconButton, Text } from "asc-web-components";
</div>
<Tooltip
id="tooltipContent"
getContent={dataTip => <Text fontSize={13}>{dataTip}</Text>}
getContent={dataTip => <Text fontSize='13px'>{dataTip}</Text>}
effect="float"
place="top"
maxWidth={320}
@ -82,13 +82,13 @@ const arrayUsers = [
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
}

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

@ -56,13 +56,13 @@ storiesOf("Components|Tooltip", module)
</div>
<Tooltip id="link" offsetRight={90} effect="solid">
<div>
<Text isBold={true} fontSize={16}>
<Text isBold={true} fontSize='16px'>
Bob Johnston
</Text>
<Text color="#A3A9AE" fontSize={13}>
<Text color="#A3A9AE" fontSize='13px'>
BobJohnston@gmail.com
</Text>
<Text fontSize={13}>Developer</Text>
<Text fontSize='13px'>Developer</Text>
</div>
</Tooltip>
@ -95,13 +95,13 @@ storiesOf("Components|Tooltip", 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}>
<Text fontSize='13px'>
{arrayUsers[dataTip].position}
</Text>
</div>

6
web/ASC.Web.Components/src/components/tooltip/base.stories.js
View File

@ -38,13 +38,13 @@ storiesOf("Components|Tooltip", module)
offsetLeft={number("offsetLeft", 0)}
getContent={dataTip => (
<div>
<Text isBold={true} fontSize={16}>
<Text isBold={true} fontSize='16px'>
{dataTip}
</Text>
<Text color="#A3A9AE" fontSize={13}>
<Text color="#A3A9AE" fontSize='13px'>
BobJohnston@gmail.com
</Text>
<Text fontSize={13}>Developer</Text>
<Text fontSize='13px'>Developer</Text>
</div>
)}
/>