Commit 0b16e22d authored by hh1966's avatar hh1966
Browse files

Refactor research plan styling

parent 084184dd
......@@ -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
......
......@@ -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)}
......
......@@ -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>
......
......@@ -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 (
......
......@@ -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'
......
......@@ -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>
......
......@@ -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>
)
......
......@@ -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>
)
}
......
......@@ -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>
)
}
......
......@@ -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>
......
......@@ -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>
)
}
}
......
.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%;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment