Settings, Slack link and landing page
This commit is contained in:
@ -1,17 +1,30 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { browserHistory } from 'react-router';
|
||||||
|
|
||||||
import styles from './DropdownMenu.scss';
|
import styles from './DropdownMenu.scss';
|
||||||
|
|
||||||
const MenuItem = (props) => {
|
class MenuItem extends React.Component {
|
||||||
return (
|
onClick = () => {
|
||||||
<div
|
if (this.props.to) {
|
||||||
className={ styles.menuItem }
|
browserHistory.push(this.props.to);
|
||||||
onClick={ props.onClick}
|
} else {
|
||||||
>{ props.children }</div>
|
this.props.onClick();
|
||||||
);
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={ styles.menuItem }
|
||||||
|
onClick={ this.onClick }
|
||||||
|
>{ this.props.children }</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
MenuItem.propTypes = {
|
MenuItem.propTypes = {
|
||||||
onClick: React.PropTypes.func,
|
onClick: React.PropTypes.func,
|
||||||
|
to: React.PropTypes.string,
|
||||||
children: React.PropTypes.node.isRequired,
|
children: React.PropTypes.node.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -63,4 +76,4 @@ class DropdownMenu extends React.Component {
|
|||||||
export default DropdownMenu;
|
export default DropdownMenu;
|
||||||
export {
|
export {
|
||||||
MenuItem,
|
MenuItem,
|
||||||
}
|
}
|
||||||
|
@ -43,6 +43,7 @@
|
|||||||
a {
|
a {
|
||||||
color: $textColor;
|
color: $textColor;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -96,6 +96,7 @@ class Layout extends React.Component {
|
|||||||
src={ user.user.avatarUrl }
|
src={ user.user.avatarUrl }
|
||||||
/> }
|
/> }
|
||||||
>
|
>
|
||||||
|
<MenuItem to="/settings">Settings</MenuItem>
|
||||||
<MenuItem onClick={ user.logout }>Logout</MenuItem>
|
<MenuItem onClick={ user.logout }>Logout</MenuItem>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
@ -1,11 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
|
|
||||||
import styles from './SlackAuthLink.scss';
|
|
||||||
|
|
||||||
@observer(['user'])
|
@observer(['user'])
|
||||||
class SlackAuthLink extends React.Component {
|
class SlackAuthLink extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
children: React.PropTypes.node.isRequired,
|
||||||
scopes: React.PropTypes.arrayOf(React.PropTypes.string),
|
scopes: React.PropTypes.arrayOf(React.PropTypes.string),
|
||||||
user: React.PropTypes.object.isRequired,
|
user: React.PropTypes.object.isRequired,
|
||||||
redirectUri: React.PropTypes.string,
|
redirectUri: React.PropTypes.string,
|
||||||
@ -38,7 +37,7 @@ class SlackAuthLink extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<a href={ this.slackUrl() } className={ styles.link }>Authorize /w Slack</a>
|
<a href={ this.slackUrl() }>{ this.props.children }</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +0,0 @@
|
|||||||
.link {
|
|
||||||
text-decoration: none;
|
|
||||||
background: no-repeat left/10% url(./assets/slack_icon.svg);
|
|
||||||
padding: 5px 0 4px 36px;
|
|
||||||
font-size: 1.4em;
|
|
||||||
}
|
|
@ -24,6 +24,7 @@ import Atlas from 'scenes/Atlas';
|
|||||||
import DocumentScene from 'scenes/DocumentScene';
|
import DocumentScene from 'scenes/DocumentScene';
|
||||||
import DocumentEdit from 'scenes/DocumentEdit';
|
import DocumentEdit from 'scenes/DocumentEdit';
|
||||||
import Search from 'scenes/Search';
|
import Search from 'scenes/Search';
|
||||||
|
import Settings from 'scenes/Settings';
|
||||||
import SlackAuth from 'scenes/SlackAuth';
|
import SlackAuth from 'scenes/SlackAuth';
|
||||||
import Error404 from 'scenes/Error404';
|
import Error404 from 'scenes/Error404';
|
||||||
|
|
||||||
@ -69,9 +70,14 @@ render((
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Route path="/search" component={ Search } onEnter={ requireAuth } />
|
<Route path="/search" component={ Search } onEnter={ requireAuth } />
|
||||||
|
<Route path="/settings" component={ Settings } onEnter={ requireAuth } />
|
||||||
|
|
||||||
<Route path="/auth/slack" component={ SlackAuth } />
|
<Route path="/auth/slack" component={ SlackAuth } />
|
||||||
<Route path="/auth/slack/commands" component={ SlackAuth } apiPath="/auth.slackCommands" />
|
<Route
|
||||||
|
path="/auth/slack/commands"
|
||||||
|
component={ SlackAuth }
|
||||||
|
apiPath="/auth.slackCommands"
|
||||||
|
/>
|
||||||
|
|
||||||
<Route path="/404" component={ Error404 } />
|
<Route path="/404" component={ Error404 } />
|
||||||
<Redirect from="*" to="/404" />
|
<Redirect from="*" to="/404" />
|
||||||
|
@ -8,7 +8,6 @@ import Layout from 'components/Layout';
|
|||||||
import AtlasPreview from 'components/AtlasPreview';
|
import AtlasPreview from 'components/AtlasPreview';
|
||||||
import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
|
import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
|
||||||
import CenteredContent from 'components/CenteredContent';
|
import CenteredContent from 'components/CenteredContent';
|
||||||
import SlackAuthLink from 'components/SlackAuthLink';
|
|
||||||
|
|
||||||
@observer(['user'])
|
@observer(['user'])
|
||||||
class Dashboard extends React.Component {
|
class Dashboard extends React.Component {
|
||||||
@ -32,7 +31,6 @@ class Dashboard extends React.Component {
|
|||||||
return (<AtlasPreview key={ collection.id } data={ collection } />);
|
return (<AtlasPreview key={ collection.id } data={ collection } />);
|
||||||
}) }
|
}) }
|
||||||
</Flex>
|
</Flex>
|
||||||
<SlackAuthLink scopes={ ["commands"] } redirectUri={ `${URL}/auth/slack/commands` } />
|
|
||||||
</CenteredContent>
|
</CenteredContent>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
@ -23,28 +23,20 @@ export default class Home extends React.Component {
|
|||||||
<div className={ styles.container }>
|
<div className={ styles.container }>
|
||||||
<div className={ styles.content }>
|
<div className={ styles.content }>
|
||||||
<div className={ styles.intro }>
|
<div className={ styles.intro }>
|
||||||
<p>
|
<h1>Atlas</h1>
|
||||||
Hi there,
|
<p>Simple, fast, markdown.</p>
|
||||||
</p>
|
<p>We're building a modern wiki for engineering teams.</p>
|
||||||
<p>
|
|
||||||
We're building the best place for engineers, designers and teams to
|
|
||||||
share ideas, tell stories and build knowledge.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>**Atlas**</strong> can start as a wiki, but it's really
|
|
||||||
up to you what you want to make of it:
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
- Write documentation in <i>_markdown_</i><br/>
|
|
||||||
- Build a blog around the API<br/>
|
|
||||||
- Hack the frontend for your needs (coming!)<br/>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
We're just getting started.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className={ styles.action }>
|
<div className={ styles.action }>
|
||||||
<SlackAuthLink />
|
<SlackAuthLink>
|
||||||
|
<img
|
||||||
|
alt="Sign in with Slack"
|
||||||
|
height="40"
|
||||||
|
width="172"
|
||||||
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
56
frontend/scenes/Settings/Settings.js
Normal file
56
frontend/scenes/Settings/Settings.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
|
||||||
|
import { Flex } from 'reflexbox';
|
||||||
|
import Layout, { Title } from 'components/Layout';
|
||||||
|
import CenteredContent from 'components/CenteredContent';
|
||||||
|
import SlackAuthLink from 'components/SlackAuthLink';
|
||||||
|
|
||||||
|
import styles from './Settings.scss';
|
||||||
|
|
||||||
|
import SettingsStore from './SettingsStore';
|
||||||
|
|
||||||
|
@observer
|
||||||
|
class Settings extends React.Component {
|
||||||
|
static store;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.store = new SettingsStore();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const title = (
|
||||||
|
<Title>
|
||||||
|
Settings
|
||||||
|
</Title>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout
|
||||||
|
title={ title }
|
||||||
|
titleText="Settings"
|
||||||
|
search={ false }
|
||||||
|
loading={ this.store.isFetching }
|
||||||
|
>
|
||||||
|
<CenteredContent>
|
||||||
|
<h2 className={ styles.sectionHeader }>Slack</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Connect Atlas to your Slack to instantly search for your documents
|
||||||
|
using <code>/atlas</code> command.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<SlackAuthLink
|
||||||
|
scopes={ ['commands'] }
|
||||||
|
redirectUri={ `${URL}/auth/slack/commands` }
|
||||||
|
>
|
||||||
|
<img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" />
|
||||||
|
</SlackAuthLink>
|
||||||
|
</CenteredContent>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Settings;
|
4
frontend/scenes/Settings/Settings.scss
Normal file
4
frontend/scenes/Settings/Settings.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
.sectionHeader {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
7
frontend/scenes/Settings/SettingsStore.js
Normal file
7
frontend/scenes/Settings/SettingsStore.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { observable, action, runInAction } from 'mobx';
|
||||||
|
// import { client } from 'utils/ApiClient';
|
||||||
|
|
||||||
|
class SearchStore {
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SearchStore;
|
2
frontend/scenes/Settings/index.js
Normal file
2
frontend/scenes/Settings/index.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import Settings from './Settings';
|
||||||
|
export default Settings;
|
Reference in New Issue
Block a user