added isVisible toogle to GroupMenu

packages/asc-web-common/components/PageLayout/sub-components/room-info-header.js

@@ -1,12 +1,9 @@
 import IconButton from "@appserver/components/icon-button";
 import Text from "@appserver/components/text";
-
+import { tablet } from "@appserver/components/utils/device";
 import { inject, observer } from "mobx-react";
 import PropTypes from "prop-types";
-
 import React from "react";
-import { tablet } from "@appserver/components/utils/device";
-
 import styled from "styled-components";
 
 const SubRoomInfoHeader = ({ children, toggleIsVisible }) => {
@@ -22,11 +19,11 @@ const SubRoomInfoHeader = ({ children, toggleIsVisible }) => {
         align-items: center;
         margin: 8px 0;
 
-        /* .close-btn {
+        .close-btn {
             @media ${tablet} {
                 display: none;
             }
-        } */
+        }
     `;
 
     return (

packages/asc-web-common/components/PageLayout/sub-components/room-info.js

@@ -16,7 +16,7 @@ const RoomInfo = ({ children, isVisible, toggleIsVisible }) => {
         backdrop-filter: blur(18px);
 
         @media ${tablet} {
-            z-index: 191;
+            z-index: 200;
             position: absolute;
             top: 0;
             bottom: 0;

packages/asc-web-components/table-container/StyledTableContainer.js

@@ -1,8 +1,9 @@
+import { isMobile } from "react-device-detect";
 import styled, { css } from "styled-components";
+
+import Scrollbar from "../scrollbar";
 import Base from "../themes/base";
 import { mobile, tablet } from "../utils/device";
-import Scrollbar from "../scrollbar";
-import { isMobile } from "react-device-detect";
 
 const StyledTableContainer = styled.div`
   -moz-user-select: none;

packages/asc-web-components/table-container/TableGroupMenu.js

@@ -1,16 +1,18 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
 import Checkbox from "../checkbox";
-import { StyledTableGroupMenu, StyledScrollbar } from "./StyledTableContainer";
 import ComboBox from "../combobox";
 import GroupMenuItem from "./GroupMenuItem";
-import { useTranslation } from "react-i18next";
+import { StyledScrollbar, StyledTableGroupMenu } from "./StyledTableContainer";
 
 const TableGroupMenu = (props) => {
   const {
     isChecked,
     isIndeterminate,
     headerMenu,
+    infoPanelToggle,
     onChange,
     checkboxOptions,
     checkboxMargin,
@@ -53,6 +55,7 @@ const TableGroupMenu = (props) => {
           {headerMenu.map((item, index) => (
             <GroupMenuItem key={index} item={item} />
           ))}
+          {infoPanelToggle}
         </StyledScrollbar>
       </StyledTableGroupMenu>
     </>
@@ -63,6 +66,7 @@ TableGroupMenu.propTypes = {
   isChecked: PropTypes.bool,
   isIndeterminate: PropTypes.bool,
   headerMenu: PropTypes.arrayOf(PropTypes.object).isRequired,
+  infoPanelToggle: PropTypes.node,
   checkboxOptions: PropTypes.any.isRequired,
   onClick: PropTypes.func,
   onChange: PropTypes.func,

products/ASC.Files/Client/src/pages/Home/RoomInfo/Body/index.js

@@ -1,14 +1,16 @@
+import { inject, observer } from "mobx-react";
 import React from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
-import { observer, inject } from "mobx-react";
+import { withRouter } from "react-router";
 
-const RoomInfoBodyContent = () => {
-    return <div>ROOM INFO BODY CONTENT</div>;
+const RoomInfoBodyContent = (selectedFilesStore) => {
+    return <div>{selectedFilesStore.fileInfo}</div>;
 };
 
-export default inject(({}) => {
-    return {};
+export default inject(({ selectedFilesStore }) => {
+    //const { selectedFilesStore } = filesStore;
+    console.log(selectedFilesStore);
+    return { selectedFilesStore };
 })(
     withRouter(
         withTranslation(["Home", "Common", "Translations"])(

products/ASC.Files/Client/src/pages/Home/Section/Header/index.js

@@ -22,16 +22,15 @@ const StyledContainer = styled.div`
             props.viewAs === "table"
                 ? css`
                       margin: 0px -20px;
-                      width: calc(100% + 44px);
+                      width: calc(100% + 40px);
                   `
                 : css`
                       margin: 0px -24px;
                       width: calc(100% + 48px);
                   `}
-
         @media ${tablet} {
             margin: 0 -16px;
-            //width: calc(100% + 32px);
+            width: calc(100% + 32px);
         }
     }
 
@@ -45,16 +44,16 @@ const StyledContainer = styled.div`
                     props.isRootFolder
                         ? "auto auto 1fr"
                         : props.canCreate
-                        ? "auto auto auto auto 1fr"
-                        : "auto auto auto 1fr"};
+                        ? "auto auto auto auto auto  1fr"
+                        : "auto auto auto auto 1fr"};
 
                 @media ${tablet} {
                     grid-template-columns: ${(props) =>
                         props.isRootFolder
-                            ? "1fr auto"
+                            ? "auto auto 1fr"
                             : props.canCreate
-                            ? "auto 1fr auto auto"
-                            : "auto 1fr auto"};
+                            ? "auto auto auto auto 1fr"
+                            : "auto auto auto 1fr"};
                     ${(props) => !props.isLoading && "top: 7px;"}
                 }
             `}
@@ -125,12 +124,6 @@ const StyledContainer = styled.div`
                 }
             }
         }
-
-        .room-info-button {
-            margin-bottom: -1px;
-            position: absolute;
-            right: 0;
-        }
     }
 
     .group-button-menu-container {
@@ -185,6 +178,32 @@ const StyledContainer = styled.div`
     }
 `;
 
+const StyledInfoPanelToggleWrapper = styled.div`
+    display: flex;
+    margin-left: auto;
+    align-items: center;
+    align-self: center;
+    justify-content: center;
+
+    .info-panel-toggle-bg {
+        height: 32px;
+        width: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: ${(props) =>
+            props.isInfoPanelVisible ? "#F8F9F9" : "#FFFFFF"};
+    }
+
+    ${(props) =>
+        props.isHeaderVisible &&
+        css`
+            margin-right: 24px;
+            padding-left: 12px;
+        `}
+`;
+
 class SectionHeaderContent extends React.Component {
     constructor(props) {
         super(props);
@@ -433,6 +452,7 @@ class SectionHeaderContent extends React.Component {
             isHeaderVisible,
             isHeaderChecked,
             isHeaderIndeterminate,
+            isRoomInfoVisible,
             isRootFolder,
             title,
             canCreate,
@@ -449,6 +469,24 @@ class SectionHeaderContent extends React.Component {
         const isLoading = !title || !tReady;
         const headerMenu = getHeaderMenu(t);
 
+        const infoPanelToggle = (
+            <StyledInfoPanelToggleWrapper
+                isInfoPanelVisible={isRoomInfoVisible}
+                isHeaderVisible={isHeaderVisible}
+            >
+                <div className="info-panel-toggle-bg">
+                    <IconButton
+                        className="info-panel-toggle"
+                        iconName="images/panel.svg"
+                        size="16"
+                        color={isRoomInfoVisible ? "#3B72A7" : "#A3A9AE"}
+                        isFill={true}
+                        onClick={this.onToggleRoomInfo}
+                    />
+                </div>
+            </StyledInfoPanelToggleWrapper>
+        );
+
         return (
             <Consumer>
                 {(context) => (
@@ -469,6 +507,7 @@ class SectionHeaderContent extends React.Component {
                                 isChecked={isHeaderChecked}
                                 isIndeterminate={isHeaderIndeterminate}
                                 headerMenu={headerMenu}
+                                infoPanelToggle={infoPanelToggle}
                             />
                         ) : (
                             <div className="header-container">
@@ -565,20 +604,7 @@ class SectionHeaderContent extends React.Component {
                                                     />
                                                 </span>
                                             )}
-                                        <>
-                                            <IconButton
-                                                iconName="images/panel.svg"
-                                                size="15"
-                                                color={
-                                                    this.props.isRoomInfoVisible
-                                                        ? "#3B72A7"
-                                                        : "#A3A9AE"
-                                                }
-                                                isFill={true}
-                                                onClick={this.onToggleRoomInfo}
-                                                className="room-info-button"
-                                            />
-                                        </>
+                                        {infoPanelToggle}
                                     </>
                                 )}
                             </div>
@@ -638,6 +664,7 @@ export default inject(
             getHeaderMenu,
         } = filesActionsStore;
 
+        //const { toggleRoomInfo, isRoomInfoVisible } = roomInfoStore;
         const toggleRoomInfo = roomInfoStore.toggleIsVisible;
         const isRoomInfoVisible = roomInfoStore.isVisible;
 

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

@@ -20,6 +20,10 @@ class SelectedFilesStore {
     setFile = (obj) => {
         this.fileInfo = obj;
     };
+
+    get fileInfo() {
+        return this.fileInfo;
+    }
 }
 
 export default new SelectedFilesStore();