fix(styles): Switch from stylus to CSS for app-level styles. Add CSS variables for theme

OHIFViewer-react/src/App.js

@@ -5,6 +5,9 @@ import ViewerRouting from "./ViewerRouting.js";
 import StandaloneRouting from './StandaloneRouting.js';
 import IHEInvokeImageDisplay from './IHEInvokeImageDisplay.js';
 import './App.css';
+import './variables.css';
+// TODO: figure out how to change themes dynamically
+import './theme-tide.css';
 import { StudyList } from 'react-viewerbase';
 
 const reload = () => window.location.reload();

OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.css

@@ -0,0 +1,47 @@
+.FlexboxLayout {
+    display: flex;
+    flex: 1;
+    flex-flow: row nowrap;
+    align-items: stretch;
+    height: calc(100% - var(--toolbar-height));
+    width: 100%;
+}
+
+.sidebar-menu {
+    height: 100%;
+    /* required transformation to make inner fixed elements relative to this one*/
+    transform: scale(1);
+    transition: var(--sidebar-transition);
+}
+
+.sidebar-left {
+    border-right: var(--ui-border-thickness) solid var(--ui-border-color);
+    flex: 1;
+    margin-left: calc(var(--left-sidebar-menu-width) * -1);
+    max-width: var(--left-sidebar-menu-width);
+    order: 1
+}
+
+.sidebar-left.sidebar-open {
+    margin-left: 0
+}
+
+.main-content {
+    flex: 1;
+    height: 100%;
+    order: 2;
+    overflow: hidden;
+    transition: var(--sidebar-transition);
+    width: 100%;
+}
+
+.sidebar-right {
+    flex: 1;
+    margin-right: calc(var(--right-sidebar-menu-width) * -1);
+    max-width: var(--right-sidebar-menu-width);
+    order: 3;
+}
+
+.sidebar-right.sidebar-open {
+    margin-right: 0;
+}

OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js

@@ -4,6 +4,7 @@ import OHIF from 'ohif-core';
 import cornerstone from 'cornerstone-core';
 import { StudyBrowser } from 'react-viewerbase';
 import ViewerMain from './ViewerMain.js';
+import './FlexboxLayout.css';
 // TODO: Where should we put ViewerMain? ohif-core or react-viewerbase?
 
 /**
@@ -66,7 +67,7 @@ class FlexboxLayout extends Component {
         super(props);
 
         this.state = {
-            leftSidebarOpen: true,
+            leftSidebarOpen: true, // TODO: switch to false by default. Leaving it like this for testing
             rightSidebarOpen: false,
             studiesForBrowser: this.getStudiesForBrowser(),
         };
@@ -135,7 +136,7 @@ class FlexboxLayout extends Component {
     }
 
     render() {
-        let mainContentClassName = "mainContent"
+        let mainContentClassName = "main-content"
         if (this.state.leftSidebarOpen) {
             mainContentClassName += ' sidebar-left-open';
         }
@@ -146,14 +147,14 @@ class FlexboxLayout extends Component {
 
         // TODO[react]: Add measurementLightTable
         return (
-            <div className="viewerSection">
-                <div className={this.state.leftSidebarOpen ? "sidebarMenu sidebar-left sidebar-open" : "sidebarMenu sidebar-left"}>
+            <div className="FlexboxLayout">
+                <div className={this.state.leftSidebarOpen ? "sidebar-menu sidebar-left sidebar-open" : "sidebarMenu sidebar-left"}>
                     <StudyBrowser studies={this.state.studiesForBrowser}/>
                 </div>
                 <div className={mainContentClassName}>
                     <ViewerMain studies={this.props.studies}/>
                 </div>
-                <div className={this.state.rightSidebarOpen ? "sidebarMenu sidebar-right sidebar-open" : "sidebarMenu sidebar-right"}>
+                <div className={this.state.rightSidebarOpen ? "sidebar-menu sidebar-right sidebar-open" : "sidebarMenu sidebar-right"}>
                     {/*{{> measurementLightTable (clone this)}}*/}
                 </div>
             </div>

OHIFViewer-react/src/FlexboxLayout/ViewerMain.styl

@@ -1,18 +1,16 @@
-@import "{ohif:viewerbase}/app"
-
 #viewer
-  height: "calc(100% - %s)" % $topBarHeight
+  height: "calc(100% - %s)" % var(--top-bar-height)
 
   &>.loadingTextDiv
-    //theme('color', '$textSecondaryColor')
+    color: var(--text-secondary-color);
     font-size: 30px
     height: 100%
-    line-height: "calc(100% - %s)" % $topBarHeight
+    line-height: "calc(100% - %s)" % var(--top-bar-height)
 
 .ViewerMain
   width: 100%
   height: 100%
-  //transition(all 0.3s ease)
+  transition: all 0.3s ease
 
   #imageViewerViewports
     .viewportContainer

