From 301ff1adc7ab9db66763838760e6aea9702fcd17 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Mon, 31 Dec 2018 14:54:22 +0100
Subject: [PATCH] Start fixing viewports

---
 .../src/FlexboxLayout/FlexboxLayout.js        |  2 -
 .../src/FlexboxLayout/ViewerMain.css          | 41 +++++++++++++++++++
 .../src/FlexboxLayout/ViewerMain.js           |  2 +-
 .../src/FlexboxLayout/ViewerMain.styl         | 32 ---------------
 OHIFViewer-react/src/Header/Header.css        |  3 ++
 OHIFViewer-react/src/Viewer/Viewer.js         |  3 +-
 6 files changed, 47 insertions(+), 36 deletions(-)
 create mode 100644 OHIFViewer-react/src/FlexboxLayout/ViewerMain.css
 delete mode 100644 OHIFViewer-react/src/FlexboxLayout/ViewerMain.styl

diff --git a/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js b/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js
index 256aaf720..a5e77e06e 100644
--- a/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js
+++ b/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
 import { StudyBrowser } from 'react-viewerbase';
 import ViewerMain from './ViewerMain.js';
-import ConnectedToolbarRow from './ConnectedToolbarRow.js';
 
 import './FlexboxLayout.css';
 // TODO: Where should we put ViewerMain? ohif-core or react-viewerbase?
@@ -151,7 +150,6 @@ class FlexboxLayout extends Component {
                     <StudyBrowser studies={this.state.studiesForBrowser}/>
                 </div>
                 <div className={mainContentClassName}>
-                    <ConnectedToolbarRow/>
                     <ViewerMain studies={this.props.studies}/>
                 </div>
                 <div className={this.props.rightSidebarOpen ? "sidebar-menu sidebar-right sidebar-open" : "sidebar-menu sidebar-right"}>
diff --git a/OHIFViewer-react/src/FlexboxLayout/ViewerMain.css b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.css
new file mode 100644
index 000000000..c8521db42
--- /dev/null
+++ b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.css
@@ -0,0 +1,41 @@
+#viewer {
+  height: "calc(100% - %s)" % var(--top-bar-height);
+}
+
+#viewer > .loadingTextDiv {
+  color: var(--text-secondary-color);
+  font-size: 30px;
+  height: 100%;
+  line-height: "calc(100% - %s)" % var(--top-bar-height);
+}
+
+.ViewerMain {
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease;
+}
+
+.ViewerMain>div {
+  width: 100%;
+  height: 100%;
+}
+
+.ViewerMain #imageViewerViewports .viewportContainer {
+  /*theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)*/
+  /*float: left;
+  position: relative;*/
+  outline: 0; /* Prevent blue outline in Chrome */
+}
+
+.ViewerMain #imageViewerViewports .viewportContainer:hover,
+.ViewerMain #imageViewerViewports .viewportContainer:active,
+.ViewerMain #imageViewerViewports .viewportContainer:hover.active {
+  outline: 0; /* Prevent blue outline in Chrome */
+}
+
+/*    &:hover
+      //theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
+
+    &.active, &:hover.active
+      //theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
+*/
diff --git a/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js
index 15d30c592..a2dd42ac9 100644
--- a/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js
+++ b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js
@@ -7,7 +7,7 @@ import { LayoutManager } from 'react-viewerbase';
 import { OHIF } from 'ohif-core';
 import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport.js';
 import StackManager from '../lib/StackManager.js';
-import './ViewerMain.styl';
+import './ViewerMain.css';
 
 //const { StudyLoadingListener, StudyPrefetcher, ResizeViewportManager } = OHIF.classes;
 
diff --git a/OHIFViewer-react/src/FlexboxLayout/ViewerMain.styl b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.styl
deleted file mode 100644
index 848a6aa65..000000000
--- a/OHIFViewer-react/src/FlexboxLayout/ViewerMain.styl
+++ /dev/null
@@ -1,32 +0,0 @@
-#viewer
-  height: "calc(100% - %s)" % var(--top-bar-height)
-
-  &>.loadingTextDiv
-    color: var(--text-secondary-color);
-    font-size: 30px
-    height: 100%
-    line-height: "calc(100% - %s)" % var(--top-bar-height)
-
-.ViewerMain
-  width: 100%
-  height: 100%
-  transition: all 0.3s ease
-
-  #imageViewerViewports
-    .viewportContainer
-      //theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
-      float: left
-      position: relative
-
-      outline: 0 // Prevent blue outline in Chrome
-
-      &:hover
-      &.active
-      &:hover.active
-        outline: 0 // Prevent blue outline in Chrome
-
-      &:hover
-        //theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
-
-      &.active, &:hover.active
-        //theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
diff --git a/OHIFViewer-react/src/Header/Header.css b/OHIFViewer-react/src/Header/Header.css
index 7845dade7..52bd48a59 100644
--- a/OHIFViewer-react/src/Header/Header.css
+++ b/OHIFViewer-react/src/Header/Header.css
@@ -1,5 +1,8 @@
 .header {
   padding: 10px 10px 0;
+
+  height: var(--top-bar-height);
+  overflow: hidden;
 }
 
 .header-brand {
diff --git a/OHIFViewer-react/src/Viewer/Viewer.js b/OHIFViewer-react/src/Viewer/Viewer.js
index 102028286..b0c440fac 100644
--- a/OHIFViewer-react/src/Viewer/Viewer.js
+++ b/OHIFViewer-react/src/Viewer/Viewer.js
@@ -7,6 +7,7 @@ import OHIF from 'ohif-core';
 
 import Header from '../Header'
 import ConnectedFlexboxLayout from '../FlexboxLayout/ConnectedFlexboxLayout.js';
+import ConnectedToolbarRow from "../FlexboxLayout/ConnectedToolbarRow";
 import './Viewer.css';
 
 /**
@@ -88,7 +89,7 @@ class Viewer extends Component {
                     {/*<CineDialog/>*/}
                 </div>
                 <div id="viewer" className='Viewer'>
-                    {/*<ToolbarSection/>*/}
+                    <ConnectedToolbarRow/>
                     <ConnectedFlexboxLayout studies={this.state.studies}/>
                 </div>
             </>