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

Web: Files: Removed scroll sticking if you try to move the scroll slider.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2022-05-31 09:37:06 +03:00
parent 30b89d1ae0
commit 056fe260cd
2 changed files with 170 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js
View File

@ -33,92 +33,86 @@ const SelectFileDialogAsideView = ({
maxInputWidth,
newFilter,
}) => {
const onMouseEvent = (event) => {
event.stopPropagation();
};
return (
<div onMouseUp={onMouseEvent} onMouseDown={onMouseEvent}>
<ModalDialog
visible={isPanelVisible}
onClose={onClose}
contentHeight="100%"
contentPaddingBottom="0px"
displayType="aside"
withoutBodyScroll
>
<ModalDialog.Header>{dialogName}</ModalDialog.Header>
<ModalDialog.Body className="select-file_body-modal-dialog">
<StyledAsideBody theme={theme}>
<div className="selection-panel_aside-body">
<div className="selection-panel_folder-info">
<Text
className="selection-panel_folder-selection-title"
fontWeight={600}
>
{t("Translations:FolderSelection")}
</Text>
<ModalDialog
visible={isPanelVisible}
onClose={onClose}
contentHeight="100%"
contentPaddingBottom="0px"
displayType="aside"
withoutBodyScroll
>
<ModalDialog.Header>{dialogName}</ModalDialog.Header>
<ModalDialog.Body className="select-file_body-modal-dialog">
<StyledAsideBody theme={theme}>
<div className="selection-panel_aside-body">
<div className="selection-panel_folder-info">
<Text
className="selection-panel_folder-selection-title"
fontWeight={600}
>
{t("Translations:FolderSelection")}
</Text>
<SelectFolderInput
theme={theme}
onClickInput={onClickInput}
onClose={onCloseSelectFolderDialog}
onSelectFolder={onSelectFolder}
isPanelVisible={isFolderPanelVisible}
foldersType={foldersType}
withoutProvider={withoutProvider}
id={folderId}
onSelectFile={onSelectFile}
displayType="aside"
hasNextPage={hasNextPage}
isNextPageLoading={isNextPageLoading}
loadNextPage={loadNextPage}
files={files}
folderTree={resultingFolderTree}
isFolderTreeLoading={!!!resultingFolderTree}
isNeedArrowIcon
maxInputWidth={maxInputWidth ? maxInputWidth : "446px"}
/>
<SelectFolderInput
theme={theme}
onClickInput={onClickInput}
onClose={onCloseSelectFolderDialog}
onSelectFolder={onSelectFolder}
isPanelVisible={isFolderPanelVisible}
foldersType={foldersType}
withoutProvider={withoutProvider}
id={folderId}
onSelectFile={onSelectFile}
displayType="aside"
hasNextPage={hasNextPage}
isNextPageLoading={isNextPageLoading}
loadNextPage={loadNextPage}
files={files}
folderTree={resultingFolderTree}
isFolderTreeLoading={!!!resultingFolderTree}
isNeedArrowIcon
maxInputWidth={maxInputWidth ? maxInputWidth : "446px"}
/>
<Text color="#A3A9AE" className="selection-panel_aside-title">
{filesListTitle}
</Text>
</div>
<div className="selection-panel_files">
<FilesListWrapper
<Text color="#A3A9AE" className="selection-panel_aside-title">
{filesListTitle}
</Text>
</div>
<div className="selection-panel_files">
<FilesListWrapper
theme={theme}
onSelectFile={onSelectFile}
folderId={folderId}
displayType="aside"
folderSelection={false}
fileId={fileId}
newFilter={newFilter}
/>
</div>
<div className="selection-panel_aside-footer">
{footer}
<div className="selection-panel_aside-buttons">
<Button
theme={theme}
onSelectFile={onSelectFile}
folderId={folderId}
displayType="aside"
folderSelection={false}
fileId={fileId}
newFilter={newFilter}
primary
size="normalTouchscreen"
label={primaryButtonName}
onClick={onButtonClick}
isDisabled={!fileId}
/>
<Button
theme={theme}
size="normalTouchscreen"
label={t("Common:CancelButton")}
onClick={onClose}
/>
</div>
<div className="selection-panel_aside-footer">
{footer}
<div className="selection-panel_aside-buttons">
<Button
theme={theme}
primary
size="normalTouchscreen"
label={primaryButtonName}
onClick={onButtonClick}
isDisabled={!fileId}
/>
<Button
theme={theme}
size="normalTouchscreen"
label={t("Common:CancelButton")}
onClick={onClose}
/>
</div>
</div>
</div>
</StyledAsideBody>
</ModalDialog.Body>
</ModalDialog>
</div>
</div>
</StyledAsideBody>
</ModalDialog.Body>
</ModalDialog>
);
};
export default SelectFileDialogAsideView;

204
products/ASC.Files/Client/src/components/panels/SelectionPanel/SelectionPanelBody.js
View File

