Start adding toolbar back in

OHIFViewer-react/src/FlexboxLayout/ConnectedToolbarSection.js

@@ -0,0 +1,28 @@
+import { connect } from 'react-redux';
+import { ToolbarSection } from 'react-viewerbase';
+import OHIF from 'ohif-core'
+
+const { setToolActive } = OHIF.redux.actions;
+
+const mapStateToProps = state => {
+    return {
+        buttons: state.tools.buttons,
+        activeCommand: state.tools.buttons.find(tool => tool.active === true).command
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        setToolActive: tool => {
+            console.log(`setViewportActive: ${tool}`);
+            dispatch(setToolActive(tool))
+        }
+    };
+};
+
+const ConnectedToolbarSection = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ToolbarSection);
+
+export default ConnectedToolbarSection;

OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js

@@ -4,6 +4,8 @@ import OHIF from 'ohif-core';
 import cornerstone from 'cornerstone-core';
 import { StudyBrowser } from 'react-viewerbase';
 import ViewerMain from './ViewerMain.js';
+import ToolbarRow from './ToolbarRow.js';
+
 import './FlexboxLayout.css';
 // TODO: Where should we put ViewerMain? ohif-core or react-viewerbase?
 
@@ -152,6 +154,7 @@ class FlexboxLayout extends Component {
                     <StudyBrowser studies={this.state.studiesForBrowser}/>
                 </div>
                 <div className={mainContentClassName}>
+                    <ToolbarRow/>
                     <ViewerMain studies={this.props.studies}/>
                 </div>
                 <div className={this.state.rightSidebarOpen ? "sidebar-menu sidebar-right sidebar-open" : "sidebarMenu sidebar-right"}>

OHIFViewer-react/src/FlexboxLayout/ToolbarRow.css

@@ -0,0 +1,14 @@
+.ToolbarRow {
+    border-bottom: var(--ui-border-thickness) solid var(--ui-border-color);
+    flex: 0 0 auto;
+    height: var(--toolbar-height);
+    padding-top: 6px;
+    position: relative;
+    transition: height 300ms ease;
+    width: 100%;
+}
+
+ToolbarRow.expanded {
+    height: calc(var(--toolbar-height) + var(--toolbar-drawer-height));
+}
+

OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js

@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import ConnectedToolbarSection from './ConnectedToolbarSection';
+import './ToolbarRow.css';
+
+class ToolbarRow extends Component {
+    constructor(props) {
+        super(props);
+
+    }
+
+    render() {
+        return (<div className="ToolbarRow">
+            <div className="clearfix">
+                <div className="pull-left m-t-1">
+                    {/* > roundedButtonGroup leftSidebarToggleButtonData */}
+                </div>
+                <ConnectedToolbarSection/>
+                <div className="pull-right m-t-1 rm-x-1">
+                    {/* > roundedButtonGroup rightSidebarToggleButtonData */}
+                </div>
+            </div>
+            </div>
+        );
+    }
+}
+
+ToolbarRow.propTypes = {
+    //studies: PropTypes.array
+};
+
+export default ToolbarRow;

OHIFViewer-react/src/sha.js

@@ -1 +1 @@
-export default '09ac6ee3470aafaa8202bb5113bf21bcde924374';
+export default 'e84197b19de7f434a322139752b306bf0ce847fa';

OHIFViewer-react/src/theme-tide.css

@@ -1,27 +1,13 @@
 /* "Tide" theme */
-
+/* TODO:
-/* Common palette */
+- Convert the other themes to CSS Variables
-:root {
+- Allow user to set default CSS theme in JS config
-    --ui-yellow: #E29E4A;
+- Export the themes as identical JS objects
-    --ui-sky-blue: #6FBDE2;
+- For theme switcher, update root-level CSS properties via JS (https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0)
-}
+ */
-/* State palette */
-:root {
-    --ui-state-error: #FFCCCC;
-    --ui-state-error-border: #993333;
-    --ui-state-error-text: #661111;
-}
 
 :root {
-    --ui-gray-light: #516873;
+    /* Interface UI Colors */
-    --ui-gray: #263340;
-    --ui-gray-dark: #16202B;
-    --ui-gray-darker: #151A1F;
-    --ui-gray-darkest: #14202A;
-}
-
-/* Interface UI Colors */
-:root {
     --default-color: #9CCEF9;
     --hover-color: #ffffff;
     --active-color: #20A5D6;
@@ -30,4 +16,17 @@
     --ui-border-color-active: #00a4d9;
     --primary-background-color: #000000;
     --box-background-color: #3E5975;
+
+    /* Common palette */
+    --ui-yellow: #E29E4A;
+    --ui-sky-blue: #6FBDE2;
+    /* State palette */
+    --ui-state-error: #FFCCCC;
+    --ui-state-error-border: #993333;
+    --ui-state-error-text: #661111;
+    --ui-gray-light: #516873;
+    --ui-gray: #263340;
+    --ui-gray-dark: #16202B;
+    --ui-gray-darker: #151A1F;
+    --ui-gray-darkest: #14202A;
 }