Merge pull request #101 from Inist-CNRS/admin_ergonomics_scroll

[RFR] Admin ergonomics - Make each section scrollable
Inist-CNRS · Feb 23, 2017 · 1be6d14 · 1be6d14
2 parents ad9ab7b + 08e132c
commit 1be6d14
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/src/app/js/admin/parsing/ParsingExcerpt.js b/src/app/js/admin/parsing/ParsingExcerpt.js
@@ -10,10 +10,13 @@ const styles = {
     table: {
         width: 'auto',
     },
+    wrapper: {
+        overflowX: 'auto',
+    },
 };
 
 export const ParsingExcerptComponent = ({ columns, lines }) => (
-    <Table selectable={false} fixedHeader={false} style={styles.table}>
+    <Table selectable={false} fixedHeader={false} bodyStyle={styles.wrapper} style={styles.table}>
         <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
             <TableRow>
                 {columns.map(c => <TableHeaderColumn key={`header_${c}`}>{c}</TableHeaderColumn>)}

diff --git a/src/app/js/admin/parsing/ParsingResult.js b/src/app/js/admin/parsing/ParsingResult.js
@@ -3,10 +3,11 @@ import compose from 'recompose/compose';
 import { connect } from 'react-redux';
 import translate from 'redux-polyglot/translate';
 
-import { CardHeader, CardText } from 'material-ui/Card';
+import { CardHeader } from 'material-ui/Card';
 import FlatButton from 'material-ui/FlatButton';
 import { grey400 } from 'material-ui/styles/colors';
 import Card from '../../lib/Card';
+import ScrollableCardContent from '../../lib/ScrollableCardContent';
 
 import { polyglot as polyglotPropTypes } from '../../propTypes';
 import {
@@ -66,12 +67,12 @@ export class ParsingResultComponent extends Component {
                         label={polyglot.t('Upload another file')}
                     />
                 </CardHeader>
-                <CardText expandable>
+                <ScrollableCardContent expandable>
                     <ParsingExcerpt
                         columns={excerptColumns}
                         lines={excerptLines}
                     />
-                </CardText>
+                </ScrollableCardContent>
             </Card>
         );
     }

diff --git a/src/app/js/admin/publicationPreview/PublicationExcerpt.js b/src/app/js/admin/publicationPreview/PublicationExcerpt.js
@@ -14,6 +14,9 @@ const styles = {
     table: {
         width: 'auto',
     },
+    wrapper: {
+        overflowX: 'auto',
+    },
     cell: {
         cursor: 'pointer',
     },
@@ -27,7 +30,13 @@ export const PublicationExcerptComponent = ({
     onHeaderClick,
     p: polyglot,
 }) => (
-    <Table selectable={false} fixedHeader={false} style={styles.table} onCellClick={onCellClick}>
+    <Table
+        selectable={false}
+        fixedHeader={false}
+        bodyStyle={styles.wrapper}
+        style={styles.table}
+        onCellClick={onCellClick}
+    >
         <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
             <TableRow onCellClick={onHeaderClick}>
                 {columns.map(({ label, name }) => (

diff --git a/src/app/js/admin/publicationPreview/PublicationPreview.js b/src/app/js/admin/publicationPreview/PublicationPreview.js
@@ -2,7 +2,7 @@ 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 { CardHeader } from 'material-ui/Card';
 import FlatButton from 'material-ui/FlatButton';
 
 import Publication from './Publication';
@@ -11,6 +11,7 @@ import { addField, editField } from '../fields';
 import { polyglot as polyglotPropTypes, field as fieldPropTypes } from '../../propTypes';
 import { fromFields, fromPublicationPreview } from '../selectors';
 import Card from '../../lib/Card';
+import ScrollableCardContent from '../../lib/ScrollableCardContent';
 
 const styles = {
     title: {
@@ -62,14 +63,14 @@ export class PublicationPreviewComponent extends Component {
                     }
                 </CardHeader>
 
-                <CardText expandable>
+                <ScrollableCardContent expandable>
                     <Publication
                         editedColumn={editedColumn}
                         columns={columns}
                         lines={lines}
                         onHeaderClick={editColumn}
                     />
-                </CardText>
+                </ScrollableCardContent>
             </Card>
         );
     }

diff --git a/src/app/js/lib/ScrollableCardContent.js b/src/app/js/lib/ScrollableCardContent.js
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import { CardText } from 'material-ui/Card';
+
+const styles = {
+    container: {
+        overflowX: 'auto',
+        width: '96vw',
+    },
+};
+
+const ScrollableCardContent = ({ children, style, ...props }) => (
+    <CardText {...props}>
+        <div style={styles.container}>
+            {children}
+        </div>
+    </CardText>
+);
+
+ScrollableCardContent.propTypes = {
+    children: PropTypes.node.isRequired,
+    style: PropTypes.object, // eslint-disable-line
+};
+
+export default ScrollableCardContent;