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,
onSetLoadingData,
filesList,
}) => (
<StyledAsidePanel visible={isPanelVisible}>
<ModalDialog
visible={isPanelVisible}
zIndex={zIndex}
onClose={onClose}
//displayType="aside"
>
<ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header>
<ModalDialog.Body>
<StyledSelectFilePanel>
<Text fontWeight="600" fontSize="14px">
{t("ChooseByUser")}
</Text>
<SelectFolderInput
onClickInput={onClickInput}
onClose={onCloseSelectFolderDialog}
onSelectFolder={onSelectFolder}
onSetLoadingData={onSetLoadingData}
isPanelVisible={isVisible}
foldersType={foldersType}
isNeedArrowIcon
isCommonWithoutProvider={isCommonWithoutProvider}
/>
<div className="modal-dialog_body-files-list">
<FileListBody
isLoadingData={isLoadingData}
filesList={filesList}
onSelectFile={onSelectFile}
hasNextPage,
isNextPageLoading,
loadNextPage,
selectedFolder,
}) => {
console.log("isLoadingData", isLoadingData, "selectedFolder", selectedFolder);
return (
<StyledAsidePanel visible={isPanelVisible}>
<ModalDialog
visible={isPanelVisible}
zIndex={zIndex}
onClose={onClose}
//displayType="aside"
>
<ModalDialog.Header>{t("SelectFile")}</ModalDialog.Header>
<ModalDialog.Body>
<StyledSelectFilePanel>
<Text fontWeight="600" fontSize="14px">
{t("ChooseByUser")}
</Text>
<SelectFolderInput
onClickInput={onClickInput}
onClose={onCloseSelectFolderDialog}
onSelectFolder={onSelectFolder}
onSetLoadingData={onSetLoadingData}
isPanelVisible={isVisible}
foldersType={foldersType}
isNeedArrowIcon
isCommonWithoutProvider={isCommonWithoutProvider}
/>
</div>
</StyledSelectFilePanel>
</ModalDialog.Body>
</ModalDialog>
</StyledAsidePanel>
);
<div className="modal-dialog_body-files-list">
{selectedFolder && (
<FileListBody
isLoadingData={isLoadingData}
filesList={filesList}
onSelectFile={onSelectFile}
hasNextPage={hasNextPage}
isNextPageLoading={isNextPageLoading}
loadNextPage={loadNextPage}
selectedFolder={selectedFolder}
/>
)}
</div>
</StyledSelectFilePanel>
</ModalDialog.Body>
</ModalDialog>
</StyledAsidePanel>
);
};
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}
/>
<SelectFileDialog
zIndex={zIndex}
onClose={onClose}
isPanelVisible={isPanelVisible}
foldersType={foldersType}
onSetFileName={this.onSetFileName}
isCommonWithoutProvider={isCommonWithoutProvider}
/>
{isPanelVisible && (
<SelectFileDialog
zIndex={zIndex}
onClose={onClose}
isPanelVisible={isPanelVisible}
foldersType={foldersType}
onSetFileName={this.onSetFileName}
isCommonWithoutProvider={isCommonWithoutProvider}
/>
)}
</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`
height: 100%;
.modal-dialog_body-files-list {
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,
.file-exst {
margin-top: 7px;
//margin-top: 7px;
font-weight: 600;
}
.entry-title:hover {
cursor: pointer;
text-decoration: underline;
.modal-dialog_file-name:hover {
background-color: #eceef1;
border-radius: 3px;
}
.file-name {
display: flex;
@ -542,7 +557,8 @@ const StyledSelectFilePanel = styled.div`
}
.modal-dialog_body {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: 240px 1fr;
height: 300px;
.modal-dialog_tree-body {
margin-top: 16px;
}