coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Sidebar work

Browse Source
This commit is contained in:
Jori Lallo
2017-06-15 20:39:08 -07:00
parent 42e54a3a54
commit aa0ddd94bf
21 changed files with 250 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
frontend/components/Layout/Layout.js
View File

@ -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));

39
frontend/components/Layout/components/SidebarCollection/SidebarCollection.js Normal file
View File

@ -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);

3
frontend/components/Layout/components/SidebarCollection/index.js Normal file
View File

@ -0,0 +1,3 @@
// @flow
import SidebarCollection from './SidebarCollection';
export default SidebarCollection;

36
frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js Normal file
View File

@ -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);

3
frontend/components/Layout/components/SidebarCollectionList/index.js Normal file
View File

@ -0,0 +1,3 @@
// @flow
import SidebarCollectionList from './SidebarCollectionList';
export default SidebarCollectionList;

26
frontend/components/Layout/components/SidebarLink/SidebarLink.js Normal file
View File

@ -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;

3
frontend/components/Layout/components/SidebarLink/index.js Normal file
View File

@ -0,0 +1,3 @@
// @flow
import SidebarLink from './SidebarLink';
export default SidebarLink;

85
frontend/components/Sidebar/Sidebar.js
View File

@ -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 />&nbsp;
</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);

56
frontend/components/Sidebar/Sidebar.scss
View File

@ -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;
}
}

14
frontend/components/Sidebar/SidebarStore.js
View File

@ -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;

16
frontend/components/Sidebar/components/Separator/Separator.js
View File

@ -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;

6
frontend/components/Sidebar/components/Separator/Separator.scss
View File

@ -1,6 +0,0 @@
@import '~styles/constants.scss';
.separator {
padding: 0 10px;
color: $lightGray;
}

3
frontend/components/Sidebar/components/Separator/index.js
View File

@ -1,3 +0,0 @@
// @flow
import Separator from './Separator';
export default Separator;

3
frontend/components/Sidebar/index.js
View File

@ -1,3 +0,0 @@
// @flow
import Sidebar from './Sidebar';
export default Sidebar;