Sidebar work
This commit is contained in:
Jori Lallo
parent
42e54a3a54
commit
aa0ddd94bf
|
|
@ -6,23 +6,31 @@ import styled from 'styled-components';
|
|||
import { observer, inject } from 'mobx-react';
|
||||
import _ from 'lodash';
|
||||
import keydown from 'react-keydown';
|
||||
import searchIcon from 'assets/icons/search.svg';
|
||||
import { Flex } from 'reflexbox';
|
||||
import { textColor, headerHeight } from 'styles/constants.scss';
|
||||
import { textColor } from 'styles/constants.scss';
|
||||
|
||||
import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
|
||||
import SidebarCollection from './components/SidebarCollection';
|
||||
import SidebarCollectionList from './components/SidebarCollectionList';
|
||||
import SidebarLink from './components/SidebarLink';
|
||||
|
||||
import UserStore from 'stores/UserStore';
|
||||
import AuthStore from 'stores/AuthStore';
|
||||
import UiStore from 'stores/UiStore';
|
||||
import CollectionsStore from 'stores/CollectionsStore';
|
||||
|
||||
type Props = {
|
||||
history: Object,
|
||||
collections: CollectionsStore,
|
||||
children?: ?React.Element<any>,
|
||||
actions?: ?React.Element<any>,
|
||||
title?: ?React.Element<any>,
|
||||
loading?: boolean,
|
||||
user: UserStore,
|
||||
auth: AuthStore,
|
||||
ui: UiStore,
|
||||
search: ?boolean,
|
||||
notifications?: React.Element<any>,
|
||||
};
|
||||
|
|
@ -36,13 +44,13 @@ type Props = {
|
|||
|
||||
@keydown(['/', 't'])
|
||||
search() {
|
||||
if (this.props.auth.isAuthenticated)
|
||||
if (this.props.auth.authenticated)
|
||||
_.defer(() => this.props.history.push('/search'));
|
||||
}
|
||||
|
||||
@keydown(['d'])
|
||||
dashboard() {
|
||||
if (this.props.auth.isAuthenticated)
|
||||
if (this.props.auth.authenticated)
|
||||
_.defer(() => this.props.history.push('/'));
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +59,7 @@ type Props = {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { auth, user } = this.props;
|
||||
const { user, auth, ui, collections } = this.props;
|
||||
|
||||
return (
|
||||
<Container column auto>
|
||||
|
|
@ -69,48 +77,52 @@ type Props = {
|
|||
|
||||
{this.props.notifications}
|
||||
|
||||
<Header>
|
||||
<Flex align="center">
|
||||
<LogoLink to="/">Atlas</LogoLink>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Flex>
|
||||
<Flex align="center">
|
||||
{this.props.actions}
|
||||
</Flex>
|
||||
{auth.authenticated &&
|
||||
user &&
|
||||
<Flex>
|
||||
{this.props.search &&
|
||||
<Flex>
|
||||
<Link to="/search">
|
||||
<Search title="Search (/)">
|
||||
<SearchIcon src={searchIcon} alt="Search" />
|
||||
</Search>
|
||||
</Link>
|
||||
</Flex>}
|
||||
<DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
|
||||
<MenuLink to="/settings">
|
||||
<MenuItem>Settings</MenuItem>
|
||||
</MenuLink>
|
||||
<MenuLink to="/keyboard-shortcuts">
|
||||
<MenuItem>
|
||||
Keyboard shortcuts
|
||||
</MenuItem>
|
||||
</MenuLink>
|
||||
<MenuLink to="/developers">
|
||||
<MenuItem>API</MenuItem>
|
||||
</MenuLink>
|
||||
<MenuItem onClick={this.handleLogout}>Logout</MenuItem>
|
||||
</DropdownMenu>
|
||||
</Flex>}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Header>
|
||||
<Flex auto>
|
||||
{auth.authenticated &&
|
||||
user &&
|
||||
<Sidebar column>
|
||||
<Header justify="space-between">
|
||||
<Flex align="center">
|
||||
<LogoLink to="/">Atlas</LogoLink>
|
||||
</Flex>
|
||||
<DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
|
||||
<MenuLink to="/settings">
|
||||
<MenuItem>Settings</MenuItem>
|
||||
</MenuLink>
|
||||
<MenuLink to="/keyboard-shortcuts">
|
||||
<MenuItem>
|
||||
Keyboard shortcuts
|
||||
</MenuItem>
|
||||
</MenuLink>
|
||||
<MenuLink to="/developers">
|
||||
<MenuItem>API</MenuItem>
|
||||
</MenuLink>
|
||||
<MenuItem onClick={this.handleLogout}>Logout</MenuItem>
|
||||
</DropdownMenu>
|
||||
</Header>
|
||||
|
||||
<Content auto justify="center">
|
||||
{this.props.children}
|
||||
</Content>
|
||||
<Flex column>
|
||||
<LinkSection>
|
||||
<SidebarLink to="/search">Search</SidebarLink>
|
||||
</LinkSection>
|
||||
<LinkSection>
|
||||
<SidebarLink to="/dashboard">Dashboard</SidebarLink>
|
||||
<SidebarLink to="/starred">Starred</SidebarLink>
|
||||
</LinkSection>
|
||||
<LinkSection>
|
||||
{ui.activeCollection
|
||||
? <SidebarCollection
|
||||
collection={collections.getById(ui.activeCollection)}
|
||||
/>
|
||||
: <SidebarCollectionList />}
|
||||
</LinkSection>
|
||||
</Flex>
|
||||
</Sidebar>}
|
||||
|
||||
<Content auto justify="center">
|
||||
{this.props.children}
|
||||
</Content>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
@ -122,24 +134,8 @@ const Container = styled(Flex)`
|
|||
height: 100%;
|
||||
`;
|
||||
|
||||
const Header = styled(Flex)`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 20px;
|
||||
|
||||
z-index: 1;
|
||||
height: ${headerHeight};
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
`;
|
||||
|
||||
const LogoLink = styled(Link)`
|
||||
margin-top: 5px;
|
||||
font-family: 'Atlas Grotesk';
|
||||
font-weight: bold;
|
||||
color: ${textColor};
|
||||
|
|
@ -147,16 +143,6 @@ const LogoLink = styled(Link)`
|
|||
font-size: 16px;
|
||||
`;
|
||||
|
||||
const Search = styled(Flex)`
|
||||
margin: 0 5px;
|
||||
padding: 15px 5px 0 5px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const SearchIcon = styled.img`
|
||||
height: 20px;
|
||||
`;
|
||||
|
||||
const Avatar = styled.img`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -172,4 +158,20 @@ const Content = styled(Flex)`
|
|||
overflow: scroll;
|
||||
`;
|
||||
|
||||
export default withRouter(inject('user', 'auth')(Layout));
|
||||
const Sidebar = styled(Flex)`
|
||||
width: 250px;
|
||||
padding: 10px 20px;
|
||||
background: rgba(250, 251, 252, 0.71);
|
||||
border-right: 1px solid #eceff3;
|
||||
`;
|
||||
|
||||
const Header = styled(Flex)`
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
const LinkSection = styled(Flex)`
|
||||
margin-bottom: 20px;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Flex } from 'reflexbox';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import SidebarLink from '../SidebarLink';
|
||||
|
||||
import Collection from 'models/Collection';
|
||||
|
||||
type Props = {
|
||||
collection: Collection,
|
||||
};
|
||||
|
||||
const SidebarCollection = ({ collection }: Props) => {
|
||||
if (collection) {
|
||||
return (
|
||||
<Flex column>
|
||||
<Header>{collection.name}</Header>
|
||||
{collection.documents.map(document => (
|
||||
<SidebarLink key={document.id} to={document.url}>
|
||||
{document.title}
|
||||
</SidebarLink>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const Header = styled(Flex)`
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: #9FA6AB;
|
||||
letter-spacing: 0.04em;
|
||||
`;
|
||||
|
||||
export default observer(SidebarCollection);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
// @flow
|
||||
import SidebarCollection from './SidebarCollection';
|
||||
export default SidebarCollection;
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import { Flex } from 'reflexbox';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import SidebarLink from '../SidebarLink';
|
||||
|
||||
import CollectionsStore from 'stores/CollectionsStore';
|
||||
|
||||
type Props = {
|
||||
collections: CollectionsStore,
|
||||
};
|
||||
|
||||
const SidebarCollectionList = observer(({ collections }: Props) => {
|
||||
return (
|
||||
<Flex column>
|
||||
<Header>Collections</Header>
|
||||
{collections.data.map(collection => (
|
||||
<SidebarLink key={collection.id} to={collection.url}>
|
||||
{collection.name}
|
||||
</SidebarLink>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
});
|
||||
|
||||
const Header = styled(Flex)`
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: #9FA6AB;
|
||||
letter-spacing: 0.04em;
|
||||
`;
|
||||
|
||||
export default inject('collections')(SidebarCollectionList);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
// @flow
|
||||
import SidebarCollectionList from './SidebarCollectionList';
|
||||
export default SidebarCollectionList;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { Flex } from 'reflexbox';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const activeStyle = {
|
||||
color: '#000000',
|
||||
};
|
||||
|
||||
const SidebarLink = observer(props => (
|
||||
<LinkContainer>
|
||||
<NavLink {...props} activeStyle={activeStyle} />
|
||||
</LinkContainer>
|
||||
));
|
||||
|
||||
const LinkContainer = styled(Flex)`
|
||||
padding: 5px 0;
|
||||
|
||||
a {
|
||||
color: #848484;
|
||||
}
|
||||
`;
|
||||
|
||||
export default SidebarLink;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
// @flow
|
||||
import SidebarLink from './SidebarLink';
|
||||
export default SidebarLink;
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import { Flex } from 'reflexbox';
|
||||
import Tree from 'components/Tree';
|
||||
import Separator from './components/Separator';
|
||||
|
||||
import styles from './Sidebar.scss';
|
||||
import classNames from 'classnames/bind';
|
||||
const cx = classNames.bind(styles);
|
||||
|
||||
import SidebarStore from './SidebarStore';
|
||||
|
||||
type Props = {
|
||||
open?: boolean,
|
||||
onToggle: Function,
|
||||
navigationTree: Object,
|
||||
onNavigationUpdate: Function,
|
||||
onNodeCollapse: Function,
|
||||
history: Object,
|
||||
};
|
||||
|
||||
@observer class Sidebar extends React.Component {
|
||||
props: Props;
|
||||
store: SidebarStore;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.store = new SidebarStore();
|
||||
}
|
||||
|
||||
toggleEdit = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
this.store.toggleEdit();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Flex>
|
||||
{this.props.open &&
|
||||
<Flex column className={cx(styles.sidebar)}>
|
||||
<Flex auto className={cx(styles.content)}>
|
||||
<Tree
|
||||
paddingLeft={10}
|
||||
tree={this.props.navigationTree}
|
||||
allowUpdates={this.store.isEditing}
|
||||
onChange={this.props.onNavigationUpdate}
|
||||
onCollapse={this.props.onNodeCollapse}
|
||||
history={this.props.history}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex auto className={styles.actions}>
|
||||
{this.store.isEditing &&
|
||||
<span className={styles.action}>
|
||||
Drag & drop to organize <Separator />
|
||||
</span>}
|
||||
<span
|
||||
role="button"
|
||||
onClick={this.toggleEdit}
|
||||
className={cx(styles.action, { active: this.store.isEditing })}
|
||||
>
|
||||
{!this.store.isEditing ? 'Organize documents' : 'Done'}
|
||||
</span>
|
||||
</Flex>
|
||||
</Flex>}
|
||||
<div
|
||||
onClick={this.props.onToggle}
|
||||
className={cx(styles.sidebarToggle, { active: this.store.isEditing })}
|
||||
title="Toggle sidebar (Cmd+/)"
|
||||
>
|
||||
<img
|
||||
src={require('assets/icons/menu.svg')}
|
||||
className={styles.menuIcon}
|
||||
alt="Menu"
|
||||
/>
|
||||
</div>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(Sidebar);
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
@import '~styles/constants.scss';
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
border-right: 1px solid #eee;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sidebarToggle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 60px;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.menuIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
margin-top: 18px;
|
||||
height: 28px;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px 20px 20px 5px;
|
||||
}
|
||||
|
||||
.tree {
|
||||
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.action {
|
||||
color: $gray;
|
||||
|
||||
&.active {
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// @flow
|
||||
import { observable, action } from 'mobx';
|
||||
|
||||
class SidebarStore {
|
||||
@observable isEditing = false;
|
||||
|
||||
/* Actions */
|
||||
|
||||
@action toggleEdit = () => {
|
||||
this.isEditing = !this.isEditing;
|
||||
};
|
||||
}
|
||||
|
||||
export default SidebarStore;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
|
||||
import styles from './Separator.scss';
|
||||
|
||||
class Separator extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<span className={styles.separator}>
|
||||
·
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Separator;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@import '~styles/constants.scss';
|
||||
|
||||
.separator {
|
||||
padding: 0 10px;
|
||||
color: $lightGray;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// @flow
|
||||
import Separator from './Separator';
|
||||
export default Separator;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// @flow
|
||||
import Sidebar from './Sidebar';
|
||||
export default Sidebar;
|
||||
|
|
@ -3,9 +3,9 @@ import React from 'react';
|
|||
import { observer, inject } from 'mobx-react';
|
||||
import { Redirect } from 'react-router';
|
||||
import _ from 'lodash';
|
||||
import { notFoundUrl } from 'utils/routeHelpers';
|
||||
|
||||
import CollectionsStore from 'stores/CollectionsStore';
|
||||
import CollectionStore from './CollectionStore';
|
||||
|
||||
import Layout from 'components/Layout';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
|
|
@ -16,48 +16,28 @@ type Props = {
|
|||
match: Object,
|
||||
};
|
||||
|
||||
type State = {
|
||||
redirectUrl: ?string,
|
||||
};
|
||||
|
||||
@observer class Collection extends React.Component {
|
||||
props: Props;
|
||||
state: State;
|
||||
store: CollectionStore;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
redirectUrl: null,
|
||||
};
|
||||
this.store = new CollectionStore();
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
const { id } = this.props.match.params;
|
||||
this.props.collections
|
||||
.getById(id)
|
||||
.then(collection => {
|
||||
if (collection.type !== 'atlas')
|
||||
throw new Error('TODO code up non-atlas collections');
|
||||
|
||||
this.setState({
|
||||
redirectUrl: collection.documents[0].url,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.setState({
|
||||
redirectUrl: notFoundUrl(),
|
||||
});
|
||||
});
|
||||
this.store.fetchCollection(id);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Layout>
|
||||
{this.state.redirectUrl && <Redirect to={this.state.redirectUrl} />}
|
||||
|
||||
<CenteredContent>
|
||||
<PreviewLoading />
|
||||
</CenteredContent>
|
||||
{this.store.redirectUrl
|
||||
? <Redirect to={this.store.redirectUrl} />
|
||||
: <CenteredContent>
|
||||
<PreviewLoading />
|
||||
</CenteredContent>}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,30 @@
|
|||
// @flow
|
||||
import { observable, action, computed } from 'mobx';
|
||||
import { observable, action } from 'mobx';
|
||||
import invariant from 'invariant';
|
||||
import { client } from 'utils/ApiClient';
|
||||
import Collection from 'models/Collection';
|
||||
|
||||
const store = new class AtlasStore {
|
||||
@observable collection: ?(Collection & { recentDocuments?: Object[] });
|
||||
import { notFoundUrl } from 'utils/routeHelpers';
|
||||
|
||||
class CollectionStore {
|
||||
@observable redirectUrl: ?string;
|
||||
@observable isFetching = true;
|
||||
|
||||
/* Computed */
|
||||
|
||||
@computed get isLoaded(): boolean {
|
||||
return !this.isFetching && !!this.collection;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
|
||||
@action fetchCollection = async (id: string, successCallback: Function) => {
|
||||
@action fetchCollection = async (id: string) => {
|
||||
this.isFetching = true;
|
||||
this.collection = null;
|
||||
|
||||
try {
|
||||
const res = await client.get('/collections.info', { id });
|
||||
invariant(res && res.data, 'Data should be available');
|
||||
const { data } = res;
|
||||
this.collection = new Collection(data);
|
||||
successCallback(data);
|
||||
|
||||
if (data.type === 'atlas') this.redirectUrl = data.documents[0].url;
|
||||
else throw new Error('TODO code up non-atlas collections');
|
||||
} catch (e) {
|
||||
console.error('Something went wrong');
|
||||
this.redirectUrl = notFoundUrl();
|
||||
}
|
||||
this.isFetching = false;
|
||||
};
|
||||
}();
|
||||
}
|
||||
|
||||
export default store;
|
||||
export default CollectionStore;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
import React, { Component } from 'react';
|
||||
import get from 'lodash/get';
|
||||
import styled from 'styled-components';
|
||||
import { observer } from 'mobx-react';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import { withRouter, Prompt } from 'react-router';
|
||||
import { Flex } from 'reflexbox';
|
||||
|
||||
import UiStore from 'stores/UiStore';
|
||||
|
||||
import DocumentStore from './DocumentStore';
|
||||
import Breadcrumbs from './components/Breadcrumbs';
|
||||
import Menu from './components/Menu';
|
||||
|
|
@ -26,6 +28,7 @@ type Props = {
|
|||
history: Object,
|
||||
keydown: Object,
|
||||
newChildDocument?: boolean,
|
||||
ui: UiStore,
|
||||
};
|
||||
|
||||
@observer class Document extends Component {
|
||||
|
|
@ -34,10 +37,13 @@ type Props = {
|
|||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.store = new DocumentStore({ history: this.props.history });
|
||||
this.store = new DocumentStore({
|
||||
history: this.props.history,
|
||||
ui: props.ui,
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
componentDidMount() {
|
||||
if (this.props.newDocument) {
|
||||
this.store.collectionId = this.props.match.params.id;
|
||||
this.store.newDocument = true;
|
||||
|
|
@ -53,7 +59,11 @@ type Props = {
|
|||
this.store.newDocument = false;
|
||||
this.store.fetchDocument();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillUnmout() {
|
||||
this.props.ui.clearActiveCollection();
|
||||
}
|
||||
|
||||
onEdit = () => {
|
||||
const url = `${this.store.document.url}/edit`;
|
||||
|
|
@ -163,4 +173,4 @@ const Container = styled.div`
|
|||
width: 50em;
|
||||
`;
|
||||
|
||||
export default withRouter(Document);
|
||||
export default withRouter(inject('ui')(Document));
|
||||
|
|
|
|||
|
|
@ -38,8 +38,7 @@ class CollectionsStore {
|
|||
}
|
||||
};
|
||||
|
||||
@action getById = async (id: string): Promise<Collection> => {
|
||||
if (!this.isLoaded) await this.fetch();
|
||||
getById = (id: string): Collection => {
|
||||
return _.find(this.data, { id });
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,18 @@
|
|||
// @flow
|
||||
import { observable, action, computed, autorunAsync } from 'mobx';
|
||||
|
||||
const UI_STORE = 'UI_STORE';
|
||||
import { observable, action } from 'mobx';
|
||||
|
||||
class UiStore {
|
||||
@observable sidebar: boolean = false;
|
||||
|
||||
/* Computed */
|
||||
|
||||
@computed get asJson(): string {
|
||||
return JSON.stringify({
|
||||
sidebar: this.sidebar,
|
||||
});
|
||||
}
|
||||
@observable activeCollection: ?string;
|
||||
|
||||
/* Actions */
|
||||
|
||||
@action toggleSidebar = (): void => {
|
||||
this.sidebar = !this.sidebar;
|
||||
@action setActiveCollection = (id: string): void => {
|
||||
this.activeCollection = id;
|
||||
};
|
||||
|
||||
constructor() {
|
||||
// Rehydrate
|
||||
const data = JSON.parse(localStorage.getItem(UI_STORE) || '{}');
|
||||
this.sidebar = data.sidebar;
|
||||
|
||||
autorunAsync(() => {
|
||||
localStorage.setItem(UI_STORE, this.asJson);
|
||||
});
|
||||
}
|
||||
@action clearActiveCollection = (): void => {
|
||||
this.activeCollection = null;
|
||||
};
|
||||
}
|
||||
|
||||
export default UiStore;
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@ html, body, .viewport {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
color: $textColor;
|
||||
color: #617180;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
|
|
@ -32,6 +32,10 @@ body {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
|
@ -41,7 +45,7 @@ svg {
|
|||
max-height: 100%;
|
||||
}
|
||||
a {
|
||||
color: $actionColor;
|
||||
color: #005AA6;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,19 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Atlas</title>
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#root {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
<head>
|
||||
<title>Atlas</title>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex;
|
||||
}
|
||||
<body>
|
||||
</body>
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style='display: flex; width: 100%; height: 100%;'>
|
||||
<div id="root">
|
||||
<div class="container">
|
||||
<div class="header"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue