TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: responsive study list (#1068)

Browse Source 
* feat: 🎸 Load spinner when selecting gcloud store. Add key on td

* feat: 🎸 Code review. Translate loading study status

* feat: 🎸 Code review. Minor code refactoring

* fix: add missing study and index declerations

* Newer version of react-dates (calendar input component)

* Add useMedia hook

* Add useDebounce hook

* Export hooks for consumption

* Pull search filter into own component

* StudyListWithData to StudyListRoute

* Rename pagination component

* Rename Toolbar

* CustomeDateRangePicker to plain ol' css

* Remove unused styles

* Misc

* Magic to make our "OR" filters work

* Play w/ Mobile styles

* Fix pagination pushing out max width for viewport

* Tidy up small and medium templates

* Remove unecessary nesting

* Better mobile header and logo styles

* Fix studyList font size

* Remove unused code

* hookup on click

* Fix table search selectors

* Cypress uses medium width

* Remove irrelevant test

* Fix primary sort

* Fix sort for our smaller displays

* fix study list sometimes longer than specified rowsPerPage

* Simplify date picker styles

* restore study date filters

* Fix about table styling

* fix take value for search

* Fix header sizing for viewer and list route

* Remove dead code

* Restore isLoading

* Update platform/ui/src/components/studyList/StudyList.styl

Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

* Attempt first usage of translations w/ hooks

* Pull from react-i18n library

* Fit presets on to a single line

* add no results message

* Show error message in studyList table

* Update input selectors for e2e tests

* Make sure messages span all columns

* fix test selector for table results

* Skip hover for result rows

* fix imports

* Date filtering w/ config

* Default export

* Pushed to PageComponent

* Remove DropZone

This previously only worked for null/undefined studies. I'm unable to trigger the state by testing the data. This "might" have happened when using a fresh/empty PACS; but even an empty array of studies would not show
This commit is contained in:
Danny BrownandRodrigo Antinarelli authored and GitHub committed 2019-10-28 14:47:57 -04:00
1 parent 70532a6cc6
commit 2cdef4b984
35 files changed
+1814 -1347
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/viewer/src/components/Header/Header.css
+44 -23
View File
@@ -1,11 +1,13 @@
/* Viewer Route */
.entry-header {
padding: 10px 10px 0;
padding: 10px 15px;
height: var(--top-bar-height);
}
/* Home Page */
.entry-header.header-big {
background: rgba(21, 25, 30, 0.7);
padding: 10px var(--study-list-padding);
padding: 35px var(--study-list-padding);
height: auto;
display: inline-block;
width: 100%;
@@ -29,7 +31,7 @@
.entry-header.header-big .header-brand {
height: auto;
padding: 25px 0;
padding: 0;
}
.header-logo-image {
@@ -41,7 +43,7 @@
}
.entry-header.header-big .header-logo-image {
margin: 0 20px 0 0;
margin-right: 20px;
width: 50px;
height: 50px;
}
@@ -97,26 +99,45 @@
margin-right: 1rem;
}
.header-versionInfo {
display: inline-block;
color: black;
background: #9ccef9;
padding: 0px 8px;
border-radius: 16px;
font-size: 12px;
margin-left: 10px;
.notification-bar {
display: none;
position: absolute;
height: 20px;
line-height: 20px;
width: 100%;
background-color: #91b9cd;
color: #ffffff;
font-weight: bold;
text-align: center;
}
.header-versionInfoHome {
display: block;
color: black;
position: absolute;
bottom: 16px;
right: 0;
background: #9ccef9;
padding: 0px 8px;
border-radius: 16px;
font-size: 12px;
font-weight: bold;
@media only screen and (max-width: 768px) {
.entry-header,
.entry-header.header-big {
padding: 30px 15px 10px 15px;
}
.entry-header.header-big .header-logo-image {
margin: 0 10px 0 0;
width: 25px;
height: 25px;
}
.entry-header.header-big .header-logo-text {
width: 40%;
}
/* Account for notification bar height */
.entry-header.header-big .header-brand {
}
.dd-menu {
}
/* Toggle Notification Bar */
.notification-bar {
display: block;
}
.header-menu .research-use {
display: none;
}
}
platform/viewer/src/components/Header/Header.js
+43 -45
View File
@@ -1,5 +1,4 @@
import './Header.css';
import './Header.css';
import { Link, withRouter } from 'react-router-dom';
import React, { Component } from 'react';
@@ -84,60 +83,59 @@ class Header extends Component {
// TODO: reset `this.hotKeysData`
}
// ANTD -- Hamburger, Drawer, Menu
render() {
const { t } = this.props;
const { appConfig = {} } = this.context;
const showStudyList =
appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
return (
<div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
<div className="header-left-box">
{this.props.location && this.props.location.studyLink && (
<Link
to={this.props.location.studyLink}
className="header-btn header-viewerLink"
>
{t('Back to Viewer')}
</Link>
)}
<>
<div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
<div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
<div className="header-left-box">
{this.props.location && this.props.location.studyLink && (
<Link
to={this.props.location.studyLink}
className="header-btn header-viewerLink"
>
{t('Back to Viewer')}
</Link>
)}
<span
className={`${
this.props.home ? 'header-versionInfoHome' : 'header-versionInfo'
}`}
data-cy="header-version-info"
>
v{process.env.VERSION_NUMBER}
</span>
{this.props.children}
{this.props.children}
{showStudyList && !this.props.home && (
<Link
className="header-btn header-studyListLinkSection"
to={{
pathname: '/',
state: { studyLink: this.props.location.pathname },
}}
>
{t('Study list')}
</Link>
)}
</div>
{showStudyList && !this.props.home && (
<Link
className="header-btn header-studyListLinkSection"
to={{
pathname: '/',
state: { studyLink: this.props.location.pathname },
}}
>
{t('Study list')}
</Link>
)}
<div className="header-menu">
<span className="research-use">
{t('INVESTIGATIONAL USE ONLY')}
</span>
<Dropdown title={t('Options')} list={this.options} align="right" />
{/* TODO: We need a Modal service */}
<AboutModal
{...this.state}
onCancel={() =>
this.setState({
isOpen: false,
})
}
/>
</div>
</div>
<div className="header-menu">
<span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
<Dropdown title={t('Options')} list={this.options} align="right" />
<AboutModal
{...this.state}
onCancel={() =>
this.setState({
isOpen: false,
})
}
/>
</div>
</div>
</>
);
}
}
platform/viewer/src/components/OHIFLogo/OHIFLogo.css
+9 -1
View File
@@ -7,7 +7,9 @@
color: var(--text-primary-color);
}
.header-brand:hover, .header-brand:active, .header-band:visited {
.header-brand:hover,
.header-brand:active,
.header-band:visited {
color: var(--text-primary-color);
text-decoration: none;
}
@@ -23,3 +25,9 @@
width: 30px;
font-size: 30px;
}
@media only screen and (max-width: 768px) {
.header-logo-text {
display: none;
}
}
platform/viewer/src/components/OHIFLogo/OHIFLogo.js
+7
View File
@@ -12,6 +12,13 @@ function OHIFLogo() {
href="http://ohif.org"
>
<Icon name="ohif-logo" className="header-logo-image" />
{/* Logo text would fit smaller displays at two lines:
*
* Open Health
* Imaging Foundation
*
* Or as `OHIF` on really small displays
*/}
<Icon name="ohif-text-logo" className="header-logo-text" />
</a>
);
platform/viewer/src/components/SidePanel.css
+7
View File
@@ -38,3 +38,10 @@
transition: var(--sidepanel-transition);
width: 100%;
}
@media only screen and (max-width: 768px) {
/* Account for "Investigational Use" banner height */
.FlexboxLayout {
height: calc(100% - var(--toolbar-height) - var(--top-bar-height) - 16px);
}
}