fixed context menu and added first-close-disable interaction

packages/asc-web-common/components/Section/sub-components/info-panel-header.js

@@ -28,7 +28,11 @@ const StyledInfoPanelHeader = styled.div`
   }
 `;
 
-const SubInfoPanelHeader = ({ children, toggleIsVisible }) => {
+const SubInfoPanelHeader = ({
+  children,
+  onHeaderCrossClick,
+  revertHeaderCrossClick,
+}) => {
   const content = children?.props?.children;
 
   return (
@@ -36,9 +40,20 @@ const SubInfoPanelHeader = ({ children, toggleIsVisible }) => {
       <Text className="header-text" fontSize="21px" fontWeight="700">
         {content}
       </Text>
+
       <IconButton
         className="close-btn"
-        onClick={toggleIsVisible}
+        onClick={revertHeaderCrossClick}
+        iconName="/static/images/eye.react.svg"
+        size="17"
+        color="#A3A9AE"
+        hoverColor="#657077"
+        isFill={true}
+      />
+
+      <IconButton
+        className="close-btn"
+        onClick={onHeaderCrossClick}
         iconName="/static/images/cross.react.svg"
         size="17"
         color="#A3A9AE"
@@ -61,9 +76,11 @@ SubInfoPanelHeader.propTypes = {
 };
 
 export default inject(({ infoPanelStore }) => {
-  let toggleIsVisible = () => {};
+  let onHeaderCrossClick = () => {};
+  let revertHeaderCrossClick = () => {};
   if (infoPanelStore) {
-    toggleIsVisible = infoPanelStore.toggleIsVisible;
+    onHeaderCrossClick = infoPanelStore.onHeaderCrossClick;
+    revertHeaderCrossClick = infoPanelStore.revertHeaderCrossClick;
   }
-  return { toggleIsVisible };
+  return { onHeaderCrossClick, revertHeaderCrossClick };
 })(observer(SubInfoPanelHeader));

products/ASC.Files/Client/src/HOCs/withFileActions.js

@@ -13,16 +13,13 @@ export default function withFileActions(WrappedFileItem) {
       const {
         selectRowAction,
         infoPanelIsVisible,
-        showInfoPanel,
+        infoPanelonItemClick,
         setShowCurrentFolder,
       } = this.props;
       if (!file || file.id === -1) return;
       selectRowAction(checked, file);
 
-      if (!infoPanelIsVisible && isDesktop()) {
-        setShowCurrentFolder(false);
-        if (checked) showInfoPanel();
-      }
+      infoPanelonItemClick(checked);
     };
 
     fileContextClick = () => {
@@ -105,8 +102,7 @@ export default function withFileActions(WrappedFileItem) {
         viewAs,
         isItemsSelected,
         infoPanelIsVisible,
-        showInfoPanel,
-        setShowCurrentFolder,
+        infoPanelonItemClick,
       } = this.props;
 
       if (
@@ -125,16 +121,10 @@ export default function withFileActions(WrappedFileItem) {
       if (viewAs === "tile") {
         if (e.target.closest(".edit-button") || e.target.tagName === "IMG")
           return;
-
         if (e.detail === 1) this.fileContextClick();
-      } else {
-        this.fileContextClick();
-      }
+      } else this.fileContextClick();
 
-      if (!infoPanelIsVisible && isDesktop()) {
-        setShowCurrentFolder(false);
-        showInfoPanel();
-      }
+      infoPanelonItemClick();
     };
 
     onFilesClick = (e) => {
@@ -276,7 +266,7 @@ export default function withFileActions(WrappedFileItem) {
 
       const { startUpload } = uploadDataStore;
       const { type, extension, id } = fileActionStore;
-      const { isVisible, setVisible, setShowCurrentFolder } = infoPanelStore;
+      const { isVisible, onItemClick, setShowCurrentFolder } = infoPanelStore;
 
       const selectedItem = selection.find(
         (x) => x.id === item.id && x.fileExst === item.fileExst
@@ -344,7 +334,7 @@ export default function withFileActions(WrappedFileItem) {
         showHotkeyBorder,
         openFileAction,
         isInfoPanelVisible: isVisible,
-        showInfoPanel: setVisible,
+        infoPanelonItemClick: onItemClick,
         setShowCurrentFolder,
       };
     }

products/ASC.Files/Client/src/store/ContextOptionsStore.js

@@ -18,6 +18,7 @@ class ContextOptionsStore {
   uploadDataStore;
   versionHistoryStore;
   settingsStore;
+  infoPanelStore;
 
   constructor(
     authStore,
@@ -28,7 +29,8 @@ class ContextOptionsStore {
     treeFoldersStore,
     uploadDataStore,
     versionHistoryStore,
-    settingsStore
+    settingsStore,
+    infoPanelStore
   ) {
     makeAutoObservable(this);
     this.authStore = authStore;
@@ -40,6 +42,7 @@ class ContextOptionsStore {
     this.uploadDataStore = uploadDataStore;
     this.versionHistoryStore = versionHistoryStore;
     this.settingsStore = settingsStore;
+    this.infoPanelStore = infoPanelStore;
   }
 
   onOpenFolder = (item) => {
@@ -331,6 +334,11 @@ class ContextOptionsStore {
     return options;
   };
 
+  onToggleInfoPanel = () => {
+    const { toggleIsVisible } = this.infoPanelStore;
+    toggleIsVisible();
+  };
+
   getFilesContextOptions = (item, t) => {
     const { contextOptions } = item;
     const isRootThirdPartyFolder =
@@ -437,6 +445,13 @@ class ContextOptionsStore {
         onClick: () => this.onOpenFolder(item),
         disabled: false,
       },
+      {
+        key: "show-info",
+        label: t("InfoPanel:Info"),
+        icon: "/static/images/info.outline.react.svg",
+        onClick: () => this.onToggleInfoPanel(),
+        disabled: false,
+      },
       {
         key: "fill-form",
         label: t("Common:FillFormButton"),

products/ASC.Files/Client/src/store/InfoPanelStore.js

@@ -1,3 +1,4 @@
+import { isDesktop } from "@appserver/components/utils/device";
 import { makeAutoObservable } from "mobx";
 
 class InfoPanelStore {
@@ -12,6 +13,23 @@ class InfoPanelStore {
     this.showCurrentFolder = bool;
   };
 
+  onItemClick = (checked = true) => {
+    if (localStorage.getItem("disableOpenOnFileClick")) return;
+    if (!this.isVisible && isDesktop()) {
+      this.showCurrentFolder = false;
+      if (checked) this.isVisible = true;
+    }
+  };
+
+  onHeaderCrossClick = () => {
+    localStorage.setItem("disableOpenOnFileClick", "true");
+    this.isVisible = false;
+  };
+
+  revertHeaderCrossClick = () => {
+    localStorage.removeItem("disableOpenOnFileClick");
+  };
+
   get showCurrentFolder() {
     return this.showCurrenFolder;
   }

products/ASC.Files/Client/src/store/index.js

@@ -78,7 +78,8 @@ const contextOptionsStore = new ContextOptionsStore(
   treeFoldersStore,
   uploadDataStore,
   versionHistoryStore,
-  settingsStore
+  settingsStore,
+  infoPanelStore
 );
 
 const hotkeyStore = new HotkeyStore(
@@ -107,4 +108,4 @@ const stores = {
   infoPanelStore,
 };
 
-export default stores;
+export default stores;