From 4174018149a2ccfece83df3b190ba9aeed548521 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Tue, 18 Dec 2018 14:15:55 +0100
Subject: [PATCH] Start adding toolbar back in

---
 .../FlexboxLayout/ConnectedToolbarSection.js  | 28 +++++++++++++
 .../src/FlexboxLayout/FlexboxLayout.js        |  3 ++
 .../src/FlexboxLayout/ToolbarRow.css          | 14 +++++++
 .../src/FlexboxLayout/ToolbarRow.js           | 32 +++++++++++++++
 OHIFViewer-react/src/sha.js                   |  2 +-
 OHIFViewer-react/src/theme-tide.css           | 41 +++++++++----------
 6 files changed, 98 insertions(+), 22 deletions(-)
 create mode 100644 OHIFViewer-react/src/FlexboxLayout/ConnectedToolbarSection.js
 create mode 100644 OHIFViewer-react/src/FlexboxLayout/ToolbarRow.css
 create mode 100644 OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js

diff --git a/OHIFViewer-react/src/FlexboxLayout/ConnectedToolbarSection.js b/OHIFViewer-react/src/FlexboxLayout/ConnectedToolbarSection.js
new file mode 100644
index 000000000..49e0be51b
--- /dev/null
+++ b/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;
diff --git a/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js b/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js
index 5d6de1a8a..cc5f8b7bc 100644
--- a/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js
+++ b/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"}>
diff --git a/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.css b/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.css
new file mode 100644
index 000000000..912e42ac9
--- /dev/null
+++ b/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));
+}
+
diff --git a/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js b/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js
new file mode 100644
index 000000000..96d1a2d34
--- /dev/null
+++ b/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;
diff --git a/OHIFViewer-react/src/sha.js b/OHIFViewer-react/src/sha.js
index 691334c78..43a25fe30 100644
--- a/OHIFViewer-react/src/sha.js
+++ b/OHIFViewer-react/src/sha.js
@@ -1 +1 @@
-export default '09ac6ee3470aafaa8202bb5113bf21bcde924374';
+export default 'e84197b19de7f434a322139752b306bf0ce847fa';
diff --git a/OHIFViewer-react/src/theme-tide.css b/OHIFViewer-react/src/theme-tide.css
index dfb0673ad..6f28ff5c5 100644
--- a/OHIFViewer-react/src/theme-tide.css
+++ b/OHIFViewer-react/src/theme-tide.css
@@ -1,27 +1,13 @@
 /* "Tide" theme */
-
-/* Common palette */
-:root {
-    --ui-yellow: #E29E4A;
-    --ui-sky-blue: #6FBDE2;
-}
-/* State palette */
-:root {
-    --ui-state-error: #FFCCCC;
-    --ui-state-error-border: #993333;
-    --ui-state-error-text: #661111;
-}
+/* TODO:
+- Convert the other themes to CSS Variables
+- Allow user to set default CSS theme in JS config
+- Export the themes as identical JS objects
+- For theme switcher, update root-level CSS properties via JS (https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0)
+ */
 
 :root {
-    --ui-gray-light: #516873;
-    --ui-gray: #263340;
-    --ui-gray-dark: #16202B;
-    --ui-gray-darker: #151A1F;
-    --ui-gray-darkest: #14202A;
-}
-
-/* Interface UI Colors */
-:root {
+    /* Interface UI Colors */
     --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;
 }