Fix for #206, show authors, issues & articles editors in Dialog boxes on admin site

src/components/editor/EditorArticleController.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import FalcorController from 'lib/falcor/FalcorController';
+import { browserHistory } from 'react-router';
 import _ from 'lodash';
 import EditAuthorsForm from './EditAuthorsForm';
 import { debounce } from 'lib/utilities';
@@ -8,6 +9,7 @@ import moment from 'moment';
 import { updateFieldValue } from 'components/editor/lib/form-field-updaters';
 
 // material-ui
+import Dialog from 'material-ui/Dialog';
 import CircularProgress from 'material-ui/CircularProgress';
 import RaisedButton from 'material-ui/RaisedButton';
 import Divider from 'material-ui/Divider';
@@ -21,6 +23,7 @@ const MAX_TEASER_LENGTH = 156;
 export default class EditorArticleController extends FalcorController {
   constructor(props) {
     super(props);
+    this.handleDialogClose = this.handleDialogClose.bind(this);
     this.isFormChanged = this.isFormChanged.bind(this);
     this.handleSaveChanges = this.handleSaveChanges.bind(this);
     this.handleAddAuthor = this.handleAddAuthor.bind(this);
@@ -121,6 +124,14 @@ export default class EditorArticleController extends FalcorController {
     }
   }
 
+  handleDialogClose() {
+    if (this.state.saving) return;
+
+    const page = this.props.params.page;
+    const path = `/articles/page/${page}`;
+    browserHistory.push(path);
+  }
+
   handleSaveChanges(event) {
     event.preventDefault();
 
@@ -307,11 +318,6 @@ export default class EditorArticleController extends FalcorController {
         marginTop: 24,
         marginBottom: 12,
       },
-      innerPaper: {
-        paddingLeft: 30,
-        paddingRight: 30,
-        paddingBottom: 15,
-      },
     };
 
     if (this.state.ready) {
@@ -349,8 +355,14 @@ export default class EditorArticleController extends FalcorController {
       }
 
       return (
-        <div style={styles.innerPaper}>
-          <h2>Article Editor: {article.title}</h2>
+        <Dialog
+          title="Article Editor"
+          open
+          modal={false}
+          autoScrollBodyContent
+          onRequestClose={this.handleDialogClose}
+        >
+          <h2>{article.title}</h2>
           <Divider />
           <TextField
             disabled
@@ -435,7 +447,7 @@ export default class EditorArticleController extends FalcorController {
             onClick={this.unpublish}
             icon={<Warning />}
           />
-        </div>
+        </Dialog>
       );
     }
     return (

src/components/editor/EditorArticleListController.jsx

@@ -147,9 +147,7 @@ export default class EditorArticleListController extends FalcorController {
               />
             </div>
           </Paper>
-          <Paper style={styles.paper} zDepth={2}>
-            {this.props.children}
-          </Paper>
+          {this.props.children}
         </div>
       );
     }

src/components/editor/EditorAuthorController.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { browserHistory } from 'react-router';
 import FalcorController from 'lib/falcor/FalcorController';
 import { debounce, markdownLength } from 'lib/utilities';
 import { updateFieldValue } from './lib/form-field-updaters';
 
 // material-ui
+import Dialog from 'material-ui/Dialog';
 import CircularProgress from 'material-ui/CircularProgress';
 import Divider from 'material-ui/Divider';
 import TextField from 'material-ui/TextField';
@@ -27,6 +29,7 @@ const styles = {
 export default class EditorAuthorController extends FalcorController {
   constructor(props) {
     super(props);
+    this.handleDialogClose = this.handleDialogClose.bind(this);
     this.handleSaveChanges = this.handleSaveChanges.bind(this);
     this.fieldUpdaters = {
       name: updateFieldValue.bind(this, 'name', undefined),
@@ -129,6 +132,13 @@ export default class EditorAuthorController extends FalcorController {
     }
   }
 
+  handleDialogClose() {
+    if (this.state.saving) return;
+
+    const path = '/authors';
+    browserHistory.push(path);
+  }
+
   handleSaveChanges(event) {
     event.preventDefault();
 
@@ -245,58 +255,65 @@ export default class EditorAuthorController extends FalcorController {
       }
 
       return (
-        <div style={styles.authorProfile}>
-          <h3>Author Profile: {this.state.name}</h3>
-          <Divider />
-          <form onSubmit={this.handleSaveChanges}>
-            <TextField
-              value={this.state.name}
-              floatingLabelText="Name"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.name}
-            /><br />
-            <TextField
-              value={this.state.slug}
-              floatingLabelText="Slug"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.slug}
-            /><br />
-            <TextField
-              value={this.state.jobTitle}
-              floatingLabelText="Job Title"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.jobTitle}
-            /><br />
-            <TextField
-              name="image"
-              value={this.state.image}
-              floatingLabelText="Image (Remember to use https:// not http://)"
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.image}
-              fullWidth
-            /><br />
-            <TextField
-              name="biography"
-              floatingLabelText={
-                `Biography (${markdownLength(this.state.biography)} ` +
-                `of ${MAX_BIOGRAPHY_LENGTH} characters)`
-              }
-              value={this.state.biography}
-              disabled={this.state.saving}
-              onChange={this.fieldUpdaters.biography}
-              multiLine
-              rows={2}
-              fullWidth
-            /><br />
-            <RaisedButton
-              label={changedStateMessage}
-              type="submit"
-              primary
-              style={styles.buttons}
-              disabled={!this.state.changed || this.state.saving}
-            />
-          </form>
-        </div>
+        <Dialog
+          title="Author Profile"
+          open
+          autoScrollBodyContent
+          onRequestClose={this.handleDialogClose}
+        >
+          <div style={styles.authorProfile}>
+            <h3>Author Profile: {this.state.name}</h3>
+            <Divider />
+            <form onSubmit={this.handleSaveChanges}>
+              <TextField
+                value={this.state.name}
+                floatingLabelText="Name"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.name}
+              /><br />
+              <TextField
+                value={this.state.slug}
+                floatingLabelText="Slug"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.slug}
+              /><br />
+              <TextField
+                value={this.state.jobTitle}
+                floatingLabelText="Job Title"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.jobTitle}
+              /><br />
+              <TextField
+                name="image"
+                value={this.state.image}
+                floatingLabelText="Image (Remember to use https:// not http://)"
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.image}
+                fullWidth
+              /><br />
+              <TextField
+                name="biography"
+                floatingLabelText={
+                  `Biography (${markdownLength(this.state.biography)} ` +
+                  `of ${MAX_BIOGRAPHY_LENGTH} characters)`
+                }
+                value={this.state.biography}
+                disabled={this.state.saving}
+                onChange={this.fieldUpdaters.biography}
+                multiLine
+                rows={2}
+                fullWidth
+              /><br />
+              <RaisedButton
+                label={changedStateMessage}
+                type="submit"
+                primary
+                style={styles.buttons}
+                disabled={!this.state.changed || this.state.saving}
+              />
+            </form>
+          </div>
+        </Dialog>
       );
     }
     return (

src/components/editor/EditorAuthorListController.jsx

@@ -161,9 +161,7 @@ export default class EditorAuthorListController extends FalcorController {
             </Tabs>
             <Divider />
           </Paper>
-          <Paper style={styles.paper} zDepth={2}>
-            {this.props.children}
-          </Paper>
+          {this.props.children}
           <br />
         </div>
       );