diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 9af95ec4..b30c2b63 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -154,8 +154,12 @@ const MenuLink = styled(Link)` `; const Content = styled(Flex)` - height: 100%; overflow: scroll; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 250px; `; const Sidebar = styled(Flex)` diff --git a/frontend/index.js b/frontend/index.js index 1e8f171e..6a8224ab 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -31,6 +31,8 @@ import Flatpage from 'scenes/Flatpage'; import ErrorAuth from 'scenes/ErrorAuth'; import Error404 from 'scenes/Error404'; +import Layout from 'components/Layout'; + import flatpages from 'static/flatpages'; let DevTools; @@ -94,33 +96,35 @@ render( - - - - + + + + + - - - + + + - - - + + + - - + + - - - + + + + diff --git a/frontend/scenes/Collection/Collection.js b/frontend/scenes/Collection/Collection.js index 7ac85440..cd00815c 100644 --- a/frontend/scenes/Collection/Collection.js +++ b/frontend/scenes/Collection/Collection.js @@ -7,7 +7,6 @@ import _ from 'lodash'; import CollectionsStore from 'stores/CollectionsStore'; import CollectionStore from './CollectionStore'; -import Layout from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; import PreviewLoading from 'components/PreviewLoading'; @@ -31,15 +30,11 @@ type Props = { }; render() { - return ( - - {this.store.redirectUrl - ? - : - - } - - ); + return this.store.redirectUrl + ? + : + + ; } } export default inject('collections')(Collection); diff --git a/frontend/scenes/Dashboard/Dashboard.js b/frontend/scenes/Dashboard/Dashboard.js index 57ed95bb..af6ff217 100644 --- a/frontend/scenes/Dashboard/Dashboard.js +++ b/frontend/scenes/Dashboard/Dashboard.js @@ -5,7 +5,6 @@ import { Flex } from 'reflexbox'; import CollectionsStore from 'stores/CollectionsStore'; -import Layout from 'components/Layout'; import Collection from 'components/Collection'; import PreviewLoading from 'components/PreviewLoading'; import CenteredContent from 'components/CenteredContent'; @@ -21,17 +20,15 @@ type Props = { const { collections } = this.props; return ( - - - - {!collections.isLoaded - ? - : collections.data.map(collection => ( - - ))} - - - + + + {!collections.isLoaded + ? + : collections.data.map(collection => ( + + ))} + + ); } } diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index 256e2142..1b1bddbd 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -9,10 +9,9 @@ import { Flex } from 'reflexbox'; import UiStore from 'stores/UiStore'; import DocumentStore from './DocumentStore'; -import Breadcrumbs from './components/Breadcrumbs'; -import Menu from './components/Menu'; +// import Menu from './components/Menu'; import Editor from 'components/Editor'; -import Layout, { HeaderAction, SaveAction } from 'components/Layout'; +// import { HeaderAction, SaveAction } from 'components/Layout'; import PublishingInfo from 'components/PublishingInfo'; import PreviewLoading from 'components/PreviewLoading'; import CenteredContent from 'components/CenteredContent'; @@ -47,9 +46,11 @@ type Props = { if (this.props.newDocument) { this.store.collectionId = this.props.match.params.id; this.store.newDocument = true; + this.props.ui.enableEditMode(); } else if (this.props.match.params.edit) { this.store.documentId = this.props.match.params.id; this.store.fetchDocument(); + this.props.ui.enableEditMode(); } else if (this.props.newChildDocument) { this.store.documentId = this.props.match.params.id; this.store.newChildDocument = true; @@ -76,6 +77,7 @@ type Props = { } else { this.store.updateDocument(options); } + this.props.ui.disableEditMode(); }; onImageUploadStart = () => { @@ -91,18 +93,18 @@ type Props = { }; render() { - const isNew = this.props.newDocument || this.props.newChildDocument; + // const isNew = this.props.newDocument || this.props.newChildDocument; const isEditing = this.props.match.params.edit; - const title = ( + /*const title = ( - ); + );*/ const titleText = this.store.document && get(this.store, 'document.title'); - const actions = ( + /*const actions = ( {isEditing @@ -115,48 +117,43 @@ type Props = { - ); + );*/ + + // actions={actions} + // title={title} + // loading={this.store.isSaving || this.store.isUploading} + // search={false} + // fixed return ( - - - - - {this.store.isFetching && - - - } - {this.store.document && - - {!isEditing && - } - - } - - + + + + {this.store.isFetching && + + + } + {this.store.document && + + {!isEditing && + } + + } + ); } } diff --git a/frontend/scenes/Error404/Error404.js b/frontend/scenes/Error404/Error404.js index d7865b16..6acd7564 100644 --- a/frontend/scenes/Error404/Error404.js +++ b/frontend/scenes/Error404/Error404.js @@ -2,23 +2,20 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import Layout from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; import PageTitle from 'components/PageTitle'; class Error404 extends React.Component { render() { return ( - + - -

Not Found

+

Not Found

-

We're unable to find the page you're accessing.

+

We're unable to find the page you're accessing.

-

Maybe you want to try search instead?

-
-
+

Maybe you want to try search instead?

+ ); } } diff --git a/frontend/scenes/ErrorAuth/ErrorAuth.js b/frontend/scenes/ErrorAuth/ErrorAuth.js index c9cf6f2b..edfbd009 100644 --- a/frontend/scenes/ErrorAuth/ErrorAuth.js +++ b/frontend/scenes/ErrorAuth/ErrorAuth.js @@ -2,23 +2,20 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import Layout from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; import PageTitle from 'components/PageTitle'; class ErrorAuth extends React.Component { render() { return ( - + - -

Authentication failed

+

Authentication failed

-

- We were unable to log you in. Please try again. -

-
-
+

+ We were unable to log you in. Please try again. +

+ ); } } diff --git a/frontend/scenes/Home/Home.js b/frontend/scenes/Home/Home.js index 4cf12891..022f1b94 100644 --- a/frontend/scenes/Home/Home.js +++ b/frontend/scenes/Home/Home.js @@ -7,7 +7,6 @@ import styled from 'styled-components'; import AuthStore from 'stores/AuthStore'; -import Layout from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; import SlackAuthLink from 'components/SlackAuthLink'; import Alert from 'components/Alert'; @@ -40,30 +39,28 @@ type Props = { return ( - - {this.props.auth.authenticated && } + {this.props.auth.authenticated && } - - {showLandingPageCopy && -
- Simple, fast, markdown. - - We're building a modern wiki for engineering teams. - -
} + + {showLandingPageCopy &&
- - Sign in with Slack - -
-
-
+ Simple, fast, markdown. + + We're building a modern wiki for engineering teams. + + } +
+ + Sign in with Slack + +
+
); } diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js index 30dad695..543992e6 100644 --- a/frontend/scenes/Search/Search.js +++ b/frontend/scenes/Search/Search.js @@ -12,7 +12,6 @@ import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; import SearchField from './components/SearchField'; import SearchStore from './SearchStore'; -import Layout, { Title } from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; import DocumentPreview from 'components/DocumentPreview'; import PageTitle from 'components/PageTitle'; @@ -83,41 +82,38 @@ const ResultsWrapper = styled(Flex)` render() { const query = this.props.match.params.query; - const title = ; const hasResults = this.store.documents.length > 0; return ( - <Layout title={title} search={false} loading={this.store.isFetching}> + <Container auto> <PageTitle title="Search" /> - <Container auto> - {this.props.notFound && - <div> - <h1>Not Found</h1> - <p>We're unable to find the page you're accessing.</p> - <hr /> - </div>} - <ResultsWrapper pinToTop={hasResults} column auto> - <SearchField - searchTerm={this.store.searchTerm} - onKeyDown={this.handleKeyDown} - onChange={this.updateQuery} - value={query || ''} - /> - <ArrowKeyNavigation - mode={ArrowKeyNavigation.mode.VERTICAL} - defaultActiveChildIndex={0} - > - {this.store.documents.map((document, index) => ( - <DocumentPreview - innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)} - key={document.id} - document={document} - /> - ))} - </ArrowKeyNavigation> - </ResultsWrapper> - </Container> - </Layout> + {this.props.notFound && + <div> + <h1>Not Found</h1> + <p>We're unable to find the page you're accessing.</p> + <hr /> + </div>} + <ResultsWrapper pinToTop={hasResults} column auto> + <SearchField + searchTerm={this.store.searchTerm} + onKeyDown={this.handleKeyDown} + onChange={this.updateQuery} + value={query || ''} + /> + <ArrowKeyNavigation + mode={ArrowKeyNavigation.mode.VERTICAL} + defaultActiveChildIndex={0} + > + {this.store.documents.map((document, index) => ( + <DocumentPreview + innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)} + key={document.id} + document={document} + /> + ))} + </ArrowKeyNavigation> + </ResultsWrapper> + </Container> ); } } diff --git a/frontend/scenes/Settings/Settings.js b/frontend/scenes/Settings/Settings.js index e16ac6e9..709a7dfd 100644 --- a/frontend/scenes/Settings/Settings.js +++ b/frontend/scenes/Settings/Settings.js @@ -8,7 +8,6 @@ import ApiKeyRow from './components/ApiKeyRow'; import styles from './Settings.scss'; import SettingsStore from './SettingsStore'; -import Layout, { Title } from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; import SlackAuthLink from 'components/SlackAuthLink'; import PageTitle from 'components/PageTitle'; @@ -22,72 +21,69 @@ import PageTitle from 'components/PageTitle'; } render() { - const title = <Title content="Settings" />; const showSlackSettings = DEPLOYMENT === 'hosted'; return ( - <Layout title={title} search={false} loading={this.store.isFetching}> + <CenteredContent> <PageTitle title="Settings" /> - <CenteredContent> - {showSlackSettings && - <div className={styles.section}> - <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={`${BASE_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> - </div>} - + {showSlackSettings && <div className={styles.section}> - <h2 className={styles.sectionHeader}>API access</h2> + <h2 className={styles.sectionHeader}>Slack</h2> <p> - Create API tokens to hack on your Atlas. - Learn more in <a href>API documentation</a>. + Connect Atlas to your Slack to instantly search for your documents + using <code>/atlas</code> command. </p> - {this.store.apiKeys && - <table className={styles.apiKeyTable}> - <tbody> - {this.store.apiKeys && - this.store.apiKeys.map(key => ( - <ApiKeyRow - id={key.id} - key={key.id} - name={key.name} - secret={key.secret} - onDelete={this.store.deleteApiKey} - /> - ))} - </tbody> - </table>} - - <div> - <InlineForm - placeholder="Token name" - buttonLabel="Create token" - name="inline_form" - value={this.store.keyName} - onChange={this.store.setKeyName} - onSubmit={this.store.createApiKey} - disabled={this.store.isFetching} + <SlackAuthLink + scopes={['commands']} + redirectUri={`${BASE_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" /> - </div> + </SlackAuthLink> + </div>} + + <div className={styles.section}> + <h2 className={styles.sectionHeader}>API access</h2> + <p> + Create API tokens to hack on your Atlas. + Learn more in <a href>API documentation</a>. + </p> + + {this.store.apiKeys && + <table className={styles.apiKeyTable}> + <tbody> + {this.store.apiKeys && + this.store.apiKeys.map(key => ( + <ApiKeyRow + id={key.id} + key={key.id} + name={key.name} + secret={key.secret} + onDelete={this.store.deleteApiKey} + /> + ))} + </tbody> + </table>} + + <div> + <InlineForm + placeholder="Token name" + buttonLabel="Create token" + name="inline_form" + value={this.store.keyName} + onChange={this.store.setKeyName} + onSubmit={this.store.createApiKey} + disabled={this.store.isFetching} + /> </div> - </CenteredContent> - </Layout> + </div> + </CenteredContent> ); } } diff --git a/frontend/stores/UiStore.js b/frontend/stores/UiStore.js index e5c9067f..4a3bb7aa 100644 --- a/frontend/stores/UiStore.js +++ b/frontend/stores/UiStore.js @@ -3,6 +3,7 @@ import { observable, action } from 'mobx'; class UiStore { @observable activeCollection: ?string; + @observable editMode: boolean = false; /* Actions */ @@ -13,6 +14,14 @@ class UiStore { @action clearActiveCollection = (): void => { this.activeCollection = null; }; + + @action enableEditMode() { + this.editMode = true; + } + + @action disableEditMode() { + this.editMode = false; + } } export default UiStore;