2020-04-09 00:29:13 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import * as Constants from "~/common/constants";
|
2020-09-05 02:15:29 +03:00
|
|
|
import * as SVG from "~/common/svg";
|
2020-04-09 00:29:13 +03:00
|
|
|
|
2020-11-04 20:55:48 +03:00
|
|
|
import { css } from "@emotion/core";
|
2020-08-12 22:41:56 +03:00
|
|
|
import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip";
|
2020-08-26 07:13:02 +03:00
|
|
|
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
2020-09-11 06:57:17 +03:00
|
|
|
import { Alert } from "~/components/core/Alert";
|
2020-04-09 00:29:13 +03:00
|
|
|
|
2020-08-14 11:29:29 +03:00
|
|
|
const STYLES_NO_VISIBLE_SCROLL = css`
|
|
|
|
overflow-y: scroll;
|
|
|
|
scrollbar-width: none;
|
2020-09-08 09:05:16 +03:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2020-08-14 11:29:29 +03:00
|
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
2020-09-08 09:05:16 +03:00
|
|
|
|
2020-08-14 11:29:29 +03:00
|
|
|
::-webkit-scrollbar {
|
|
|
|
width: 0px;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
background: ${Constants.system.foreground};
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
background: ${Constants.system.darkGray};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-04-09 00:29:13 +03:00
|
|
|
const STYLES_HEADER = css`
|
|
|
|
z-index: ${Constants.zindex.header};
|
|
|
|
height: ${Constants.sizes.header}px;
|
2020-08-08 03:10:28 +03:00
|
|
|
pointer-events: none;
|
|
|
|
width: 100%;
|
2020-09-08 09:05:16 +03:00
|
|
|
position: fixed;
|
|
|
|
left: ${Constants.sizes.navigation}px;
|
2020-04-09 00:29:13 +03:00
|
|
|
right: 0;
|
2020-08-08 03:10:28 +03:00
|
|
|
top: 0;
|
2020-10-01 03:41:53 +03:00
|
|
|
transition: top 0.25s;
|
2020-08-09 01:38:09 +03:00
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2020-09-29 07:39:05 +03:00
|
|
|
left: 0;
|
2020-08-09 01:38:09 +03:00
|
|
|
}
|
2020-08-08 03:10:28 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_CONTENT = css`
|
|
|
|
background: ${Constants.system.white};
|
|
|
|
width: 100%;
|
|
|
|
min-width: 10%;
|
2020-09-08 09:05:16 +03:00
|
|
|
min-height: 100vh;
|
2020-08-08 03:10:28 +03:00
|
|
|
position: relative;
|
2020-09-08 09:05:16 +03:00
|
|
|
padding-left: ${Constants.sizes.navigation}px;
|
2020-09-29 01:38:35 +03:00
|
|
|
margin-top: ${Constants.sizes.topOffset}px;
|
2020-10-23 06:55:24 +03:00
|
|
|
|
2020-09-08 09:05:16 +03:00
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2020-09-29 07:39:05 +03:00
|
|
|
padding-left: 0px;
|
2020-10-23 06:55:24 +03:00
|
|
|
padding: 0 0 88px 0;
|
2020-09-29 08:47:27 +03:00
|
|
|
margin-top: calc(${Constants.sizes.topOffset}px + 36px);
|
2020-09-08 09:05:16 +03:00
|
|
|
}
|
2020-08-08 03:10:28 +03:00
|
|
|
`;
|
|
|
|
|
2020-04-09 00:29:13 +03:00
|
|
|
const STYLES_NAVIGATION = css`
|
2020-09-08 09:05:16 +03:00
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
2020-08-14 11:29:29 +03:00
|
|
|
z-index: 1;
|
2020-08-08 03:10:28 +03:00
|
|
|
flex-shrink: 0;
|
|
|
|
height: 100vh;
|
2020-04-09 00:29:13 +03:00
|
|
|
z-index: ${Constants.zindex.navigation};
|
|
|
|
width: ${Constants.sizes.navigation}px;
|
2020-09-08 09:05:16 +03:00
|
|
|
background-color: ${Constants.system.foreground};
|
2020-10-24 00:03:33 +03:00
|
|
|
${STYLES_NO_VISIBLE_SCROLL}
|
2020-08-09 01:38:09 +03:00
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2020-09-29 07:39:05 +03:00
|
|
|
top: auto;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 56px;
|
2020-10-05 00:30:28 +03:00
|
|
|
z-index: ${Constants.zindex.header};
|
2020-08-08 03:10:28 +03:00
|
|
|
}
|
2020-08-09 01:04:17 +03:00
|
|
|
`;
|
2020-08-08 03:10:28 +03:00
|
|
|
|
2020-09-13 02:23:54 +03:00
|
|
|
const STYLES_SIDEBAR = css`
|
2020-08-26 07:13:02 +03:00
|
|
|
z-index: ${Constants.zindex.sidebar};
|
2020-08-08 03:10:28 +03:00
|
|
|
height: 100vh;
|
2020-04-09 00:29:13 +03:00
|
|
|
width: ${Constants.sizes.sidebar}px;
|
|
|
|
padding: 0;
|
|
|
|
flex-shrink: 0;
|
2020-09-11 00:03:51 +03:00
|
|
|
position: fixed;
|
2020-09-10 06:39:56 +03:00
|
|
|
background-color: rgba(247, 247, 247, 1);
|
2020-08-26 07:13:02 +03:00
|
|
|
top: 0;
|
|
|
|
right: 0;
|
2020-09-13 03:00:58 +03:00
|
|
|
${STYLES_NO_VISIBLE_SCROLL}
|
2020-09-10 06:39:56 +03:00
|
|
|
|
2020-08-09 01:38:09 +03:00
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2020-09-13 02:23:54 +03:00
|
|
|
width: 100%;
|
2020-04-09 00:29:13 +03:00
|
|
|
}
|
2020-09-10 06:39:56 +03:00
|
|
|
|
2020-10-22 08:38:37 +03:00
|
|
|
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
|
2020-09-14 08:22:19 +03:00
|
|
|
-webkit-backdrop-filter: blur(25px);
|
2020-09-10 06:39:56 +03:00
|
|
|
backdrop-filter: blur(25px);
|
|
|
|
background-color: rgba(247, 247, 247, 0.75);
|
|
|
|
}
|
2020-04-09 00:29:13 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_SIDEBAR_HEADER = css`
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
2020-08-22 08:54:00 +03:00
|
|
|
margin-bottom: 8px;
|
2020-04-09 00:29:13 +03:00
|
|
|
`;
|
|
|
|
|
2020-08-09 06:52:22 +03:00
|
|
|
const STYLES_SIDEBAR_CONTENT = css`
|
2020-09-29 01:38:35 +03:00
|
|
|
padding: 56px 24px 24px 24px;
|
|
|
|
padding-top: calc(56px + ${Constants.sizes.topOffset}px);
|
2020-09-29 08:47:27 +03:00
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
padding-top: 8px;
|
2020-10-01 21:57:37 +03:00
|
|
|
margin-bottom: 48px;
|
2020-09-29 08:47:27 +03:00
|
|
|
}
|
2020-08-09 06:52:22 +03:00
|
|
|
`;
|
|
|
|
|
2020-04-09 00:29:13 +03:00
|
|
|
const STYLES_BLOCK = css`
|
2020-09-10 06:28:48 +03:00
|
|
|
margin-top: 8px;
|
2020-04-09 00:29:13 +03:00
|
|
|
height: 56px;
|
|
|
|
width: 56px;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
transition: 200ms ease all;
|
|
|
|
cursor: pointer;
|
2020-09-08 02:28:50 +03:00
|
|
|
color: rgba(0, 0, 0, 0.25);
|
2020-04-09 00:29:13 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
export default class ApplicationLayout extends React.Component {
|
2020-08-12 22:41:56 +03:00
|
|
|
_sidebar;
|
|
|
|
_navigation;
|
|
|
|
_body;
|
|
|
|
|
2020-10-01 03:41:53 +03:00
|
|
|
state = {
|
2020-10-02 02:44:22 +03:00
|
|
|
headerTop: 0,
|
2020-10-01 03:41:53 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount = () => {
|
|
|
|
this.prevScrollPos = window.pageYOffset;
|
2020-10-22 08:38:37 +03:00
|
|
|
if (this.props.mobile) {
|
2020-10-01 03:41:53 +03:00
|
|
|
window.addEventListener("scroll", this._handleScroll);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
componentWillUnmount = () => {
|
2020-10-22 08:38:37 +03:00
|
|
|
if (this.props.mobile) {
|
2020-10-01 03:41:53 +03:00
|
|
|
window.removeEventListener("scroll", this._handleScroll);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
_handleScroll = () => {
|
|
|
|
let currentScrollPos = window.pageYOffset;
|
|
|
|
if (this.prevScrollPos > currentScrollPos) {
|
2020-10-01 03:49:38 +03:00
|
|
|
this.setState({ headerTop: 0 });
|
2020-10-01 03:41:53 +03:00
|
|
|
} else {
|
|
|
|
if (currentScrollPos > 56) {
|
2020-10-01 03:49:38 +03:00
|
|
|
this.setState({ headerTop: -56 });
|
2020-10-01 03:41:53 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
this.prevScrollPos = currentScrollPos;
|
|
|
|
};
|
|
|
|
|
2020-09-29 08:47:27 +03:00
|
|
|
_handleDismiss = (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.onDismissSidebar();
|
|
|
|
};
|
|
|
|
|
2020-04-09 00:29:13 +03:00
|
|
|
render() {
|
2020-08-09 01:04:17 +03:00
|
|
|
let sidebarElements = null;
|
|
|
|
if (this.props.sidebar) {
|
|
|
|
sidebarElements = (
|
|
|
|
<React.Fragment>
|
2020-10-05 00:30:28 +03:00
|
|
|
{/* <GlobalTooltip
|
2020-08-20 08:45:43 +03:00
|
|
|
elementRef={this._sidebar}
|
|
|
|
allowedTypes={["sidebar"]}
|
2020-10-05 00:30:28 +03:00
|
|
|
/> */}
|
2020-08-09 01:04:17 +03:00
|
|
|
<div css={STYLES_SIDEBAR_HEADER}>
|
2020-10-01 03:41:53 +03:00
|
|
|
<div css={STYLES_BLOCK} onClick={this._handleDismiss}>
|
2020-08-09 01:04:17 +03:00
|
|
|
<SVG.Dismiss height="24px" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div css={STYLES_SIDEBAR_CONTENT}>{this.props.sidebar}</div>
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
2020-04-09 00:29:13 +03:00
|
|
|
return (
|
2020-09-08 09:05:16 +03:00
|
|
|
<React.Fragment>
|
2020-08-12 22:41:56 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_NAVIGATION}
|
|
|
|
ref={(c) => {
|
|
|
|
this._navigation = c;
|
2020-08-20 08:45:43 +03:00
|
|
|
}}
|
|
|
|
>
|
2020-10-05 00:30:28 +03:00
|
|
|
{/* <GlobalTooltip
|
2020-09-13 01:08:36 +03:00
|
|
|
elementRef={this._navigation}
|
|
|
|
allowedTypes={["navigation"]}
|
2020-10-05 00:30:28 +03:00
|
|
|
/> */}
|
2020-08-12 22:41:56 +03:00
|
|
|
{this.props.navigation}
|
|
|
|
</div>
|
2020-09-08 09:05:16 +03:00
|
|
|
|
2020-08-08 03:10:28 +03:00
|
|
|
<div css={STYLES_CONTENT}>
|
2020-10-01 03:41:53 +03:00
|
|
|
{/* <GlobalTooltip elementRef={this._body} allowedTypes={["body"]} /> */}
|
2020-10-05 00:30:28 +03:00
|
|
|
<GlobalTooltip />
|
2020-10-23 06:55:24 +03:00
|
|
|
|
|
|
|
<div css={STYLES_HEADER} style={{ top: this.props.mobile ? this.state.headerTop : null }}>
|
|
|
|
{this.props.header}
|
2020-08-20 08:45:43 +03:00
|
|
|
</div>
|
2020-10-23 06:55:24 +03:00
|
|
|
|
|
|
|
<Alert
|
|
|
|
fileLoading={this.props.fileLoading}
|
|
|
|
onAction={this.props.onAction}
|
|
|
|
filecoin={this.props.filecoin}
|
|
|
|
id={this.props.mobile ? "slate-mobile-alert" : null}
|
|
|
|
style={
|
|
|
|
this.props.mobile
|
|
|
|
? { top: this.state.headerTop + 56 }
|
|
|
|
: {
|
|
|
|
paddingRight: this.props.sidebar
|
|
|
|
? `calc(${Constants.sizes.sidebar}px + 48px`
|
|
|
|
: "auto",
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
{this.props.children}
|
2020-08-08 03:10:28 +03:00
|
|
|
</div>
|
2020-09-08 09:05:16 +03:00
|
|
|
|
2020-08-12 22:41:56 +03:00
|
|
|
{this.props.sidebar ? (
|
2020-09-13 02:23:54 +03:00
|
|
|
<Boundary
|
2020-11-10 00:20:38 +03:00
|
|
|
onMouseDown
|
2020-09-13 02:23:54 +03:00
|
|
|
captureResize={false}
|
|
|
|
captureScroll={false}
|
|
|
|
enabled
|
2020-09-29 08:47:27 +03:00
|
|
|
onOutsideRectEvent={this._handleDismiss}
|
2020-08-27 02:24:43 +03:00
|
|
|
>
|
2020-09-13 02:23:54 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_SIDEBAR}
|
|
|
|
ref={(c) => {
|
|
|
|
this._sidebar = c;
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{sidebarElements}
|
|
|
|
</div>
|
|
|
|
</Boundary>
|
2020-08-12 22:41:56 +03:00
|
|
|
) : null}
|
2020-09-08 09:05:16 +03:00
|
|
|
</React.Fragment>
|
2020-04-09 00:29:13 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|