+
+
+ 
+
+
+ );
+};
+
+export default withTranslation(["InfoPanel"])(SeveralItems);
diff --git a/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/SingleItem.js b/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/SingleItem.js
new file mode 100644
index 0000000000..fcb31a8e2f
--- /dev/null
+++ b/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/SingleItem.js
@@ -0,0 +1,415 @@
+import { FileType } from "@appserver/common/constants";
+import { LANGUAGE } from "@appserver/common/constants";
+import Link from "@appserver/components/link";
+import Text from "@appserver/components/text";
+import Tooltip from "@appserver/components/tooltip";
+import React, { useEffect, useState } from "react";
+import { ReactSVG } from "react-svg";
+import {
+ StyledAccess,
+ StyledAccessItem,
+ StyledOpenSharingPanel,
+ StyledProperties,
+ StyledSubtitle,
+ StyledThumbnail,
+ StyledTitle,
+} from "./styles/styles.js";
+
+const moment = require("moment");
+
+const SingleItem = (props) => {
+ const {
+ t,
+ selectedItem,
+ onSelectItem,
+ setSharingPanelVisible,
+ getFolderInfo,
+ getIcon,
+ getFolderIcon,
+ getShareUsers,
+ dontShowSize,
+ dontShowLocation,
+ dontShowAccess,
+ } = props;
+
+ let updateSubscription = true;
+ const [item, setItem] = useState({
+ id: "",
+ isFolder: false,
+ title: "",
+ iconUrl: "",
+ thumbnailUrl: "",
+ properties: [],
+ access: {
+ owner: {
+ img: "",
+ link: "",
+ },
+ others: [],
+ },
+ });
+
+ const updateItemsInfo = async (selectedItem) => {
+ const getItemIcon = (item, size) => {
+ return item.isFolder
+ ? getFolderIcon(item.providerKey, size)
+ : getIcon(size, item.fileExst || ".file");
+ };
+
+ const getSingleItemProperties = (item) => {
+ const styledLink = (text, href) => (
+
+ {text}
+
+ );
+
+ const styledText = (text) => (
+
+
+
+ )}
+
+
+ {p.title}
+ {p.content}
+
+ );
+ })}
+
+
+
+
+ 
+
+
+
+
+
+
+ );
+ })}
+
+ {item.access.others.length > 3 && (
+
+ {item.type === "user" ? (
+
+
+
+ 
+
+
+ ) : (
+
+ {item.name.substr(0, 2).toUpperCase()}
+
+ )}
+
+ {`+ ${item.access.others.length - 3} ${t("Members")}`}
+
+ )}
+
@@ -383,6 +388,8 @@ class SectionHeaderContent extends React.Component {
isEmptyFilesList={isEmptyFilesList}
clearTrash={this.onEmptyTrashAction}
onBackToParentFolder={this.onBackToParentFolder}
+ toggleInfoPanel={this.props.toggleInfoPanel}
+ isInfoPanelVisible={this.props.isInfoPanelVisible}
/>
)}
@@ -403,6 +410,7 @@ export default inject(
treeFoldersStore,
filesActionsStore,
settingsStore,
+ infoPanelStore,
}) => {
const {
setSelected,
@@ -441,9 +449,10 @@ export default inject(
backToParentFolder,
} = filesActionsStore;
+ const { toggleIsVisible, isVisible } = infoPanelStore;
+
return {
showText: auth.settingsStore.showText,
-
isDesktop: auth.settingsStore.isDesktopClient,
isRootFolder: selectedFolderStore.parentId === 0,
title: selectedFolderStore.title,
@@ -451,6 +460,8 @@ export default inject(
pathParts: selectedFolderStore.pathParts,
navigationPath: selectedFolderStore.navigationPath,
canCreate,
+ toggleInfoPanel: toggleIsVisible,
+ isInfoPanelVisible: isVisible,
isHeaderVisible,
isHeaderIndeterminate,
isHeaderChecked,
diff --git a/products/ASC.Files/Client/src/pages/Home/index.js b/products/ASC.Files/Client/src/pages/Home/index.js
index 3a515dbd6d..ba88d51227 100644
--- a/products/ASC.Files/Client/src/pages/Home/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/index.js
@@ -22,6 +22,7 @@ import {
SectionPagingContent,
Bar,
} from "./Section";
+import { InfoPanelBodyContent, InfoPanelHeaderContent } from "./InfoPanel";
import { ArticleMainButtonContent } from "../../components/Article";
@@ -287,6 +288,7 @@ class PureHome extends React.Component {
setMaintenanceExist,
snackbarExist,
} = this.props;
+
return (
<>