Moved Layout to be a wrapper for routes

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)`

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,6 +96,7 @@ render(
           <Route exact path="/auth/error" component={ErrorAuth} />
 
           <Auth>
+            <Layout>
               <Switch>
                 <Route exact path="/dashboard" component={Dashboard} />
                 <Route exact path="/collections/:id" component={Collection} />
@@ -121,6 +124,7 @@ render(
                 <Route path="/404" component={Error404} />
                 <Route component={notFoundSearch} />
               </Switch>
+            </Layout>
           </Auth>
         </Switch>
       </Router>

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 (
+    return this.store.redirectUrl
-      <Layout>
-        {this.store.redirectUrl
       ? <Redirect to={this.store.redirectUrl} />
       : <CenteredContent>
           <PreviewLoading />
-            </CenteredContent>}
+        </CenteredContent>;
-      </Layout>
-    );
   }
 }
 export default inject('collections')(Collection);

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,7 +20,6 @@ type Props = {
     const { collections } = this.props;
 
     return (
-      <Layout>
       <CenteredContent>
         <Flex column auto>
           {!collections.isLoaded
@@ -31,7 +29,6 @@ type Props = {
               ))}
         </Flex>
       </CenteredContent>
-      </Layout>
     );
   }
 }

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 = (
       <Breadcrumbs
         document={this.store.document}
         pathToDocument={this.store.pathToDocument}
       />
-    );
+    );*/
 
     const titleText = this.store.document && get(this.store, 'document.title');
 
-    const actions = (
+    /*const actions = (
       <Flex>
         <HeaderAction>
           {isEditing
@@ -115,22 +117,18 @@ type Props = {
         </HeaderAction>
         <Menu store={this.store} document={this.store.document} />
       </Flex>
-    );
+    );*/
+
+    // actions={actions}
+    // title={title}
+    // loading={this.store.isSaving || this.store.isUploading}
+    // search={false}
+    // fixed
 
     return (
-      <Layout
-        actions={actions}
-        title={title}
-        loading={this.store.isSaving || this.store.isUploading}
-        search={false}
-        fixed
-      >
       <PagePadding>
         <PageTitle title={titleText} />
-          <Prompt
+        <Prompt when={this.store.hasPendingChanges} message={DISCARD_CHANGES} />
-            when={this.store.hasPendingChanges}
-            message={DISCARD_CHANGES}
-          />
         {this.store.isFetching &&
           <CenteredContent>
             <PreviewLoading />
@@ -156,7 +154,6 @@ type Props = {
             />
           </Container>}
       </PagePadding>
-      </Layout>
     );
   }
 }

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 (
-      <Layout>
-        <PageTitle title="Not found" />
       <CenteredContent>
+        <PageTitle title="Not found" />
         <h1>Not Found</h1>
 
         <p>We're unable to find the page you're accessing.</p>
 
         <p>Maybe you want to try <Link to="/search">search</Link> instead?</p>
       </CenteredContent>
-      </Layout>
     );
   }
 }

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 (
-      <Layout>
-        <PageTitle title="Authentication error" />
       <CenteredContent>
+        <PageTitle title="Authentication error" />
         <h1>Authentication failed</h1>
 
         <p>
           We were unable to log you in. <Link to="/">Please try again.</Link>
         </p>
       </CenteredContent>
-      </Layout>
     );
   }
 }

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,7 +39,6 @@ type Props = {
 
     return (
       <Flex auto>
-        <Layout notifications={this.notifications}>
         {this.props.auth.authenticated && <Redirect to="/dashboard" />}
 
         <CenteredContent>
@@ -63,7 +61,6 @@ type Props = {
             </SlackAuthLink>
           </div>
         </CenteredContent>
-        </Layout>
       </Flex>
     );
   }

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,13 +82,11 @@ const ResultsWrapper = styled(Flex)`
 
   render() {
     const query = this.props.match.params.query;
-    const title = <Title content="Search" />;
     const hasResults = this.store.documents.length > 0;
 
     return (
-      <Layout title={title} search={false} loading={this.store.isFetching}>
-        <PageTitle title="Search" />
       <Container auto>
+        <PageTitle title="Search" />
         {this.props.notFound &&
           <div>
             <h1>Not Found</h1>
@@ -117,7 +114,6 @@ const ResultsWrapper = styled(Flex)`
           </ArrowKeyNavigation>
         </ResultsWrapper>
       </Container>
-      </Layout>
     );
   }
 }

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,13 +21,11 @@ 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}>
-        <PageTitle title="Settings" />
       <CenteredContent>
+        <PageTitle title="Settings" />
         {showSlackSettings &&
           <div className={styles.section}>
             <h2 className={styles.sectionHeader}>Slack</h2>
@@ -87,7 +84,6 @@ import PageTitle from 'components/PageTitle';
           </div>
         </div>
       </CenteredContent>
-      </Layout>
     );
   }
 }

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;