diff --git a/OHIFViewer-react/src/App.js b/OHIFViewer-react/src/App.js index d418d7fc3..2fef83862 100644 --- a/OHIFViewer-react/src/App.js +++ b/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(); diff --git a/OHIFViewer-react/src/flexboxLayout/ConnectedCornerstoneViewport.js b/OHIFViewer-react/src/FlexboxLayout/ConnectedCornerstoneViewport.js similarity index 100% rename from OHIFViewer-react/src/flexboxLayout/ConnectedCornerstoneViewport.js rename to OHIFViewer-react/src/FlexboxLayout/ConnectedCornerstoneViewport.js diff --git a/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.css b/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.css new file mode 100644 index 000000000..eee5bc25c --- /dev/null +++ b/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; +} diff --git a/OHIFViewer-react/src/flexboxLayout/flexboxLayout.js b/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js similarity index 93% rename from OHIFViewer-react/src/flexboxLayout/flexboxLayout.js rename to OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js index c9114b99d..5d6de1a8a 100644 --- a/OHIFViewer-react/src/flexboxLayout/flexboxLayout.js +++ b/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 ( -
-
+
+
-
+
{/*{{> measurementLightTable (clone this)}}*/}
diff --git a/OHIFViewer-react/src/flexboxLayout/ViewerMain.js b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js similarity index 100% rename from OHIFViewer-react/src/flexboxLayout/ViewerMain.js rename to OHIFViewer-react/src/FlexboxLayout/ViewerMain.js diff --git a/OHIFViewer-react/src/flexboxLayout/ViewerMain.styl b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.styl similarity index 76% rename from OHIFViewer-react/src/flexboxLayout/ViewerMain.styl rename to OHIFViewer-react/src/FlexboxLayout/ViewerMain.styl index 217e089e8..848a6aa65 100644 --- a/OHIFViewer-react/src/flexboxLayout/ViewerMain.styl +++ b/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 diff --git a/OHIFViewer-react/src/StandaloneRouting.js b/OHIFViewer-react/src/StandaloneRouting.js index 392e86bf5..7c299da3e 100644 --- a/OHIFViewer-react/src/StandaloneRouting.js +++ b/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"; diff --git a/OHIFViewer-react/src/Viewer/Viewer.css b/OHIFViewer-react/src/Viewer/Viewer.css new file mode 100644 index 000000000..0b3d4cfc3 --- /dev/null +++ b/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; +} + diff --git a/OHIFViewer-react/src/viewer/viewer.js b/OHIFViewer-react/src/Viewer/Viewer.js similarity index 97% rename from OHIFViewer-react/src/viewer/viewer.js rename to OHIFViewer-react/src/Viewer/Viewer.js index 0e5cc60b6..11a60dea3 100644 --- a/OHIFViewer-react/src/viewer/viewer.js +++ b/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. diff --git a/OHIFViewer-react/src/ViewerFromStudyData.js b/OHIFViewer-react/src/ViewerFromStudyData.js index 84f34c10b..a52137aa5 100644 --- a/OHIFViewer-react/src/ViewerFromStudyData.js +++ b/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 { diff --git a/OHIFViewer-react/src/flexboxLayout/flexboxLayout.styl b/OHIFViewer-react/src/flexboxLayout/flexboxLayout.styl deleted file mode 100644 index 0c76fb94e..000000000 --- a/OHIFViewer-react/src/flexboxLayout/flexboxLayout.styl +++ /dev/null @@ -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 diff --git a/OHIFViewer-react/src/sha.js b/OHIFViewer-react/src/sha.js index fd953bc87..691334c78 100644 --- a/OHIFViewer-react/src/sha.js +++ b/OHIFViewer-react/src/sha.js @@ -1 +1 @@ -export default 'cd6f177bca2cf2258d3cd5a148500715ac759b04'; +export default '09ac6ee3470aafaa8202bb5113bf21bcde924374'; diff --git a/OHIFViewer-react/src/theme-tide.css b/OHIFViewer-react/src/theme-tide.css new file mode 100644 index 000000000..dfb0673ad --- /dev/null +++ b/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; +} diff --git a/OHIFViewer-react/src/variables.css b/OHIFViewer-react/src/variables.css new file mode 100644 index 000000000..0e430b294 --- /dev/null +++ b/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; +} diff --git a/OHIFViewer-react/src/viewer/viewer.styl b/OHIFViewer-react/src/viewer/viewer.styl deleted file mode 100644 index e10fe6eb8..000000000 --- a/OHIFViewer-react/src/viewer/viewer.styl +++ /dev/null @@ -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