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

Merge branch 'release/v1.1.0' of github.com:ONLYOFFICE/AppServer into bugfix/Bug53453

Browse Source
This commit is contained in:
Viktor Fomin 2021-11-18 18:40:29 +03:00
commit 27c731dbb3
8 changed files with 147 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js
View File

@ -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">

4
packages/asc-web-components/modal-dialog/index.js
View File

@ -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 = {

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

@ -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">

41
products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js
View File

@ -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">

21
products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js
View File

@ -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,13 +193,17 @@ 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 ? (
<StyledSelectFilePanel
isHeaderChildren={isHeaderChildren}
displayType="modal"
>
<div className="modal-dialog_body">
<div className="modal-dialog_children">{header}</div>
<div className="modal-dialog_tree-body">
@ -231,17 +235,6 @@ class SelectFileDialogModalView extends React.Component {
)}
</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>
)}
</StyledSelectFilePanel>
</ModalDialog.Body>
<ModalDialog.Footer>

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

@ -671,7 +671,9 @@ const StyledSelectFilePanel = styled.div`
margin-left: -16px;
margin-right: -16px;
.nav-thumb-vertical {
margin-left: -7px !important;`}
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 {

37
products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
View File

@ -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,
};
}
)(

6
products/ASC.Files/Client/src/store/FilesActionsStore.js
View File

@ -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) => {