[RFR] Admin Ergonomics - Move button in headers

[Trello card](https://trello.com/c/yDw7ffgB) - [x] Move button upload inside the parsing box header - [x] Move the add_column button inside the publication preview box header - [x] Move the publish button inside the publication box header
Inist-CNRS · Feb 21, 2017 · ac8c0b9 · ac8c0b9
1 parent 08910ba
commit ac8c0b9
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 45 deletions.
diff --git a/src/app/js/admin/parsing/ParsingResult.js b/src/app/js/admin/parsing/ParsingResult.js
@@ -36,6 +36,14 @@ const styles = {
     parsingRightSection: {
         flexGrow: 2,
     },
+    title: {
+        height: '36px',
+        lineHeight: '36px',
+    },
+    button: {
+        float: 'right',
+        marginRight: '2rem',
+    },
 };
 
 export class ParsingResultComponent extends Component {
@@ -50,23 +58,34 @@ export class ParsingResultComponent extends Component {
         this.setState({ showErrors: false });
     }
 
+    handleClearParsing = () => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.props.handleClearParsing();
+    }
+
     render() {
         const {
             excerptColumns,
             excerptLines,
             totalLoadedLines,
-            handleClearParsing,
             p: polyglot,
         } = this.props;
         const { showErrors } = this.state;
 
         return (
             <Card className="parsingResult" initiallyExpanded>
                 <CardHeader
-                    actAsExpander
                     showExpandableButton
                     title={polyglot.t('Parsing summary')}
-                />
+                    titleStyle={styles.title}
+                >
+                    <FlatButton
+                        style={styles.button}
+                        onClick={this.handleClearParsing}
+                        label={polyglot.t('Upload another file')}
+                    />
+                </CardHeader>
                 <CardText style={styles.parsingContainer} expandable>
                     <ParsingSummary
                         onShowExcerpt={this.handleShowExcerpt}
@@ -82,9 +101,6 @@ export class ParsingResultComponent extends Component {
                         }
                     </div>
                 </CardText>
-                <CardActions>
-                    <FlatButton onClick={handleClearParsing} label={polyglot.t('Upload another file')} />
-                </CardActions>
             </Card>
         );
     }

diff --git a/src/app/js/admin/publicationPreview/PublicationPreview.js b/src/app/js/admin/publicationPreview/PublicationPreview.js
@@ -1,35 +1,67 @@
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import translate from 'redux-polyglot/translate';
 import { CardHeader, CardText } from 'material-ui/Card';
+import FlatButton from 'material-ui/FlatButton';
 
 import PublicationExcerpt from './PublicationExcerpt';
 
-import { editField } from '../fields';
+import { addField, editField } from '../fields';
 import { polyglot as polyglotPropTypes, field as fieldPropTypes } from '../../propTypes';
 import { fromFields, fromPublicationPreview } from '../selectors';
 import Card from '../../lib/Card';
 
-export const PublicationPreviewComponent = ({ columns, lines, editColumn, p: polyglot }) => (
-    <Card initiallyExpanded className="publication-preview">
-        <CardHeader
-            actAsExpander
-            showExpandableButton
-            title={polyglot.t('publication_preview')}
-        />
-
-        <CardText expandable>
-            <PublicationExcerpt
-                columns={columns}
-                lines={lines}
-                onHeaderClick={editColumn}
-            />
-        </CardText>
-    </Card>
-);
+const styles = {
+    title: {
+        height: '36px',
+        lineHeight: '36px',
+    },
+    button: {
+        float: 'right',
+        marginRight: '2rem',
+    },
+};
+
+export class PublicationPreviewComponent extends Component {
+    handleAddColumnClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.props.addColumn();
+    }
+
+    render() {
+        const { columns, lines, editColumn, p: polyglot } = this.props;
+
+        return (
+            <Card initiallyExpanded className="publication-preview">
+                <CardHeader
+                    showExpandableButton
+                    title={polyglot.t('publication_preview')}
+                    titleStyle={styles.title}
+                >
+                    <FlatButton
+                        className="add-column"
+                        label={polyglot.t('add_column')}
+                        onClick={this.handleAddColumnClick}
+                        style={styles.button}
+                    />
+                </CardHeader>
+
+                <CardText expandable>
+                    <PublicationExcerpt
+                        columns={columns}
+                        lines={lines}
+                        onHeaderClick={editColumn}
+                    />
+                </CardText>
+            </Card>
+        );
+    }
+}
 
 PublicationPreviewComponent.propTypes = {
+    addColumn: PropTypes.func.isRequired,
     columns: PropTypes.arrayOf(fieldPropTypes).isRequired,
     lines: PropTypes.arrayOf(PropTypes.object).isRequired,
     p: polyglotPropTypes.isRequired,
@@ -42,6 +74,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = {
+    addColumn: addField,
     editColumn: editField,
 };
 

diff --git a/src/app/js/admin/publish/Publish.js b/src/app/js/admin/publish/Publish.js
@@ -3,7 +3,6 @@ import compose from 'recompose/compose';
 import { connect } from 'react-redux';
 import translate from 'redux-polyglot/translate';
 import { CardActions, CardHeader, CardText } from 'material-ui/Card';
-import FlatButton from 'material-ui/FlatButton';
 
 import { polyglot as polyglotPropTypes } from '../../propTypes';
 
@@ -14,10 +13,20 @@ import { fromFields, fromPublish, fromPublication } from '../selectors';
 import Alert from '../../lib/Alert';
 import Card from '../../lib/Card';
 import ButtonWithStatus from '../../lib/ButtonWithStatus';
-import { addField, loadField } from '../fields';
+import { loadField } from '../fields';
 import FieldForm from '../fields/FieldForm';
 import Validation from './Validation';
 
+const styles = {
+    title: {
+        height: '36px',
+        lineHeight: '36px',
+    },
+    button: {
+        float: 'right',
+    },
+};
+
 export class PublishComponent extends Component {
     componentWillMount() {
         this.props.loadField();
@@ -27,24 +36,15 @@ export class PublishComponent extends Component {
         this.props.onPublish();
     }
 
-    handleAddColumnClick = () => {
-        this.props.addColumn();
-    }
-
     render() {
         const { canPublish, error, isPublishing, p: polyglot, published } = this.props;
         return (
             <Card>
-                <CardHeader title={polyglot.t('publication')} />
-                <CardText>
-                    <FieldForm />
-                </CardText>
-                <CardActions>
-                    <FlatButton
-                        className="add-column"
-                        label={polyglot.t('add_column')}
-                        onClick={this.handleAddColumnClick}
-                    />
+                <CardHeader
+                    title={polyglot.t('publication')}
+                    subtitle={polyglot.t('publication_explanations')}
+                    style={styles.title}
+                >
                     <ButtonWithStatus
                         className="btn-publish"
                         loading={isPublishing}
@@ -54,12 +54,16 @@ export class PublishComponent extends Component {
                         onClick={this.handleClick}
                         primary
                         disabled={!canPublish}
+                        style={styles.button}
                     />
-
+                </CardHeader>
+                <CardText>
+                    <FieldForm />
+                </CardText>
+                <CardActions>
                     {error && <Alert><p>{error}</p></Alert>}
                 </CardActions>
                 <CardText>
-                    {canPublish && polyglot.t('publication_explanations')}
                     {!canPublish && <Validation />}
                 </CardText>
             </Card>
@@ -68,7 +72,6 @@ export class PublishComponent extends Component {
 }
 
 PublishComponent.propTypes = {
-    addColumn: PropTypes.func.isRequired,
     canPublish: PropTypes.bool.isRequired,
     error: PropTypes.string,
     isPublishing: PropTypes.bool.isRequired,
@@ -90,7 +93,6 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = ({
-    addColumn: addField,
     onPublish: publishAction,
     loadField,
 });