From 29665621b38c383bb9d39b9a4ad018ef999da47b Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Tue, 23 Aug 2016 20:39:31 -0700 Subject: [PATCH] Settings, Slack link and landing page --- .../components/DropdownMenu/DropdownMenu.js | 31 +++++++--- .../components/DropdownMenu/DropdownMenu.scss | 1 + frontend/components/Layout/Layout.js | 1 + .../components/SlackAuthLink/SlackAuthLink.js | 5 +- .../SlackAuthLink/SlackAuthLink.scss | 6 -- frontend/index.js | 8 ++- frontend/scenes/Dashboard/Dashboard.js | 2 - frontend/scenes/Home/Home.js | 32 ++++------- frontend/scenes/Settings/Settings.js | 56 +++++++++++++++++++ frontend/scenes/Settings/Settings.scss | 4 ++ frontend/scenes/Settings/SettingsStore.js | 7 +++ frontend/scenes/Settings/index.js | 2 + 12 files changed, 114 insertions(+), 41 deletions(-) delete mode 100644 frontend/components/SlackAuthLink/SlackAuthLink.scss create mode 100644 frontend/scenes/Settings/Settings.js create mode 100644 frontend/scenes/Settings/Settings.scss create mode 100644 frontend/scenes/Settings/SettingsStore.js create mode 100644 frontend/scenes/Settings/index.js diff --git a/frontend/components/DropdownMenu/DropdownMenu.js b/frontend/components/DropdownMenu/DropdownMenu.js index d18876bc..8590d3bf 100644 --- a/frontend/components/DropdownMenu/DropdownMenu.js +++ b/frontend/components/DropdownMenu/DropdownMenu.js @@ -1,17 +1,30 @@ import React from 'react'; +import { browserHistory } from 'react-router'; + import styles from './DropdownMenu.scss'; -const MenuItem = (props) => { - return ( -
{ props.children }
- ); -}; +class MenuItem extends React.Component { + onClick = () => { + if (this.props.to) { + browserHistory.push(this.props.to); + } else { + this.props.onClick(); + } + } + + render() { + return ( +
{ this.props.children }
+ ); + } +} MenuItem.propTypes = { onClick: React.PropTypes.func, + to: React.PropTypes.string, children: React.PropTypes.node.isRequired, }; @@ -63,4 +76,4 @@ class DropdownMenu extends React.Component { export default DropdownMenu; export { MenuItem, -} \ No newline at end of file +} diff --git a/frontend/components/DropdownMenu/DropdownMenu.scss b/frontend/components/DropdownMenu/DropdownMenu.scss index 14a83373..545694e1 100644 --- a/frontend/components/DropdownMenu/DropdownMenu.scss +++ b/frontend/components/DropdownMenu/DropdownMenu.scss @@ -43,6 +43,7 @@ a { color: $textColor; text-decoration: none; + width: 100%; } &:hover { diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 44703b2b..adc2d510 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -96,6 +96,7 @@ class Layout extends React.Component { src={ user.user.avatarUrl } /> } > + Settings Logout diff --git a/frontend/components/SlackAuthLink/SlackAuthLink.js b/frontend/components/SlackAuthLink/SlackAuthLink.js index 3e146148..d95e2380 100644 --- a/frontend/components/SlackAuthLink/SlackAuthLink.js +++ b/frontend/components/SlackAuthLink/SlackAuthLink.js @@ -1,11 +1,10 @@ import React from 'react'; import { observer } from 'mobx-react'; -import styles from './SlackAuthLink.scss'; - @observer(['user']) class SlackAuthLink extends React.Component { static propTypes = { + children: React.PropTypes.node.isRequired, scopes: React.PropTypes.arrayOf(React.PropTypes.string), user: React.PropTypes.object.isRequired, redirectUri: React.PropTypes.string, @@ -38,7 +37,7 @@ class SlackAuthLink extends React.Component { render() { return ( - Authorize /w Slack + { this.props.children } ); } } diff --git a/frontend/components/SlackAuthLink/SlackAuthLink.scss b/frontend/components/SlackAuthLink/SlackAuthLink.scss deleted file mode 100644 index d1045d93..00000000 --- a/frontend/components/SlackAuthLink/SlackAuthLink.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/frontend/index.js b/frontend/index.js index 6d496192..0746ae45 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -24,6 +24,7 @@ import Atlas from 'scenes/Atlas'; import DocumentScene from 'scenes/DocumentScene'; import DocumentEdit from 'scenes/DocumentEdit'; import Search from 'scenes/Search'; +import Settings from 'scenes/Settings'; import SlackAuth from 'scenes/SlackAuth'; import Error404 from 'scenes/Error404'; @@ -69,9 +70,14 @@ render(( /> + - + diff --git a/frontend/scenes/Dashboard/Dashboard.js b/frontend/scenes/Dashboard/Dashboard.js index 04ebdd38..a8f19f4c 100644 --- a/frontend/scenes/Dashboard/Dashboard.js +++ b/frontend/scenes/Dashboard/Dashboard.js @@ -8,7 +8,6 @@ import Layout from 'components/Layout'; import AtlasPreview from 'components/AtlasPreview'; import AtlasPreviewLoading from 'components/AtlasPreviewLoading'; import CenteredContent from 'components/CenteredContent'; -import SlackAuthLink from 'components/SlackAuthLink'; @observer(['user']) class Dashboard extends React.Component { @@ -32,7 +31,6 @@ class Dashboard extends React.Component { return (); }) } - diff --git a/frontend/scenes/Home/Home.js b/frontend/scenes/Home/Home.js index 270503da..a39f6022 100644 --- a/frontend/scenes/Home/Home.js +++ b/frontend/scenes/Home/Home.js @@ -23,28 +23,20 @@ export default class Home extends React.Component {
-

- Hi there, -

-

- We're building the best place for engineers, designers and teams to - share ideas, tell stories and build knowledge. -

-

- **Atlas** can start as a wiki, but it's really - up to you what you want to make of it: -

-

- - Write documentation in _markdown_
- - Build a blog around the API
- - Hack the frontend for your needs (coming!)
-

-

- We're just getting started. -

+

Atlas

+

Simple, fast, markdown.

+

We're building a modern wiki for engineering teams.

- + + Sign in with Slack +
diff --git a/frontend/scenes/Settings/Settings.js b/frontend/scenes/Settings/Settings.js new file mode 100644 index 00000000..369f65e3 --- /dev/null +++ b/frontend/scenes/Settings/Settings.js @@ -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 = ( + + Settings + + ); + + return ( + + +

Slack

+ +

+ Connect Atlas to your Slack to instantly search for your documents + using /atlas command. +

+ + + Add to Slack + + + + ); + } +} + +export default Settings; diff --git a/frontend/scenes/Settings/Settings.scss b/frontend/scenes/Settings/Settings.scss new file mode 100644 index 00000000..8074d9f0 --- /dev/null +++ b/frontend/scenes/Settings/Settings.scss @@ -0,0 +1,4 @@ + +.sectionHeader { + border-bottom: 1px solid #eee; +} diff --git a/frontend/scenes/Settings/SettingsStore.js b/frontend/scenes/Settings/SettingsStore.js new file mode 100644 index 00000000..1b0502eb --- /dev/null +++ b/frontend/scenes/Settings/SettingsStore.js @@ -0,0 +1,7 @@ +import { observable, action, runInAction } from 'mobx'; +// import { client } from 'utils/ApiClient'; + +class SearchStore { +}; + +export default SearchStore; diff --git a/frontend/scenes/Settings/index.js b/frontend/scenes/Settings/index.js new file mode 100644 index 00000000..469bf960 --- /dev/null +++ b/frontend/scenes/Settings/index.js @@ -0,0 +1,2 @@ +import Settings from './Settings'; +export default Settings;