From 0c8703a58c1c85cc70fc4177e1cf4f55cc26d36e Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 26 Sep 2022 11:22:46 +0300 Subject: [PATCH] Web: Common: added show/hide article button --- packages/common/components/Article/index.js | 15 +-- .../components/Article/styled-article.js | 2 - .../Article/sub-components/article-header.js | 8 +- .../article-hide-menu-button.js | 109 ++++++++++++++++++ public/images/article-hide-menu.react.svg | 4 + public/images/article-show-menu.react.svg | 3 + 6 files changed, 124 insertions(+), 17 deletions(-) create mode 100644 packages/common/components/Article/sub-components/article-hide-menu-button.js create mode 100644 public/images/article-hide-menu.react.svg create mode 100644 public/images/article-show-menu.react.svg diff --git a/packages/common/components/Article/index.js b/packages/common/components/Article/index.js index b545dfaace..7a3ae9c4e7 100644 --- a/packages/common/components/Article/index.js +++ b/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"; - -const enable = { - top: false, - right: false, - bottom: false, - left: false, -}; +import HideArticleMenuButton from "./sub-components/article-hide-menu-button"; const Article = ({ showText, @@ -117,7 +110,7 @@ const Article = ({ isBannerVisible={isBannerVisible} {...rest} > - + {articleHeaderContent ? articleHeaderContent.props.children : null} {articleMainButtonContent && !isMobileOnly && !isMobileUtils() ? ( @@ -127,6 +120,10 @@ const Article = ({ ) : null} {articleBodyContent ? articleBodyContent.props.children : null} + {!hideProfileBlock && !isMobileOnly && ( )} diff --git a/packages/common/components/Article/styled-article.js b/packages/common/components/Article/styled-article.js index ae7a052265..0d0246af55 100644 --- a/packages/common/components/Article/styled-article.js +++ b/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"; diff --git a/packages/common/components/Article/sub-components/article-header.js b/packages/common/components/Article/sub-components/article-header.js index 75bbf84e55..4349b928a5 100644 --- a/packages/common/components/Article/sub-components/article-header.js +++ b/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 = () => { - if (showText && isTabletView) onClick(); - else history.push("/"); - }; + const onLogoClick = () => history.push("/"); if (isMobileOnly) return <>; return ( @@ -36,7 +32,7 @@ const ArticleHeader = ({ ) : ( - + )} diff --git a/packages/common/components/Article/sub-components/article-hide-menu-button.js b/packages/common/components/Article/sub-components/article-hide-menu-button.js new file mode 100644 index 0000000000..de96272abf --- /dev/null +++ b/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 ( + + {showText ? ( +
+ + + {hideMenuTranslate} + +
+ ) : ( +
+ +
+ )} + + ); +}; + +export default HideArticleMenuButton; diff --git a/public/images/article-hide-menu.react.svg b/public/images/article-hide-menu.react.svg new file mode 100644 index 0000000000..de75c0ce87 --- /dev/null +++ b/public/images/article-hide-menu.react.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/article-show-menu.react.svg b/public/images/article-show-menu.react.svg new file mode 100644 index 0000000000..dbc3cab5dd --- /dev/null +++ b/public/images/article-show-menu.react.svg @@ -0,0 +1,3 @@ + + +