Web: Common: added show/hide article button

packages/common/components/Article/index.js

@@ -2,7 +2,6 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import PropTypes from "prop-types";
 import { isMobile, isMobileOnly } from "react-device-detect";
-import { Resizable } from "re-resizable";
 
 import {
   isDesktop as isDesktopUtils,
@@ -17,13 +16,7 @@ import SubArticleBody from "./sub-components/article-body";
 import ArticleProfile from "./sub-components/article-profile";
 
 import { StyledArticle } from "./styled-article";
-
+import HideArticleMenuButton from "./sub-components/article-hide-menu-button";
-const enable = {
-  top: false,
-  right: false,
-  bottom: false,
-  left: false,
-};
 
 const Article = ({
   showText,
@@ -117,7 +110,7 @@ const Article = ({
         isBannerVisible={isBannerVisible}
         {...rest}
       >
-        <SubArticleHeader showText={showText} onClick={toggleShowText}>
+        <SubArticleHeader showText={showText}>
           {articleHeaderContent ? articleHeaderContent.props.children : null}
         </SubArticleHeader>
         {articleMainButtonContent && !isMobileOnly && !isMobileUtils() ? (
@@ -127,6 +120,10 @@ const Article = ({
         ) : null}
         <SubArticleBody showText={showText}>
           {articleBodyContent ? articleBodyContent.props.children : null}
+          <HideArticleMenuButton
+            showText={showText}
+            toggleShowText={toggleShowText}
+          />
           {!hideProfileBlock && !isMobileOnly && (
             <ArticleProfile showText={showText} />
           )}

packages/common/components/Article/styled-article.js

@@ -12,9 +12,7 @@ import {
   isMobile as isMobileUtils,
 } from "@docspace/components/utils/device";
 
-import Heading from "@docspace/components/heading";
 import { Base } from "@docspace/components/themes";
-
 import MenuIcon from "@docspace/components/public/static/images/menu.react.svg";
 import CrossIcon from "@docspace/components/public/static/images/cross.react.svg";
 

packages/common/components/Article/sub-components/article-header.js

@@ -23,11 +23,7 @@ const ArticleHeader = ({
   const history = useHistory();
 
   const isTabletView = (isTabletUtils() || isTablet) && !isMobileOnly;
-
+  const onLogoClick = () => history.push("/");
-  const onLogoClick = () => {
-    if (showText && isTabletView) onClick();
-    else history.push("/");
-  };
 
   if (isMobileOnly) return <></>;
   return (
@@ -36,7 +32,7 @@ const ArticleHeader = ({
         <Loaders.ArticleHeader height="28px" width="28px" />
       ) : (
         <StyledIconBox name="article-burger" showText={showText}>
-          <img src="/static/images/logo.icon.react.svg" onClick={onClick} />
+          <img src="/static/images/logo.icon.react.svg" onClick={onLogoClick} />
         </StyledIconBox>
       )}
 

packages/common/components/Article/sub-components/article-hide-menu-button.js

@@ -0,0 +1,109 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import Text from "@docspace/components/text";
+import { ReactSVG } from "react-svg";
+import { desktop, mobile, tablet } from "@docspace/components/utils/device";
+import { isTablet, isMobileOnly } from "react-device-detect";
+
+const StyledHideArticleMenuButton = styled.div`
+  display: flex;
+  align-items: center;
+  position: fixed;
+  height: 44px;
+  z-index: 210;
+  bottom: 89px;
+  left: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  min-width: ${({ showText }) => (showText ? "243px" : "60px")};
+  max-width: ${({ showText }) => (showText ? "243px" : "60px")};
+
+  @media ${desktop} {
+    display: none;
+  }
+
+  @media ${mobile} {
+    display: none;
+  }
+
+  ${isMobileOnly &&
+  css`
+    display: none;
+  `}
+
+  .article-hide-menu-container {
+    align-items: center;
+    margin-left: 16px;
+
+    .article-hide-menu-text {
+      margin-left: 8px;
+    }
+
+    @media ${tablet} {
+      display: ${({ showText }) => (showText ? "flex" : "none")};
+    }
+
+    ${isTablet &&
+    css`
+      display: ${({ showText }) => (showText ? "flex" : "none")};
+    `}
+  }
+
+  .article-show-menu-container {
+    justify-content: center;
+    width: 100%;
+
+    @media ${tablet} {
+      display: ${({ showText }) => (showText ? "none" : "flex")};
+    }
+
+    ${isTablet &&
+    css`
+      display: ${({ showText }) => (showText ? "none" : "flex")};
+    `}
+  }
+
+  .article-hide-menu-icon_svg,
+  .article-show-menu-icon_svg {
+    height: 28px;
+  }
+`;
+
+const HideArticleMenuButton = ({ showText, toggleShowText }) => {
+  const hideMenuTranslate = "Hide menu";
+
+  console.log("showText", showText);
+
+  return (
+    <StyledHideArticleMenuButton showText={showText} onClick={toggleShowText}>
+      {showText ? (
+        <div className="article-hide-menu-container">
+          <ReactSVG
+            className="article-hide-menu-icon_svg"
+            src="/static/images/article-hide-menu.react.svg"
+          />
+          <Text
+            className="article-hide-menu-text"
+            fontWeight={600}
+            fontSize="12px"
+            noSelect
+            truncate
+            color="#3B72A7"
+          >
+            {hideMenuTranslate}
+          </Text>
+        </div>
+      ) : (
+        <div className="article-show-menu-container">
+          <ReactSVG
+            className="article-show-menu-icon_svg"
+            src="/static/images/article-show-menu.react.svg"
+          />
+        </div>
+      )}
+    </StyledHideArticleMenuButton>
+  );
+};
+
+export default HideArticleMenuButton;

public/images/article-hide-menu.react.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6C5.44772 6 5 6.44772 5 7V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V7C7 6.44772 6.55228 6 6 6Z" fill="#3B72A7"/>
+<path d="M22 13L12.3653 13L15.707 9.48679L14.2928 8L9.29282 13.2566C8.90229 13.6672 8.90229 14.3328 9.29282 14.7434L14.2928 20L15.707 18.5132L12.3653 15L22 15C22.5523 15 23 14.5523 23 14C23 13.4477 22.5523 13 22 13Z" fill="#3B72A7"/>
+</svg>

public/images/article-show-menu.react.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6C5.44772 6 5 6.44772 5 7V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V7C7 6.44772 6.55228 6 6 6ZM10 15H19.6347L16.293 18.5132L17.7072 20L22.7072 14.7434C23.0977 14.3328 23.0977 13.6672 22.7072 13.2566L17.7072 8L16.293 9.48679L19.6347 13L10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15Z" fill="#657077"/>
+</svg>