Client: UploadPanel: Added a header component.
This commit is contained in:
parent
ceac4c0faf
commit
46869487ff
@ -712,24 +712,6 @@ const StyledLink = styled(Link)`
|
|||||||
|
|
||||||
StyledModalRowContainer.defaultProps = { theme: Base };
|
StyledModalRowContainer.defaultProps = { theme: Base };
|
||||||
|
|
||||||
const StyledUploadHeader = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.icons-container {
|
|
||||||
margin-left: 16px;
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-container {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledUploadBody = styled.div`
|
const StyledUploadBody = styled.div`
|
||||||
width: calc(100% + 16px);
|
width: calc(100% + 16px);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -751,6 +733,5 @@ export {
|
|||||||
StyledModalRowContainer,
|
StyledModalRowContainer,
|
||||||
StyledLink,
|
StyledLink,
|
||||||
StyledNewFilesBody,
|
StyledNewFilesBody,
|
||||||
StyledUploadHeader,
|
|
||||||
StyledUploadBody,
|
StyledUploadBody,
|
||||||
};
|
};
|
||||||
|
@ -39,9 +39,10 @@ import {
|
|||||||
} from "@docspace/shared/components/modal-dialog";
|
} from "@docspace/shared/components/modal-dialog";
|
||||||
import { DialogAsideSkeleton } from "@docspace/shared/skeletons/dialog";
|
import { DialogAsideSkeleton } from "@docspace/shared/skeletons/dialog";
|
||||||
|
|
||||||
import { StyledUploadHeader, StyledUploadBody } from "../StyledPanels";
|
import { StyledUploadBody } from "../StyledPanels";
|
||||||
import FileList from "./FileList";
|
import FileList from "./FileList";
|
||||||
import withLoader from "../../../HOCs/withLoader";
|
import withLoader from "../../../HOCs/withLoader";
|
||||||
|
import { AsideHeader } from "@docspace/shared/components/aside";
|
||||||
|
|
||||||
const StyledModal = styled(ModalDialog)`
|
const StyledModal = styled(ModalDialog)`
|
||||||
.heading {
|
.heading {
|
||||||
@ -124,34 +125,24 @@ class UploadPanelComponent extends React.Component {
|
|||||||
? t("UploadAndConvert")
|
? t("UploadAndConvert")
|
||||||
: t("Files:Convert");
|
: t("Files:Convert");
|
||||||
|
|
||||||
|
const url =
|
||||||
|
uploaded && converted ? ClearReactSvgUrl : ButtonCancelReactSvgUrl;
|
||||||
|
|
||||||
|
const clickEvent =
|
||||||
|
uploaded && converted
|
||||||
|
? this.clearUploadPanel
|
||||||
|
: uploaded
|
||||||
|
? cancelConversion
|
||||||
|
: this.onCancelUpload;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledModal
|
<StyledModal
|
||||||
visible={visible}
|
visible={visible}
|
||||||
onClose={this.onClose}
|
onClose={this.onClose}
|
||||||
displayType={ModalDialogType.aside}
|
displayType={ModalDialogType.aside}
|
||||||
|
headerIcons={[{ key: "upload-panel", url, onClick: clickEvent }]}
|
||||||
>
|
>
|
||||||
<ModalDialog.Header>
|
<ModalDialog.Header>{title}</ModalDialog.Header>
|
||||||
<StyledUploadHeader>
|
|
||||||
<div className="title-container">{title}</div>
|
|
||||||
<div className="icons-container">
|
|
||||||
{uploaded && converted ? (
|
|
||||||
<IconButton
|
|
||||||
size={17}
|
|
||||||
iconName={ClearReactSvgUrl}
|
|
||||||
isClickable
|
|
||||||
onClick={this.clearUploadPanel}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<IconButton
|
|
||||||
size="20"
|
|
||||||
iconName={ButtonCancelReactSvgUrl}
|
|
||||||
isClickable
|
|
||||||
onClick={uploaded ? cancelConversion : this.onCancelUpload}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</StyledUploadHeader>
|
|
||||||
</ModalDialog.Header>
|
|
||||||
<ModalDialog.Body>
|
<ModalDialog.Body>
|
||||||
<StyledUploadBody>
|
<StyledUploadBody>
|
||||||
<FileList />
|
<FileList />
|
||||||
|
Loading…
Reference in New Issue
Block a user