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

Web: Settings: Restore Backup: Fixed not showing files list at aside panel, added styles, Refactoring select file input component.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2021-06-22 22:13:59 +03:00
parent 526a6b7839
commit b10beb7e2f
3 changed files with 79 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
products/ASC.Files/Client/src/components/panels/SelectFileDialog/asideView.js
View File

@ -19,40 +19,53 @@ const SelectFileDialogAsideView = ({
onSelectFolder, onSelectFolder,
onSetLoadingData, onSetLoadingData,
filesList, filesList,
}) => ( hasNextPage,
<StyledAsidePanel visible={isPanelVisible}> isNextPageLoading,
<ModalDialog loadNextPage,
visible={isPanelVisible} selectedFolder,
zIndex={zIndex} }) => {
onClose={onClose} console.log("isLoadingData", isLoadingData, "selectedFolder", selectedFolder);
//displayType="aside" return (
> <StyledAsidePanel visible={isPanelVisible}>
<ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header> <ModalDialog
<ModalDialog.Body> visible={isPanelVisible}
<StyledSelectFilePanel> zIndex={zIndex}
<Text fontWeight="600" fontSize="14px"> onClose={onClose}
{t("ChooseByUser")} //displayType="aside"
</Text> >
<SelectFolderInput <ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header>
onClickInput={onClickInput} <ModalDialog.Body>
onClose={onCloseSelectFolderDialog} <StyledSelectFilePanel>
onSelectFolder={onSelectFolder} <Text fontWeight="600" fontSize="14px">
onSetLoadingData={onSetLoadingData} {t("ChooseByUser")}
isPanelVisible={isVisible} </Text>
foldersType={foldersType} <SelectFolderInput
isNeedArrowIcon onClickInput={onClickInput}
isCommonWithoutProvider={isCommonWithoutProvider} onClose={onCloseSelectFolderDialog}
/> onSelectFolder={onSelectFolder}
<div className="modal-dialog_body-files-list"> onSetLoadingData={onSetLoadingData}
<FileListBody isPanelVisible={isVisible}
isLoadingData={isLoadingData} foldersType={foldersType}
filesList={filesList} isNeedArrowIcon
onSelectFile={onSelectFile} isCommonWithoutProvider={isCommonWithoutProvider}
/> />
</div> <div className="modal-dialog_body-files-list">
</StyledSelectFilePanel> {selectedFolder && (
</ModalDialog.Body> <FileListBody
</ModalDialog> isLoadingData={isLoadingData}
</StyledAsidePanel> filesList={filesList}
); onSelectFile={onSelectFile}
hasNextPage={hasNextPage}
isNextPageLoading={isNextPageLoading}
loadNextPage={loadNextPage}
selectedFolder={selectedFolder}
/>
)}
</div>
</StyledSelectFilePanel>
</ModalDialog.Body>
</ModalDialog>
</StyledAsidePanel>
);
};
export default SelectFileDialogAsideView; export default SelectFileDialogAsideView;

18
products/ASC.Files/Client/src/components/panels/SelectFileInput/index.js
View File

@ -63,14 +63,16 @@ class SelectFile extends React.PureComponent {
onClickInput={onClickInput} onClickInput={onClickInput}
/> />
<SelectFileDialog {isPanelVisible && (
zIndex={zIndex} <SelectFileDialog
onClose={onClose} zIndex={zIndex}
isPanelVisible={isPanelVisible} onClose={onClose}
foldersType={foldersType} isPanelVisible={isPanelVisible}
onSetFileName={this.onSetFileName} foldersType={foldersType}
isCommonWithoutProvider={isCommonWithoutProvider} onSetFileName={this.onSetFileName}
/> isCommonWithoutProvider={isCommonWithoutProvider}
/>
)}
</StyledComponent> </StyledComponent>
); );
} }

26
products/ASC.Files/Client/src/components/panels/StyledPanels.js
View File

@ -513,17 +513,32 @@ const StyledSelectFolderPanel = styled.div`
} }
`; `;
const StyledSelectFilePanel = styled.div` const StyledSelectFilePanel = styled.div`
height: 100%;
.modal-dialog_body-files-list { .modal-dialog_body-files-list {
margin-top: 16px; margin-top: 16px;
height: 800px;
}
.modal-dialog_body-files-list:first-child {
height: 100%;
}
.modal-dialog_file-name {
display: flex;
cursor: pointer;
border-bottom: 1px solid #eceef1;
align-items: center;
padding: 7px 0;
}
.select-file-dialog_icon {
margin-right: 8px;
} }
.entry-title, .entry-title,
.file-exst { .file-exst {
margin-top: 7px; //margin-top: 7px;
font-weight: 600; font-weight: 600;
} }
.entry-title:hover { .modal-dialog_file-name:hover {
cursor: pointer; background-color: #eceef1;
text-decoration: underline; border-radius: 3px;
} }
.file-name { .file-name {
display: flex; display: flex;
@ -542,7 +557,8 @@ const StyledSelectFilePanel = styled.div`
} }
.modal-dialog_body { .modal-dialog_body {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: 240px 1fr;
height: 300px;
.modal-dialog_tree-body { .modal-dialog_tree-body {
margin-top: 16px; margin-top: 16px;
} }