2017-05-12 00:23:56 +00:00
|
|
|
// @flow
|
2016-04-29 05:25:37 +00:00
|
|
|
import React from 'react';
|
2017-05-17 07:11:13 +00:00
|
|
|
import { Link, 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-07-13 06:27:57 +00:00
|
|
|
import { observable } from 'mobx';
|
2016-07-23 20:12:56 +00:00
|
|
|
import _ from 'lodash';
|
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-05-17 07:11:13 +00:00
|
|
|
|
2017-07-10 02:29:23 +00:00
|
|
|
import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
|
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-07-12 05:42:30 +00:00
|
|
|
import KeyboardShortcuts from 'components/KeyboardShortcuts';
|
2017-07-09 05:12:14 +00:00
|
|
|
import Avatar from 'components/Avatar';
|
2017-07-09 17:27:29 +00:00
|
|
|
import Modal from 'components/Modal';
|
2017-07-10 03:02:10 +00:00
|
|
|
import AddIcon from 'components/Icon/AddIcon';
|
2017-07-09 17:27:29 +00:00
|
|
|
import CollectionNew from 'scenes/CollectionNew';
|
2017-06-16 03:39:08 +00:00
|
|
|
|
|
|
|
import SidebarCollection from './components/SidebarCollection';
|
|
|
|
import SidebarCollectionList from './components/SidebarCollectionList';
|
|
|
|
import SidebarLink from './components/SidebarLink';
|
|
|
|
|
2017-05-12 00:23:56 +00:00
|
|
|
import UserStore from 'stores/UserStore';
|
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';
|
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-05-12 00:23:56 +00:00
|
|
|
children?: ?React.Element<any>,
|
|
|
|
actions?: ?React.Element<any>,
|
|
|
|
title?: ?React.Element<any>,
|
|
|
|
user: UserStore,
|
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
|
|
|
|
2017-07-13 06:27:57 +00:00
|
|
|
@observable modal = null;
|
|
|
|
|
2016-07-18 03:59:32 +00:00
|
|
|
@keydown(['/', 't'])
|
|
|
|
search() {
|
2017-06-16 03:39:08 +00:00
|
|
|
if (this.props.auth.authenticated)
|
2017-05-30 02:08:03 +00:00
|
|
|
_.defer(() => this.props.history.push('/search'));
|
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')
|
2016-07-23 20:12:56 +00:00
|
|
|
dashboard() {
|
2017-06-16 03:39:08 +00:00
|
|
|
if (this.props.auth.authenticated)
|
2017-05-30 02:08:03 +00:00
|
|
|
_.defer(() => this.props.history.push('/'));
|
2016-04-29 05:25:37 +00:00
|
|
|
}
|
|
|
|
|
2017-05-30 02:08:03 +00:00
|
|
|
handleLogout = () => {
|
|
|
|
this.props.auth.logout(() => this.props.history.push('/'));
|
|
|
|
};
|
2016-06-26 06:31:22 +00:00
|
|
|
|
2017-07-12 05:42:30 +00:00
|
|
|
@keydown('shift+/')
|
2017-07-13 06:27:57 +00:00
|
|
|
handleOpenKeyboardShortcuts = () => {
|
|
|
|
this.modal = 'keyboard-shortcuts';
|
|
|
|
};
|
2017-07-12 05:42:30 +00:00
|
|
|
|
2017-07-09 17:27:29 +00:00
|
|
|
handleCreateCollection = () => {
|
2017-07-13 06:27:57 +00:00
|
|
|
this.modal = 'create-collection';
|
2017-07-09 17:27:29 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
handleCloseModal = () => {
|
2017-07-13 06:27:57 +00:00
|
|
|
this.modal = null;
|
2017-07-09 16:02:44 +00:00
|
|
|
};
|
|
|
|
|
2017-05-30 02:08:03 +00:00
|
|
|
render() {
|
2017-07-10 03:02:10 +00:00
|
|
|
const { user, auth, collections, history, ui } = this.props;
|
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-06-25 07:29:40 +00:00
|
|
|
<Sidebar column editMode={ui.editMode}>
|
2017-06-16 03:39:08 +00:00
|
|
|
<Header justify="space-between">
|
|
|
|
<Flex align="center">
|
|
|
|
<LogoLink to="/">Atlas</LogoLink>
|
|
|
|
</Flex>
|
|
|
|
<DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
|
|
|
|
<MenuLink to="/settings">
|
2017-07-10 02:29:23 +00:00
|
|
|
<DropdownMenuItem>Settings</DropdownMenuItem>
|
2017-06-16 03:39:08 +00:00
|
|
|
</MenuLink>
|
2017-07-13 06:27:57 +00:00
|
|
|
<DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
|
2017-07-12 05:42:30 +00:00
|
|
|
Keyboard shortcuts
|
2017-07-13 06:27:57 +00:00
|
|
|
</DropdownMenuItem>
|
2017-06-16 03:39:08 +00:00
|
|
|
<MenuLink to="/developers">
|
2017-07-10 02:29:23 +00:00
|
|
|
<DropdownMenuItem>API</DropdownMenuItem>
|
2017-06-16 03:39:08 +00:00
|
|
|
</MenuLink>
|
2017-07-10 02:29:23 +00:00
|
|
|
<DropdownMenuItem onClick={this.handleLogout}>
|
|
|
|
Logout
|
|
|
|
</DropdownMenuItem>
|
2017-06-16 03:39:08 +00:00
|
|
|
</DropdownMenu>
|
|
|
|
</Header>
|
|
|
|
|
|
|
|
<Flex column>
|
2017-07-01 05:09:22 +00:00
|
|
|
<Scrollable>
|
|
|
|
<LinkSection>
|
|
|
|
<SidebarLink to="/search">Search</SidebarLink>
|
|
|
|
</LinkSection>
|
|
|
|
<LinkSection>
|
|
|
|
<SidebarLink to="/dashboard">Home</SidebarLink>
|
|
|
|
<SidebarLink to="/starred">Starred</SidebarLink>
|
|
|
|
</LinkSection>
|
|
|
|
<LinkSection>
|
2017-07-10 03:02:10 +00:00
|
|
|
<CreateCollection onClick={this.handleCreateCollection}>
|
|
|
|
<AddIcon />
|
|
|
|
</CreateCollection>
|
2017-07-01 05:09:22 +00:00
|
|
|
{ui.activeCollection
|
|
|
|
? <SidebarCollection
|
|
|
|
document={ui.activeDocument}
|
|
|
|
collection={ui.activeCollection}
|
2017-07-09 05:12:14 +00:00
|
|
|
history={this.props.history}
|
2017-07-01 05:09:22 +00:00
|
|
|
/>
|
2017-07-09 05:12:14 +00:00
|
|
|
: <SidebarCollectionList history={this.props.history} />}
|
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-07-09 17:27:29 +00:00
|
|
|
<Modal
|
2017-07-13 06:27:57 +00:00
|
|
|
isOpen={this.modal === 'create-collection'}
|
2017-07-09 17:27:29 +00:00
|
|
|
onRequestClose={this.handleCloseModal}
|
2017-07-10 03:02:10 +00:00
|
|
|
title="Create a collection"
|
2017-07-09 17:27:29 +00:00
|
|
|
>
|
2017-07-10 03:02:10 +00:00
|
|
|
<CollectionNew
|
|
|
|
collections={collections}
|
|
|
|
history={history}
|
|
|
|
onCollectionCreated={this.handleCloseModal}
|
|
|
|
/>
|
2017-07-09 17:27:29 +00:00
|
|
|
</Modal>
|
2017-07-12 05:42:30 +00:00
|
|
|
<Modal
|
2017-07-13 06:27:57 +00:00
|
|
|
isOpen={this.modal === 'keyboard-shortcuts'}
|
2017-07-12 05:42:30 +00:00
|
|
|
onRequestClose={this.handleCloseModal}
|
|
|
|
title="Keyboard shortcuts"
|
|
|
|
>
|
|
|
|
<KeyboardShortcuts />
|
|
|
|
</Modal>
|
2017-05-26 19:56:10 +00:00
|
|
|
</Container>
|
2016-04-29 05:25:37 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-07-10 03:02:10 +00:00
|
|
|
const CreateCollection = styled.a`
|
|
|
|
position: absolute;
|
|
|
|
top: 8px;
|
|
|
|
right: ${layout.hpadding};
|
|
|
|
|
|
|
|
svg {
|
|
|
|
opacity: .35;
|
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
svg {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
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 LogoLink = styled(Link)`
|
2017-07-01 05:09:22 +00:00
|
|
|
margin-top: 15px;
|
2017-05-26 19:56:10 +00:00
|
|
|
font-family: 'Atlas Grotesk';
|
|
|
|
font-weight: bold;
|
2017-07-09 05:12:14 +00:00
|
|
|
color: ${color.text};
|
2017-05-26 19:56:10 +00:00
|
|
|
text-decoration: none;
|
|
|
|
font-size: 16px;
|
|
|
|
`;
|
|
|
|
|
2017-05-17 07:11:13 +00:00
|
|
|
const MenuLink = styled(Link)`
|
2017-07-09 05:12:14 +00:00
|
|
|
color: ${color.text};
|
2017-05-17 07:11:13 +00:00
|
|
|
`;
|
|
|
|
|
2017-05-26 19:56:10 +00:00
|
|
|
const Content = styled(Flex)`
|
|
|
|
overflow: scroll;
|
2017-06-25 00:14:36 +00:00
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
right: 0;
|
2017-07-09 05:12:14 +00:00
|
|
|
left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
|
2017-06-25 07:29:40 +00:00
|
|
|
transition: 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-07-09 05:12:14 +00:00
|
|
|
width: ${layout.sidebarWidth};
|
|
|
|
margin-left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
|
2017-06-16 03:39:08 +00:00
|
|
|
background: rgba(250, 251, 252, 0.71);
|
|
|
|
border-right: 1px solid #eceff3;
|
2017-06-25 07:29:40 +00:00
|
|
|
transition: margin-left 200ms ease-in-out;
|
2017-06-16 03:39:08 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Header = styled(Flex)`
|
2017-07-01 05:09:22 +00:00
|
|
|
flex-shrink: 0;
|
2017-07-09 05:12:14 +00:00
|
|
|
padding: ${layout.padding};
|
2017-07-09 05:30:20 +00:00
|
|
|
padding-bottom: 10px;
|
2017-06-16 03:39:08 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const LinkSection = styled(Flex)`
|
|
|
|
flex-direction: column;
|
2017-07-09 05:12:14 +00:00
|
|
|
padding: 10px 0;
|
2017-07-10 03:02:10 +00:00
|
|
|
position: relative;
|
2017-06-16 03:39:08 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));
|