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 };
|
||||
|
||||
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`
|
||||
width: calc(100% + 16px);
|
||||
height: 100%;
|
||||
@ -751,6 +733,5 @@ export {
|
||||
StyledModalRowContainer,
|
||||
StyledLink,
|
||||
StyledNewFilesBody,
|
||||
StyledUploadHeader,
|
||||
StyledUploadBody,
|
||||
};
|
||||
|
@ -39,9 +39,10 @@ import {
|
||||
} from "@docspace/shared/components/modal-dialog";
|
||||
import { DialogAsideSkeleton } from "@docspace/shared/skeletons/dialog";
|
||||
|
||||
import { StyledUploadHeader, StyledUploadBody } from "../StyledPanels";
|
||||
import { StyledUploadBody } from "../StyledPanels";
|
||||
import FileList from "./FileList";
|
||||
import withLoader from "../../../HOCs/withLoader";
|
||||
import { AsideHeader } from "@docspace/shared/components/aside";
|
||||
|
||||
const StyledModal = styled(ModalDialog)`
|
||||
.heading {
|
||||
@ -124,34 +125,24 @@ class UploadPanelComponent extends React.Component {
|
||||
? t("UploadAndConvert")
|
||||
: t("Files:Convert");
|
||||
|
||||
const url =
|
||||
uploaded && converted ? ClearReactSvgUrl : ButtonCancelReactSvgUrl;
|
||||
|
||||
const clickEvent =
|
||||
uploaded && converted
|
||||
? this.clearUploadPanel
|
||||
: uploaded
|
||||
? cancelConversion
|
||||
: this.onCancelUpload;
|
||||
|
||||
return (
|
||||
<StyledModal
|
||||
visible={visible}
|
||||
onClose={this.onClose}
|
||||
displayType={ModalDialogType.aside}
|
||||
headerIcons={[{ key: "upload-panel", url, onClick: clickEvent }]}
|
||||
>
|
||||
<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.Header>{title}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<StyledUploadBody>
|
||||
<FileList />
|
||||
|
Loading…
Reference in New Issue
Block a user