@ -47,119 +47,109 @@ const SelectionPanelBody = ({
isDisableButton,
parentId,
}) => {
const onMouseEvent = (event) => {
event.stopPropagation();
};
return (
<div onMouseUp={onMouseEvent} onMouseDown={onMouseEvent}>
<StyledModalDialog
theme={theme}
visible={isPanelVisible}
onClose={onClose}
className="select-file-modal-dialog"
style={{ maxWidth: "773px" }}
displayType="modal"
modalBodyPadding="0px"
isLoading={isLoading}
>
<ModalDialog.Header theme={theme}>{dialogName}</ModalDialog.Header>
<ModalDialog.Body
theme={theme}
className="select-file_body-modal-dialog"
>
<StyledBody header={!!header} footer={!!footer}>
<div className="selection-panel_body">
<div className="selection-panel_tree-body">
<Text
fontWeight="700"
fontSize="18px"
className="selection-panel_folder-title"
>
{t("Common:Documents")}
</Text>
<StyledModalDialog
theme={theme}
visible={isPanelVisible}
onClose={onClose}
style={{ maxWidth: "773px" }}
displayType="modal"
modalBodyPadding="0px"
isLoading={isLoading}
>
<ModalDialog.Header theme={theme}>{dialogName}</ModalDialog.Header>
<ModalDialog.Body theme={theme} className="select-file_body-modal-dialog">
<StyledBody header={!!header} footer={!!footer}>
<div className="selection-panel_body">
<div className="selection-panel_tree-body">
<Text
fontWeight="700"
fontSize="18px"
className="selection-panel_folder-title"
>
{t("Common:Documents")}
</Text>
{folderId && resultingFolderTree ? (
<FolderTreeBody
{folderId && resultingFolderTree ? (
<FolderTreeBody
theme={theme}
folderTree={resultingFolderTree}
onSelect={onSelectFolder}
withoutProvider={withoutProvider}
certainFolders
isAvailable={isAvailable}
selectedKeys={[`${folderId}`]}
parentId={parentId}
expandedKeys={expandedKeys}
isDisableTree={isDisableTree}
displayType="modal"
/>
) : (
<Loaders.NewTreeFolders />
)}
</div>
<div className="selection-panel_files-body">
<>
<div className="selection-panel_files-header">
{header}
<Text
color="#A3A9AE"
theme={theme}
folderTree={resultingFolderTree}
onSelect={onSelectFolder}
withoutProvider={withoutProvider}
certainFolders
isAvailable={isAvailable}
selectedKeys={[`${folderId}`]}
parentId={parentId}
expandedKeys={expandedKeys}
isDisableTree={isDisableTree}
displayType="modal"
/>
) : (
<Loaders.NewTreeFolders />
)}
</div>
<div className="selection-panel_files-body">
<>
<div className="selection-panel_files-header">
{header}
<Text
color="#A3A9AE"
theme={theme}
className="selection-panel_title"
>
{folderSelection
? t("FolderContents", { folderTitle })
: filesListTitle}
</Text>
</div>
<FilesListWrapper
theme={theme}
onSelectFile={onSelectFile}
folderId={folderId}
displayType={"modal"}
folderSelection={folderSelection}
newFilter={newFilter}
fileId={fileId}
/>
</>
</div>
<div className="selection-panel_footer">
<div>{footer}</div>
<div className="selection-panel_buttons">
<Button
theme={theme}
className="select-file-modal-dialog-buttons-save"
primary
size="normalTouchscreen"
label={primaryButtonName}
onClick={onButtonClick}
isDisabled={
isDisableButton ||
isDisableTree ||
isLoadingData ||
(!fileId && !folderSelection) ||
!canCreate
}
isLoading={isDisableTree}
/>
<Button
theme={theme}
className="modal-dialog-button"
size="normalTouchscreen"
label={t("Common:CancelButton")}
onClick={onClose}
isDisabled={isLoadingData}
/>
className="selection-panel_title"
>
{folderSelection
? t("FolderContents", { folderTitle })
: filesListTitle}
</Text>
</div>
<FilesListWrapper
theme={theme}
onSelectFile={onSelectFile}
folderId={folderId}
displayType={"modal"}
folderSelection={folderSelection}
newFilter={newFilter}
fileId={fileId}
/>
</>
</div>
<div className="selection-panel_footer">
<div>{footer}</div>
<div className="selection-panel_buttons">
<Button
theme={theme}
className="select-file-modal-dialog-buttons-save"
primary
size="normalTouchscreen"
label={primaryButtonName}
onClick={onButtonClick}
isDisabled={
isDisableButton ||
isDisableTree ||
isLoadingData ||
(!fileId && !folderSelection) ||
!canCreate
}
isLoading={isDisableTree}
/>
<Button
theme={theme}
className="modal-dialog-button"
size="normalTouchscreen"
label={t("Common:CancelButton")}
onClick={onClose}
isDisabled={isLoadingData}
/>
</div>
</div>
</StyledBody>
</ModalDialog.Body>
</StyledModalDialog>
</div>
</div>
</StyledBody>
</ModalDialog.Body>
</StyledModalDialog>
);
};