From 4fbc208b41fcaa0f957a49409cb55e91c6397d03 Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Sat, 29 Dec 2018 12:02:18 -0200 Subject: [PATCH] (React) - Header and Dropdown component (#327) * 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 --- .gitignore | 3 +- OHIFViewer-react/public/index.html | 7 + OHIFViewer-react/src/Header/Header.css | 59 +++++ OHIFViewer-react/src/Header/Header.js | 34 +++ .../src/Header/HeaderMenuList.json | 12 + OHIFViewer-react/src/Header/index.js | 3 + OHIFViewer-react/src/Viewer/Viewer.js | 3 + .../src/components/Dropdown/Dropdown.css | 91 +++++++ .../src/components/Dropdown/Dropdown.js | 108 ++++++++ OHIFViewer-react/src/components/index.js | 5 + OHIFViewer-react/src/images/icons.svg | 237 ++++++++++++++++++ OHIFViewer-react/src/theme-tide.css | 7 + 12 files changed, 568 insertions(+), 1 deletion(-) create mode 100644 OHIFViewer-react/src/Header/Header.css create mode 100644 OHIFViewer-react/src/Header/Header.js create mode 100644 OHIFViewer-react/src/Header/HeaderMenuList.json create mode 100644 OHIFViewer-react/src/Header/index.js create mode 100644 OHIFViewer-react/src/components/Dropdown/Dropdown.css create mode 100644 OHIFViewer-react/src/components/Dropdown/Dropdown.js create mode 100644 OHIFViewer-react/src/components/index.js create mode 100644 OHIFViewer-react/src/images/icons.svg diff --git a/.gitignore b/.gitignore index ba1908ec6..a105adc27 100644 --- a/.gitignore +++ b/.gitignore @@ -9,4 +9,5 @@ npm-debug.log Packages/active-entry/helloworld/ LesionTracker/tests/nightwatch/reports/ docs/_book -OHIFViewer-react/build/ \ No newline at end of file +OHIFViewer-react/build/ +.DS_Store diff --git a/OHIFViewer-react/public/index.html b/OHIFViewer-react/public/index.html index 39857f962..7b51614ea 100644 --- a/OHIFViewer-react/public/index.html +++ b/OHIFViewer-react/public/index.html @@ -1,5 +1,6 @@ + @@ -11,6 +12,11 @@ + + + + @@ -20,4 +26,5 @@
+ diff --git a/OHIFViewer-react/src/Header/Header.css b/OHIFViewer-react/src/Header/Header.css new file mode 100644 index 000000000..7845dade7 --- /dev/null +++ b/OHIFViewer-react/src/Header/Header.css @@ -0,0 +1,59 @@ +.header { + padding: 10px 10px 0; +} + +.header-brand { + height: 30px; + text-decoration: none; + float: left; +} + +.header-logo-image { + fill: transparent; + height: 100%; + margin: 0 8px 0 0; + width: 30px; + float: left; +} + +.header-logo-text { + display: inline-block; + font-family: var(--logo-font-family); + font-size: 14px; + font-weight: var(--logo-font-weight); + color: var(--text-primary-color); + line-height: 30px; +} + +.header-btn { + color: var(--text-secondary-color); + cursor: pointer; + font-size: 13px; + font-weight: 500; + line-height: 26px; +} + +.header-btn:hover { + color: var(--hover-color); +} + +.header-btn:active { + color: var(--active-color); +} + +.header-studyListLinkSection { + border-left: var(--ui-border-thickness) solid var(--ui-border-color); + margin: 3px 0 0 10px; + padding: 0 0 0 10px; +} + +.header-menu { + color: var(--text-primary-color); + float: right; + padding: 4px 0; + font-size: 13px; + font-weight: 400; + line-height: 18px; + text-decoration: none; + margin-right: 10px; +} diff --git a/OHIFViewer-react/src/Header/Header.js b/OHIFViewer-react/src/Header/Header.js new file mode 100644 index 000000000..30b13a877 --- /dev/null +++ b/OHIFViewer-react/src/Header/Header.js @@ -0,0 +1,34 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { Dropdown } from "../components" +import Icons from "../images/icons.svg" +import './Header.css' +import list from './HeaderMenuList.json' + +function Header() { + return ( +
+ + + + +
Open Health Imaging Foundation
+ + + Study list + +
+ {/* TODO: research-use */} + + +
+ +
+ ) +} + +export default Header diff --git a/OHIFViewer-react/src/Header/HeaderMenuList.json b/OHIFViewer-react/src/Header/HeaderMenuList.json new file mode 100644 index 000000000..7a374fed1 --- /dev/null +++ b/OHIFViewer-react/src/Header/HeaderMenuList.json @@ -0,0 +1,12 @@ +[ + { + "title": "Preferences", + "icon": "fa fa-user", + "link": "http://www.google.com" + }, + { + "title": "About", + "icon": "fa fa-info", + "link": "http://ohif.org" + } +] diff --git a/OHIFViewer-react/src/Header/index.js b/OHIFViewer-react/src/Header/index.js new file mode 100644 index 000000000..7cd29d7ab --- /dev/null +++ b/OHIFViewer-react/src/Header/index.js @@ -0,0 +1,3 @@ +import Header from './Header' + +export default Header diff --git a/OHIFViewer-react/src/Viewer/Viewer.js b/OHIFViewer-react/src/Viewer/Viewer.js index 5874e9b60..7a43189ba 100644 --- a/OHIFViewer-react/src/Viewer/Viewer.js +++ b/OHIFViewer-react/src/Viewer/Viewer.js @@ -4,6 +4,8 @@ import cornerstone from 'cornerstone-core'; import cornerstoneTools from 'cornerstone-tools'; import OHIF from 'ohif-core'; import { CineDialog } from 'react-viewerbase'; + +import Header from '../Header' import ConnectedFlexboxLayout from '../FlexboxLayout/ConnectedFlexboxLayout.js'; import './Viewer.css'; @@ -81,6 +83,7 @@ class Viewer extends Component { render() { return (<> +
{/**/}
diff --git a/OHIFViewer-react/src/components/Dropdown/Dropdown.css b/OHIFViewer-react/src/components/Dropdown/Dropdown.css new file mode 100644 index 000000000..ec4c41e41 --- /dev/null +++ b/OHIFViewer-react/src/components/Dropdown/Dropdown.css @@ -0,0 +1,91 @@ +.dd-menu { + float: left; + margin-right: 10px; + cursor: pointer; + position: relative; + z-index: 999; +} + +.dd-title { + font-size: 13px; +} + +.dd-menu-toggle { + display: inline-block; +} + +.dd-caret-down { + display: inline-block; + width: 0; + height: 0; + margin-top: 0.5rem; + margin-left: 0.5rem; + border-top: 5px solid; + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.dd-menu-list { + position: absolute; + top: 100%; + margin-top: 10px; + background: white; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + overflow: hidden; + transition: all 300ms ease; + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; +} + +.dd-menu-list.open { + display: inline-block; +} + +.dd-menu-list.left { + left: 0; +} + +.dd-menu-list.right { + right: 0; +} + +.dd-menu-list.center { + left: 50%; + transform: translateX(-50%) ; + -webkit-transform: translateX(-50%) ; + -moz-transform: translateX(-50%) ; + -ms-transform: translateX(-50%) ; + -o-transform: translateX(-50%) ; +} + +.dd-item { + display: flex; + color: var(--text-color-active); + padding: 10px 15px; + border-bottom: 1px solid #ccc; +} + +.dd-item:hover { + text-decoration: none; + background: #eee; +} + +.dd-item:last-child { + border-bottom: none; +} + +.dd-item-icon { + width: 10px; + text-align: center; + margin-right: 10px; +} + +.dd-item-icon:before { + vertical-align: middle; +} diff --git a/OHIFViewer-react/src/components/Dropdown/Dropdown.js b/OHIFViewer-react/src/components/Dropdown/Dropdown.js new file mode 100644 index 000000000..ec2d0d632 --- /dev/null +++ b/OHIFViewer-react/src/components/Dropdown/Dropdown.js @@ -0,0 +1,108 @@ +import React, { Component } from 'react' +import PropTypes from "prop-types"; +import './Dropdown.css' + +class Dropdown extends Component { + state = { + open: false + } + + renderList = () => { + const { list, link, align } = this.props + + if (!this.state.open) { + return null + } + + return ( +
+ { + list.map(({ icon, title, link, onClick }, key) => ( + this.handleOnClick(onClick)} + > + {icon && } + {title} + + )) + } +
+ ) + } + + handleOnClick = (onClick) => { + this.toggleList() + + if (onClick) { + onClick() + } + } + + handleMouseClick = (e) => { + if (this.node.contains(e.target)) { + return + } + + this.toggleList() + } + + renderTitleElement = () => { + const { titleElement, title } = this.props + + if (titleElement) return titleElement + + return ( + <> + {title} + + + ) + } + + toggleList = () => { + const { open } = this.state + let state = true + + document.addEventListener('mousedown', this.handleMouseClick, false) + + if (open) { + document.removeEventListener('mousedown', this.handleMouseClick, false) + state = false + } + + this.setState({ + open: state + }) + + } + + render() { + const { open } = this.state + + return ( +
this.node = node}> +
+ {this.renderTitleElement()} +
+ + {this.renderList()} +
+ ) + } +} + +Dropdown.propTypes = { + titleElement: PropTypes.node, + align: PropTypes.oneOf(['left', 'center', 'right']), + list: PropTypes.arrayOf(PropTypes.shape({ + title: PropTypes.string.isRequired, + icon: PropTypes.string, + onClick: PropTypes.func, + link: PropTypes.string, + })) +}; + +export default Dropdown diff --git a/OHIFViewer-react/src/components/index.js b/OHIFViewer-react/src/components/index.js new file mode 100644 index 000000000..c3c54735e --- /dev/null +++ b/OHIFViewer-react/src/components/index.js @@ -0,0 +1,5 @@ +import Dropdown from './Dropdown/Dropdown' + +export { + Dropdown +} diff --git a/OHIFViewer-react/src/images/icons.svg b/OHIFViewer-react/src/images/icons.svg new file mode 100644 index 000000000..b15421f67 --- /dev/null +++ b/OHIFViewer-react/src/images/icons.svg @@ -0,0 +1,237 @@ + + + HUD + + + + + + + + + Additional Measurements + + + + + + Lesions + + + + + + Settings + + + + Complete + + + + + + Locked + + + + Studies + + + + + + Window / Level + + + + + + + Link + + + + + + + Non-Target Measurement + + + + + + + + Target Measurement + + + + + + + Target CR Measurement + + CR + + + + + Target UN Measurement + + UN + + + + + Temporary Measurement + + + + + + + + More + + + + + + Pan + + + + + + + + + + + Zoom + + + + + + + Invert + + + + Stack Scroll + + + + Elliptical ROI + + + + Magnify + + + + Reset + + + + Rotate + + + + Rotate Right + + + + Cineplay Toggle + + + + Vertical + + + + Horizontal + + + + Trial Information + + + + + + Expand + + + + Add + + + + Close + + + + + + Comment + + + + + Capture Screen + + + + + + + + Warning + + + + + + + Viewport Link + + + + + + + Theme + + + + Log + + + + Server + + + + Study List + + + + Logout + + + + Password + + + diff --git a/OHIFViewer-react/src/theme-tide.css b/OHIFViewer-react/src/theme-tide.css index 6f28ff5c5..031de3458 100644 --- a/OHIFViewer-react/src/theme-tide.css +++ b/OHIFViewer-react/src/theme-tide.css @@ -29,4 +29,11 @@ --ui-gray-dark: #16202B; --ui-gray-darker: #151A1F; --ui-gray-darkest: #14202A; + + /* Text Colors */ + --text-color-active: #000000; + --text-primary-color: #ffffff; + --text-secondary-color: #91b9cd; + --large-numbers-color: #6fbde2; + --text-disabled-color: #878787; }