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.
This commit is contained in:
parent
c87c8e4026
commit
3440ae9bb4
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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}
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
`}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user