Commit c8c0b065 authored by Marco Sehrer's avatar Marco Sehrer
Browse files

Merge pull request #210 from ninjaconcept/210-fix-reaction-svg

fix display of reaction_svg in ElementsTable
parents 6a6a6093 fc8c8224
...@@ -7,6 +7,7 @@ import UIStore from './stores/UIStore'; ...@@ -7,6 +7,7 @@ import UIStore from './stores/UIStore';
import ElementStore from './stores/ElementStore'; import ElementStore from './stores/ElementStore';
import SVG from 'react-inlinesvg'; import SVG from 'react-inlinesvg';
import DragDropItemTypes from './DragDropItemTypes'; import DragDropItemTypes from './DragDropItemTypes';
import classnames from 'classnames';
export default class ElementsTableEntries extends Component { export default class ElementsTableEntries extends Component {
isElementChecked(element) { isElementChecked(element) {
...@@ -52,11 +53,27 @@ export default class ElementsTableEntries extends Component { ...@@ -52,11 +53,27 @@ export default class ElementsTableEntries extends Component {
previewColumn(element) { previewColumn(element) {
const {ui} = this.props; const {ui} = this.props;
const className = this.isElementSelected(element) ? 'molecule molecule-selected' : 'molecule'; const classNames = classnames({
'molecule': element.type == 'sample'
}, {
'molecule-selected': element.type == 'sample' && this.isElementSelected(element)
});
let svgContainer = {
verticalAlign: 'middle',
textAlign: 'center'
};
if(element.type == 'reaction') {
svgContainer = {
width: '50%',
position: 'relative',
padding: 0,
paddingBottom: '10%'
};
}
if(ui.showPreviews && (element.type == 'sample' || element.type == 'reaction')) { if(ui.showPreviews && (element.type == 'sample' || element.type == 'reaction')) {
return ( return (
<td style={{verticalAlign: 'middle', textAlign: 'center'}}> <td style={svgContainer}>
<SVG src={element.svgPath} className={className} key={element.id}/> <SVG src={element.svgPath} className={classNames} key={element.id}/>
</td> </td>
); );
} else { } else {
......
...@@ -77,7 +77,9 @@ export default class ReactionDetails extends Component { ...@@ -77,7 +77,9 @@ export default class ReactionDetails extends Component {
const svgContainerStyle = { const svgContainerStyle = {
position: 'relative', position: 'relative',
padding: 0, padding: 0,
paddingBottom: '20%' paddingBottom: '20%',
height: 0,
width: '100%'
}; };
const submitLabel = (reaction && reaction.isNew) ? "Create" : "Save"; const submitLabel = (reaction && reaction.isNew) ? "Create" : "Save";
return ( return (
...@@ -90,7 +92,7 @@ export default class ReactionDetails extends Component { ...@@ -90,7 +92,7 @@ export default class ReactionDetails extends Component {
</Col> </Col>
<Col md={9}> <Col md={9}>
<div style={svgContainerStyle}> <div style={svgContainerStyle}>
<SVG key={reaction.svgPath} src={reaction.svgPath} className="molecule-small"/> <SVG key={reaction.svgPath} src={reaction.svgPath}/>
</div> </div>
</Col> </Col>
</Row> </Row>
......
...@@ -16,7 +16,7 @@ module SVG ...@@ -16,7 +16,7 @@ module SVG
@template = <<-END @template = <<-END
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cml="http://www.xml-cml.org/schema" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cml="http://www.xml-cml.org/schema"
width="#{width}" height="100" viewBox="0 0 #{width} 100" style=" position: absolute; height: 100%; max-height: 200px; width: 100%;"> width="#{width}" height="100" viewBox="0 0 #{width} 100" style="position: absolute;height: 100%;max-height: 200px;width: 100%;top: 0;left: 0;">
<title>Reaction 1</title> <title>Reaction 1</title>
END END
@labels = <<-END @labels = <<-END
......
Supports Markdown
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