Merge pull request #48 from ninjaconcept/ms-layout-with-element-tabs

Layout with element tabs

app/assets/javascripts/components/App.js

@@ -76,14 +76,16 @@ export default class App extends React.Component {
         <Row>
           <Navigation />
         </Row>
-        <Row>
-          <Col sm={3} md={3} lg={3}>
-            <ElementFilter />
-          </Col>
-          <Col sm={9} md={9} lg={9}>
-            <ManagingActions />
-          </Col>
-        </Row>
+        {
+          // <Row>
+          //   <Col sm={3} md={3} lg={3}>
+          //     <ElementFilter />
+          //   </Col>
+          //   <Col sm={9} md={9} lg={9}>
+          //     <ManagingActions />
+          //   </Col>
+          // </Row>
+        }
         <Row>
           <Col sm={3} md={3} lg={3}>
             <CollectionTree />
@@ -92,6 +94,8 @@ export default class App extends React.Component {
             <Elements />
           </Col>
           <Col sm={2} md={2} lg={2}>
+            <ManagingActions />
+            <br/>
             <ContextActions />
           </Col>
         </Row>

app/assets/javascripts/components/ElementsTable.js

@@ -55,7 +55,7 @@ export default class ElementsTable extends React.Component {
       currentElement = state.currentElement
     }
 
-    let elementsDidChange = !deepEqual(elements, this.state.elements);
+    let elementsDidChange = elements && !deepEqual(elements, this.state.elements);
     let currentElementDidChange = !deepEqual(currentElement, this.state.currentElement);
 
     let pagination = UIStore.getState().pagination;

app/assets/javascripts/components/List.js

 import React from 'react';
 import ElementsTable from './ElementsTable';
+import {TabbedArea, TabPane} from 'react-bootstrap';
 
 export default class List extends React.Component {
   constructor(props) {
@@ -8,7 +9,14 @@ export default class List extends React.Component {
 
   render() {
     return (
-      <ElementsTable type='sample'/>
+      <TabbedArea defaultActiveKey={1}>
+        <TabPane eventKey={1} tab='Samples'>
+          <ElementsTable type='sample'/>
+        </TabPane>
+        <TabPane eventKey={2} tab='Reactions' disabled>TabPane 2 content</TabPane>
+        <TabPane eventKey={3} tab='Wellplates' disabled>TabPane 3 content</TabPane>
+      </TabbedArea>
+
     )
   }
 }

app/assets/javascripts/components/managing_actions/ShareButton.js

@@ -8,12 +8,13 @@ export default class ShareButton extends React.Component {
   }
 
   showShareModal() {
-    Aviator.navigate(Aviator.getCurrentURI()+'/sharing');
+    let [url, query] = Aviator.getCurrentURI().split('?')
+    Aviator.navigate(url+'/sharing?'+query);
   }
 
   render() {
     return (
-      <Button onClick={this.showShareModal.bind(this)}>Share</Button>
+      <Button block onClick={this.showShareModal.bind(this)}>Share</Button>
     )
   }
 }

app/assets/javascripts/components/managing_actions/ShareModal.js

@@ -34,8 +34,8 @@ export default class ShareModal extends React.Component {
   }
 
   hideModal() {
-    //window.history.back();
-    Aviator.navigate(Aviator.getCurrentURI()+'/hide');
+    let [url, query] = Aviator.getCurrentURI().split('?')
+    Aviator.navigate(url+'/hide?'+query);
   }
 
   handleSharing() {