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

Merge pull request #39 from ninjaconcept/ms-misc-improvements-and-cleanup

Ms misc improvements and cleanup
parents 0f91b3b6 5db3d22d
......@@ -25,7 +25,7 @@ export default class ContextActions extends React.Component {
// TODO später auch für reaktionen usw
if(this.state.checkedSampleIds.size == 0) {
return (
<ButtonGroup vertical>
<ButtonGroup vertical block>
<Button>Create Sample</Button>
<Button>Create Reaction</Button>
<Button>Create Wellplate</Button>
......@@ -33,7 +33,7 @@ export default class ContextActions extends React.Component {
)
} else {
return (
<ButtonGroup vertical>
<ButtonGroup vertical block>
<Button>Split as Subsample(s)</Button>
<Button>Create Reaction</Button>
<Button>Create Wellplate</Button>
......
import React from 'react';
import {Label} from 'react-bootstrap';
export default class ElementCollectionLabels extends React.Component {
constructor(props) {
super(props);
this.state = {
element: props.element
}
}
render() {
return (
<div>
{this.collectionLabels(this.state.element)}
</div>
);
}
collectionLabels(element) {
if(element.collection_labels) {
return element.collection_labels.map((label, index) => {
return (
<span key={index}>
<Label bsStyle="primary">{label}</Label>
&nbsp;
</span>
)
});
}
}
}
......@@ -4,6 +4,7 @@ import {Label, Pagination, Table} from 'react-bootstrap';
import ElementStore from './stores/ElementStore';
import ElementAllCheckbox from './ElementAllCheckbox';
import ElementCheckbox from './ElementCheckbox';
import ElementCollectionLabels from './ElementCollectionLabels';
import SVG from 'react-inlinesvg';
import Aviator from 'aviator';
......@@ -73,14 +74,14 @@ export default class ElementsTable extends React.Component {
optionalLabelColumn = (
<td className="labels">
{this.collectionLabels(element)}
<ElementCollectionLabels element={element} key={element.id}/>
</td>
)
let svgPath = `/assets/${element.molecule_svg}`;
optionalMoleculeColumn = (
<td className="molecule" margin="0" padding="0">
<SVG src={svgPath} className="molecule" />
<SVG src={svgPath} className="molecule" key={element.id}/>
</td>
)
......@@ -98,7 +99,7 @@ export default class ElementsTable extends React.Component {
return (
<tr key={index} height="100" style={style}>
<td className="check">
<ElementCheckbox element={element}/>
<ElementCheckbox element={element} key={element.id}/>
</td>
<td className="name" onClick={e => this.showDetails(element)} style={{cursor: 'pointer'}}>
{element.name}
......@@ -114,17 +115,6 @@ export default class ElementsTable extends React.Component {
return !(this.state.currentElement);
}
collectionLabels(element) {
return element.collection_labels.map((label, index) => {
return (
<span>
<Label bsStyle="primary" key={index}>{label}</Label>
&nbsp;
</span>
)
});
}
showDetails(element) {
Aviator.navigate(`/${element.type}/${element.id}`);
}
......
......@@ -9,13 +9,14 @@ export default class Navigation extends React.Component {
render() {
return (
<Navbar brand="Chemotion" inverse>
<Navbar brand={<a href="#">Chemotion</a>} inverse fluid>
<Nav>
<NavItem>#1</NavItem>
</Nav>
<div className='navbar-right'>
<Nav navbar right>
<UserAuth currentUser={'Bernd Thomas'}/>
</div>
&nbsp;
</Nav>
</Navbar>
)
}
......
......@@ -12,14 +12,6 @@ export default class NumeralInput extends Component {
};
}
componentWillReceiveProps(nextProps) {
let {value} = nextProps;
this.setState({
numeralValue: this._convertValueToNumeralValue(value)
});
}
_convertValueToNumeralValue(value) {
let {numeralFormat} = this.props;
return Numeral(value).format(numeralFormat);
......
......@@ -13,16 +13,6 @@ export default class NumeralInputWithUnits extends Component {
};
}
componentWillReceiveProps(nextProps) {
let {value, unit} = nextProps;
this.setState({
unit: unit,
value: value
});
this.forceUpdate()
}
_handleUnitSelect(nextUnit) {
let {value, unit} = this.state;
let convertedValue = value;
......@@ -69,13 +59,13 @@ export default class NumeralInputWithUnits extends Component {
// TODO fix css-issue with wrong z-index
render() {
let {units, bsSize, bsStyle, label, numeralFormat} = this.props;
let {units, bsSize, bsStyle, label, numeralFormat, key} = this.props;
let {unit, value} = this.state;
let buttonAfter = (units.length > 1) ? this._renderDropdownButtonAddon(unit) : '';
let addonAfter = (units.length == 1) ? unit : '';
return (
<NumeralInput buttonAfter={buttonAfter} addonAfter={addonAfter} onChange={(value) => this._handleValueChange(value)}
<NumeralInput key={key} buttonAfter={buttonAfter} addonAfter={addonAfter} onChange={(value) => this._handleValueChange(value)}
value={value} bsSize={bsSize} bsStyle={bsStyle} label={label} numeralFormat={numeralFormat}/>
);
}
......
......@@ -5,6 +5,7 @@ import SVG from 'react-inlinesvg';
import ElementActions from './actions/ElementActions';
import ElementStore from './stores/ElementStore';
import NumeralInputWithUnits from './NumeralInputWithUnits'
import ElementCollectionLabels from './ElementCollectionLabels';
import Aviator from 'aviator';
......@@ -91,7 +92,7 @@ export default class SampleDetails extends React.Component {
let sample = this.state.sample || {}
let sampleAmount = sample.amount_value && sample.amount_unit ? `(${sample.amount_value} ${sample.amount_unit})` : '';
let svg = sample.molecule_svg ? (<SVG key={sample.id} src={`/assets/${sample.molecule_svg}`} className="molecule-mid"/>) : '';
let svgPath = sample.molecule_svg ? `/assets/${sample.molecule_svg}` : '';
return (
<div>
......@@ -100,9 +101,10 @@ export default class SampleDetails extends React.Component {
<td width="70%">
<h3>{sample.name}</h3>
<h4>{sampleAmount}</h4>
<ElementCollectionLabels element={sample} key={sample.id} />
</td>
<td width="30%">
{svg}
<SVG key={sample.id} src={svgPath} className="molecule-mid"/>
</td>
</tr></table>
<ListGroup fill>
......@@ -114,6 +116,7 @@ export default class SampleDetails extends React.Component {
onChange={(e) => this.handleNameChanged(e)}
/>
<NumeralInputWithUnits
key={sample.id}
value={sample.amount_value}
unit={sample.amount_unit || 'g'}
label="Amount"
......
......@@ -20,12 +20,12 @@ export default class UserAuth extends Component {
render() {
let {currentUser} = this.props;
return (
<div>
<span>
<p className='navbar-text'>
{`Logged in as ${currentUser}.`}
</p>
<a onClick={() => this.logout()} className='btn btn-primary navbar-btn'>Logout</a>
</div>
</span>
);
}
}
......@@ -17,8 +17,6 @@
@import "bootstrap-sprockets";
@import "bootstrap";
/*
Show Bootstrap Grid as overlay for debugging
......@@ -30,3 +28,4 @@ div[class^="col-"] {
background-color: rgba(255, 0, 0, 0.2);
}
*/
......@@ -33,6 +33,6 @@
}
.selected {
background: #333;
background: #337ab7;
color: #fff;
}
......@@ -2,23 +2,6 @@
margin-top: 0 !important;
}
.molecule svg {
width: 90px;
height: 90px;
margin-left: 10px;
}
.molecule-mid svg {
width: 180px;
height:180px;
margin-left: 10px;
}
.molecule rect {
fill: none;
fill-opacity: 0.0;
}
.borderless {
border: none !important;
padding-top: 0px !important;
......@@ -28,7 +11,6 @@ table.elements {
table-layout: fixed;
}
th.check, td.check {
width: 40px !important;
}
......
.molecule svg {
width: 90px;
height: 90px;
margin-left: 10px;
}
.molecule rect {
fill: none;
fill-opacity: 0.0;
}
.molecule-mid svg {
width: 180px;
height:180px;
margin-left: 10px;
}
.sample-details {
margin-left: 357px !important;
margin-top: 71px !important;
width: calc(100vw - 357px) !important;
}
.modal-backdrop {
opacity: 0 !important;
}
......@@ -7,7 +7,7 @@ class SampleSerializer < ActiveModel::Serializer
end
def collection_labels
object.collections.flat_map(&:label)
object.collections.flat_map(&:label).uniq
end
def type
......
......@@ -7,4 +7,5 @@
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
= yield
.fluid-container
= yield
#app
#modal
\ No newline at end of file
#modal
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