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

Web: Client: Settings: add mobile category wrapper

Browse Source
This commit is contained in:
Viktor Fomin 2022-04-01 15:22:58 +03:00
parent d5c2cb87f4
commit 396c6984c0
3 changed files with 85 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
web/ASC.Web.Client/src/components/pages/Settings/categories/security/StyledSecurity.js
View File

@ -33,39 +33,6 @@ export const MainContainer = styled.div`
position: fixed;
left: 50%;
}
.category-item-wrapper {
margin-bottom: 20px;
.category-item-heading {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.category-item-subheader {
font-size: 13px;
font-weight: 600;
margin-bottom: 5px;
}
.category-item-description {
color: ${(props) =>
props.theme.studio.settings.security.descriptionColor};
font-size: 12px;
max-width: 1024px;
}
.inherit-title-link {
margin-right: 7px;
font-size: 19px;
font-weight: 600;
}
.link-text {
margin: 0;
}
}
`;
MainContainer.defaultProps = { theme: Base };
@ -78,6 +45,40 @@ export const StyledCategoryWrapper = styled.div`
align-items: center;
`;
export const StyledMobileCategoryWrapper = styled.div`
margin-bottom: 20px;
.category-item-heading {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.category-item-subheader {
font-size: 13px;
font-weight: 600;
margin-bottom: 5px;
}
.category-item-description {
color: ${(props) => props.theme.studio.settings.security.descriptionColor};
font-size: 12px;
max-width: 1024px;
}
.inherit-title-link {
margin-right: 7px;
font-size: 19px;
font-weight: 600;
}
.link-text {
margin: 0;
}
`;
StyledMobileCategoryWrapper.defaultProps = { theme: Base };
export const ButtonsWrapper = styled.div`
display: flex;
flex-direction: row;

58
web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/mobileView.js
View File

@ -1,12 +1,9 @@
import React, { useEffect } from "react";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next";
import Link from "@appserver/components/link";
import Text from "@appserver/components/text";
import { combineUrl } from "@appserver/common/utils";
import { AppServerConfig } from "@appserver/common/constants";
import { setDocumentTitle } from "../../../../../../helpers/utils";
import { MainContainer, StyledArrowRightIcon } from "../StyledSecurity";
import { MainContainer } from "../StyledSecurity";
import MobileCategoryWrapper from "../sub-components/mobile-category-wrapper";
const MobileView = (props) => {
const { t, history } = props;
@ -22,45 +19,18 @@ const MobileView = (props) => {
return (
<MainContainer>
<div className="category-item-wrapper">
<div className="category-item-heading">
<Link
className="inherit-title-link header"
onClick={onClickLink}
truncate={true}
href={combineUrl(
AppServerConfig.proxyURL,
"/settings/security/access-portal/password"
)}
>
{t("SettingPasswordStrength")}
</Link>
<StyledArrowRightIcon size="small" />
</div>
<Text className="category-item-description">
{t("SettingPasswordStrengthDescription")}
</Text>
</div>
<div className="category-item-wrapper">
<div className="category-item-heading">
<Link
className="inherit-title-link header"
onClick={onClickLink}
truncate={true}
href={combineUrl(
AppServerConfig.proxyURL,
"/settings/security/access-portal/tfa"
)}
>
{t("TwoFactorAuth")}
</Link>
<StyledArrowRightIcon size="small" />
</div>
<Text className="category-item-description">
{t("TwoFactorAuthDescription")}
</Text>
</div>
<MobileCategoryWrapper
title={t("SettingPasswordStrength")}
subtitle={t("SettingPasswordStrengthDescription")}
url="/settings/security/access-portal/password"
onClickLink={onClickLink}
/>
<MobileCategoryWrapper
title={t("TwoFactorAuth")}
subtitle={t("TwoFactorAuthDescription")}
url="/settings/security/access-portal/tfa"
onClickLink={onClickLink}
/>
</MainContainer>
);
};

37
web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/mobile-category-wrapper.js Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import Text from "@appserver/components/text";
import Link from "@appserver/components/link";
import { Base } from "@appserver/components/themes";
import {
StyledMobileCategoryWrapper,
StyledArrowRightIcon,
} from "../StyledSecurity";
import { combineUrl } from "@appserver/common/utils";
import { AppServerConfig } from "@appserver/common/constants";
const MobileCategoryWrapper = (props) => {
const { title, url, subtitle, onClickLink } = props;
return (
<StyledMobileCategoryWrapper>
<div className="category-item-heading">
<Link
className="inherit-title-link header"
onClick={onClickLink}
truncate={true}
href={combineUrl(AppServerConfig.proxyURL, url)}
>
{title}
</Link>
<StyledArrowRightIcon size="small" />
</div>
<Text className="category-item-description">{subtitle}</Text>
</StyledMobileCategoryWrapper>
);
};
MobileCategoryWrapper.defaultProps = {
theme: Base,
};
export default MobileCategoryWrapper;