From 8a60ad2a7abe132eaa1c0a3c9743774e8953f351 Mon Sep 17 00:00:00 2001
From: mushka <nikitamushka@mail.ru>
Date: Fri, 3 Jun 2022 12:20:31 +0300
Subject: [PATCH] InfoPanel: fixed some bugs with tablet view and header toggle

---
 .../sub-components/info-panel-header.js       | 23 +++++++++--------
 .../Section/sub-components/info-panel.js      | 25 ++++++-------------
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/asc-web-common/components/Section/sub-components/info-panel-header.js b/packages/asc-web-common/components/Section/sub-components/info-panel-header.js
index d971af250f..f584b224d2 100644
--- a/packages/asc-web-common/components/Section/sub-components/info-panel-header.js
+++ b/packages/asc-web-common/components/Section/sub-components/info-panel-header.js
@@ -6,6 +6,7 @@ import { inject, observer } from "mobx-react";
 import PropTypes from "prop-types";
 import React from "react";
 import styled from "styled-components";
+import { isMobile } from "react-device-detect";
 
 const StyledInfoPanelHeader = styled.div`
   width: 100%;
@@ -51,7 +52,7 @@ const StyledInfoPanelToggleWrapper = styled.div`
 `;
 StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
 
-const SubInfoPanelHeader = ({ children, setIsVisible }) => {
+const SubInfoPanelHeader = ({ children, setIsVisible, viewAs }) => {
   const content = children?.props?.children;
 
   const closeInfoPanel = () => setIsVisible(false);
@@ -65,15 +66,17 @@ const SubInfoPanelHeader = ({ children, setIsVisible }) => {
         isRootFolder={true}
         isInfoPanelVisible={true}
       >
-        <div className="info-panel-toggle-bg">
-          <IconButton
-            className="info-panel-toggle"
-            iconName="images/panel.react.svg"
-            size="16"
-            isFill={true}
-            onClick={closeInfoPanel}
-          />
-        </div>
+        {(viewAs === "row" || isMobile) && (
+          <div className="info-panel-toggle-bg">
+            <IconButton
+              className="info-panel-toggle"
+              iconName="images/panel.react.svg"
+              size="16"
+              isFill={true}
+              onClick={closeInfoPanel}
+            />
+          </div>
+        )}
       </StyledInfoPanelToggleWrapper>
     </StyledInfoPanelHeader>
   );
diff --git a/packages/asc-web-common/components/Section/sub-components/info-panel.js b/packages/asc-web-common/components/Section/sub-components/info-panel.js
index 7f2e88f3c3..a48ddddc8c 100644
--- a/packages/asc-web-common/components/Section/sub-components/info-panel.js
+++ b/packages/asc-web-common/components/Section/sub-components/info-panel.js
@@ -22,15 +22,7 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
   background: ${(props) => props.theme.infoPanel.blurColor};
   backdrop-filter: blur(3px);
 
-  @media ${tablet} {
-    z-index: 309;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
+  // @media ${tablet} {
   ${(props) =>
     (props.isRowView || isMobile) &&
     css`
@@ -55,14 +47,7 @@ const StyledInfoPanel = styled.div`
     padding-bottom: 20px;
   }
 
-  @media ${tablet} {
-    position: absolute;
-    border: none;
-    right: 0;
-    width: 480px;
-    max-width: calc(100vw - 69px);
-  }
-
+  // @media ${tablet} {
   ${(props) =>
     (props.isRowView || isMobile) &&
     css`
@@ -148,7 +133,11 @@ const InfoPanel = ({ children, isVisible, setIsVisible, viewAs }) => {
       document.addEventListener("mousedown", onMouseDown);
 
     window.onpopstate = () => {
-      if (!isDesktop() && isVisible) closeInfoPanel();
+      if (
+        (viewAs === "row" || isTablet() || isMobile || isMobileUtils()) &&
+        isVisible
+      )
+        closeInfoPanel();
     };
 
     return () => document.removeEventListener("mousedown", onMouseDown);