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

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

@ -47,119 +47,109 @@ const SelectionPanelBody = ({
isDisableButton, isDisableButton,
parentId, parentId,
}) => { }) => {
const onMouseEvent = (event) => {
event.stopPropagation();
};
return ( return (
<div onMouseUp={onMouseEvent} onMouseDown={onMouseEvent}> <StyledModalDialog
<StyledModalDialog theme={theme}
theme={theme} visible={isPanelVisible}
visible={isPanelVisible} onClose={onClose}
onClose={onClose} style={{ maxWidth: "773px" }}
className="select-file-modal-dialog" displayType="modal"
style={{ maxWidth: "773px" }} modalBodyPadding="0px"
displayType="modal" isLoading={isLoading}
modalBodyPadding="0px" >
isLoading={isLoading} <ModalDialog.Header theme={theme}>{dialogName}</ModalDialog.Header>
> <ModalDialog.Body theme={theme} className="select-file_body-modal-dialog">
<ModalDialog.Header theme={theme}>{dialogName}</ModalDialog.Header> <StyledBody header={!!header} footer={!!footer}>
<ModalDialog.Body <div className="selection-panel_body">
theme={theme} <div className="selection-panel_tree-body">
className="select-file_body-modal-dialog" <Text
> fontWeight="700"
<StyledBody header={!!header} footer={!!footer}> fontSize="18px"
<div className="selection-panel_body"> className="selection-panel_folder-title"
<div className="selection-panel_tree-body"> >
<Text {t("Common:Documents")}
fontWeight="700" </Text>
fontSize="18px"
className="selection-panel_folder-title"
>
{t("Common:Documents")}
</Text>
{folderId && resultingFolderTree ? ( {folderId && resultingFolderTree ? (
<FolderTreeBody <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} theme={theme}
folderTree={resultingFolderTree} className="selection-panel_title"
onSelect={onSelectFolder} >
withoutProvider={withoutProvider} {folderSelection
certainFolders ? t("FolderContents", { folderTitle })
isAvailable={isAvailable} : filesListTitle}
selectedKeys={[`${folderId}`]} </Text>
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}
/>
</div> </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>
</div> </div>
</StyledBody> </div>
</ModalDialog.Body> </StyledBody>
</StyledModalDialog> </ModalDialog.Body>
</div> </StyledModalDialog>
); );
}; };