Merge branch 'feature/workspaces' of github.com:ONLYOFFICE/AppServer into feature/workspaces
This commit is contained in:
commit
40c7261fb1
@ -0,0 +1,61 @@
|
||||
import React from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import EmptyContainer from "./EmptyContainer";
|
||||
import FilesFilter from "@appserver/common/api/files/filter";
|
||||
import Link from "@appserver/components/link";
|
||||
import IconButton from "@appserver/components/icon-button";
|
||||
import toastr from "studio/toastr";
|
||||
|
||||
const EmptyFilterContainer = ({
|
||||
t,
|
||||
selectedFolderId,
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
linkStyles,
|
||||
}) => {
|
||||
const subheadingText = t("EmptyFilterSubheadingText");
|
||||
const descriptionText = t("EmptyFilterDescriptionText");
|
||||
|
||||
onResetFilter = () => {
|
||||
setIsLoading(true);
|
||||
const newFilter = FilesFilter.getDefault();
|
||||
fetchFiles(selectedFolderId, newFilter)
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const buttons = (
|
||||
<div className="empty-folder_container-links">
|
||||
<IconButton
|
||||
className="empty-folder_container-icon"
|
||||
size="12"
|
||||
onClick={onResetFilter}
|
||||
iconName="static/images/cross.react.svg"
|
||||
isFill
|
||||
color="#657077"
|
||||
/>
|
||||
<Link onClick={onResetFilter} {...linkStyles}>
|
||||
{t("ClearButton")}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<EmptyContainer
|
||||
headerText={t("Filter")}
|
||||
subheadingText={subheadingText}
|
||||
descriptionText={descriptionText}
|
||||
imageSrc="images/empty_screen_filter.png"
|
||||
buttons={buttons}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({ initFilesStore, filesStore, selectedFolderStore }) => ({
|
||||
fetchFiles: filesStore.fetchFiles,
|
||||
selectedFolderId: selectedFolderStore.id,
|
||||
setIsLoading: initFilesStore.setIsLoading,
|
||||
})
|
||||
)(withTranslation("Home")(observer(EmptyFilterContainer)));
|
@ -0,0 +1,91 @@
|
||||
import { inject, observer } from "mobx-react";
|
||||
import React from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import EmptyContainer from "./EmptyContainer";
|
||||
import Link from "@appserver/components/link";
|
||||
import Box from "@appserver/components/box";
|
||||
|
||||
const EmptyFolderContainer = ({
|
||||
t,
|
||||
onCreate,
|
||||
filter,
|
||||
fetchFiles,
|
||||
setIsLoading,
|
||||
parentId,
|
||||
linkStyles,
|
||||
}) => {
|
||||
const onBackToParentFolder = () => {
|
||||
const newFilter = filter.clone();
|
||||
setIsLoading(true);
|
||||
fetchFiles(parentId, newFilter).finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const buttons = (
|
||||
<>
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_plus-image"
|
||||
src="images/plus.svg"
|
||||
data-format="docx"
|
||||
onClick={onCreate}
|
||||
alt="plus_icon"
|
||||
/>
|
||||
<Box className="flex-wrapper_container">
|
||||
<Link data-format="docx" onClick={onCreate} {...linkStyles}>
|
||||
{t("Document")},
|
||||
</Link>
|
||||
<Link data-format="xlsx" onClick={onCreate} {...linkStyles}>
|
||||
{t("Spreadsheet")},
|
||||
</Link>
|
||||
<Link data-format="pptx" onClick={onCreate} {...linkStyles}>
|
||||
{t("Presentation")}
|
||||
</Link>
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_plus-image"
|
||||
src="images/plus.svg"
|
||||
onClick={onCreate}
|
||||
alt="plus_icon"
|
||||
/>
|
||||
<Link {...linkStyles} onClick={onCreate}>
|
||||
{t("Folder")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_up-image"
|
||||
src="images/up.svg"
|
||||
onClick={onBackToParentFolder}
|
||||
alt="up_icon"
|
||||
/>
|
||||
|
||||
<Link onClick={onBackToParentFolder} {...linkStyles}>
|
||||
{t("BackToParentFolderButton")}
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<EmptyContainer
|
||||
headerText={t("EmptyFolderHeader")}
|
||||
imageSrc="images/empty_screen.png"
|
||||
buttons={buttons}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ initFilesStore, filesStore, selectedFolderStore }) => {
|
||||
const { filter, fetchFiles } = filesStore;
|
||||
|
||||
return {
|
||||
filter,
|
||||
fetchFiles,
|
||||
setIsLoading: initFilesStore.setIsLoading,
|
||||
parentId: selectedFolderStore.parentId,
|
||||
};
|
||||
})(withTranslation("Home")(observer(EmptyFolderContainer)));
|
@ -0,0 +1,223 @@
|
||||
import React from "react";
|
||||
import { FolderType } from "@appserver/common/constants";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation, Trans } from "react-i18next";
|
||||
import EmptyContainer from "./EmptyContainer";
|
||||
import Link from "@appserver/components/link";
|
||||
import Text from "@appserver/components/text";
|
||||
import Box from "@appserver/components/box";
|
||||
|
||||
const RootFolderContainer = (props) => {
|
||||
const {
|
||||
t,
|
||||
isPrivacyFolder,
|
||||
isDesktop,
|
||||
isEncryptionSupport,
|
||||
organizationName,
|
||||
privacyInstructions,
|
||||
title,
|
||||
onCreate,
|
||||
myFolderId,
|
||||
filter,
|
||||
fetchFiles,
|
||||
setIsLoading,
|
||||
rootFolderType,
|
||||
linkStyles,
|
||||
} = props;
|
||||
const subheadingText = t("SubheadingEmptyText");
|
||||
const myDescription = t("MyEmptyContainerDescription");
|
||||
const shareDescription = t("SharedEmptyContainerDescription");
|
||||
const commonDescription = t("CommonEmptyContainerDescription");
|
||||
const trashDescription = t("TrashEmptyContainerDescription");
|
||||
const favoritesDescription = t("FavoritesEmptyContainerDescription");
|
||||
const recentDescription = t("RecentEmptyContainerDescription");
|
||||
|
||||
const privateRoomHeader = t("PrivateRoomHeader");
|
||||
const privacyIcon = <img alt="" src="images/privacy.svg" />;
|
||||
const privateRoomDescTranslations = [
|
||||
t("PrivateRoomDescriptionSafest"),
|
||||
t("PrivateRoomDescriptionSecure"),
|
||||
t("PrivateRoomDescriptionEncrypted"),
|
||||
t("PrivateRoomDescriptionUnbreakable"),
|
||||
];
|
||||
|
||||
const onGoToMyDocuments = () => {
|
||||
const newFilter = filter.clone();
|
||||
setIsLoading(true);
|
||||
fetchFiles(myFolderId, newFilter).finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const getEmptyFolderProps = () => {
|
||||
switch (rootFolderType) {
|
||||
case FolderType.USER:
|
||||
return {
|
||||
descriptionText: myDescription,
|
||||
imageSrc: "images/empty_screen.png",
|
||||
buttons: commonButtons,
|
||||
};
|
||||
case FolderType.SHARE:
|
||||
return {
|
||||
descriptionText: shareDescription,
|
||||
imageSrc: "images/empty_screen_forme.png",
|
||||
};
|
||||
case FolderType.COMMON:
|
||||
return {
|
||||
descriptionText: commonDescription,
|
||||
imageSrc: "images/empty_screen_corporate.png",
|
||||
buttons: commonButtons,
|
||||
};
|
||||
case FolderType.Favorites:
|
||||
return {
|
||||
descriptionText: favoritesDescription,
|
||||
imageSrc: "images/empty_screen_favorites.png",
|
||||
};
|
||||
case FolderType.Recent:
|
||||
return {
|
||||
descriptionText: recentDescription,
|
||||
imageSrc: "images/empty_screen_recent.png",
|
||||
};
|
||||
case FolderType.Privacy:
|
||||
return {
|
||||
descriptionText: privateRoomDescription,
|
||||
imageSrc: "images/empty_screen_privacy.png",
|
||||
buttons: isDesktop && isEncryptionSupport && commonButtons,
|
||||
};
|
||||
case FolderType.TRASH:
|
||||
return {
|
||||
descriptionText: trashDescription,
|
||||
imageSrc: "images/empty_screen_trash.png",
|
||||
buttons: trashButtons,
|
||||
};
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const privateRoomDescription = (
|
||||
<>
|
||||
<Text fontSize="15px" as="div">
|
||||
{privateRoomDescTranslations.map((el) => (
|
||||
<Box
|
||||
displayProp="flex"
|
||||
alignItems="center"
|
||||
paddingProp="0 0 13px 0"
|
||||
key={el}
|
||||
>
|
||||
<Box paddingProp="0 7px 0 0">{privacyIcon}</Box>
|
||||
<Box>{el}</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Text>
|
||||
{!isDesktop && (
|
||||
<Text fontSize="12px">
|
||||
<Trans i18nKey="PrivateRoomSupport" ns="Home">
|
||||
Work in Private Room is available via {{ organizationName }}
|
||||
desktop app.
|
||||
<Link isBold isHovered color="#116d9d" href={privacyInstructions}>
|
||||
Instructions
|
||||
</Link>
|
||||
</Trans>
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const commonButtons = (
|
||||
<span>
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_plus-image"
|
||||
src="images/plus.svg"
|
||||
data-format="docx"
|
||||
onClick={onCreate}
|
||||
alt="plus_icon"
|
||||
/>
|
||||
<Box className="flex-wrapper_container">
|
||||
<Link data-format="docx" onClick={onCreate} {...linkStyles}>
|
||||
{t("Document")},
|
||||
</Link>
|
||||
<Link data-format="xlsx" onClick={onCreate} {...linkStyles}>
|
||||
{t("Spreadsheet")},
|
||||
</Link>
|
||||
<Link data-format="pptx" onClick={onCreate} {...linkStyles}>
|
||||
{t("Presentation")}
|
||||
</Link>
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_plus-image"
|
||||
src="images/plus.svg"
|
||||
onClick={onCreate}
|
||||
alt="plus_icon"
|
||||
/>
|
||||
<Link {...linkStyles} onClick={onCreate}>
|
||||
{t("Folder")}
|
||||
</Link>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
|
||||
const trashButtons = (
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_up-image"
|
||||
src="images/empty_screen_people.svg"
|
||||
width="12px"
|
||||
alt=""
|
||||
onClick={onGoToMyDocuments}
|
||||
/>
|
||||
<Link onClick={onGoToMyDocuments} {...linkStyles}>
|
||||
{t("GoToMyButton")}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
const headerText = isPrivacyFolder ? privateRoomHeader : title;
|
||||
const subheadingTextProp = isPrivacyFolder ? {} : { subheadingText };
|
||||
const emptyFolderProps = getEmptyFolderProps();
|
||||
|
||||
return (
|
||||
<EmptyContainer
|
||||
headerText={headerText}
|
||||
{...subheadingTextProp}
|
||||
{...emptyFolderProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({
|
||||
auth,
|
||||
initFilesStore,
|
||||
filesStore,
|
||||
treeFoldersStore,
|
||||
selectedFolderStore,
|
||||
}) => {
|
||||
const {
|
||||
isDesktopClient,
|
||||
isEncryptionSupport,
|
||||
organizationName,
|
||||
} = auth.settingsStore;
|
||||
|
||||
const { privacyInstructions, setIsLoading } = initFilesStore;
|
||||
const { filter, fetchFiles } = filesStore;
|
||||
const { title, rootFolderType } = selectedFolderStore;
|
||||
const { isPrivacyFolder, myFolderId } = treeFoldersStore;
|
||||
|
||||
return {
|
||||
isPrivacyFolder,
|
||||
isDesktop: isDesktopClient,
|
||||
isEncryptionSupport,
|
||||
organizationName,
|
||||
privacyInstructions,
|
||||
title,
|
||||
myFolderId,
|
||||
filter,
|
||||
fetchFiles,
|
||||
setIsLoading,
|
||||
rootFolderType,
|
||||
};
|
||||
}
|
||||
)(withTranslation("Home")(observer(RootFolderContainer)));
|
@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
import { observer, inject } from "mobx-react";
|
||||
import RootFolderContainer from "./RootFolderContainer";
|
||||
import EmptyFilterContainer from "./EmptyFilterContainer";
|
||||
import EmptyFolderContainer from "./EmptyFolderContainer";
|
||||
import { FileAction } from "@appserver/common/constants";
|
||||
|
||||
const linkStyles = {
|
||||
isHovered: true,
|
||||
type: "action",
|
||||
fontWeight: "600",
|
||||
color: "#555f65",
|
||||
className: "empty-folder_link",
|
||||
display: "flex",
|
||||
};
|
||||
|
||||
const EmptyContainer = ({
|
||||
isFiltered,
|
||||
setAction,
|
||||
isPrivacyFolder,
|
||||
parentId,
|
||||
}) => {
|
||||
const onCreate = (e) => {
|
||||
const format = e.currentTarget.dataset.format || null;
|
||||
setAction({
|
||||
type: FileAction.Create,
|
||||
extension: format,
|
||||
id: -1,
|
||||
});
|
||||
};
|
||||
|
||||
return isFiltered ? (
|
||||
<EmptyFilterContainer linkStyles={linkStyles} />
|
||||
) : parentId === 0 || (isPrivacyFolder && !isEncryptionSupport) ? (
|
||||
<RootFolderContainer onCreate={onCreate} linkStyles={linkStyles} />
|
||||
) : (
|
||||
<EmptyFolderContainer onCreate={onCreate} linkStyles={linkStyles} />
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
|
||||
const {
|
||||
authorType,
|
||||
search,
|
||||
withSubfolders,
|
||||
filterType,
|
||||
} = filesStore.filter;
|
||||
const isFiltered = authorType || search || !withSubfolders || filterType;
|
||||
|
||||
return {
|
||||
isEncryptionSupport: auth.settingsStore.isEncryptionSupport,
|
||||
isFiltered,
|
||||
setAction: filesStore.fileActionStore.setAction,
|
||||
isPrivacyFolder: treeFoldersStore.isPrivacyFolder,
|
||||
parentId: selectedFolderStore.parentId,
|
||||
};
|
||||
}
|
||||
)(observer(EmptyContainer));
|
@ -1,30 +1,16 @@
|
||||
import React from "react";
|
||||
import { withRouter } from "react-router";
|
||||
import { withTranslation, Trans } from "react-i18next";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import Link from "@appserver/components/link";
|
||||
import IconButton from "@appserver/components/icon-button";
|
||||
import Box from "@appserver/components/box";
|
||||
import Text from "@appserver/components/text";
|
||||
import EmptyFolderContainer from "./EmptyFolderContainer";
|
||||
import FilesFilter from "@appserver/common/api/files/filter";
|
||||
import { FileAction } from "@appserver/common/constants";
|
||||
import toastr from "studio/toastr";
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { observer, inject } from "mobx-react";
|
||||
import FilesRowContainer from "./FilesRow/FilesRowContainer";
|
||||
import FilesTileContainer from "./FilesTile/FilesTileContainer";
|
||||
import EmptyContainer from "./EmptyContainer";
|
||||
|
||||
const linkStyles = {
|
||||
isHovered: true,
|
||||
type: "action",
|
||||
fontWeight: "600",
|
||||
color: "#555f65",
|
||||
className: "empty-folder_link",
|
||||
display: "flex",
|
||||
};
|
||||
const backgroundDragColor = "#EFEFB2";
|
||||
|
||||
const backgroundDragEnterColor = "#F8F7BF";
|
||||
|
||||
const CustomTooltip = styled.div`
|
||||
@ -112,315 +98,6 @@ class SectionBodyContent extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
onCreate = (e) => {
|
||||
const format = e.currentTarget.dataset.format || null;
|
||||
this.props.setAction({
|
||||
type: FileAction.Create,
|
||||
extension: format,
|
||||
id: -1,
|
||||
});
|
||||
};
|
||||
|
||||
onResetFilter = () => {
|
||||
const { selectedFolderId, setIsLoading, fetchFiles } = this.props;
|
||||
setIsLoading(true);
|
||||
const newFilter = FilesFilter.getDefault();
|
||||
fetchFiles(selectedFolderId, newFilter)
|
||||
.catch((err) => toastr.error(err))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
onGoToMyDocuments = () => {
|
||||
const { filter, myDocumentsId, setIsLoading, fetchFiles } = this.props;
|
||||
const newFilter = filter.clone();
|
||||
setIsLoading(true);
|
||||
fetchFiles(myDocumentsId, newFilter).finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
onBackToParentFolder = () => {
|
||||
const { filter, parentId, setIsLoading, fetchFiles } = this.props;
|
||||
const newFilter = filter.clone();
|
||||
setIsLoading(true);
|
||||
fetchFiles(parentId, newFilter).finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
renderEmptyRootFolderContainer = () => {
|
||||
const {
|
||||
isMy,
|
||||
isShare,
|
||||
isCommon,
|
||||
isRecycleBin,
|
||||
isFavorites,
|
||||
isRecent,
|
||||
isPrivacy,
|
||||
isDesktop,
|
||||
isEncryptionSupport,
|
||||
organizationName,
|
||||
privacyInstructions,
|
||||
title,
|
||||
t,
|
||||
} = this.props;
|
||||
const subheadingText = t("SubheadingEmptyText");
|
||||
const myDescription = t("MyEmptyContainerDescription");
|
||||
const shareDescription = t("SharedEmptyContainerDescription");
|
||||
const commonDescription = t("CommonEmptyContainerDescription");
|
||||
const trashDescription = t("TrashEmptyContainerDescription");
|
||||
const favoritesDescription = t("FavoritesEmptyContainerDescription");
|
||||
const recentDescription = t("RecentEmptyContainerDescription");
|
||||
|
||||
const privateRoomHeader = t("PrivateRoomHeader");
|
||||
const privacyIcon = <img alt="" src="images/privacy.svg" />;
|
||||
const privateRoomDescTranslations = [
|
||||
t("PrivateRoomDescriptionSafest"),
|
||||
t("PrivateRoomDescriptionSecure"),
|
||||
t("PrivateRoomDescriptionEncrypted"),
|
||||
t("PrivateRoomDescriptionUnbreakable"),
|
||||
];
|
||||
const privateRoomDescription = (
|
||||
<>
|
||||
<Text fontSize="15px" as="div">
|
||||
{privateRoomDescTranslations.map((el) => (
|
||||
<Box
|
||||
displayProp="flex"
|
||||
alignItems="center"
|
||||
paddingProp="0 0 13px 0"
|
||||
key={el}
|
||||
>
|
||||
<Box paddingProp="0 7px 0 0">{privacyIcon}</Box>
|
||||
<Box>{el}</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Text>
|
||||
{!isDesktop && (
|
||||
<Text fontSize="12px">
|
||||
<Trans i18nKey="PrivateRoomSupport" ns="Home">
|
||||
Work in Private Room is available via {{ organizationName }}
|
||||
desktop app.
|
||||
<Link isBold isHovered color="#116d9d" href={privacyInstructions}>
|
||||
Instructions
|
||||
</Link>
|
||||
</Trans>
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const commonButtons = (
|
||||
<span>
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_plus-image"
|
||||
src="images/plus.svg"
|
||||
data-format="docx"
|
||||
onClick={this.onCreate}
|
||||
alt="plus_icon"
|
||||
/>
|
||||
<Box className="flex-wrapper_container">
|
||||
<Link data-format="docx" onClick={this.onCreate} {...linkStyles}>
|
||||
{t("Document")},
|
||||
</Link>
|
||||
<Link data-format="xlsx" onClick={this.onCreate} {...linkStyles}>
|
||||
{t("Spreadsheet")},
|
||||
</Link>
|
||||
<Link data-format="pptx" onClick={this.onCreate} {...linkStyles}>
|
||||
{t("Presentation")}
|
||||
</Link>
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_plus-image"
|
||||
src="images/plus.svg"
|
||||
onClick={this.onCreate}
|
||||
alt="plus_icon"
|
||||
/>
|
||||
<Link {...linkStyles} onClick={this.onCreate}>
|
||||
{t("Folder")}
|
||||
</Link>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
|
||||
const trashButtons = (
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_up-image"
|
||||
src="images/empty_screen_people.svg"
|
||||
width="12px"
|
||||
alt=""
|
||||
onClick={this.onGoToMyDocuments}
|
||||
/>
|
||||
<Link onClick={this.onGoToMyDocuments} {...linkStyles}>
|
||||
{t("GoToMyButton")}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (isMy) {
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={title}
|
||||
subheadingText={subheadingText}
|
||||
descriptionText={myDescription}
|
||||
imageSrc="images/empty_screen.png"
|
||||
buttons={commonButtons}
|
||||
/>
|
||||
);
|
||||
} else if (isShare) {
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={title}
|
||||
subheadingText={subheadingText}
|
||||
descriptionText={shareDescription}
|
||||
imageSrc="images/empty_screen_forme.png"
|
||||
/>
|
||||
);
|
||||
} else if (isCommon) {
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={title}
|
||||
subheadingText={subheadingText}
|
||||
descriptionText={commonDescription}
|
||||
imageSrc="images/empty_screen_corporate.png"
|
||||
buttons={commonButtons}
|
||||
/>
|
||||
);
|
||||
} else if (isRecycleBin) {
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={title}
|
||||
subheadingText={subheadingText}
|
||||
descriptionText={trashDescription}
|
||||
imageSrc="images/empty_screen_trash.png"
|
||||
buttons={trashButtons}
|
||||
/>
|
||||
);
|
||||
} else if (isFavorites) {
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={title}
|
||||
subheadingText={subheadingText}
|
||||
descriptionText={favoritesDescription}
|
||||
imageSrc="images/empty_screen_favorites.png"
|
||||
/>
|
||||
);
|
||||
} else if (isRecent) {
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={title}
|
||||
subheadingText={subheadingText}
|
||||
descriptionText={recentDescription}
|
||||
imageSrc="images/empty_screen_recent.png"
|
||||
/>
|
||||
);
|
||||
} else if (isPrivacy) {
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={privateRoomHeader}
|
||||
descriptionText={privateRoomDescription}
|
||||
imageSrc="images/empty_screen_privacy.png"
|
||||
buttons={isDesktop && isEncryptionSupport && commonButtons}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
renderEmptyFolderContainer = () => {
|
||||
const { t } = this.props;
|
||||
const buttons = (
|
||||
<>
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_plus-image"
|
||||
src="images/plus.svg"
|
||||
data-format="docx"
|
||||
onClick={this.onCreate}
|
||||
alt="plus_icon"
|
||||
/>
|
||||
<Box className="flex-wrapper_container">
|
||||
<Link data-format="docx" onClick={this.onCreate} {...linkStyles}>
|
||||
{t("Document")},
|
||||
</Link>
|
||||
<Link data-format="xlsx" onClick={this.onCreate} {...linkStyles}>
|
||||
{t("Spreadsheet")},
|
||||
</Link>
|
||||
<Link data-format="pptx" onClick={this.onCreate} {...linkStyles}>
|
||||
{t("Presentation")}
|
||||
</Link>
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_plus-image"
|
||||
src="images/plus.svg"
|
||||
onClick={this.onCreate}
|
||||
alt="plus_icon"
|
||||
/>
|
||||
<Link {...linkStyles} onClick={this.onCreate}>
|
||||
{t("Folder")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="empty-folder_container-links">
|
||||
<img
|
||||
className="empty-folder_container_up-image"
|
||||
src="images/up.svg"
|
||||
onClick={this.onBackToParentFolder}
|
||||
alt="up_icon"
|
||||
/>
|
||||
|
||||
<Link onClick={this.onBackToParentFolder} {...linkStyles}>
|
||||
{t("BackToParentFolderButton")}
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={t("EmptyFolderHeader")}
|
||||
imageSrc="images/empty_screen.png"
|
||||
buttons={buttons}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
renderEmptyFilterContainer = () => {
|
||||
const { t } = this.props;
|
||||
const subheadingText = t("EmptyFilterSubheadingText");
|
||||
const descriptionText = t("EmptyFilterDescriptionText");
|
||||
|
||||
const buttons = (
|
||||
<div className="empty-folder_container-links">
|
||||
<IconButton
|
||||
className="empty-folder_container-icon"
|
||||
size="12"
|
||||
onClick={this.onResetFilter}
|
||||
iconName="static/images/cross.react.svg"
|
||||
isFill
|
||||
color="#657077"
|
||||
/>
|
||||
<Link onClick={this.onResetFilter} {...linkStyles}>
|
||||
{t("ClearButton")}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<EmptyFolderContainer
|
||||
headerText={t("Filter")}
|
||||
subheadingText={subheadingText}
|
||||
descriptionText={descriptionText}
|
||||
imageSrc="images/empty_screen_filter.png"
|
||||
buttons={buttons}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
onDragStart = (e) => {
|
||||
if (e.dataTransfer.dropEffect === "none") {
|
||||
this.state.canDrag && this.setState({ canDrag: false });
|
||||
@ -712,18 +389,14 @@ class SectionBodyContent extends React.Component {
|
||||
//console.log("Files Home SectionBodyContent render", this.props);
|
||||
|
||||
const {
|
||||
parentId,
|
||||
selection,
|
||||
fileActionId,
|
||||
isPrivacy,
|
||||
isEncryptionSupport,
|
||||
dragging,
|
||||
viewAs,
|
||||
t,
|
||||
isMobile,
|
||||
firstLoad,
|
||||
tooltipValue,
|
||||
filter,
|
||||
isLoading,
|
||||
isEmptyFilesList,
|
||||
} = this.props;
|
||||
@ -738,21 +411,12 @@ class SectionBodyContent extends React.Component {
|
||||
: "";
|
||||
}
|
||||
|
||||
const { authorType, search, withSubfolders, filterType } = filter;
|
||||
const isFiltered = authorType || search || !withSubfolders || filterType;
|
||||
|
||||
return (!fileActionId && isEmptyFilesList) || null ? (
|
||||
firstLoad ? (
|
||||
firstLoad || (isMobile && isLoading) ? (
|
||||
<Loaders.Rows />
|
||||
) : isFiltered ? (
|
||||
this.renderEmptyFilterContainer()
|
||||
) : parentId === 0 || (isPrivacy && !isEncryptionSupport) ? (
|
||||
this.renderEmptyRootFolderContainer()
|
||||
) : (
|
||||
this.renderEmptyFolderContainer()
|
||||
<EmptyContainer />
|
||||
)
|
||||
) : isMobile && isLoading ? (
|
||||
<Loaders.Rows />
|
||||
) : (
|
||||
<>
|
||||
<CustomTooltip ref={this.tooltipRef}>{fileMoveTooltip}</CustomTooltip>
|
||||
@ -769,85 +433,50 @@ export default inject(
|
||||
filesStore,
|
||||
uploadDataStore,
|
||||
treeFoldersStore,
|
||||
selectedFolderStore,
|
||||
filesActionsStore,
|
||||
}) => {
|
||||
const { secondaryProgressDataStore } = uploadDataStore;
|
||||
const {
|
||||
isEncryptionSupport,
|
||||
organizationName,
|
||||
isDesktopClient,
|
||||
} = auth.settingsStore;
|
||||
const {
|
||||
dragging,
|
||||
setDragging,
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
viewAs,
|
||||
dragItem,
|
||||
privacyInstructions,
|
||||
tooltipValue,
|
||||
} = initFilesStore;
|
||||
const {
|
||||
firstLoad,
|
||||
fetchFiles,
|
||||
selection,
|
||||
filter,
|
||||
fileActionStore,
|
||||
iconOfDraggedFile,
|
||||
filesList,
|
||||
} = filesStore;
|
||||
|
||||
const { isShareFolder, isCommonFolder } = treeFoldersStore;
|
||||
const { id: fileActionId } = fileActionStore;
|
||||
const {
|
||||
myFolderId,
|
||||
isMyFolder,
|
||||
isRecycleBinFolder,
|
||||
isShareFolder,
|
||||
isFavoritesFolder,
|
||||
isCommonFolder,
|
||||
isRecentFolder,
|
||||
isPrivacyFolder,
|
||||
} = treeFoldersStore;
|
||||
|
||||
const { id: fileActionId, setAction } = fileActionStore;
|
||||
const { setSecondaryProgressBarData } = secondaryProgressDataStore;
|
||||
setSecondaryProgressBarData,
|
||||
} = uploadDataStore.secondaryProgressDataStore;
|
||||
const { copyToAction, moveToAction } = filesActionsStore;
|
||||
|
||||
return {
|
||||
isAdmin: auth.isAdmin,
|
||||
isEncryptionSupport,
|
||||
organizationName,
|
||||
isDesktop: isDesktopClient,
|
||||
dragging,
|
||||
fileActionId,
|
||||
firstLoad,
|
||||
title: selectedFolderStore.title,
|
||||
parentId: selectedFolderStore.parentId,
|
||||
selectedFolderId: selectedFolderStore.id,
|
||||
selection,
|
||||
isRecycleBin: isRecycleBinFolder,
|
||||
myDocumentsId: myFolderId,
|
||||
isShare: isShareFolder,
|
||||
isFavorites: isFavoritesFolder,
|
||||
isCommon: isCommonFolder,
|
||||
isRecent: isRecentFolder,
|
||||
isMy: isMyFolder,
|
||||
isPrivacy: isPrivacyFolder,
|
||||
filter,
|
||||
viewAs,
|
||||
dragItem,
|
||||
privacyInstructions,
|
||||
iconOfDraggedFile,
|
||||
tooltipValue,
|
||||
isLoading,
|
||||
isEmptyFilesList: filesList.length <= 0,
|
||||
|
||||
setDragging,
|
||||
setAction,
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
setSecondaryProgressBarData,
|
||||
copyToAction: filesActionsStore.copyToAction,
|
||||
moveToAction: filesActionsStore.moveToAction,
|
||||
copyToAction,
|
||||
moveToAction,
|
||||
};
|
||||
}
|
||||
)(withRouter(withTranslation("Home")(observer(SectionBodyContent))));
|
||||
|
@ -23,7 +23,6 @@ import {
|
||||
} from "./Section";
|
||||
|
||||
import { ConvertDialog } from "../../dialogs";
|
||||
import { ChangeOwnerPanel } from "../../panels";
|
||||
import { getFilterByLocation } from "../../../helpers/converters";
|
||||
import Panels from "./Panels";
|
||||
import MediaViewer from "./MediaViewer";
|
||||
|
@ -10,7 +10,7 @@ import Row from "@appserver/components/row";
|
||||
import RowContainer from "@appserver/components/row-container";
|
||||
|
||||
import { withTranslation } from "react-i18next";
|
||||
import EmptyFolderContainer from "../../../Home/Section/Body/EmptyFolderContainer";
|
||||
import EmptyFolderContainer from "../../../Home/Section/Body/EmptyContainer/EmptyContainer";
|
||||
import { Trans } from "react-i18next";
|
||||
import { DeleteThirdPartyDialog, ConnectDialog } from "../../../../dialogs";
|
||||
import BoxIcon from "../../../../../../public/images/icon_box.react.svg";
|
||||
|
@ -781,7 +781,6 @@ class FilesStore {
|
||||
if (this.filesList) {
|
||||
this.filesList.forEach((file) => {
|
||||
if (file.canOpenPlayer) {
|
||||
debugger;
|
||||
playlist.push({
|
||||
id: id,
|
||||
fileId: file.id,
|
||||
|
@ -15,9 +15,6 @@ class TreeFoldersStore {
|
||||
expandedKeys: observable,
|
||||
|
||||
myFolderId: computed,
|
||||
//shareFolderId: computed,
|
||||
//favoritesFolderId: computed,
|
||||
//recentFolderId: computed,
|
||||
commonFolderId: computed,
|
||||
|
||||
myFolder: computed,
|
||||
|
@ -12,7 +12,9 @@ import Layout from "./components/Layout";
|
||||
import ScrollToTop from "./components/Layout/ScrollToTop";
|
||||
import history from "@appserver/common/history";
|
||||
import toastr from "studio/toastr";
|
||||
import RectangleLoader from "@appserver/common/components/Loaders/RectangleLoader";
|
||||
import Loader from "@appserver/components/loader";
|
||||
import Grid from "@appserver/components/grid";
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import { updateTempContent } from "@appserver/common/utils";
|
||||
import { Provider as MobxProvider } from "mobx-react";
|
||||
import ThemeProvider from "@appserver/components/theme-provider";
|
||||
@ -33,14 +35,14 @@ const About = React.lazy(() => import("./components/pages/About"));
|
||||
const Settings = React.lazy(() => import("./components/pages/Settings"));
|
||||
const ComingSoon = React.lazy(() => import("./components/pages/ComingSoon"));
|
||||
|
||||
const LoadingBody = styled.div`
|
||||
width: 100vw;
|
||||
padding: 20px;
|
||||
`;
|
||||
const LoadingShell = () => (
|
||||
<LoadingBody>
|
||||
<RectangleLoader height="100%" width="100%" />
|
||||
</LoadingBody>
|
||||
<PageLayout>
|
||||
<PageLayout.SectionBody>
|
||||
<Box displayProp="flex" alignItems="center" justifyContent="center">
|
||||
<Loader type="rombs" size="40px" />
|
||||
</Box>
|
||||
</PageLayout.SectionBody>
|
||||
</PageLayout>
|
||||
);
|
||||
|
||||
const SettingsRoute = (props) => (
|
||||
|
12
yarn.lock
12
yarn.lock
@ -4272,9 +4272,9 @@ acorn@^7.1.0, acorn@^7.1.1:
|
||||
integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
|
||||
|
||||
acorn@^8.0.4:
|
||||
version "8.0.5"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.0.5.tgz#a3bfb872a74a6a7f661bc81b9849d9cac12601b7"
|
||||
integrity sha512-v+DieK/HJkJOpFBETDJioequtc3PfxsWMaxIdIwujtF7FEV/MAyDQLlm6/zPvr7Mix07mLh6ccVwIsloceodlg==
|
||||
version "8.1.0"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.0.tgz#52311fd7037ae119cbb134309e901aa46295b3fe"
|
||||
integrity sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==
|
||||
|
||||
add-dom-event-listener@^1.1.0:
|
||||
version "1.1.0"
|
||||
@ -9687,9 +9687,9 @@ i18next-http-backend@^1.1.0, i18next-http-backend@^1.1.1:
|
||||
node-fetch "2.6.1"
|
||||
|
||||
i18next@^19.8.4, i18next@^19.9.1:
|
||||
version "19.9.1"
|
||||
resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.9.1.tgz#7a072b75daf677aa51fd4ce55214f21702af3ffd"
|
||||
integrity sha512-9Azzyb3DvMJUMd7sPhwVEs6PQcogvdHmLQTjMQ+P+h3XwW4O66/8lgZTmYShgkjPOCqTw4Fwl5LOp/VhZgPo5A==
|
||||
version "19.9.2"
|
||||
resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.9.2.tgz#ea5a124416e3c5ab85fddca2c8e3c3669a8da397"
|
||||
integrity sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.0"
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user