Header component (#328)

* add .DS_Store to .gitignore

* create header component

* add icons image file to the project

* add new theme variables

* insert header component into Viewer

* add web fonts

* create dropdown component

* update header styles

* import dropdown with custom list into header component

* reindent index

* Update index.html

* create json file for header menu settings

* import header menu

* header prefix

* remove overflow hidden -- it's hiding Dropdown menu

* header fixes

* header css adjustments

* add Back to Viewer btn

OHIFViewer-react/src/Header/Header.css

@@ -1,16 +1,38 @@
-.header {
+.entry-header {
   padding: 10px 10px 0;
-
   height: var(--top-bar-height);
-  overflow: hidden;
+}
+
+.entry-header.header-big {
+  background: rgba(21,25,30,0.7);
+  padding: 10px var(--study-list-padding);
+  height: auto;
+  display: inline-block;
+  width: 100%;
+}
+
+.header-left-box {
+  display: inline-block;
+  position: relative;
+}
+
+.header-viewerLink {
+  float: left;
 }
 
 .header-brand {
   height: 30px;
   text-decoration: none;
   float: left;
+  clear: both;
 }
 
+.entry-header.header-big .header-brand {
+  height: auto;
+  padding: 25px 0;
+}
+
+
 .header-logo-image {
   fill: transparent;
   height: 100%;
@@ -19,6 +41,12 @@
   float: left;
 }
 
+.entry-header.header-big .header-logo-image {
+  margin: 0 20px 0 0;
+  width: 50px;
+  height: 50px;
+}
+
 .header-logo-text {
   display: inline-block;
   font-family: var(--logo-font-family);
@@ -28,6 +56,11 @@
   line-height: 30px;
 }
 
+.entry-header.header-big .header-logo-text {
+  font-size: 30px;
+  line-height: 36px;
+}
+
 .header-btn {
   color: var(--text-secondary-color);
   cursor: pointer;
@@ -48,6 +81,7 @@
   border-left: var(--ui-border-thickness) solid var(--ui-border-color);
   margin: 3px 0 0 10px;
   padding: 0 0 0 10px;
+  display: inline-block;
 }
 
 .header-menu {
@@ -60,3 +94,7 @@
   text-decoration: none;
   margin-right: 10px;
 }
+
+.entry-header.header-big .header-menu {
+  margin-right: 0;
+}

OHIFViewer-react/src/Header/Header.js

@@ -1,21 +1,38 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link, withRouter } from 'react-router-dom'
 import { Dropdown } from "../components"
 import Icons from "../images/icons.svg"
 import './Header.css'
 import list from './HeaderMenuList.json'
 
-function Header() {
+function Header({ home, lastStudy, location }) {
-  return (
+  const { state } = location
-    <div className='header'>
+
-      <a target="_blank" rel="noopener noreferrer" className="brand" href="http://ohif.org">
+  return (
-        <svg className="logo-image">
+    <div className={`entry-header ${home ? 'header-big' : ''}`}>
-          <use xlinkHref={`${Icons}#icon-ohif-logo`} />
+      <div className='header-left-box'>
-        </svg>
+        {
-        <div className="logo-text">Open Health Imaging Foundation</div>
+          state && state.studyLink &&
-      </a>
+          <Link to={state.studyLink} className="header-btn header-viewerLink">
+            Back to Viewer
+          </Link>
+        }
+
+        <a target="_blank" rel="noopener noreferrer" className="header-brand" href="http://ohif.org">
+          <svg className="header-logo-image">
+            <use xlinkHref={`${Icons}#icon-ohif-logo`} />
+          </svg>
+          <div className="header-logo-text">Open Health Imaging Foundation</div>
+        </a>
+
+        {!home &&
+          <Link className='header-btn header-studyListLinkSection' to={{
+            pathname: "/",
+            state: { studyLink: location.pathname }
+          }}>Study list</Link>
+        }
+      </div>
 
-      <Link className='btn studyListLinkSection' to="/">Study list</Link>
 
       <div className="header-menu">
         {/* TODO: research-use */}
@@ -31,4 +48,4 @@ function Header() {
   )
 }
 
-export default Header
+export default withRouter(Header)

OHIFViewer-react/src/StudyListWithData.js

@@ -1,4 +1,4 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
 import PropTypes from "prop-types";
 import OHIF from 'ohif-core';
 import { withRouter } from 'react-router-dom';
@@ -98,7 +98,7 @@ class StudyListWithData extends Component {
         const studyCount = this.state.studies ? this.state.studies.length : 0;
 
         return (<>
-            <Header />
+            <Header home />
             <StudyList studies={this.state.studies}
                 studyCount={studyCount}
                 studyListFunctionsEnabled={false}
@@ -107,7 +107,7 @@ class StudyListWithData extends Component {
                 pageSize={this.pageSize}
                 defaultSort={this.defaultSort}
                 onSearch={this.onSearch} />
-            </>
+        </>
         );
     }
 }

OHIFViewer-react/src/Viewer/Viewer.js

@@ -84,15 +84,15 @@ class Viewer extends Component {
 
     render() {
         return (<>
-                <Header />
+            <Header />
-                <div className='viewerDialogs'>
+            <div className='viewerDialogs'>
-                    {/*<CineDialog/>*/}
+                {/*<CineDialog/>*/}
-                </div>
+            </div>
-                <div id="viewer" className='Viewer'>
+            <div id="viewer" className='Viewer'>
-                    <ConnectedToolbarRow/>
+                <ConnectedToolbarRow />
-                    <ConnectedFlexboxLayout studies={this.state.studies}/>
+                <ConnectedFlexboxLayout studies={this.state.studies} />
-                </div>
+            </div>
-            </>
+        </>
         );
     }
 }

OHIFViewer-react/src/components/Dropdown/Dropdown.js

@@ -8,7 +8,7 @@ class Dropdown extends Component {
   }
 
   renderList = () => {
-    const { list, align } = this.props
+    const { list, link, align } = this.props
 
     if (!this.state.open) {
       return null

OHIFViewer-react/src/sha.js

@@ -1 +1 @@
-export default '4fbc208b41fcaa0f957a49409cb55e91c6397d03';
+export default '2cf00fe8274068bf5b06bac94c813d242bc90eb1';