2017-05-12 00:23:56 +00:00
|
|
|
// @flow
|
2016-04-29 05:25:37 +00:00
|
|
|
import React from 'react';
|
2017-09-10 05:12:59 +00:00
|
|
|
import { withRouter } from 'react-router-dom';
|
2016-06-06 06:57:58 +00:00
|
|
|
import Helmet from 'react-helmet';
|
2017-05-02 05:01:50 +00:00
|
|
|
import styled from 'styled-components';
|
2017-04-27 05:18:36 +00:00
|
|
|
import { observer, inject } from 'mobx-react';
|
2017-05-18 02:36:31 +00:00
|
|
|
import keydown from 'react-keydown';
|
2017-07-05 03:15:01 +00:00
|
|
|
import Flex from 'components/Flex';
|
2017-07-09 05:12:14 +00:00
|
|
|
import { color, layout } from 'styles/constants';
|
2017-07-14 15:48:42 +00:00
|
|
|
import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
|
2017-09-04 00:27:12 +00:00
|
|
|
|
|
|
|
import Avatar from 'components/Avatar';
|
2017-06-30 05:44:15 +00:00
|
|
|
import { LoadingIndicatorBar } from 'components/LoadingIndicator';
|
2017-07-01 05:09:22 +00:00
|
|
|
import Scrollable from 'components/Scrollable';
|
2017-09-04 20:23:20 +00:00
|
|
|
import Icon from 'components/Icon';
|
2017-09-23 22:58:34 +00:00
|
|
|
import Toasts from 'components/Toasts';
|
2017-09-10 05:12:59 +00:00
|
|
|
import AccountMenu from 'menus/AccountMenu';
|
2017-06-16 03:39:08 +00:00
|
|
|
|
2017-09-18 06:45:40 +00:00
|
|
|
import SidebarCollections from './components/SidebarCollections';
|
2017-06-16 03:39:08 +00:00
|
|
|
import SidebarLink from './components/SidebarLink';
|
2017-09-04 00:27:12 +00:00
|
|
|
import HeaderBlock from './components/HeaderBlock';
|
2017-09-10 05:12:59 +00:00
|
|
|
import Modals from './components/Modals';
|
2017-06-16 03:39:08 +00:00
|
|
|
|
2017-05-30 02:08:03 +00:00
|
|
|
import AuthStore from 'stores/AuthStore';
|
2017-06-16 03:39:08 +00:00
|
|
|
import UiStore from 'stores/UiStore';
|
|
|
|
import CollectionsStore from 'stores/CollectionsStore';
|
2017-08-29 15:37:17 +00:00
|
|
|
import DocumentsStore from 'stores/DocumentsStore';
|
2016-04-30 18:46:32 +00:00
|
|
|
|
2017-05-12 00:23:56 +00:00
|
|
|
type Props = {
|
2017-05-17 07:11:13 +00:00
|
|
|
history: Object,
|
2017-06-16 03:39:08 +00:00
|
|
|
collections: CollectionsStore,
|
2017-08-29 15:37:17 +00:00
|
|
|
documents: DocumentsStore,
|
2017-05-12 00:23:56 +00:00
|
|
|
children?: ?React.Element<any>,
|
|
|
|
actions?: ?React.Element<any>,
|
|
|
|
title?: ?React.Element<any>,
|
2017-05-30 02:08:03 +00:00
|
|
|
auth: AuthStore,
|
2017-06-16 03:39:08 +00:00
|
|
|
ui: UiStore,
|
2017-05-12 00:23:56 +00:00
|
|
|
search: ?boolean,
|
|
|
|
notifications?: React.Element<any>,
|
|
|
|
};
|
|
|
|
|
|
|
|
@observer class Layout extends React.Component {
|
|
|
|
props: Props;
|
2016-07-18 03:59:32 +00:00
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
search: true,
|
2017-04-27 05:18:36 +00:00
|
|
|
};
|
2016-07-18 03:59:32 +00:00
|
|
|
|
|
|
|
@keydown(['/', 't'])
|
2017-07-14 15:48:42 +00:00
|
|
|
goToSearch(ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.props.history.push(searchUrl());
|
2016-07-23 20:12:56 +00:00
|
|
|
}
|
2016-07-19 07:31:01 +00:00
|
|
|
|
2017-07-12 05:42:30 +00:00
|
|
|
@keydown('d')
|
2017-07-14 15:48:42 +00:00
|
|
|
goToDashboard() {
|
|
|
|
this.props.history.push(homeUrl());
|
|
|
|
}
|
|
|
|
|
|
|
|
@keydown('e')
|
2017-09-02 20:38:52 +00:00
|
|
|
goToEdit(ev) {
|
|
|
|
const activeDocument = this.props.documents.active;
|
|
|
|
if (!activeDocument) return;
|
|
|
|
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.props.history.push(documentEditUrl(activeDocument));
|
2016-04-29 05:25:37 +00:00
|
|
|
}
|
|
|
|
|
2017-07-12 05:42:30 +00:00
|
|
|
@keydown('shift+/')
|
2017-09-29 06:22:09 +00:00
|
|
|
openKeyboardShortcuts() {
|
|
|
|
this.props.ui.setActiveModal('keyboard-shortcuts');
|
|
|
|
}
|
|
|
|
|
2017-07-09 17:27:29 +00:00
|
|
|
handleCreateCollection = () => {
|
2017-09-10 05:51:22 +00:00
|
|
|
this.props.ui.setActiveModal('collection-new');
|
2017-07-09 17:27:29 +00:00
|
|
|
};
|
|
|
|
|
2017-08-29 15:37:17 +00:00
|
|
|
handleEditCollection = () => {
|
2017-09-10 05:51:22 +00:00
|
|
|
this.props.ui.setActiveModal('collection-edit');
|
2017-07-09 16:02:44 +00:00
|
|
|
};
|
|
|
|
|
2017-05-30 02:08:03 +00:00
|
|
|
render() {
|
2017-09-18 06:45:40 +00:00
|
|
|
const { auth, documents, ui } = this.props;
|
2017-09-04 00:08:56 +00:00
|
|
|
const { user, team } = auth;
|
2017-05-17 07:11:13 +00:00
|
|
|
|
2016-04-29 05:25:37 +00:00
|
|
|
return (
|
2017-05-26 19:56:10 +00:00
|
|
|
<Container column auto>
|
2016-06-06 06:57:58 +00:00
|
|
|
<Helmet
|
2017-05-26 19:56:10 +00:00
|
|
|
title="Atlas"
|
2017-05-13 23:00:50 +00:00
|
|
|
meta={[
|
|
|
|
{
|
|
|
|
name: 'viewport',
|
|
|
|
content: 'width=device-width, initial-scale=1.0',
|
|
|
|
},
|
|
|
|
]}
|
2016-06-06 06:57:58 +00:00
|
|
|
/>
|
|
|
|
|
2017-06-30 05:44:15 +00:00
|
|
|
{this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
|
2016-08-19 15:02:56 +00:00
|
|
|
|
2017-04-27 05:18:36 +00:00
|
|
|
{this.props.notifications}
|
2016-10-28 05:37:26 +00:00
|
|
|
|
2017-06-16 03:39:08 +00:00
|
|
|
<Flex auto>
|
|
|
|
{auth.authenticated &&
|
|
|
|
user &&
|
2017-09-04 00:08:56 +00:00
|
|
|
team &&
|
2017-06-25 07:29:40 +00:00
|
|
|
<Sidebar column editMode={ui.editMode}>
|
2017-09-10 05:12:59 +00:00
|
|
|
<AccountMenu
|
2017-09-04 06:03:49 +00:00
|
|
|
label={
|
|
|
|
<HeaderBlock user={user} team={team}>
|
|
|
|
<Avatar src={user.avatarUrl} />
|
|
|
|
</HeaderBlock>
|
|
|
|
}
|
2017-09-10 05:12:59 +00:00
|
|
|
/>
|
2017-09-04 06:03:49 +00:00
|
|
|
|
2017-09-12 06:41:12 +00:00
|
|
|
<Flex auto column>
|
2017-07-01 05:09:22 +00:00
|
|
|
<Scrollable>
|
|
|
|
<LinkSection>
|
2017-09-04 19:14:18 +00:00
|
|
|
<SidebarLink to="/dashboard">
|
2017-09-04 20:23:20 +00:00
|
|
|
<Icon type="Home" /> Home
|
2017-09-04 19:14:18 +00:00
|
|
|
</SidebarLink>
|
|
|
|
<SidebarLink to="/search">
|
2017-09-04 20:23:20 +00:00
|
|
|
<Icon type="Search" /> Search
|
2017-09-04 19:14:18 +00:00
|
|
|
</SidebarLink>
|
|
|
|
<SidebarLink to="/starred">
|
2017-09-04 20:23:20 +00:00
|
|
|
<Icon type="Star" /> Starred
|
2017-09-04 19:14:18 +00:00
|
|
|
</SidebarLink>
|
2017-07-01 05:09:22 +00:00
|
|
|
</LinkSection>
|
|
|
|
<LinkSection>
|
2017-09-18 06:45:40 +00:00
|
|
|
<SidebarCollections
|
|
|
|
history={this.props.history}
|
|
|
|
activeDocument={documents.active}
|
|
|
|
onCreateCollection={this.handleCreateCollection}
|
|
|
|
/>
|
2017-07-01 05:09:22 +00:00
|
|
|
</LinkSection>
|
|
|
|
</Scrollable>
|
2016-07-18 03:59:32 +00:00
|
|
|
</Flex>
|
2017-06-16 03:39:08 +00:00
|
|
|
</Sidebar>}
|
|
|
|
|
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>
|
|
|
|
</Flex>
|
2017-09-10 05:12:59 +00:00
|
|
|
<Modals ui={ui} />
|
2017-09-23 22:58:34 +00:00
|
|
|
<Toasts />
|
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)`
|
2017-06-09 06:32:08 +00:00
|
|
|
position: relative;
|
2017-05-26 19:56:10 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Content = styled(Flex)`
|
2017-09-04 15:56:07 +00:00
|
|
|
margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
|
|
|
|
transition: margin-left 200ms ease-in-out;
|
2017-05-26 19:56:10 +00:00
|
|
|
`;
|
|
|
|
|
2017-06-16 03:39:08 +00:00
|
|
|
const Sidebar = styled(Flex)`
|
2017-09-04 15:56:07 +00:00
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
|
2017-07-09 05:12:14 +00:00
|
|
|
width: ${layout.sidebarWidth};
|
2017-09-04 06:03:49 +00:00
|
|
|
background: ${color.smoke};
|
2017-09-04 15:56:07 +00:00
|
|
|
transition: left 200ms ease-in-out;
|
2017-06-16 03:39:08 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const LinkSection = styled(Flex)`
|
|
|
|
flex-direction: column;
|
2017-09-04 06:03:49 +00:00
|
|
|
margin: 24px 0;
|
2017-09-27 07:26:29 +00:00
|
|
|
padding: 0 24px;
|
2017-07-10 03:02:10 +00:00
|
|
|
position: relative;
|
2017-06-16 03:39:08 +00:00
|
|
|
`;
|
|
|
|
|
2017-08-29 15:37:17 +00:00
|
|
|
export default withRouter(
|
|
|
|
inject('user', 'auth', 'ui', 'documents', 'collections')(Layout)
|
|
|
|
);
|