Start fixing viewports

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"}>

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)
+*/

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;
 

OHIFViewer-react/src/FlexboxLayout/ViewerMain.styl

@@ -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)

OHIFViewer-react/src/Header/Header.css

@@ -1,5 +1,8 @@
 .header {
   padding: 10px 10px 0;
+
+  height: var(--top-bar-height);
+  overflow: hidden;
 }
 
 .header-brand {

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>
             </>