2017-05-12 00:23:56 +00:00
|
|
|
// @flow
|
2020-06-20 20:59:15 +00:00
|
|
|
import * as React from "react";
|
|
|
|
import { Switch, Route, Redirect } from "react-router-dom";
|
|
|
|
import { Helmet } from "react-helmet";
|
|
|
|
import styled, { withTheme } from "styled-components";
|
|
|
|
import breakpoint from "styled-components-breakpoint";
|
|
|
|
import { observable } from "mobx";
|
|
|
|
import { observer, inject } from "mobx-react";
|
|
|
|
import keydown from "react-keydown";
|
|
|
|
import Analytics from "components/Analytics";
|
|
|
|
import Flex from "shared/components/Flex";
|
2019-01-20 01:28:32 +00:00
|
|
|
import {
|
|
|
|
homeUrl,
|
|
|
|
searchUrl,
|
|
|
|
matchDocumentSlug as slug,
|
2020-06-20 20:59:15 +00:00
|
|
|
} from "utils/routeHelpers";
|
|
|
|
|
|
|
|
import { LoadingIndicatorBar } from "components/LoadingIndicator";
|
|
|
|
import { GlobalStyles } from "components/DropToImport";
|
|
|
|
import Sidebar from "components/Sidebar";
|
|
|
|
import SettingsSidebar from "components/Sidebar/Settings";
|
|
|
|
import Modals from "components/Modals";
|
|
|
|
import DocumentHistory from "components/DocumentHistory";
|
|
|
|
import Modal from "components/Modal";
|
|
|
|
import KeyboardShortcuts from "scenes/KeyboardShortcuts";
|
|
|
|
import ErrorSuspended from "scenes/ErrorSuspended";
|
|
|
|
import AuthStore from "stores/AuthStore";
|
|
|
|
import UiStore from "stores/UiStore";
|
|
|
|
import DocumentsStore from "stores/DocumentsStore";
|
2016-04-30 18:46:32 +00:00
|
|
|
|
2017-05-12 00:23:56 +00:00
|
|
|
type Props = {
|
2017-08-29 15:37:17 +00:00
|
|
|
documents: DocumentsStore,
|
2018-05-05 23:16:08 +00:00
|
|
|
children?: ?React.Node,
|
|
|
|
actions?: ?React.Node,
|
|
|
|
title?: ?React.Node,
|
2017-05-30 02:08:03 +00:00
|
|
|
auth: AuthStore,
|
2017-06-16 03:39:08 +00:00
|
|
|
ui: UiStore,
|
2018-05-05 23:16:08 +00:00
|
|
|
notifications?: React.Node,
|
2019-03-13 04:35:35 +00:00
|
|
|
theme: Object,
|
2017-05-12 00:23:56 +00:00
|
|
|
};
|
|
|
|
|
2017-11-10 22:14:30 +00:00
|
|
|
@observer
|
2018-05-05 23:16:08 +00:00
|
|
|
class Layout extends React.Component<Props> {
|
2017-10-15 18:42:03 +00:00
|
|
|
scrollable: ?HTMLDivElement;
|
2019-01-19 08:23:39 +00:00
|
|
|
@observable redirectTo: ?string;
|
2019-08-09 04:13:58 +00:00
|
|
|
@observable keyboardShortcutsOpen: boolean = false;
|
2019-01-19 08:23:39 +00:00
|
|
|
|
2019-03-13 04:35:35 +00:00
|
|
|
componentWillMount() {
|
|
|
|
this.updateBackground();
|
|
|
|
}
|
|
|
|
|
2019-01-19 08:23:39 +00:00
|
|
|
componentDidUpdate() {
|
2019-03-13 04:35:35 +00:00
|
|
|
this.updateBackground();
|
|
|
|
|
2019-01-19 08:23:39 +00:00
|
|
|
if (this.redirectTo) {
|
|
|
|
this.redirectTo = undefined;
|
|
|
|
}
|
|
|
|
}
|
2016-07-18 03:59:32 +00:00
|
|
|
|
2020-06-10 03:38:34 +00:00
|
|
|
updateBackground() {
|
|
|
|
// ensure the wider page color always matches the theme
|
|
|
|
window.document.body.style.background = this.props.theme.background;
|
|
|
|
}
|
|
|
|
|
2020-06-20 20:59:15 +00:00
|
|
|
@keydown("shift+/")
|
2019-08-09 04:13:58 +00:00
|
|
|
handleOpenKeyboardShortcuts() {
|
2020-05-29 02:44:52 +00:00
|
|
|
if (this.props.ui.editMode) return;
|
2019-08-09 04:13:58 +00:00
|
|
|
this.keyboardShortcutsOpen = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
handleCloseKeyboardShortcuts = () => {
|
|
|
|
this.keyboardShortcutsOpen = false;
|
|
|
|
};
|
|
|
|
|
2020-06-20 20:59:15 +00:00
|
|
|
@keydown(["t", "/", "meta+k"])
|
2017-07-14 15:48:42 +00:00
|
|
|
goToSearch(ev) {
|
2020-05-20 03:39:34 +00:00
|
|
|
if (this.props.ui.editMode) return;
|
2017-07-14 15:48:42 +00:00
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
2019-01-19 08:23:39 +00:00
|
|
|
this.redirectTo = searchUrl();
|
2016-07-23 20:12:56 +00:00
|
|
|
}
|
2016-07-19 07:31:01 +00:00
|
|
|
|
2020-06-20 20:59:15 +00:00
|
|
|
@keydown("d")
|
2017-07-14 15:48:42 +00:00
|
|
|
goToDashboard() {
|
2020-05-20 03:39:34 +00:00
|
|
|
if (this.props.ui.editMode) return;
|
2019-01-19 08:23:39 +00:00
|
|
|
this.redirectTo = homeUrl();
|
2017-07-14 15:48:42 +00:00
|
|
|
}
|
|
|
|
|
2017-05-30 02:08:03 +00:00
|
|
|
render() {
|
2017-11-19 23:56:50 +00:00
|
|
|
const { auth, ui } = this.props;
|
2017-09-04 00:08:56 +00:00
|
|
|
const { user, team } = auth;
|
2017-11-19 23:56:50 +00:00
|
|
|
const showSidebar = auth.authenticated && user && team;
|
2017-05-17 07:11:13 +00:00
|
|
|
|
2018-03-05 06:38:14 +00:00
|
|
|
if (auth.isSuspended) return <ErrorSuspended />;
|
2019-01-26 13:01:33 +00:00
|
|
|
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
|
2018-03-05 06:18:23 +00:00
|
|
|
|
2016-04-29 05:25:37 +00:00
|
|
|
return (
|
2017-05-26 19:56:10 +00:00
|
|
|
<Container column auto>
|
2017-10-22 23:33:10 +00:00
|
|
|
<Helmet>
|
2017-11-09 08:20:22 +00:00
|
|
|
<title>Outline</title>
|
2017-10-22 23:33:10 +00:00
|
|
|
<meta
|
|
|
|
name="viewport"
|
|
|
|
content="width=device-width, initial-scale=1.0"
|
|
|
|
/>
|
|
|
|
</Helmet>
|
2017-11-09 08:17:55 +00:00
|
|
|
<Analytics />
|
2016-06-06 06:57:58 +00:00
|
|
|
|
2017-06-30 05:44:15 +00:00
|
|
|
{this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
|
2017-04-27 05:18:36 +00:00
|
|
|
{this.props.notifications}
|
2016-10-28 05:37:26 +00:00
|
|
|
|
2019-01-20 01:28:32 +00:00
|
|
|
<Container auto>
|
2017-11-27 02:09:55 +00:00
|
|
|
{showSidebar && (
|
|
|
|
<Switch>
|
|
|
|
<Route path="/settings" component={SettingsSidebar} />
|
|
|
|
<Route component={Sidebar} />
|
|
|
|
</Switch>
|
|
|
|
)}
|
2017-06-16 03:39:08 +00:00
|
|
|
|
2017-06-25 07:29:40 +00:00
|
|
|
<Content auto justify="center" editMode={ui.editMode}>
|
2017-06-16 03:39:08 +00:00
|
|
|
{this.props.children}
|
|
|
|
</Content>
|
2019-01-20 01:28:32 +00:00
|
|
|
|
|
|
|
<Switch>
|
|
|
|
<Route
|
|
|
|
path={`/doc/${slug}/history/:revisionId?`}
|
|
|
|
component={DocumentHistory}
|
|
|
|
/>
|
|
|
|
</Switch>
|
|
|
|
</Container>
|
2017-09-10 05:12:59 +00:00
|
|
|
<Modals ui={ui} />
|
2019-08-09 04:13:58 +00:00
|
|
|
<Modal
|
|
|
|
isOpen={this.keyboardShortcutsOpen}
|
|
|
|
onRequestClose={this.handleCloseKeyboardShortcuts}
|
|
|
|
title="Keyboard shortcuts"
|
|
|
|
>
|
|
|
|
<KeyboardShortcuts />
|
|
|
|
</Modal>
|
2019-01-19 08:44:16 +00:00
|
|
|
<GlobalStyles />
|
2017-05-26 19:56:10 +00:00
|
|
|
</Container>
|
2016-04-29 05:25:37 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-05-26 19:56:10 +00:00
|
|
|
const Container = styled(Flex)`
|
2019-03-13 04:35:35 +00:00
|
|
|
background: ${props => props.theme.background};
|
2019-04-20 22:19:35 +00:00
|
|
|
transition: ${props => props.theme.backgroundTransition};
|
2017-06-09 06:32:08 +00:00
|
|
|
position: relative;
|
2020-04-25 01:44:21 +00:00
|
|
|
width: 100%;
|
2019-01-20 01:28:32 +00:00
|
|
|
min-height: 100%;
|
2017-05-26 19:56:10 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Content = styled(Flex)`
|
2018-02-11 07:24:12 +00:00
|
|
|
margin: 0;
|
2018-06-23 07:10:52 +00:00
|
|
|
transition: margin-left 100ms ease-out;
|
2017-12-03 00:27:45 +00:00
|
|
|
|
|
|
|
@media print {
|
2018-02-11 07:24:12 +00:00
|
|
|
margin: 0;
|
2017-12-03 00:27:45 +00:00
|
|
|
}
|
2018-02-11 07:24:12 +00:00
|
|
|
|
2020-06-20 20:59:15 +00:00
|
|
|
${breakpoint("tablet")`
|
2018-06-10 02:10:30 +00:00
|
|
|
margin-left: ${props => (props.editMode ? 0 : props.theme.sidebarWidth)};
|
2018-02-11 07:24:12 +00:00
|
|
|
`};
|
2017-05-26 19:56:10 +00:00
|
|
|
`;
|
|
|
|
|
2020-06-20 20:59:15 +00:00
|
|
|
export default inject("auth", "ui", "documents")(withTheme(Layout));
|