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.

2021-01-14 20:44:59 +03:00 · 2021-01-14 20:44:59 +03:00 · 3440ae9bb4
commit 3440ae9bb4
parent c87c8e4026
6 changed files with 164 additions and 181 deletions
--- 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 (
-      <StyledContainer isLoaded={isLoaded}>
-        <Toast />
+      <LayoutContextConsumer>
+        {(value) => (
+          <StyledContainer isLoaded={isLoaded} isVisible={value.isVisible}>
+            <Toast />

-        <Backdrop
-          visible={isBackdropVisible}
-          onClick={this.backdropClick}
-          withBackground={true}
-        />
+            <Backdrop
+              visible={isBackdropVisible}
+              onClick={this.backdropClick}
+              withBackground={true}
+            />

-        {!isDesktop &&
-          (isLoaded && isAuthenticated ? (
-            <>
-              <HeaderNav history={history} />
-              <Header
-                isNavOpened={isNavOpened}
-                onClick={this.showNav}
-                onNavMouseEnter={this.handleNavMouseEnter}
-                onNavMouseLeave={this.handleNavMouseLeave}
-                toggleAside={this.toggleAside}
-              />
-            </>
-          ) : !isLoaded && isAuthenticated ? (
-            <Loaders.Header />
-          ) : (
-            <HeaderUnAuth />
-          ))}
+            {!isDesktop &&
+              (isLoaded && isAuthenticated ? (
+                <>
+                  <HeaderNav history={history} />
+                  <Header
+                    isNavOpened={isNavOpened}
+                    onClick={this.showNav}
+                    onNavMouseEnter={this.handleNavMouseEnter}
+                    onNavMouseLeave={this.handleNavMouseLeave}
+                    toggleAside={this.toggleAside}
+                  />
+                </>
+              ) : !isLoaded && isAuthenticated ? (
+                <Loaders.Header />
+              ) : (
+                <HeaderUnAuth />
+              ))}

-        {isAsideAvailable && (
-          <Aside visible={isAsideVisible} onClick={this.backdropClick}>
-            {asideContent}
-          </Aside>
+            {isAsideAvailable && (
+              <Aside visible={isAsideVisible} onClick={this.backdropClick}>
+                {asideContent}
+              </Aside>
+            )}
+          </StyledContainer>
        )}
-      </StyledContainer>
+      </LayoutContextConsumer>
    );
  }
 }
--- 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 (
-      <LayoutContextConsumer>
-        {(value) => (
-          <StyledNav
-            valueTop={value.isVisible}
-            className="needToCancelAnimationWithTransition"
-          >
-            {modules.map((module) => (
-              <NavItem
-                key={module.id}
-                iconName={module.iconName}
-                iconUrl={module.iconUrl}
-                badgeNumber={module.notifications}
-                onClick={module.onClick}
-                onBadgeClick={module.onBadgeClick}
-                noHover={true}
-              />
-            ))}
+      <StyledNav
+        isOpen={isOpen}
+        className="profileMenuIcon needToCancelAnimationWithTransition"
+      >
+        {modules.map((module) => (
+          <NavItem
+            key={module.id}
+            iconName={module.iconName}
+            iconUrl={module.iconUrl}
+            badgeNumber={module.notifications}
+            onClick={module.onClick}
+            onBadgeClick={module.onBadgeClick}
+            noHover={true}
+          />
+        ))}

-            {isAuthenticated && user ? (
-              <ProfileActions
-                userActions={getCurrentUserActions()}
-                user={user}
-              />
-            ) : (
-              <></>
-            )}
-          </StyledNav>
+        {isAuthenticated && user ? (
+          <ProfileActions
+            userActions={getCurrentUserActions()}
+            user={user}
+            isOpenProfileMenu={isOpenProfileMenu}
+          />
+        ) : (
+          <></>
        )}
-      </LayoutContextConsumer>
+      </StyledNav>
    );
  }
 );
--- 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 (
-    <LayoutContextConsumer>
-      {(value) => (
-        <Header isLoaded={isLoaded} valueTop={value.isVisible}>
-          <Box
-            displayProp="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            className="header-items-wrapper"
-          >
-            {!isAuthenticated && isLoaded ? (
-              <div>
-                <a className="header-logo-wrapper" href="/">
-                  <img
-                    className="header-logo-min_icon"
-                    src="images/nav.logo.react.svg"
-                  />
-                  <img
-                    className="header-logo-icon"
-                    src="images/nav.logo.opened.react.svg"
-                  />
-                </a>
-              </div>
-            ) : (
-              <></>
-            )}
+    <Header isLoaded={isLoaded} className="navMenuHeaderUnAuth">
+      <Box
+        displayProp="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        className="header-items-wrapper"
+      >
+        {!isAuthenticated && isLoaded ? (
+          <div>
+            <a className="header-logo-wrapper" href="/">
+              <img
+                className="header-logo-min_icon"
+                src="images/nav.logo.react.svg"
+              />
+              <img
+                className="header-logo-icon"
+                src="images/nav.logo.opened.react.svg"
+              />
+            </a>
+          </div>
+        ) : (
+          <></>
+        )}

-            <div>
-              {enableAdmMess && !wizardToken && <RecoverAccess t={t} />}
-            </div>
-          </Box>
-        </Header>
-      )}
-    </LayoutContextConsumer>
+        <div>{enableAdmMess && !wizardToken && <RecoverAccess t={t} />}</div>
+      </Box>
+    </Header>
  );
 };

