slate/components/core/ApplicationLayout.js

254 lines
6.2 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
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-08-14 11:29:29 +03:00
const STYLES_NO_VISIBLE_SCROLL = css`
overflow-y: scroll;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
2020-08-14 11:29:29 +03:00
-ms-overflow-style: -ms-autohiding-scrollbar;
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};
}
`;
const STYLES_HEADER = css`
z-index: ${Constants.zindex.header};
height: ${Constants.sizes.header}px;
pointer-events: none;
width: 100%;
position: fixed;
left: ${Constants.sizes.navigation}px;
right: 0;
top: 0;
2020-10-01 03:41:53 +03:00
transition: top 0.25s;
@media (max-width: ${Constants.sizes.mobile}px) {
2020-09-29 07:39:05 +03:00
left: 0;
}
`;
const STYLES_CONTENT = css`
background: ${Constants.system.white};
width: 100%;
min-width: 10%;
min-height: 100vh;
position: relative;
padding-left: ${Constants.sizes.navigation}px;
2020-09-29 01:38:35 +03:00
margin-top: ${Constants.sizes.topOffset}px;
@media (max-width: ${Constants.sizes.mobile}px) {
2020-09-29 07:39:05 +03:00
padding-left: 0px;
padding: 0 0 88px 0;
2020-09-29 08:47:27 +03:00
margin-top: calc(${Constants.sizes.topOffset}px + 36px);
}
`;
const STYLES_NAVIGATION = css`
position: fixed;
top: 0;
left: 0;
bottom: 0;
2020-08-14 11:29:29 +03:00
z-index: 1;
flex-shrink: 0;
height: 100vh;
z-index: ${Constants.zindex.navigation};
width: ${Constants.sizes.navigation}px;
background-color: ${Constants.system.foreground};
2020-10-24 00:03:33 +03:00
${STYLES_NO_VISIBLE_SCROLL}
@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};
}
`;
const STYLES_SIDEBAR = css`
2020-08-26 07:13:02 +03:00
z-index: ${Constants.zindex.sidebar};
height: 100vh;
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;
${STYLES_NO_VISIBLE_SCROLL}
2020-09-10 06:39:56 +03:00
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
}
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))) {
-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);
}
`;
const STYLES_SIDEBAR_HEADER = css`
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
`;
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
`;
const STYLES_BLOCK = css`
2020-09-10 06:28:48 +03:00
margin-top: 8px;
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);
`;
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();
};
render() {
let sidebarElements = null;
if (this.props.sidebar) {
sidebarElements = (
<React.Fragment>
2020-10-05 00:30:28 +03:00
{/* <GlobalTooltip
elementRef={this._sidebar}
allowedTypes={["sidebar"]}
2020-10-05 00:30:28 +03:00
/> */}
<div css={STYLES_SIDEBAR_HEADER}>
2020-10-01 03:41:53 +03:00
<div css={STYLES_BLOCK} onClick={this._handleDismiss}>
<SVG.Dismiss height="24px" />
</div>
</div>
<div css={STYLES_SIDEBAR_CONTENT}>{this.props.sidebar}</div>
</React.Fragment>
);
}
return (
<React.Fragment>
2020-08-12 22:41:56 +03:00
<div
css={STYLES_NAVIGATION}
ref={(c) => {
this._navigation = c;
}}
>
2020-10-05 00:30:28 +03:00
{/* <GlobalTooltip
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>
<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 />
<div css={STYLES_HEADER} style={{ top: this.props.mobile ? this.state.headerTop : null }}>
{this.props.header}
</div>
<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}
</div>
2020-08-12 22:41:56 +03:00
{this.props.sidebar ? (
<Boundary
2020-11-10 00:20:38 +03:00
onMouseDown
captureResize={false}
captureScroll={false}
enabled
2020-09-29 08:47:27 +03:00
onOutsideRectEvent={this._handleDismiss}
2020-08-27 02:24:43 +03:00
>
<div
css={STYLES_SIDEBAR}
ref={(c) => {
this._sidebar = c;
}}
>
{sidebarElements}
</div>
</Boundary>
2020-08-12 22:41:56 +03:00
) : null}
</React.Fragment>
);
}
}