Doceditor:CompletedForm Fixed scroll and styles
This commit is contained in:
parent
3f50e0bc7c
commit
792ab3cc40
@ -27,33 +27,61 @@
|
||||
|
||||
import styled from "styled-components";
|
||||
|
||||
import { mobile } from "@docspace/shared/utils";
|
||||
import { mobile, mobileMore } from "@docspace/shared/utils";
|
||||
|
||||
import type { CompletedFormLayoutProps } from "./CompletedForm.types";
|
||||
|
||||
export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
export const ContainerCompletedForm = styled.section<CompletedFormLayoutProps>`
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
padding: 100px 16px 16px;
|
||||
|
||||
background-image: ${(props) => props.bgPattern};
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
height: 100%;
|
||||
|
||||
.scroller {
|
||||
> .scroll-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-inline-end: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.completed-form__default-layout {
|
||||
padding: clamp(42px, 8vh, 100px) 16px 16px;
|
||||
|
||||
picture {
|
||||
}
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
.completed-form__default-layout {
|
||||
padding: 0px 16px 16px;
|
||||
}
|
||||
|
||||
background-image: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CompletedFormLayout = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
padding: clamp(42px, 8vh, 100px) 0px 16px 16px;
|
||||
|
||||
picture {
|
||||
margin-bottom: clamp(40px, 10vh, 125px);
|
||||
margin-bottom: clamp(40px, 8vh, 125px);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.link {
|
||||
@ -68,9 +96,14 @@ export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
background-image: none;
|
||||
@media ${mobileMore} and (max-height: 650px) {
|
||||
padding-top: 42px;
|
||||
.completed-form__logo {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
padding-top: 0px;
|
||||
|
||||
.completed-form__icon {
|
||||
@ -95,6 +128,11 @@ export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.completed-form__empty {
|
||||
gap: 20px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -69,9 +69,11 @@ import {
|
||||
FormNumberWrapper,
|
||||
ManagerWrapper,
|
||||
MainContent,
|
||||
ContainerCompletedForm,
|
||||
} from "./CompletedForm.styled";
|
||||
|
||||
import type { CompletedFormProps } from "./CompletedForm.types";
|
||||
import { Scrollbar } from "@docspace/shared/components/scrollbar";
|
||||
|
||||
export const CompletedForm = ({
|
||||
session,
|
||||
@ -92,25 +94,29 @@ export const CompletedForm = ({
|
||||
|
||||
if (!session)
|
||||
return (
|
||||
<CompletedFormLayout bgPattern={bgPattern}>
|
||||
<picture className="completed-form__logo">
|
||||
<source media={mobile} srcSet={smallLogoUrl} />
|
||||
<source media={mobileMore} srcSet={logoUrl} />
|
||||
<img src={logoUrl} alt="logo" />
|
||||
</picture>
|
||||
<Image
|
||||
priority
|
||||
src={iconUrl}
|
||||
className="completed-form__icon"
|
||||
alt="icon"
|
||||
width={416}
|
||||
height={200}
|
||||
/>
|
||||
<TextWrapper className="completed-form__empty">
|
||||
<Heading level={HeadingLevel.h1}>{t("CompletedForm:Title")}</Heading>
|
||||
<Text noSelect>{t("CompletedForm:Description")}</Text>
|
||||
</TextWrapper>
|
||||
</CompletedFormLayout>
|
||||
<ContainerCompletedForm bgPattern={bgPattern}>
|
||||
<CompletedFormLayout className="completed-form__default-layout">
|
||||
<picture className="completed-form__logo">
|
||||
<source media={mobile} srcSet={smallLogoUrl} />
|
||||
<source media={mobileMore} srcSet={logoUrl} />
|
||||
<img src={logoUrl} alt="logo" />
|
||||
</picture>
|
||||
<Image
|
||||
priority
|
||||
src={iconUrl}
|
||||
className="completed-form__icon"
|
||||
alt="icon"
|
||||
width={416}
|
||||
height={200}
|
||||
/>
|
||||
<TextWrapper className="completed-form__empty">
|
||||
<Heading level={HeadingLevel.h1}>
|
||||
{t("CompletedForm:Title")}
|
||||
</Heading>
|
||||
<Text noSelect>{t("CompletedForm:Description")}</Text>
|
||||
</TextWrapper>
|
||||
</CompletedFormLayout>
|
||||
</ContainerCompletedForm>
|
||||
);
|
||||
|
||||
const {
|
||||
@ -172,85 +178,96 @@ export const CompletedForm = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<CompletedFormLayout bgPattern={bgPattern}>
|
||||
<picture className="completed-form__logo">
|
||||
<source media={mobile} srcSet={smallLogoUrl} />
|
||||
<source media={mobileMore} srcSet={logoUrl} />
|
||||
<img src={logoUrl} alt="logo" />
|
||||
</picture>
|
||||
<TextWrapper>
|
||||
<Heading level={HeadingLevel.h1}>
|
||||
{t("CompletedForm:FormCompletedSuccessfully")}
|
||||
</Heading>
|
||||
<Text noSelect>
|
||||
{isAnonim
|
||||
? t("CompletedForm:DescriptionForAnonymous")
|
||||
: t("CompletedForm:DescriptionForRegisteredUser")}
|
||||
</Text>
|
||||
</TextWrapper>
|
||||
<MainContent>
|
||||
<Box className="completed-form__file">
|
||||
<PDFIcon />
|
||||
<Heading className="completed-form__filename" level={HeadingLevel.h5}>
|
||||
{completedForm.title}
|
||||
</Heading>
|
||||
<IconButton
|
||||
size={16}
|
||||
className="completed-form__download"
|
||||
iconName={isAnonim ? DownloadIconUrl : LinkIconUrl}
|
||||
onClick={isAnonim ? handleDownload : copyLinkFile}
|
||||
/>
|
||||
</Box>
|
||||
<FormNumberWrapper>
|
||||
<span className="label">{t("CompletedForm:FormNumber")}</span>
|
||||
<Box>
|
||||
<Text className="completed-form__form-number">{formNumber}</Text>
|
||||
</Box>
|
||||
</FormNumberWrapper>
|
||||
<ManagerWrapper>
|
||||
<span className="label">{t("CompletedForm:FormOwner")}</span>
|
||||
<Box>
|
||||
<Avatar
|
||||
className="manager__avatar"
|
||||
size={AvatarSize.medium}
|
||||
role={AvatarRole.manager}
|
||||
source={manager.avatar}
|
||||
/>
|
||||
<Heading level={HeadingLevel.h3} className="manager__user-name">
|
||||
{decode(manager.displayName)}
|
||||
<ContainerCompletedForm bgPattern={bgPattern}>
|
||||
<Scrollbar fixedSize>
|
||||
<CompletedFormLayout>
|
||||
<picture className="completed-form__logo">
|
||||
<source media={mobile} srcSet={smallLogoUrl} />
|
||||
<source media={mobileMore} srcSet={logoUrl} />
|
||||
<img src={logoUrl} alt="logo" />
|
||||
</picture>
|
||||
<TextWrapper>
|
||||
<Heading level={HeadingLevel.h1}>
|
||||
{t("CompletedForm:FormCompletedSuccessfully")}
|
||||
</Heading>
|
||||
<Link
|
||||
className="manager__mail link"
|
||||
href={`mailto:${manager.email}`}
|
||||
>
|
||||
<MailIcon />
|
||||
<span>{manager.email}</span>
|
||||
</Link>
|
||||
</Box>
|
||||
</ManagerWrapper>
|
||||
</MainContent>
|
||||
<ButtonWrapper isShreFile={isShreFile && !isRoomMember}>
|
||||
<Button
|
||||
scale
|
||||
primary
|
||||
size={ButtonSize.medium}
|
||||
label={
|
||||
isAnonim ? t("Common:Download") : t("CompletedForm:CheckReadyForms")
|
||||
}
|
||||
onClick={isAnonim ? handleDownload : gotoCompleteFolder}
|
||||
/>
|
||||
{(!isShreFile || isRoomMember) && (
|
||||
<Button
|
||||
scale
|
||||
size={ButtonSize.medium}
|
||||
label={t("CompletedForm:BackToRoom")}
|
||||
onClick={handleBackToRoom}
|
||||
/>
|
||||
)}
|
||||
</ButtonWrapper>
|
||||
<Link className="link" href={`/?${fillAgainSearchParams.toString()}`}>
|
||||
{t("CompletedForm:FillItOutAgain")}
|
||||
</Link>
|
||||
</CompletedFormLayout>
|
||||
<Text noSelect>
|
||||
{isAnonim
|
||||
? t("CompletedForm:DescriptionForAnonymous")
|
||||
: t("CompletedForm:DescriptionForRegisteredUser")}
|
||||
</Text>
|
||||
</TextWrapper>
|
||||
<MainContent>
|
||||
<Box className="completed-form__file">
|
||||
<PDFIcon />
|
||||
<Heading
|
||||
className="completed-form__filename"
|
||||
level={HeadingLevel.h5}
|
||||
>
|
||||
{completedForm.title}
|
||||
</Heading>
|
||||
<IconButton
|
||||
size={16}
|
||||
className="completed-form__download"
|
||||
iconName={isAnonim ? DownloadIconUrl : LinkIconUrl}
|
||||
onClick={isAnonim ? handleDownload : copyLinkFile}
|
||||
/>
|
||||
</Box>
|
||||
<FormNumberWrapper>
|
||||
<span className="label">{t("CompletedForm:FormNumber")}</span>
|
||||
<Box>
|
||||
<Text className="completed-form__form-number">
|
||||
{formNumber}
|
||||
</Text>
|
||||
</Box>
|
||||
</FormNumberWrapper>
|
||||
<ManagerWrapper>
|
||||
<span className="label">{t("CompletedForm:FormOwner")}</span>
|
||||
<Box>
|
||||
<Avatar
|
||||
className="manager__avatar"
|
||||
size={AvatarSize.medium}
|
||||
role={AvatarRole.manager}
|
||||
source={manager.avatar}
|
||||
/>
|
||||
<Heading level={HeadingLevel.h3} className="manager__user-name">
|
||||
{decode(manager.displayName)}
|
||||
</Heading>
|
||||
<Link
|
||||
className="manager__mail link"
|
||||
href={`mailto:${manager.email}`}
|
||||
>
|
||||
<MailIcon />
|
||||
<span>{manager.email}</span>
|
||||
</Link>
|
||||
</Box>
|
||||
</ManagerWrapper>
|
||||
</MainContent>
|
||||
<ButtonWrapper isShreFile={isShreFile && !isRoomMember}>
|
||||
<Button
|
||||
scale
|
||||
primary
|
||||
size={ButtonSize.medium}
|
||||
label={
|
||||
isAnonim
|
||||
? t("Common:Download")
|
||||
: t("CompletedForm:CheckReadyForms")
|
||||
}
|
||||
onClick={isAnonim ? handleDownload : gotoCompleteFolder}
|
||||
/>
|
||||
{(!isShreFile || isRoomMember) && (
|
||||
<Button
|
||||
scale
|
||||
size={ButtonSize.medium}
|
||||
label={t("CompletedForm:BackToRoom")}
|
||||
onClick={handleBackToRoom}
|
||||
/>
|
||||
)}
|
||||
</ButtonWrapper>
|
||||
<Link className="link" href={`/?${fillAgainSearchParams.toString()}`}>
|
||||
{t("CompletedForm:FillItOutAgain")}
|
||||
</Link>
|
||||
</CompletedFormLayout>
|
||||
</Scrollbar>
|
||||
</ContainerCompletedForm>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user