Web: Files: Fixed loaders according layouts.
This commit is contained in:
parent
a4e21a2319
commit
594b767a3d
@ -61,7 +61,7 @@ const SelectFileDialogAsideView = ({
|
|||||||
//className="select-file-modal-dialog"
|
//className="select-file-modal-dialog"
|
||||||
//style={{ maxWidth: "890px" }}
|
//style={{ maxWidth: "890px" }}
|
||||||
contentHeight="100%"
|
contentHeight="100%"
|
||||||
displayType="aside"
|
displayType={DISPLAY_TYPE}
|
||||||
//bodyPadding="0"
|
//bodyPadding="0"
|
||||||
removeScroll
|
removeScroll
|
||||||
>
|
>
|
||||||
@ -69,7 +69,10 @@ const SelectFileDialogAsideView = ({
|
|||||||
{headerName ? headerName : t("SelectFile")}
|
{headerName ? headerName : t("SelectFile")}
|
||||||
</ModalDialog.Header>
|
</ModalDialog.Header>
|
||||||
<ModalDialog.Body className="select-file_body-modal-dialog">
|
<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-body_wrapper">
|
||||||
<div className="select-file-dialog_aside-children">{header}</div>
|
<div className="select-file-dialog_aside-children">{header}</div>
|
||||||
{/* <Text fontWeight="600" fontSize="14px">
|
{/* <Text fontWeight="600" fontSize="14px">
|
||||||
@ -109,15 +112,13 @@ const SelectFileDialogAsideView = ({
|
|||||||
selectedFile={selectedFile}
|
selectedFile={selectedFile}
|
||||||
/>
|
/>
|
||||||
) : isAvailableFolderList ? (
|
) : isAvailableFolderList ? (
|
||||||
<div key="loader">
|
<div key="loader" className="panel-loader-wrapper">
|
||||||
<Loader
|
<Loaders.Rows
|
||||||
type="oval"
|
style={{
|
||||||
size="16px"
|
marginBottom: "24px",
|
||||||
className="panel-loader"
|
}}
|
||||||
|
count={12}
|
||||||
/>
|
/>
|
||||||
<Text as="span">{`${t("Common:LoadingProcessing")} ${t(
|
|
||||||
"Common:LoadingDescription"
|
|
||||||
)}`}</Text>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="select-file-dialog_empty-container">
|
<div className="select-file-dialog_empty-container">
|
||||||
|
@ -10,7 +10,7 @@ import { inject, observer } from "mobx-react";
|
|||||||
import FilesListRow from "./FilesListRow";
|
import FilesListRow from "./FilesListRow";
|
||||||
import EmptyContainer from "../../EmptyContainer/EmptyContainer";
|
import EmptyContainer from "../../EmptyContainer/EmptyContainer";
|
||||||
import i18n from "./i18n";
|
import i18n from "./i18n";
|
||||||
|
import Loaders from "@appserver/common/components/Loaders";
|
||||||
import { I18nextProvider } from "react-i18next";
|
import { I18nextProvider } from "react-i18next";
|
||||||
|
|
||||||
const FilesListBody = ({
|
const FilesListBody = ({
|
||||||
@ -52,18 +52,33 @@ const FilesListBody = ({
|
|||||||
}, [isNextPageLoading, filesList, displayType]);
|
}, [isNextPageLoading, filesList, displayType]);
|
||||||
|
|
||||||
const renderLoader = useCallback(
|
const renderLoader = useCallback(
|
||||||
(style) => {
|
(style, index) => {
|
||||||
return (
|
return (
|
||||||
<div style={style}>
|
<div style={style}>
|
||||||
<div key="loader" className="panel-loader-wrapper">
|
<div
|
||||||
|
key="loader"
|
||||||
|
className="panel-loader-wrapper loader-wrapper_margin"
|
||||||
|
>
|
||||||
|
{index > 10 ? (
|
||||||
|
<>
|
||||||
<Loader type="oval" size="16px" className="panel-loader" />
|
<Loader type="oval" size="16px" className="panel-loader" />
|
||||||
<Text as="span">{loadingText}</Text>
|
<Text as="span">{loadingText}</Text>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Loaders.Rows
|
||||||
|
style={{
|
||||||
|
marginBottom: displayType === "aside" ? "24px" : "19px",
|
||||||
|
}}
|
||||||
|
count={displayType === "aside" ? 12 : 7}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
[loadingText]
|
[loadingText]
|
||||||
);
|
);
|
||||||
|
|
||||||
const isFileChecked = useCallback(
|
const isFileChecked = useCallback(
|
||||||
(file) => {
|
(file) => {
|
||||||
const checked = selectedFile ? file.id === selectedFile.id : false;
|
const checked = selectedFile ? file.id === selectedFile.id : false;
|
||||||
@ -76,7 +91,7 @@ const FilesListBody = ({
|
|||||||
const isLoaded = isItemLoaded(index);
|
const isLoaded = isItemLoaded(index);
|
||||||
|
|
||||||
if (!isLoaded) {
|
if (!isLoaded) {
|
||||||
return renderLoader(style);
|
return renderLoader(style, index);
|
||||||
}
|
}
|
||||||
|
|
||||||
const file = filesList[index];
|
const file = filesList[index];
|
||||||
|
@ -12,7 +12,7 @@ import Text from "@appserver/components/text";
|
|||||||
import { isArrayEqual } from "@appserver/components/utils/array";
|
import { isArrayEqual } from "@appserver/components/utils/array";
|
||||||
import { FolderType } from "@appserver/common/constants";
|
import { FolderType } from "@appserver/common/constants";
|
||||||
import { getFoldersTree } from "@appserver/common/api/files";
|
import { getFoldersTree } from "@appserver/common/api/files";
|
||||||
|
import Loaders from "@appserver/common/components/Loaders";
|
||||||
const exceptSortedByTagsFolders = [
|
const exceptSortedByTagsFolders = [
|
||||||
FolderType.Recent,
|
FolderType.Recent,
|
||||||
FolderType.TRASH,
|
FolderType.TRASH,
|
||||||
@ -193,13 +193,17 @@ class SelectFileDialogModalView extends React.Component {
|
|||||||
style={{ maxWidth: "725px" }}
|
style={{ maxWidth: "725px" }}
|
||||||
displayType="modal"
|
displayType="modal"
|
||||||
bodyPadding="0"
|
bodyPadding="0"
|
||||||
|
isLoading={isLoading}
|
||||||
|
modalDialogHeight="277px"
|
||||||
>
|
>
|
||||||
<ModalDialog.Header>
|
<ModalDialog.Header>
|
||||||
{headerName ? headerName : t("SelectFile")}
|
{headerName ? headerName : t("SelectFile")}
|
||||||
</ModalDialog.Header>
|
</ModalDialog.Header>
|
||||||
<ModalDialog.Body className="select-file_body-modal-dialog">
|
<ModalDialog.Body className="select-file_body-modal-dialog">
|
||||||
<StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
|
<StyledSelectFilePanel
|
||||||
{!isLoading ? (
|
isHeaderChildren={isHeaderChildren}
|
||||||
|
displayType="modal"
|
||||||
|
>
|
||||||
<div className="modal-dialog_body">
|
<div className="modal-dialog_body">
|
||||||
<div className="modal-dialog_children">{header}</div>
|
<div className="modal-dialog_children">{header}</div>
|
||||||
<div className="modal-dialog_tree-body">
|
<div className="modal-dialog_tree-body">
|
||||||
@ -231,17 +235,6 @@ class SelectFileDialogModalView extends React.Component {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</StyledSelectFilePanel>
|
||||||
</ModalDialog.Body>
|
</ModalDialog.Body>
|
||||||
<ModalDialog.Footer>
|
<ModalDialog.Footer>
|
||||||
|
@ -671,7 +671,9 @@ const StyledSelectFilePanel = styled.div`
|
|||||||
margin-left: -16px;
|
margin-left: -16px;
|
||||||
margin-right: -16px;
|
margin-right: -16px;
|
||||||
.nav-thumb-vertical {
|
.nav-thumb-vertical {
|
||||||
margin-left: -7px !important;`}
|
margin-left: -7px !important;
|
||||||
|
}
|
||||||
|
`}
|
||||||
}
|
}
|
||||||
.select-file-dialog_aside_body-files_list {
|
.select-file-dialog_aside_body-files_list {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -720,7 +722,20 @@ const StyledSelectFilePanel = styled.div`
|
|||||||
padding: 7px 0px;
|
padding: 7px 0px;
|
||||||
}
|
}
|
||||||
.panel-loader-wrapper {
|
.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 {
|
.select-file-dialog_modal-loader {
|
||||||
height: 290px;
|
height: 290px;
|
||||||
@ -746,7 +761,7 @@ const StyledSelectFilePanel = styled.div`
|
|||||||
.modal-dialog_body {
|
.modal-dialog_body {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 212px 489px;
|
grid-template-columns: 212px 489px;
|
||||||
height: 300px;
|
height: 280px;
|
||||||
// grid-column-gap: 8px;
|
// grid-column-gap: 8px;
|
||||||
grid-template-areas: "children children" "tree files-list";
|
grid-template-areas: "children children" "tree files-list";
|
||||||
.modal-dialog_tree-body {
|
.modal-dialog_tree-body {
|
||||||
|
Loading…
Reference in New Issue
Block a user