Refactor research plan styling

app/api/chemotion/research_plan_api.rb

@@ -131,7 +131,6 @@ module Chemotion
       desc "Save image file to filesystem"
       params do
         requires :file, type: File
-        optional :replace, type: String
       end
       post :image do
         file_name = params[:file][:filename]
@@ -144,10 +143,6 @@ module Chemotion
           file.write(params[:file][:tempfile].read)
         end
 
-        if params[:replace]
-          File.delete("public/images/research_plans/#{params[:replace]}")
-        end
-
         {
           file_name: file_name,
           public_name: public_name

app/assets/javascripts/components/research_plan/ResearchPlanDetails.js

@@ -30,7 +30,8 @@ export default class ResearchPlanDetails extends Component {
       edit: false,
       update: false
     };
-    this.ref = React.createRef()
+    this.nameRef = React.createRef()
+    this.bodyRef = React.createRef()
   }
 
   componentWillReceiveProps(nextProps) {
@@ -181,15 +182,17 @@ export default class ResearchPlanDetails extends Component {
 
   handleExport(exportFormat) {
     const { research_plan } = this.state;
+    const name = ReactDOM.findDOMNode(this.nameRef.current)
+    const body = ReactDOM.findDOMNode(this.bodyRef.current)
 
-    const bodyElements = ReactDOM.findDOMNode(this.ref.current).getElementsByClassName('field')
+    let html = name.innerHTML
+    Array.from(body.getElementsByClassName('research-plan-field')).map(field => {
+      const editors = field.getElementsByClassName('ql-editor')
 
-    let html = ''
-    research_plan.body.map((field, index) => {
-      if (field.type == 'richtext') {
-        html += bodyElements[index].getElementsByClassName('ql-editor')[0].innerHTML
+      if (editors.length) {
+        html += editors[0].innerHTML
       } else {
-        html += bodyElements[index].innerHTML
+        html += field.innerHTML
       }
     })
 
@@ -249,12 +252,13 @@ export default class ResearchPlanDetails extends Component {
     return (
       <ListGroup fill="true">
         <ListGroupItem >
-          {this.renderExportButton()}
+          {this.renderExportButton(edit)}
 
           <ResearchPlanDetailsName value={name}
               disabled={research_plan.isMethodDisabled('name')}
               onChange={this.handleNameChange.bind(this)}
-              edit={edit} />
+              edit={edit}
+              ref={this.nameRef} />
 
           <ResearchPlanDetailsBody body={body}
               disabled={research_plan.isMethodDisabled('body')}
@@ -264,7 +268,7 @@ export default class ResearchPlanDetails extends Component {
               onDelete={this.handleBodyDelete.bind(this)}
               update={update}
               edit={edit}
-              ref={this.ref} />
+              ref={this.bodyRef} />
 
           <ResearchPlanDetailsAttachments attachments={attachments}
               onDrop={this.handleAttachmentDrop.bind(this)}

app/assets/javascripts/components/research_plan/ResearchPlanDetailsAddField.js

@@ -8,7 +8,7 @@ export default class ResearchPlanDetailsAddField extends Component {
     const { onAdd } = this.props
 
     return (
-      <div className="add-field">
+      <div className="research-plan-field-drop-add-field">
         <Button bsStyle="primary" bsSize="small" onClick={() => onAdd('richtext')} >
           <i className="fa fa-file-text-o"></i>&nbsp;<i className="fa fa-plus"></i>
         </Button>

app/assets/javascripts/components/research_plan/ResearchPlanDetailsBody.js

@@ -21,10 +21,9 @@ export default class ResearchPlanDetailsBody extends Component {
                       edit={edit} />
     })
 
-    let className = 'research-plan-details-static'
+    let className = 'research-plan-body'
     let bodyFooter
     if (edit) {
-      className = 'research-plan-details-body'
       bodyFooter = (
         <Row>
           <Col md={12}>
@@ -38,6 +37,8 @@ export default class ResearchPlanDetailsBody extends Component {
           </Col>
         </Row>
       )
+    } else {
+      className += ' static'
     }
 
     return (

app/assets/javascripts/components/research_plan/ResearchPlanDetailsDropTarget.js

@@ -23,7 +23,7 @@ class ResearchPlanDetailsDropTarget extends Component {
   render() {
     const {index, connectDropTarget, isOver, canDrop} = this.props
 
-    let className = 'field-drop-target'
+    let className = 'research-plan-field-drop-target'
 
     if (isOver) {
       className += ' is-over'

app/assets/javascripts/components/research_plan/ResearchPlanDetailsField.js

@@ -58,7 +58,7 @@ export default class ResearchPlanDetailsField extends Component {
         break;
     }
 
-    let dropTarget, fieldHeader
+    let dropTarget, fieldHeader, className = 'research-plan-field'
     if (edit) {
       dropTarget = (
         <Col md={12}>
@@ -66,7 +66,7 @@ export default class ResearchPlanDetailsField extends Component {
         </Col>
       )
       fieldHeader = (
-        <div className="field-header">
+        <div className="research-plan-field-header">
           <Button className="pull-right" bsStyle="danger" bsSize="xsmall"
             onClick={() => onDelete(field.id)} >
               <i className="fa fa-times"></i>
@@ -75,13 +75,15 @@ export default class ResearchPlanDetailsField extends Component {
           <ControlLabel>{label}</ControlLabel>
         </div>
       )
+    } else {
+      className += ' static'
     }
 
     return (
       <Row>
         {dropTarget}
         <Col md={12}>
-          <div className="field">
+          <div className={className}>
             {fieldHeader}
             {component}
           </div>

app/assets/javascripts/components/research_plan/ResearchPlanDetailsFieldKetcher.js

@@ -107,7 +107,7 @@ export default class ResearchPlanDetailsFieldKetcher extends Component {
     const svgPath = '/images/research_plans/' + field.value.svg_file
 
     return (
-      <div className="svg-container-static">
+      <div className="image-container">
         <img src={svgPath} />
       </div>
     )

app/assets/javascripts/components/research_plan/ResearchPlanDetailsFieldReaction.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { DropTarget } from 'react-dnd'
 import DragDropItemTypes from '../DragDropItemTypes'
-import { Row, Col, Button } from 'react-bootstrap'
-import SVG from 'react-inlinesvg';
 
 import ElementActions from '../actions/ElementActions';
 import { UrlSilentNavigation } from '../utils/ElementUtils';
@@ -59,28 +57,27 @@ class ResearchPlanDetailsFieldReaction extends Component {
 
   renderReaction(reaction) {
     const { edit } = this.props
-    const style = { height: '200px' };
+    const title = reaction.title()
 
     let link
     if (edit) {
       link = (
         <p className="float-left">
           Reaction: <a role="link" tabIndex={0} onClick={() => this.showReaction()} style={{ cursor: 'pointer' }}>
-            {reaction.title()}
+            {title}
           </a>
         </p>
       )
     }
 
     return (
-      <Row style={style}>
-        <Col md={12}>
-          {link}
-          <div>
-            <img src={reaction.svgPath} />
-          </div>
-        </Col>
-      </Row>
+      <div className="research-plan-field-reaction">
+        {link}
+        <div className="image-container">
+          <img src={reaction.svgPath} alt={title} />
+          <p>{reaction.name}</p>
+        </div>
+      </div>
     )
   }
 

app/assets/javascripts/components/research_plan/ResearchPlanDetailsFieldSample.js

@@ -61,61 +61,30 @@ class ResearchPlanDetailsFieldSample extends Component {
     ElementActions.fetchSampleById(sample.id);
   }
 
-  // copied from SampleDetails.js
-  sampleAverageMW(sample) {
-    let mw = sample.molecule_molecular_weight;
-    if(mw)
-      return `${mw.toFixed(MWPrecision)} g/mol`;
-    else
-      return '';
-  }
-
-  // copied from SampleDetails.js
-  sampleExactMW(sample) {
-    let mw = sample.molecule_exact_molecular_weight
-    if(mw)
-      return `Exact mass: ${mw.toFixed(MWPrecision)} g/mol`;
-    else
-      return '';
-  }
-
   // modified from sampleInfo in SampleDetails.js
   renderSample(sample) {
     const { edit } = this.props
-    const style = { height: '200px' };
-    const pubchemLcss = sample.pubchem_tag && sample.pubchem_tag.pubchem_lcss ?
-      sample.pubchem_tag.pubchem_lcss.Record.Section[0].Section[0].Section[0].Information : null;
-    const pubchemCid = sample.pubchem_tag && sample.pubchem_tag.pubchem_cid ?
-      sample.pubchem_tag.pubchem_cid : 0;
-    const lcssSign = pubchemLcss ?
-      <PubchemLcss cid={pubchemCid} informArray={pubchemLcss} /> : <div />;
+    const title = sample.title()
 
     let link
     if (edit) {
       link = (
         <p>
           Sample: <a role="link" tabIndex={0} onClick={() => this.showSample()} style={{ cursor: 'pointer' }}>
-            {sample.title()}
+            {title}
           </a>
         </p>
       )
     }
 
     return (
-      <Row style={style}>
-        <Col md={4}>
-          <h4><SampleName sample={sample}/></h4>
-          <h5>{this.sampleAverageMW(sample)}</h5>
-          <h5>{this.sampleExactMW(sample)}</h5>
-          {lcssSign}
-          {link}
-        </Col>
-        <Col md={8}>
-          <div>
-            <img src={sample.svgPath} />
-          </div>
-        </Col>
-      </Row>
+      <div className="research-plan-field-image">
+        {link}
+        <div className="image-container">
+          <img src={sample.svgPath} alt={title} />
+          <SampleName sample={sample}/>
+        </div>
+      </div>
     )
   }
 

app/assets/javascripts/components/research_plan/ResearchPlanDetailsFieldTable.js

@@ -330,12 +330,12 @@ export default class ResearchPlanDetailsFieldTable extends Component {
         </div>
         <div className="research-plan-table-toolbar">
           <Row>
-            <Col lg={3}>
+            <Col xs={3}>
               <Button bsSize="xsmall" onClick={this.handleSchemaModalShow.bind(this)}>
                 Table schemas
               </Button>
             </Col>
-            <Col lg={3} lgOffset={6}>
+            <Col xs={3} xsOffset={6}>
               <Button bsSize="xsmall">
                 Export as Excel
               </Button>

app/assets/javascripts/components/research_plan/ResearchPlanDetailsName.js

@@ -9,18 +9,24 @@ export default class ResearchPlanDetailsName extends Component {
 
     if (edit) {
       return (
-        <FormGroup>
-          <ControlLabel>Name</ControlLabel>
-          <FormControl
-            type="text"
-            value={value || ''}
-            onChange={(event) => onChange(event.target.value)}
-            disabled={disabled}
-          />
-        </FormGroup>
+        <div className="research-plan-name">
+          <FormGroup>
+            <ControlLabel>Name</ControlLabel>
+            <FormControl
+              type="text"
+              value={value || ''}
+              onChange={(event) => onChange(event.target.value)}
+              disabled={disabled}
+            />
+          </FormGroup>
+        </div>
       )
     } else {
-      return <h4>{value}</h4>
+      return (
+        <div className="research-plan-name static">
+          <h1>{value}</h1>
+        </div>
+      )
     }
   }
 

app/assets/stylesheets/research-plan.scss

 .research-plan-details {
 
-    .field {
+    .form-group {
+        margin-bottom: 0;
+    }
+
+    .research-plan-name {
+        &.static {
+            margin-bottom: 20px;
+
+            h1 {
+                margin: 0;
+            }
+        }
+    }
+
+    .research-plan-field {
         label {
             margin-top: 5px;
         }
-
         .drag-source {
             float: right;
             margin-top: 5px;
             margin-right: 5px;
         }
-    }
+        &.static {
+            margin-bottom: 20px;
 
-    .form-group {
-        margin-bottom: 0;
+            .ql-editor {
+                padding: 0;
+            }
+
+            .ql-hidden {
+                display: none;
+            }
+        }
+
+        .image-container {
+            text-align: center;
+
+            img {
+                max-width: 100%;
+            }
+
+            p {
+                margin-bottom: 0;
+            }
+        }
     }
 
-    .field-drop-target {
+    .research-plan-field-drop-target {
         height: 20px;
 
         .indicator {
@@ -36,7 +68,7 @@
         }
     }
 
-    .add-field {
+    .research-plan-field-drop-add-field {
         float: left;
         margin-bottom: 20px;
 
@@ -47,12 +79,11 @@
         }
     }
 
-    .image-container {
-        text-align: center;
-        margin-bottom: 20px;
+    .research-plan-table-toolbar {
+        margin-top: 10px;
 
-        img {
-            max-width: 100%;
+        button {
+            width: 100%;
         }
     }
 
@@ -72,14 +103,6 @@
         }
     }
 
-    .research-plan-table-toolbar {
-        margin-top: 10px;
-
-        button {
-            width: 100%;
-        }
-    }
-
     .drop-target {
         min-height: 50px;
         width: 100%;
@@ -92,20 +115,6 @@
     }
 }
 
-.research-plan-details-static {
-    .row {
-        margin-bottom: 20px;
-    }
-
-    .ql-editor {
-        padding: 0;
-    }
-
-    .ql-hidden {
-        display: none;
-    }
-}
-
 .research-plan-table-schema-modal-create {
     margin-bottom: 40px;
 }
@@ -116,9 +125,3 @@
         margin-left: 5px;
     }
 }
-
-.svg-container-static {
-    min-height: 200px;
-    width: 100%;
-    height: 100%;
-}