Merge branch 'release/v1.1.0' of github.com:ONLYOFFICE/AppServer into bugfix/Bug53453
This commit is contained in:
commit
27c731dbb3
@ -2,7 +2,7 @@ import React from "react";
|
||||
import Loaders from "../../Loaders";
|
||||
import StyledDialogLoader from "./StyledDialogLoader";
|
||||
|
||||
const DialogLoader = () => {
|
||||
const DialogLoader = ({ bodyHeight = "150px" }) => {
|
||||
return (
|
||||
<StyledDialogLoader>
|
||||
<div className="dialog-loader-header">
|
||||
@ -14,7 +14,7 @@ const DialogLoader = () => {
|
||||
/>
|
||||
</div>
|
||||
<div className="dialog-loader-body">
|
||||
<Loaders.Rectangle height="150px" />
|
||||
<Loaders.Rectangle height={bodyHeight} />
|
||||
</div>
|
||||
|
||||
<div className="dialog-loader-footer">
|
||||
|
@ -110,6 +110,7 @@ class ModalDialog extends React.Component {
|
||||
isLoading,
|
||||
contentPaddingBottom,
|
||||
removeScroll,
|
||||
modalDialogHeight,
|
||||
} = this.props;
|
||||
|
||||
let header = null;
|
||||
@ -150,7 +151,7 @@ class ModalDialog extends React.Component {
|
||||
>
|
||||
<Content contentHeight={contentHeight} contentWidth={contentWidth}>
|
||||
{isLoading ? (
|
||||
<Loaders.DialogLoader />
|
||||
<Loaders.DialogLoader bodyHeight={modalDialogHeight} />
|
||||
) : (
|
||||
<>
|
||||
<StyledHeader>
|
||||
@ -246,6 +247,7 @@ ModalDialog.propTypes = {
|
||||
id: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
contentPaddingBottom: PropTypes.string,
|
||||
modalDialogHeight: PropTypes.string,
|
||||
};
|
||||
|
||||
ModalDialog.defaultProps = {
|
||||
|
@ -61,7 +61,7 @@ const SelectFileDialogAsideView = ({
|
||||
//className="select-file-modal-dialog"
|
||||
//style={{ maxWidth: "890px" }}
|
||||
contentHeight="100%"
|
||||
displayType="aside"
|
||||
displayType={DISPLAY_TYPE}
|
||||
//bodyPadding="0"
|
||||
removeScroll
|
||||
>
|
||||
@ -69,7 +69,10 @@ const SelectFileDialogAsideView = ({
|
||||
{headerName ? headerName : t("SelectFile")}
|
||||
</ModalDialog.Header>
|
||||
<ModalDialog.Body className="select-file_body-modal-dialog">
|
||||
<StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
|
||||
<StyledSelectFilePanel
|
||||
isHeaderChildren={isHeaderChildren}
|
||||
displayType={DISPLAY_TYPE}
|
||||
>
|
||||
<div className="select-file-dialog_aside-body_wrapper">
|
||||
<div className="select-file-dialog_aside-children">{header}</div>
|
||||
{/* <Text fontWeight="600" fontSize="14px">
|
||||
@ -109,15 +112,13 @@ const SelectFileDialogAsideView = ({
|
||||
selectedFile={selectedFile}
|
||||
/>
|
||||
) : isAvailableFolderList ? (
|
||||
<div key="loader">
|
||||
<Loader
|
||||
type="oval"
|
||||
size="16px"
|
||||
className="panel-loader"
|
||||
<div key="loader" className="panel-loader-wrapper">
|
||||
<Loaders.Rows
|
||||
style={{
|
||||
marginBottom: "24px",
|
||||
}}
|
||||
count={12}
|
||||
/>
|
||||
<Text as="span">{`${t("Common:LoadingProcessing")} ${t(
|
||||
"Common:LoadingDescription"
|
||||
)}`}</Text>
|
||||
</div>
|
||||
) : (
|
||||
<div className="select-file-dialog_empty-container">
|
||||
|
@ -10,9 +10,9 @@ import { inject, observer } from "mobx-react";
|
||||
import FilesListRow from "./FilesListRow";
|
||||
import EmptyContainer from "../../EmptyContainer/EmptyContainer";
|
||||
import i18n from "./i18n";
|
||||
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
import { I18nextProvider } from "react-i18next";
|
||||
|
||||
let countLoad;
|
||||
const FilesListBody = ({
|
||||
filesList,
|
||||
onSelectFile,
|
||||
@ -32,6 +32,7 @@ const FilesListBody = ({
|
||||
const filesListRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
countLoad = 0;
|
||||
if (filesListRef && filesListRef.current) {
|
||||
filesListRef.current.resetloadMoreItemsCache(true);
|
||||
}
|
||||
@ -48,14 +49,19 @@ const FilesListBody = ({
|
||||
|
||||
const loadMoreItems = useCallback(() => {
|
||||
if (isNextPageLoading) return;
|
||||
countLoad++;
|
||||
loadNextPage && loadNextPage();
|
||||
}, [isNextPageLoading, filesList, displayType]);
|
||||
|
||||
const renderLoader = useCallback(
|
||||
|
||||
const renderPageLoader = useCallback(
|
||||
(style) => {
|
||||
console.log("renderLoader");
|
||||
return (
|
||||
<div style={style}>
|
||||
<div key="loader" className="panel-loader-wrapper">
|
||||
<div
|
||||
key="loader"
|
||||
className="panel-loader-wrapper loader-wrapper_margin"
|
||||
>
|
||||
<Loader type="oval" size="16px" className="panel-loader" />
|
||||
<Text as="span">{loadingText}</Text>
|
||||
</div>
|
||||
@ -64,6 +70,27 @@ const FilesListBody = ({
|
||||
},
|
||||
[loadingText]
|
||||
);
|
||||
const renderFirstLoader = useCallback(
|
||||
(style) => {
|
||||
console.log("loader");
|
||||
return (
|
||||
<div style={style}>
|
||||
<div
|
||||
key="loader"
|
||||
className="panel-loader-wrapper loader-wrapper_margin"
|
||||
>
|
||||
<Loaders.Rows
|
||||
style={{
|
||||
marginBottom: displayType === "aside" ? "24px" : "19px",
|
||||
}}
|
||||
count={displayType === "aside" ? 12 : 7}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[loadingText]
|
||||
);
|
||||
const isFileChecked = useCallback(
|
||||
(file) => {
|
||||
const checked = selectedFile ? file.id === selectedFile.id : false;
|
||||
@ -71,12 +98,14 @@ const FilesListBody = ({
|
||||
},
|
||||
[selectedFile]
|
||||
);
|
||||
|
||||
const Item = useCallback(
|
||||
({ index, style }) => {
|
||||
const isLoaded = isItemLoaded(index);
|
||||
|
||||
if (!isLoaded) {
|
||||
return renderLoader(style);
|
||||
if (countLoad > 1) return renderPageLoader(style);
|
||||
return renderFirstLoader(style);
|
||||
}
|
||||
|
||||
const file = filesList[index];
|
||||
@ -113,7 +142,7 @@ const FilesListBody = ({
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[filesList, selectedFile, displayType, renderLoader]
|
||||
[filesList, selectedFile, displayType, renderFirstLoader, renderPageLoader]
|
||||
);
|
||||
return (
|
||||
<div className="files-list-body">
|
||||
|
@ -12,7 +12,7 @@ import Text from "@appserver/components/text";
|
||||
import { isArrayEqual } from "@appserver/components/utils/array";
|
||||
import { FolderType } from "@appserver/common/constants";
|
||||
import { getFoldersTree } from "@appserver/common/api/files";
|
||||
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
const exceptSortedByTagsFolders = [
|
||||
FolderType.Recent,
|
||||
FolderType.TRASH,
|
||||
@ -193,55 +193,48 @@ class SelectFileDialogModalView extends React.Component {
|
||||
style={{ maxWidth: "725px" }}
|
||||
displayType="modal"
|
||||
bodyPadding="0"
|
||||
isLoading={isLoading}
|
||||
modalDialogHeight="277px"
|
||||
>
|
||||
<ModalDialog.Header>
|
||||
{headerName ? headerName : t("SelectFile")}
|
||||
</ModalDialog.Header>
|
||||
<ModalDialog.Body className="select-file_body-modal-dialog">
|
||||
<StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
|
||||
{!isLoading ? (
|
||||
<div className="modal-dialog_body">
|
||||
<div className="modal-dialog_children">{header}</div>
|
||||
<div className="modal-dialog_tree-body">
|
||||
<FolderTreeBody
|
||||
expandedKeys={expandedKeys}
|
||||
folderList={this.folderList}
|
||||
onSelect={this.onSelect}
|
||||
withoutProvider={withoutProvider}
|
||||
certainFolders
|
||||
isAvailable={isAvailable}
|
||||
filter={filter}
|
||||
selectedKeys={[selectedFolder]}
|
||||
isHeaderChildren={isHeaderChildren}
|
||||
<StyledSelectFilePanel
|
||||
isHeaderChildren={isHeaderChildren}
|
||||
displayType="modal"
|
||||
>
|
||||
<div className="modal-dialog_body">
|
||||
<div className="modal-dialog_children">{header}</div>
|
||||
<div className="modal-dialog_tree-body">
|
||||
<FolderTreeBody
|
||||
expandedKeys={expandedKeys}
|
||||
folderList={this.folderList}
|
||||
onSelect={this.onSelect}
|
||||
withoutProvider={withoutProvider}
|
||||
certainFolders
|
||||
isAvailable={isAvailable}
|
||||
filter={filter}
|
||||
selectedKeys={[selectedFolder]}
|
||||
isHeaderChildren={isHeaderChildren}
|
||||
/>
|
||||
</div>
|
||||
<div className="modal-dialog_files-body">
|
||||
{selectedFolder && (
|
||||
<FilesListBody
|
||||
filesList={filesList}
|
||||
onSelectFile={onSelectFile}
|
||||
hasNextPage={hasNextPage}
|
||||
isNextPageLoading={isNextPageLoading}
|
||||
loadNextPage={loadNextPage}
|
||||
selectedFolder={selectedFolder}
|
||||
loadingText={loadingText}
|
||||
selectedFile={selectedFile}
|
||||
listHeight={isHeaderChildren ? 280 : 310}
|
||||
/>
|
||||
</div>
|
||||
<div className="modal-dialog_files-body">
|
||||
{selectedFolder && (
|
||||
<FilesListBody
|
||||
filesList={filesList}
|
||||
onSelectFile={onSelectFile}
|
||||
hasNextPage={hasNextPage}
|
||||
isNextPageLoading={isNextPageLoading}
|
||||
loadNextPage={loadNextPage}
|
||||
selectedFolder={selectedFolder}
|
||||
loadingText={loadingText}
|
||||
selectedFile={selectedFile}
|
||||
listHeight={isHeaderChildren ? 280 : 310}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
key="loader"
|
||||
className="select-file-dialog_modal-loader panel-loader-wrapper"
|
||||
>
|
||||
<Loader type="oval" size="16px" className="panel-loader" />
|
||||
<Text as="span">{`${t("Common:LoadingProcessing")} ${t(
|
||||
"Common:LoadingDescription"
|
||||
)}`}</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</StyledSelectFilePanel>
|
||||
</ModalDialog.Body>
|
||||
<ModalDialog.Footer>
|
||||
|
@ -668,10 +668,12 @@ const StyledSelectFilePanel = styled.div`
|
||||
${(props) =>
|
||||
props.displayType === "aside" &&
|
||||
css`
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
.nav-thumb-vertical {
|
||||
margin-left: -7px !important;`}
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
.nav-thumb-vertical {
|
||||
margin-left: -7px !important;
|
||||
}
|
||||
`}
|
||||
}
|
||||
.select-file-dialog_aside_body-files_list {
|
||||
height: 100%;
|
||||
@ -720,7 +722,20 @@ const StyledSelectFilePanel = styled.div`
|
||||
padding: 7px 0px;
|
||||
}
|
||||
.panel-loader-wrapper {
|
||||
margin-top: 8px;
|
||||
${(props) =>
|
||||
props.displayType === "modal" &&
|
||||
css`
|
||||
margin-top: 16px;
|
||||
`};
|
||||
.first-row-content__mobile {
|
||||
width: ${(props) => (props.displayType === "aside" ? "147px" : "402px")};
|
||||
}
|
||||
.second-row-content__mobile {
|
||||
width: 229px;
|
||||
}
|
||||
}
|
||||
.loader-wrapper_margin {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.select-file-dialog_modal-loader {
|
||||
height: 290px;
|
||||
@ -746,7 +761,7 @@ const StyledSelectFilePanel = styled.div`
|
||||
.modal-dialog_body {
|
||||
display: grid;
|
||||
grid-template-columns: 212px 489px;
|
||||
height: 300px;
|
||||
height: 280px;
|
||||
// grid-column-gap: 8px;
|
||||
grid-template-areas: "children children" "tree files-list";
|
||||
.modal-dialog_tree-body {
|
||||
|
@ -87,6 +87,20 @@ const StyledContainer = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trash-button {
|
||||
margin-bottom: -1px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
& > div:first-child {
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-button-menu-container {
|
||||
@ -352,6 +366,8 @@ class SectionHeaderContent extends React.Component {
|
||||
isTabletView,
|
||||
personal,
|
||||
viewAs,
|
||||
isRecycleBinFolder,
|
||||
isEmptyFilesList,
|
||||
} = this.props;
|
||||
|
||||
const menuItems = this.getMenuItems();
|
||||
@ -449,6 +465,19 @@ class SectionHeaderContent extends React.Component {
|
||||
/>
|
||||
)
|
||||
)}
|
||||
{isRecycleBinFolder && !isEmptyFilesList && (
|
||||
<span title={t("EmptyRecycleBin")}>
|
||||
<IconButton
|
||||
iconName="images/clear.active.react.svg"
|
||||
size="15"
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill={true}
|
||||
onClick={this.onEmptyTrashAction}
|
||||
className="trash-button"
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@ -468,6 +497,7 @@ export default inject(
|
||||
selectedFolderStore,
|
||||
filesActionsStore,
|
||||
settingsStore,
|
||||
treeFoldersStore,
|
||||
}) => {
|
||||
const {
|
||||
setSelected,
|
||||
@ -483,6 +513,7 @@ export default inject(
|
||||
viewAs,
|
||||
cbMenuItems,
|
||||
getCheckboxItemLabel,
|
||||
isEmptyFilesList,
|
||||
} = filesStore;
|
||||
const { setAction } = fileActionStore;
|
||||
const {
|
||||
@ -490,8 +521,10 @@ export default inject(
|
||||
setMoveToPanelVisible,
|
||||
setCopyPanelVisible,
|
||||
setDeleteDialogVisible,
|
||||
setEmptyTrashDialogVisible,
|
||||
} = dialogsStore;
|
||||
|
||||
const { isRecycleBinFolder } = treeFoldersStore;
|
||||
const { deleteAction, downloadAction, getHeaderMenu } = filesActionsStore;
|
||||
|
||||
return {
|
||||
@ -524,6 +557,10 @@ export default inject(
|
||||
downloadAction,
|
||||
getHeaderMenu,
|
||||
getCheckboxItemLabel,
|
||||
|
||||
isRecycleBinFolder,
|
||||
setEmptyTrashDialogVisible,
|
||||
isEmptyFilesList,
|
||||
};
|
||||
}
|
||||
)(
|
||||
|
@ -843,11 +843,7 @@ class FilesActionStore {
|
||||
label: t("Translations:Restore"),
|
||||
onClick: () => setMoveToPanelVisible(true),
|
||||
})
|
||||
.set("delete", deleteOption)
|
||||
.set("emptyRecycleBin", {
|
||||
label: t("EmptyRecycleBin"),
|
||||
onClick: () => setEmptyTrashDialogVisible(true),
|
||||
});
|
||||
.set("delete", deleteOption);
|
||||
return this.convertToArray(itemsCollection);
|
||||
};
|
||||
getHeaderMenu = (t) => {
|
||||
|
Loading…
Reference in New Issue
Block a user