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

Web: Client: Data Import: correct cancel button in mobile view

Browse Source
This commit is contained in:
Vladimir Khvan 2024-07-02 16:27:21 +05:00
parent 59255bf75b
commit a6d97d11a8
2 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/client/src/pages/PortalSettings/categories/data-import/components/SelectFileStep.tsx
View File

@ -27,7 +27,7 @@
import { useState, useRef, useEffect, useCallback } from "react"; import { useState, useRef, useEffect, useCallback } from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { CancelUploadDialog } from "SRC_DIR/components/dialogs"; import { CancelUploadDialog } from "SRC_DIR/components/dialogs";
import { isTablet } from "@docspace/shared/utils/device"; import { isMobile, isTablet, mobile } from "@docspace/shared/utils/device";
import styled from "styled-components"; import styled from "styled-components";
import { Text } from "@docspace/shared/components/text"; import { Text } from "@docspace/shared/components/text";
@ -80,6 +80,24 @@ const Wrapper = styled.div`
const FileUploadContainer = styled.div` const FileUploadContainer = styled.div`
max-width: 350px; max-width: 350px;
.cancelUploadButton {
@media ${mobile} {
margin-bottom: 0;
width: auto;
position: fixed;
inset-inline: 0px;
bottom: 0px;
padding: 16px;
background: white;
gap: 0;
}
}
`; `;
const ErrorBlock = styled.div` const ErrorBlock = styled.div`
@ -335,11 +353,14 @@ const SelectFileStep = (props: SelectFileStepProps) => {
className="select-file-progress-bar" className="select-file-progress-bar"
label={t("Settings:BackupFileUploading")} label={t("Settings:BackupFileUploading")}
/> />
<Button <div className="cancelUploadButton">
size={isTablet() ? ButtonSize.medium : ButtonSize.small} <Button
label={t("Common:CancelButton")} size={isTablet() ? ButtonSize.medium : ButtonSize.small}
onClick={onCancel} label={t("Common:CancelButton")}
/> onClick={onCancel}
scale={isMobile()}
/>
</div>
</FileUploadContainer> </FileUploadContainer>
) : ( ) : (
<ErrorBlock> <ErrorBlock>

7
packages/client/src/pages/PortalSettings/categories/data-import/sub-components/MigrationButtons.tsx
View File

@ -39,7 +39,7 @@ const MigrationButtonsWrapper = styled.div`
@media ${mobile} { @media ${mobile} {
margin-bottom: 0; margin-bottom: 0;
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -81,7 +81,10 @@ const CancelMigrationButton = styled.span`
text-decoration-line: underline; text-decoration-line: underline;
text-decoration-style: dashed; text-decoration-style: dashed;
padding: 0 16px;
@media ${mobile} {
padding: 0 16px;
}
`; `;
export const MigrationButtons = ({ export const MigrationButtons = ({