--- 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 (
    <>
-      <LayoutContextConsumer>
-        {(value) => (
-          <Header
-            module={currentProductName}
-            valueTop={value.isVisible}
-            isLoaded={isLoaded}
-            isAuthenticated={isAuthenticated}
-            className="needToCancelAnimationWithTransition"
-          >
-            <NavItem
-              iconName="MenuIcon"
-              badgeNumber={totalNotifications}
-              onClick={onClick}
-              noHover={true}
-            />
+      <Header
+        module={currentProductName}
+        isLoaded={isLoaded}
+        isAuthenticated={isAuthenticated}
+        className="navMenuHeader needToCancelAnimationWithTransition"
+      >
+        <NavItem
+          iconName="MenuIcon"
+          badgeNumber={totalNotifications}
+          onClick={onClick}
+          noHover={true}
+        />

-            <a className="header-logo-wrapper" href={defaultPage}>
-              <ReactSVG
-                className="header-logo-icon"
-                loading={() => (
-                  <Loaders.Rectangle
-                    width="168"
-                    height="24"
-                    backgroundColor="#fff"
-                    foregroundColor="#fff"
-                    backgroundOpacity={0.25}
-                    foregroundOpacity={0.2}
-                  />
-                )}
-                src={props.logoUrl}
+        <a className="header-logo-wrapper" href={defaultPage}>
+          <ReactSVG
+            className="header-logo-icon"
+            loading={() => (
+              <Loaders.Rectangle
+                width="168"
+                height="24"
+                backgroundColor="#fff"
+                foregroundColor="#fff"
+                backgroundOpacity={0.25}
+                foregroundOpacity={0.2}
              />
-            </a>
-            <Headline
-              className="header-module-title"
-              type="header"
-              color="#FFF"
-            >
-              {currentProductName}
-            </Headline>
-          </Header>
-        )}
-      </LayoutContextConsumer>
+            )}
+            src={props.logoUrl}
+          />
+        </a>
+        <Headline className="header-module-title" type="header" color="#FFF">
+          {currentProductName}
+        </Headline>
+      </Header>
+
      {isNavAvailable && (
        <Nav
          opened={isNavOpened}
--- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js
+++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js
@ -1,8 +1,11 @@
 import React from "react";
+import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { Avatar, DropDownItem, Link } from "asc-web-components";
 import ProfileMenu from "../../ProfileMenu";
+import store from "../../../store";

+const { getHeaderVisible, getIsTabletView } = store.auth.selectors;
 class ProfileActions extends React.PureComponent {
  constructor(props) {
    super(props);
@ -19,7 +22,8 @@ class ProfileActions extends React.PureComponent {
    this.setState({ opened: opened });
  };

-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
+    const { isHeaderVisible, isTabletView } = this.props;
    if (this.props.user !== prevProps.user) {
      this.setState({ user: this.props.user });
    }
@ -27,6 +31,12 @@ class ProfileActions extends React.PureComponent {
    if (this.props.opened !== prevProps.opened) {
      this.setOpened(this.props.opened);
    }
+    if (this.state.opened !== prevState.opened) {
+      console.log("isHeaderVisible", isHeaderVisible);
+      isTabletView &&
+        isHeaderVisible &&
+        this.props.isOpenProfileMenu(this.state.opened);
+    }
  }

  getUserRole = (user) => {
@ -108,5 +118,10 @@ ProfileActions.defaultProps = {
  user: {},
  userActions: [],
 };
-
-export default ProfileActions;
+function mapStateToProps(state) {
+  return {
+    isHeaderVisible: getHeaderVisible(state),
+    isTabletView: getIsTabletView(state),
+  };
+}
+export default connect(mapStateToProps)(ProfileActions);
--- a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js
+++ b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js
@ -51,7 +51,7 @@ const StyledSectionHeader = styled.div`
          width: ${(props) =>
            props.isArticlePinned ? `calc(100% - 272px)` : "100%"};
          background-color: #fff;
-          z-index: ${(props) => (!props.isHeaderVisible ? "149" : "160")};
+          z-index: ${(props) => (!props.isHeaderVisible ? "149" : "190")};
          padding-right: 16px;
        `}
    }