OHIFViewer-react/src/StandaloneRouting.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 //import PropTypes from "prop-types";
-import Viewer from "./viewer/viewer";
 import qs from 'query-string'
+import Viewer from "./Viewer/Viewer";
 import OHIF from 'ohif-core';
 import createDisplaySets from "./lib/createDisplaySets";
 

OHIFViewer-react/src/Viewer/Viewer.css

@@ -0,0 +1,11 @@
+#viewer {
+  background-color: black;
+  height: 100%;
+  width: 100%;
+}
+
+.loadingTextDiv {
+  color: var(--text-secondary-color);
+  font-size: 30px;
+}
+

OHIFViewer-react/src/Viewer/Viewer.js

@@ -4,7 +4,8 @@ import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import OHIF from 'ohif-core';
 import { CineDialog } from 'react-viewerbase';
-import FlexboxLayout from '../flexboxLayout/flexboxLayout.js';
+import FlexboxLayout from '../FlexboxLayout/FlexboxLayout.js';
+import './Viewer.css';
 
 /**
  * Inits OHIF Hanging Protocol's onReady.

OHIFViewer-react/src/ViewerFromStudyData.js

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import OHIF from 'ohif-core';
-import Viewer from "./viewer/viewer.js";
+import Viewer from "./Viewer/Viewer.js";
 import createDisplaySets from './lib/createDisplaySets.js';
 
 class ViewerFromStudyData extends Component {

OHIFViewer-react/src/flexboxLayout/flexboxLayout.styl

@@ -1,65 +0,0 @@
-.viewerSection
-  display: flex
-  flex: 1
-  flex-flow: row nowrap
-  align-items: stretch
-  height: 'calc(100% - %s)' % ($toolbarHeight)
-  width: 100%
-
-  .sidebarMenu
-    height: 100%
-    // required transformation to make inner fixed elements relative to this one
-    transform(scale(1))
-    transition($sidebarTransition)
-
-    .sidebar-option
-      height: 100%
-      max-width: inherit
-      position: absolute
-      transform(translateX(100%))
-      transition($sidebarTransition)
-      width: 100%
-
-      &.active
-        transform(translateX(0%))
-
-  .sidebar-left
-    theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
-    flex: 1
-    margin-left: - $studiesSidebarMenuWidth
-    max-width: $studiesSidebarMenuWidth
-    order: 1
-
-    &.sidebar-open
-      margin-left: 0
-
-  .mainContent
-    flex: 1
-    height: 100%
-    order: 2
-    overflow: hidden
-    transition($sidebarTransition)
-    width: 100%
-
-  .sidebar-right
-    flex: 1
-    margin-right: - $rightSidebarMenuWidth
-    max-width: $rightSidebarMenuWidth
-    order: 3
-    position: relative
-
-    &[data-timepoints="3"]
-      margin-right: - ($rightSidebarMenuWidth + 135.5px)
-      max-width: $rightSidebarMenuWidth + 135.5px
-
-    &[data-timepoints="4"]
-      margin-right: - ($rightSidebarMenuWidth + 270px)
-      max-width: $rightSidebarMenuWidth + 270px
-
-    &.sidebar-open
-      margin-right: 0
-
-  .studiesListedChanger
-    theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
-    padding: 20px 10px
-    text-align: center

OHIFViewer-react/src/sha.js

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

OHIFViewer-react/src/theme-tide.css

@@ -0,0 +1,33 @@
+/* "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;
+}
+
+:root {
+    --ui-gray-light: #516873;
+    --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;
+    --ui-border-color: #44626F;
+    --ui-border-color-dark: #3C5D80;
+    --ui-border-color-active: #00a4d9;
+    --primary-background-color: #000000;
+    --box-background-color: #3E5975;
+}

OHIFViewer-react/src/variables.css

@@ -0,0 +1,30 @@
+/* Sizes */
+:root {
+    --top-bar-height: 40px;
+    --top-bar-expanded-height: 160px;
+    --toolbar-height: 78px;
+    --toolbar-drawer-height: 62px;
+    --left-sidebar-menu-width: 307px;
+    --right-sidebar-menu-width: 323px;
+    --study-list-padding: 8%;
+    --study-list-padding-medium-screen: 10px;
+}
+
+/* Fonts */
+:root {
+    --logo-font-family: "Sanchez";
+    --logo-font-weight: 300;
+}
+
+/* Transitions */
+:root {
+    --transition-duration: 0.3s;
+    --transition-effect: ease;
+    --sidebar-transition: all 0.3s ease;
+}
+
+/* Thicknesses */
+:root {
+    --viewport-border-thickness: 1px;
+    --ui-border-thickness: 1px;
+}

OHIFViewer-react/src/viewer/viewer.styl

@@ -1,13 +0,0 @@
-@import "{ohif:viewerbase}/app"
-
-body
-  background-color: black
-
-#viewer
-  background-color: black
-  height: 100%
-  width: 100%
-
-.loadingTextDiv
-  theme('color', '$textSecondaryColor')
-  font-size: 30px