From 3440ae9bb4d5d874ca60477c09af963805145407 Mon Sep 17 00:00:00 2001 From: TatianaLopaeva Date: Thu, 14 Jan 2021 20:44:59 +0300 Subject: [PATCH] Web: Common: NavMenu/PageLayout: Fixed incorrect display of the modal dialog, as a result of which the appeared problems with z-index in the Navigation Menu were fixed & Refactoring. --- .../src/components/NavMenu/index.js | 79 +++++++++------- .../NavMenu/sub-components/header-nav.js | 75 +++++++--------- .../NavMenu/sub-components/header-unauth.js | 78 ++++++---------- .../NavMenu/sub-components/header.js | 90 ++++++++----------- .../NavMenu/sub-components/profile-actions.js | 21 ++++- .../sub-components/section-header.js | 2 +- 6 files changed, 164 insertions(+), 181 deletions(-) diff --git a/web/ASC.Web.Common/src/components/NavMenu/index.js b/web/ASC.Web.Common/src/components/NavMenu/index.js index be1175fbf6..ec63b1c251 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/index.js +++ b/web/ASC.Web.Common/src/components/NavMenu/index.js @@ -11,6 +11,7 @@ import { connect } from "react-redux"; import { withRouter } from "react-router"; import { getLanguage, isDesktopClient } from "../../store/auth/selectors"; import Loaders from "../Loaders"; +import { LayoutContextConsumer } from "../Layout/context"; const backgroundColor = "#0F4071"; const { tablet } = utils.device; @@ -29,8 +30,20 @@ const StyledContainer = styled.header` so that there is no white bar in the header on loading. (padding-right: 16px)*/ ` : css` - position: fixed; - z-index: 160; + .navMenuHeader, + .profileMenuIcon, + .navMenuHeaderUnAuth { + position: fixed; + z-index: 160; + top: ${(props) => (props.isVisible ? "0" : "-56px")}; + + transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); + -moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); + -ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); + -webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); + -o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); + } + width: 100%; `} } @@ -128,39 +141,43 @@ class NavMenu extends React.Component { //console.log("NavMenu render", this.state, this.props); return ( - - + + {(value) => ( + + - + - {!isDesktop && - (isLoaded && isAuthenticated ? ( - <> - -
- - ) : !isLoaded && isAuthenticated ? ( - - ) : ( - - ))} + {!isDesktop && + (isLoaded && isAuthenticated ? ( + <> + +
+ + ) : !isLoaded && isAuthenticated ? ( + + ) : ( + + ))} - {isAsideAvailable && ( - + {isAsideAvailable && ( + + )} + )} - + ); } } diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js index d0ba2dccb2..83599b8eb7 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js +++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js @@ -1,16 +1,13 @@ -import React, { useCallback } from "react"; +import React, { useCallback, useState } from "react"; import { connect } from "react-redux"; import PropTypes from "prop-types"; import styled from "styled-components"; import NavItem from "./nav-item"; import ProfileActions from "./profile-actions"; - import { useTranslation } from "react-i18next"; import { utils } from "asc-web-components"; -import { LayoutContextConsumer } from "../../Layout/context"; -const { tablet } = utils.device; -import { logout } from "../../../store/auth/actions"; +import { logout } from "../../../store/auth/actions"; import { getCurrentUser, getLanguage, @@ -18,6 +15,8 @@ import { getIsLoaded, } from "../../../store/auth/selectors"; +const { tablet } = utils.device; + const StyledNav = styled.nav` display: flex; padding: 0 24px 0 16px; @@ -25,7 +24,7 @@ const StyledNav = styled.nav` position: absolute; right: 0; height: 56px; - z-index: 190; + z-index: ${(props) => (props.isOpen ? "191" : "190")} !important; .profile-menu { right: 12px; @@ -44,15 +43,6 @@ const StyledNav = styled.nav` @media ${tablet} { padding: 0 16px; - position: fixed; - - transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - - top: ${(props) => (props.valueTop ? "0" : "-56px")}; } `; const HeaderNav = React.memo( @@ -94,37 +84,38 @@ const HeaderNav = React.memo( return currentUserActions; }, [onProfileClick, onAboutClick, onLogoutClick]); + const [isOpen, setIsOpen] = useState(false); //TODO: Need to refactoring + const isOpenProfileMenu = (value) => { + setIsOpen(value); + }; //console.log("HeaderNav render"); return ( - - {(value) => ( - - {modules.map((module) => ( - - ))} + + {modules.map((module) => ( + + ))} - {isAuthenticated && user ? ( - - ) : ( - <> - )} - + {isAuthenticated && user ? ( + + ) : ( + <> )} - + ); } ); diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js index 79eca9ccc8..19724cbf6f 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js +++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js @@ -1,14 +1,11 @@ import React from "react"; import PropTypes from "prop-types"; -import { Box, utils } from "asc-web-components"; -import styled, { css } from "styled-components"; +import { Box } from "asc-web-components"; +import styled from "styled-components"; import RecoverAccess from "./recover-access-container"; -import { isSafari } from "react-device-detect"; + import { connect } from "react-redux"; import { useTranslation } from "react-i18next"; -import { LayoutContextConsumer } from "../../Layout/context"; - -const { tablet } = utils.device; const backgroundColor = "#0F4071"; @@ -21,17 +18,6 @@ const Header = styled.header` justify-content: center; padding: 0 32px; - @media ${tablet} { - transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - - position: inherit; - top: ${(props) => (props.valueTop ? "0" : "-56px")}; - } - .header-items-wrapper { width: 960px; @@ -72,39 +58,33 @@ const HeaderUnAuth = ({ const { t } = useTranslation(); return ( - - {(value) => ( -
- - {!isAuthenticated && isLoaded ? ( - - ) : ( - <> - )} +
+ + {!isAuthenticated && isLoaded ? ( + + ) : ( + <> + )} -
- {enableAdmMess && !wizardToken && } -
- -
- )} - +
{enableAdmMess && !wizardToken && }
+ +
); }; diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js index 38da4ddf68..1e0bfddb95 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js +++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js @@ -1,11 +1,11 @@ import React from "react"; import PropTypes from "prop-types"; -import styled, { css } from "styled-components"; +import styled from "styled-components"; import NavItem from "./nav-item"; import Headline from "../../Headline"; import Nav from "./nav"; import NavLogoItem from "./nav-logo-item"; -import { LayoutContextConsumer } from "../../Layout/context"; + import Loaders from "../../Loaders/index"; import { ReactSVG } from "react-svg"; @@ -20,7 +20,7 @@ import { getIsLoaded, } from "../../../store/auth/selectors"; -const { desktop, tablet } = utils.device; +const { desktop } = utils.device; const backgroundColor = "#0F4071"; @@ -31,18 +31,6 @@ const Header = styled.header` width: 100vw; height: 56px; - @media ${tablet} { - position: inherit; - - transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - -o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1); - - top: ${(props) => (props.valueTop ? "0" : "-56px")}; - } - .header-logo-wrapper { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @@ -117,48 +105,40 @@ const HeaderComponent = ({ return ( <> - - {(value) => ( -
- +
+ - - ( - - )} - src={props.logoUrl} + + ( + - - - {currentProductName} - -
- )} - + )} + src={props.logoUrl} + /> + + + {currentProductName} + +
+ {isNavAvailable && (