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

Web: DocEditor: Added scroll.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2024-04-27 18:41:36 +03:00
parent 8ec2e5f2e0
commit 66d9f5ef91
2 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/doceditor/src/components/deep-link/DeepLink.styled.ts
View File

@ -109,6 +109,17 @@ export const BgBlock = styled.div<{ bgPattern: string }>`
`;
export const StyledWrapper = styled.div`
height: 100%;
width: 100vw;
max-width: 960px;
@media ${mobile} {
margin: 0 auto;
align-items: flex-start;
}
`;
export const StyledBody = styled.div`
display: flex;
flex-direction: column;
align-items: center;
@ -121,7 +132,6 @@ export const StyledWrapper = styled.div`
align-items: flex-start;
}
`;
export const LogoWrapper = styled.div`
margin-bottom: 64px;
margin-top: 56px;

91
packages/doceditor/src/components/deep-link/index.tsx
View File

@ -35,6 +35,8 @@ import { Button, ButtonSize } from "@docspace/shared/components/button";
import { Link, LinkType } from "@docspace/shared/components/link";
import { FormWrapper } from "@docspace/shared/components/form-wrapper";
import { getBgPattern } from "@docspace/shared/utils/common";
import DocspaceLogo from "@docspace/shared/components/docspace-logo/DocspaceLogo";
import { Scrollbar } from "@docspace/shared/components/scrollbar";
import { getDeepLink } from "./DeepLink.helper";
import {
@ -45,9 +47,10 @@ import {
BgBlock,
StyledWrapper,
LogoWrapper,
StyledBody,
} from "./DeepLink.styled";
import { DeepLinkProps } from "./DeepLink.types";
import DocspaceLogo from "@docspace/shared/components/docspace-logo/DocspaceLogo";
const DeepLink = ({
fileInfo,
@ -96,48 +99,52 @@ const DeepLink = ({
return (
<StyledWrapper>
<LogoWrapper>
<DocspaceLogo className="docspace-logo" isResizable />
</LogoWrapper>
<FormWrapper>
<StyledDeepLink>
<StyledBodyWrapper>
<Text className="title">{t("DeepLink:OpeningDocument")}</Text>
<StyledFileTile>
<img src={getFileIcon()} alt="docspace-logo" />
<Text fontSize="14px" fontWeight="600" truncate>
{getFileTitle()}
</Text>
</StyledFileTile>
<Text>{t("DeepLink:DeepLinkText")}</Text>
</StyledBodyWrapper>
<StyledActionsWrapper>
<Checkbox
label={t("Common:Remember")}
isChecked={isRemember}
onChange={onChangeCheckbox}
/>
<Button
size={ButtonSize.medium}
primary
label={t("DeepLink:OpenInApp")}
onClick={onOpenAppClick}
/>
<Link
className="stay-link"
type={LinkType.action}
fontSize="13px"
fontWeight="600"
isHovered
color={theme.currentColorScheme?.main?.accent}
onClick={onStayBrowserClick}
>
{t("DeepLink:StayInBrowser")}
</Link>
</StyledActionsWrapper>
</StyledDeepLink>
</FormWrapper>
<BgBlock bgPattern={bgPattern} />
<Scrollbar id="customScrollBar">
<StyledBody>
<LogoWrapper>
<DocspaceLogo className="docspace-logo" isResizable />
</LogoWrapper>
<FormWrapper>
<StyledDeepLink>
<StyledBodyWrapper>
<Text className="title">{t("DeepLink:OpeningDocument")}</Text>
<StyledFileTile>
<img src={getFileIcon()} alt="docspace-logo" />
<Text fontSize="14px" fontWeight="600" truncate>
{getFileTitle()}
</Text>
</StyledFileTile>
<Text>{t("DeepLink:DeepLinkText")}</Text>
</StyledBodyWrapper>
<StyledActionsWrapper>
<Checkbox
label={t("Common:Remember")}
isChecked={isRemember}
onChange={onChangeCheckbox}
/>
<Button
size={ButtonSize.medium}
primary
label={t("DeepLink:OpenInApp")}
onClick={onOpenAppClick}
/>
<Link
className="stay-link"
type={LinkType.action}
fontSize="13px"
fontWeight="600"
isHovered
color={theme.currentColorScheme?.main?.accent}
onClick={onStayBrowserClick}
>
{t("DeepLink:StayInBrowser")}
</Link>
</StyledActionsWrapper>
</StyledDeepLink>
</FormWrapper>
</StyledBody>
</Scrollbar>
</StyledWrapper>
);
};