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

Layout changes

Browse Source
This commit is contained in:
Jori Lallo
2016-09-12 22:19:59 -07:00
parent e7ff801b97
commit 4493325429
2 changed files with 56 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,13 +36,13 @@ class Layout extends React.Component {
@keydown(['/', 't']) @keydown(['/', 't'])
search() { search() {
// if (!this.props.search) return; if (!this.props.user) return;
_.defer(() => browserHistory.push('/search')); _.defer(() => browserHistory.push('/search'));
} }
@keydown(['d']) @keydown(['d'])
dashboard() { dashboard() {
// if (!this.props.search) return; if (!this.props.user) return;
_.defer(() => browserHistory.push('/')); _.defer(() => browserHistory.push('/'));
} }
@ -75,34 +75,36 @@ class Layout extends React.Component {
</span> </span>
</div> </div>
<Flex className={ styles.headerRight }> <Flex className={ styles.headerRight }>
{ user.user && ( <Flex>
<Flex> <Flex align="center" className={ styles.actions }>
<Flex align="center" className={ styles.actions }> { this.props.actions }
{ this.props.actions }
</Flex>
{ this.props.search && (
<Flex>
<div
onClick={ this.search }
className={ styles.search }
title="Search (/)"
>
<img src={ require('assets/icons/search.svg') } alt="Search" />
</div>
</Flex>
) }
<DropdownMenu
label={ <Avatar
circle
size={ 24 }
src={ user.user.avatarUrl }
/> }
>
<MenuItem to="/settings">Settings</MenuItem>
<MenuItem onClick={ user.logout }>Logout</MenuItem>
</DropdownMenu>
</Flex> </Flex>
) } { user.user && (
<Flex>
{ this.props.search && (
<Flex>
<div
onClick={ this.search }
className={ styles.search }
title="Search (/)"
>
<img src={ require('assets/icons/search.svg') } alt="Search" />
</div>
</Flex>
) }
<DropdownMenu
label={ <Avatar
circle
size={ 24 }
src={ user.user.avatarUrl }
/> }
>
<MenuItem to="/settings">Settings</MenuItem>
<MenuItem onClick={ user.logout }>Logout</MenuItem>
</DropdownMenu>
</Flex>
) }
</Flex>
</Flex> </Flex>
</div> </div>

45
frontend/scenes/Home/Home.js
View File

@ -2,6 +2,9 @@ import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { browserHistory } from 'react-router' import { browserHistory } from 'react-router'
import { Flex } from 'reflexbox';
import Layout from 'components/Layout';
import CenteredContent from 'components/CenteredContent';
import SlackAuthLink from 'components/SlackAuthLink'; import SlackAuthLink from 'components/SlackAuthLink';
import styles from './Home.scss'; import styles from './Home.scss';
@ -20,26 +23,28 @@ export default class Home extends React.Component {
render() { render() {
return ( return (
<div className={ styles.container }> <Flex auto>
<div className={ styles.content }> <Layout>
<div className={ styles.intro }> <CenteredContent>
<h1>Atlas</h1> <div className={ styles.intro }>
<p>Simple, fast, markdown.</p> <h1>Atlas</h1>
<p>We're building a modern wiki for engineering teams.</p> <p>Simple, fast, markdown.</p>
</div> <p>We're building a modern wiki for engineering teams.</p>
<div className={ styles.action }> </div>
<SlackAuthLink> <div className={ styles.action }>
<img <SlackAuthLink>
alt="Sign in with Slack" <img
height="40" alt="Sign in with Slack"
width="172" height="40"
src="https://platform.slack-edge.com/img/sign_in_with_slack.png" width="172"
srcSet="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x" src="https://platform.slack-edge.com/img/sign_in_with_slack.png"
/> srcSet="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"
</SlackAuthLink> />
</div> </SlackAuthLink>
</div> </div>
</div> </CenteredContent>
</Layout>
</Flex>
); );
} }
} }