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

Merge pull request #386 from ONLYOFFICE/bugfix/deep-link-logo

Browse Source 
Bugfix/deep link logo
This commit is contained in:
Alexey Safronov 2024-05-02 11:44:02 +04:00 committed by GitHub
commit c235dc4f7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 65 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/doceditor/src/components/Root.tsx
View File

@ -35,7 +35,6 @@ import AppLoader from "@docspace/shared/components/app-loader";
import { TResponse } from "@/types";
import useError from "@/hooks/useError";
import useDeviceType from "@/hooks/useDeviceType";
import useRootInit from "@/hooks/useRootInit";
import useDeepLink from "@/hooks/useDeepLink";
import useSelectFileDialog from "@/hooks/useSelectFileDialog";
@ -85,7 +84,6 @@ const Root = ({
editorUrl: documentserverUrl,
});
const { currentDeviceType } = useDeviceType();
const { isShowDeepLink, setIsShowDeepLink } = useDeepLink({
settings,
fileInfo,
@ -159,7 +157,6 @@ const Root = ({
<DeepLink
fileInfo={fileInfo}
userEmail={user?.email}
currentDeviceType={currentDeviceType}
deepLinkConfig={settings?.deepLink}
setIsShowDeepLink={setIsShowDeepLink}
/>

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

@ -109,26 +109,34 @@ 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;
margin: 56px auto;
max-width: 960px;
width: 100vw;
@media ${mobile} {
margin: 0 auto;
align-items: flex-start;
}
`;
export const LogoWrapper = styled.div`
width: 386px;
height: 44px;
margin-top: auto;
margin-bottom: 64px;
margin-top: 56px;
@media ${mobile} {
display: none;
margin-top: 32px;
}
`;

2
packages/doceditor/src/components/deep-link/DeepLink.types.ts
View File

@ -35,7 +35,7 @@ export interface DeepLinkProps {
fileInfo?: TFile;
userEmail?: string;
currentDeviceType: DeviceType;
currentDeviceType?: DeviceType;
deepLinkConfig?: TDeepLinkConfig;
setIsShowDeepLink: (value: boolean) => void;

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

@ -35,12 +35,11 @@ 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 { getLogoUrl } from "@docspace/shared/utils";
import { DeviceType, WhiteLabelLogoType } from "@docspace/shared/enums";
import DocspaceLogo from "@docspace/shared/components/docspace-logo/DocspaceLogo";
import { Scrollbar } from "@docspace/shared/components/scrollbar";
import { getDeepLink } from "./DeepLink.helper";
import {
StyledSimpleNav,
StyledDeepLink,
StyledBodyWrapper,
StyledFileTile,
@ -48,14 +47,15 @@ import {
BgBlock,
StyledWrapper,
LogoWrapper,
StyledBody,
} from "./DeepLink.styled";
import { DeepLinkProps } from "./DeepLink.types";
const DeepLink = ({
fileInfo,
userEmail,
setIsShowDeepLink,
currentDeviceType,
deepLinkConfig,
}: DeepLinkProps) => {
const { t } = useTranslation(["DeepLink", "Common"]);
@ -95,73 +95,58 @@ const DeepLink = ({
: fileInfo?.title || "";
};
const renderLogo = () => {
const logo = getLogoUrl(WhiteLabelLogoType.LightSmall, !theme.isBase);
if (currentDeviceType === DeviceType.mobile) {
return (
<StyledSimpleNav>
<img src={logo} alt="" />
</StyledSimpleNav>
);
} else {
return (
<LogoWrapper>
<img src={logo} alt="docspace-logo" />
</LogoWrapper>
);
}
};
const bgPattern = getBgPattern(theme.currentColorScheme?.id);
const logoElement = renderLogo();
return (
<StyledWrapper>
{logoElement}
<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>
<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>
);
};
export default DeepLink;