import * as React from "react"; import * as Constants from "~/common/constants"; import * as SVG from "~/common/svg"; import ApplicationUserControls from "~/components/core/ApplicationUserControls"; import { css, keyframes } from "@emotion/core"; import { dispatchCustomEvent } from "~/common/custom-events"; import { Boundary } from "~/components/system/components/fragments/Boundary"; import { PopoverNavigation } from "~/components/system"; const IconMap = { HOME: , ENCRYPTED: , NETWORK: , DIRECTORY: , FOLDER: , WALLET: , DEALS: , MAKE_DEAL: , SLATES: , SLATE: , LOCAL_DATA: , PROFILE_PAGE: , SETTINGS_DEVELOPER: , SETTINGS: , DIRECTORY: , FILECOIN: , MINERS: , }; const STYLES_ICON_ELEMENT = css` 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}; } `; const STYLES_APPLICATION_HEADER = css` display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 28px 0 20px; pointer-events: none; background-color: ${Constants.system.white}; @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) { padding: 0px 12px; width: 100%; } `; const STYLES_LEFT = css` flex-shrink: 0; ${"" /* 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; `; const STYLES_MOBILE_HIDDEN = css` @media (max-width: ${Constants.sizes.mobile}px) { display: none; } `; const STYLES_RIGHT = css` min-width: 10%; width: 100%; display: flex; align-items: center; justify-content: flex-end; `; 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; `; const STYLES_MARGIN_LEFT = css` margin-left: 32px; 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}; } @media (max-width: ${Constants.sizes.mobile}px) { margin-left: 16px; } `; export default class ApplicationHeader extends React.Component { keysPressed = {}; state = { popup: null, isRefreshing: false, }; 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]; if (prevValue) { return; } this.keysPressed[e.key] = true; if ((this.keysPressed["Control"] || this.keysPressed["Meta"]) && this.keysPressed["f"]) { e.preventDefault(); e.stopPropagation(); this._handleCreateSearch(); } }; _handleKeyUp = (e) => { this.keysPressed = {}; }; _handleCreateSearch = (e) => { dispatchCustomEvent({ name: "show-search", detail: {}, }); }; _handleTogglePopup = (value) => { if (!value || this.state.popup === value) { this.setState({ popup: null }); } else { this.setState({ popup: value }); } }; render() { const isBackDisabled = this.props.currentIndex === 0 || this.props.history.length < 2; const isForwardDisabled = this.props.currentIndex === this.props.history.length - 1 || this.props.history.length < 2; return ( this._handleTogglePopup("nav")} /> {this.state.popup === "nav" ? ( this._handleTogglePopup()} style={this.props.style} > !item.ignore) .map((item) => { return { text: ( {IconMap[item.decorator]} {item.name} ), onClick: (e) => { this._handleTogglePopup(); this.props.onAction({ type: "NAVIGATE", value: item.id, }); }, }; })} /> ) : null} {} : this.props.onBack} > {} : this.props.onForward} > CMD+F {/* */} {/* this.props.onAction({ type: "SIDEBAR", value: "SIDEBAR_HELP", }) } > */} ); } }
CMD+F