slate/components/core/ApplicationHeader.js

292 lines
8.3 KiB
JavaScript
Raw Normal View History

2020-06-19 06:57:57 +03:00
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
2020-09-29 07:39:05 +03:00
import ApplicationUserControls from "~/components/core/ApplicationUserControls";
import { css, keyframes } from "@emotion/core";
2020-08-25 02:24:29 +03:00
import { dispatchCustomEvent } from "~/common/custom-events";
2020-11-14 02:43:59 +03:00
import { Boundary } from "~/components/system/components/fragments/Boundary";
import { PopoverNavigation } from "~/components/system";
const IconMap = {
HOME: <SVG.Home height="20px" />,
ENCRYPTED: <SVG.SecurityLock height="20px" />,
NETWORK: <SVG.Activity height="20px" />,
DIRECTORY: <SVG.Directory height="20px" />,
FOLDER: <SVG.Folder height="20px" />,
WALLET: <SVG.OldWallet height="20px" />,
DEALS: <SVG.Deals height="20px" />,
MAKE_DEAL: <SVG.HardDrive height="20px" />,
SLATES: <SVG.Layers height="20px" />,
SLATE: <SVG.Slate height="20px" />,
LOCAL_DATA: <SVG.HardDrive height="20px" />,
PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
SETTINGS_DEVELOPER: <SVG.Tool height="20px" />,
SETTINGS: <SVG.Settings height="20px" />,
DIRECTORY: <SVG.Directory height="20px" />,
FILECOIN: <SVG.Wallet height="20px" />,
MINERS: <SVG.Miners height="20px" />,
};
const STYLES_ICON_ELEMENT = css`
height: 40px;
width: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
2020-11-14 02:43:59 +03:00
color: ${Constants.system.textGray};
user-select: none;
cursor: pointer;
pointer-events: auto;
:hover {
color: ${Constants.system.brand};
}
`;
const STYLES_APPLICATION_HEADER = css`
display: flex;
2020-09-29 08:47:27 +03:00
align-items: center;
justify-content: space-between;
2020-11-14 02:43:59 +03:00
width: 100%;
height: 56px;
2020-11-14 02:43:59 +03:00
padding: 0 28px 0 20px;
pointer-events: none;
background-color: ${Constants.system.white};
2020-10-29 01:36:38 +03:00
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
background-color: rgba(255, 255, 255, 0.75);
}
@media (max-width: ${Constants.sizes.mobile}px) {
2020-09-29 08:47:27 +03:00
padding: 0px 12px;
2020-09-29 07:39:05 +03:00
width: 100%;
}
`;
const STYLES_LEFT = css`
flex-shrink: 0;
2020-09-16 23:39:35 +03:00
${"" /* width: 352px; */}
display: flex;
align-items: center;
justify-content: flex-start;
`;
const STYLES_MIDDLE = css`
min-width: 10%;
width: 100%;
padding: 0 24px 0 48px;
`;
2020-09-29 07:39:05 +03:00
const STYLES_MOBILE_HIDDEN = css`
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_RIGHT = css`
2020-09-16 23:39:35 +03:00
min-width: 10%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
`;
2020-09-06 04:57:39 +03:00
const rotate = keyframes`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`;
const STYLES_ROTATION = css`
animation: ${rotate} 1s linear infinite;
`;
const STYLES_STATIC = css`
transition: 200ms ease all;
`;
2020-11-14 02:43:59 +03:00
const STYLES_MARGIN_LEFT = css`
margin-left: 32px;
2020-11-14 02:53:23 +03:00
height: 40px;
width: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: ${Constants.system.textGray};
user-select: none;
cursor: pointer;
pointer-events: auto;
:hover {
color: ${Constants.system.brand};
}
2020-11-14 02:43:59 +03:00
@media (max-width: ${Constants.sizes.mobile}px) {
margin-left: 16px;
}
`;
export default class ApplicationHeader extends React.Component {
2020-10-29 01:36:38 +03:00
keysPressed = {};
2020-09-06 04:57:39 +03:00
state = {
2020-11-14 02:43:59 +03:00
showNav: false,
2020-09-06 04:57:39 +03:00
isRefreshing: false,
};
2020-10-29 01:36:38 +03:00
componentDidMount = () => {
window.addEventListener("keydown", this._handleKeyDown);
window.addEventListener("keyup", this._handleKeyUp);
};
//TODO toast: add a command-f light text next to svg
//add cmd svg to header
//add on-hover keybinds next to cmd svg
//--> argue with haris about how that looks
_handleKeyDown = (e) => {
let prevValue = this.keysPressed[e.key];
2020-11-14 02:53:23 +03:00
if (prevValue) {
return;
}
2020-10-29 01:36:38 +03:00
this.keysPressed[e.key] = true;
2020-11-14 02:53:23 +03:00
if ((this.keysPressed["Control"] || this.keysPressed["Meta"]) && this.keysPressed["f"]) {
2020-10-29 01:36:38 +03:00
e.preventDefault();
e.stopPropagation();
this._handleCreateSearch();
}
};
_handleKeyUp = (e) => {
this.keysPressed = {};
};
2020-08-25 02:24:29 +03:00
_handleCreateSearch = (e) => {
dispatchCustomEvent({
2020-11-10 00:20:38 +03:00
name: "show-search",
detail: {},
2020-09-06 04:57:39 +03:00
});
};
render() {
2020-10-29 01:36:38 +03:00
const isBackDisabled = this.props.currentIndex === 0 || this.props.history.length < 2;
const isForwardDisabled =
2020-10-29 01:36:38 +03:00
this.props.currentIndex === this.props.history.length - 1 || this.props.history.length < 2;
return (
<header css={STYLES_APPLICATION_HEADER}>
<div css={STYLES_LEFT}>
2020-11-14 02:43:59 +03:00
<span css={STYLES_ICON_ELEMENT} style={{ position: "relative" }}>
<SVG.Menu
height="24px"
onClick={() => this.setState({ showNav: !this.state.showNav })}
2020-09-29 07:39:05 +03:00
/>
2020-11-14 02:43:59 +03:00
{this.state.showNav ? (
<Boundary
captureResize={true}
captureScroll={false}
enabled
onOutsideRectEvent={() => this.setState({ showNav: false })}
style={this.props.style}
>
<PopoverNavigation
style={{ top: 44, left: 8, width: 220, padding: "0px 24px" }}
itemStyle={{ margin: "24px 0" }}
navigation={this.props.navigation
.filter((item) => !item.ignore)
.map((item) => {
return {
text: (
<div
style={{
display: "flex",
alignItems: "center",
color: this.props.activeIds[item.id] ? Constants.system.brand : null,
}}
>
<span style={{ marginRight: 16 }}>{IconMap[item.decorator]}</span>
<span style={{ fontSize: 18 }}>{item.name}</span>
</div>
),
onClick: (e) => {
this.setState({ showNav: false });
this.props.onAction({
type: "NAVIGATE",
value: item.id,
});
},
};
})}
/>
</Boundary>
) : null}
2020-09-29 07:39:05 +03:00
</span>
2020-11-14 02:43:59 +03:00
<span css={STYLES_MOBILE_HIDDEN} style={{ marginLeft: 60 }}>
2020-09-29 08:47:27 +03:00
<span
css={STYLES_ICON_ELEMENT}
style={
2020-10-29 01:36:38 +03:00
isBackDisabled ? { cursor: "not-allowed", color: Constants.system.border } : null
2020-09-29 08:47:27 +03:00
}
onClick={isBackDisabled ? () => {} : this.props.onBack}
>
2020-10-29 01:36:38 +03:00
<SVG.NavigationArrow height="24px" style={{ transform: `rotate(180deg)` }} />
2020-09-29 08:47:27 +03:00
</span>
<span
css={STYLES_ICON_ELEMENT}
style={
isForwardDisabled
? { cursor: "not-allowed", color: Constants.system.border, marginLeft: 8 }
: { marginLeft: 8 }
}
2020-09-29 08:47:27 +03:00
onClick={isForwardDisabled ? () => {} : this.props.onForward}
>
<SVG.NavigationArrow height="24px" />
</span>
2020-10-01 03:41:53 +03:00
</span>
2020-11-14 02:53:23 +03:00
<span css={STYLES_MARGIN_LEFT} onClick={this._handleCreateSearch}>
<SVG.Search height="24px" />
</span>
2020-11-16 05:53:51 +03:00
<span css={STYLES_MOBILE_HIDDEN} onClick={this._handleCreateSearch}>
2020-11-14 02:53:23 +03:00
<span
css={STYLES_ICON_ELEMENT}
style={{ marginLeft: 16, color: Constants.system.border, cursor: "pointer" }}
>
<p>CMD+F</p>
2020-10-29 11:43:08 +03:00
</span>
</span>
</div>
2020-09-16 23:39:35 +03:00
{/* <div css={STYLES_MIDDLE} /> */}
<div css={STYLES_RIGHT}>
2020-11-14 02:43:59 +03:00
{/* <span css={STYLES_MOBILE_HIDDEN}>
2020-09-29 08:47:27 +03:00
<span
css={STYLES_ICON_ELEMENT}
onClick={() =>
this.props.onAction({
type: "SIDEBAR",
value: "SIDEBAR_HELP",
})
}
>
<SVG.Help height="24px" />
</span>
2020-11-14 02:43:59 +03:00
</span> */}
<span style={{ pointerEvents: "auto", marginLeft: 24 }}>
<ApplicationUserControls
viewer={this.props.viewer}
onAction={this.props.onAction}
onSignOut={this.props.onSignOut}
/>
2020-09-16 23:39:35 +03:00
</span>
</div>
</header>
);
}
}