Web:Studio:ProfileMenu: add control panel for mobile devices
This commit is contained in:
parent
0f7f69ddc6
commit
1d68ac11b2
@ -5,11 +5,13 @@ import DropDown from "@appserver/components/drop-down";
|
|||||||
|
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
import DropDownItem from "@appserver/components/drop-down-item";
|
import DropDownItem from "@appserver/components/drop-down-item";
|
||||||
import { isDesktop, isTablet, isMobile } from "react-device-detect";
|
import { isDesktop, isTablet, isMobileOnly } from "react-device-detect";
|
||||||
import { Base } from "@appserver/components/themes";
|
import { Base } from "@appserver/components/themes";
|
||||||
import { mobile } from "@appserver/components/utils/device";
|
import { mobile } from "@appserver/components/utils/device";
|
||||||
|
import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
|
||||||
|
|
||||||
const StyledDropDown = styled(DropDown)`
|
const StyledDropDown = styled(DropDown)`
|
||||||
|
z-index: 500;
|
||||||
@media ${mobile} {
|
@media ${mobile} {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
||||||
@ -24,7 +26,7 @@ const StyledDropDown = styled(DropDown)`
|
|||||||
border-radius: 6px 6px 0px 0px !important;
|
border-radius: 6px 6px 0px 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
${isMobile &&
|
${isMobileOnly &&
|
||||||
css`
|
css`
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
||||||
@ -41,6 +43,37 @@ const StyledDropDown = styled(DropDown)`
|
|||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const StyledControlContainer = styled.div`
|
||||||
|
background: ${(props) => props.theme.catalog.control.background};
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
top: -34px;
|
||||||
|
right: 10px;
|
||||||
|
border-radius: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: ${isMobileOnly ? "flex" : "none"};
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 290;
|
||||||
|
|
||||||
|
@media ${mobile} {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
StyledControlContainer.defaultProps = { theme: Base };
|
||||||
|
|
||||||
|
const StyledCrossIcon = styled(CrossIcon)`
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
path {
|
||||||
|
fill: ${(props) => props.theme.catalog.control.fill};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
StyledCrossIcon.defaultProps = { theme: Base };
|
||||||
|
|
||||||
const commonStyle = css`
|
const commonStyle = css`
|
||||||
font-family: "Open Sans", sans-serif, Arial;
|
font-family: "Open Sans", sans-serif, Arial;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -115,15 +148,11 @@ class ProfileMenu extends React.Component {
|
|||||||
open,
|
open,
|
||||||
forwardedRef,
|
forwardedRef,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const right = isTablet ? "4px" : "8px";
|
|
||||||
const top = "62px";
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledDropDown
|
<StyledDropDown
|
||||||
className={className}
|
className={className}
|
||||||
directionX="right"
|
directionX="right"
|
||||||
right={right}
|
|
||||||
top={top}
|
|
||||||
open={open}
|
open={open}
|
||||||
clickOutsideAction={clickOutsideAction}
|
clickOutsideAction={clickOutsideAction}
|
||||||
forwardedRef={forwardedRef}
|
forwardedRef={forwardedRef}
|
||||||
@ -141,6 +170,9 @@ class ProfileMenu extends React.Component {
|
|||||||
</AvatarContainer>
|
</AvatarContainer>
|
||||||
<MainLabelContainer>{displayName}</MainLabelContainer>
|
<MainLabelContainer>{displayName}</MainLabelContainer>
|
||||||
<LabelContainer>{email}</LabelContainer>
|
<LabelContainer>{email}</LabelContainer>
|
||||||
|
<StyledControlContainer onClick={clickOutsideAction}>
|
||||||
|
<StyledCrossIcon />
|
||||||
|
</StyledControlContainer>
|
||||||
</MenuContainer>
|
</MenuContainer>
|
||||||
</StyledProfileMenu>
|
</StyledProfileMenu>
|
||||||
{children}
|
{children}
|
||||||
|
Loading…
Reference in New Issue
Block a user