From 2093a0036584b2cc698c8f06fe62b334523b1029 Mon Sep 17 00:00:00 2001 From: Danny Brown Date: Wed, 22 Apr 2020 16:16:53 -0400 Subject: [PATCH] fix: whiteLabeling should support component creation by passing React to defined fn (#1659) --- docs/latest/viewer/configuration.md | 20 +++++- docs/latest/viewer/themeing.md | 8 +-- platform/core/src/classes/MetadataProvider.js | 2 +- platform/viewer/public/config/default.js | 1 - platform/viewer/public/config/demo.js | 1 - .../public/config/docker_nginx-orthanc.js | 1 - .../docker_openresty-orthanc-keycloak.js | 1 - .../public/config/docker_openresty-orthanc.js | 1 - platform/viewer/public/config/google.js | 1 - .../viewer/public/config/local_dcm4chee.js | 1 - platform/viewer/public/config/netlify.js | 1 - .../viewer/public/config/public_dicomweb.js | 1 - platform/viewer/src/App.js | 18 +++--- .../viewer/src/components/Header/Header.css | 63 +++++++++---------- .../viewer/src/connectedComponents/Viewer.js | 12 ++-- .../src/context/WhiteLabelingContext.js | 10 +++ .../src/context/WhiteLabellingContext.js | 10 --- .../viewer/src/studylist/StudyListRoute.js | 12 ++-- 18 files changed, 86 insertions(+), 78 deletions(-) create mode 100644 platform/viewer/src/context/WhiteLabelingContext.js delete mode 100644 platform/viewer/src/context/WhiteLabellingContext.js diff --git a/docs/latest/viewer/configuration.md b/docs/latest/viewer/configuration.md index 10cf85952..348b9a4c1 100644 --- a/docs/latest/viewer/configuration.md +++ b/docs/latest/viewer/configuration.md @@ -11,7 +11,25 @@ are: ```js window.config = { routerBasename: '/', - whiteLabelling: {}, + whiteLabeling: { + /* Optional: Should return a React component to be rendered in the "Logo" section of the application's Top Navigation bar */ + createLogoComponentFn: function(React) { + return React.createElement('a', { + target: '_self', + rel: 'noopener noreferrer', + className: 'header-brand', + href: '/', + style: { + display: 'block', + textIndent: '-9999px', + background: 'url(/svg-file-hosted-at-domain-root.svg)', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + width: '200px', + }, + }); + }, + }, extensions: [], showStudyList: true, filterQueryParam: false, diff --git a/docs/latest/viewer/themeing.md b/docs/latest/viewer/themeing.md index b53f103b4..03518ec7d 100644 --- a/docs/latest/viewer/themeing.md +++ b/docs/latest/viewer/themeing.md @@ -66,11 +66,11 @@ open to pull requests and discussion issues. Current white-labeling options are limited. We expose the ability to replace the "Logo" section of the application with a custom "Logo" component. You can do -this by adding a `whiteLabelling` key to your +this by adding a `whiteLabeling` key to your [configuration file](./configuration.md). ```js -function RadicalImagingLogo() { +function RadicalImagingLogo(React) { return React.createElement( 'a', { @@ -83,8 +83,8 @@ function RadicalImagingLogo() { ); } -props.whiteLabelling = { - logoComponent: RadicalImagingLogo(), +props.whiteLabeling = { + createLogoComponentFn: RadicalImagingLogo, }; ``` diff --git a/platform/core/src/classes/MetadataProvider.js b/platform/core/src/classes/MetadataProvider.js index 105ce1847..30eef3fc7 100644 --- a/platform/core/src/classes/MetadataProvider.js +++ b/platform/core/src/classes/MetadataProvider.js @@ -378,7 +378,7 @@ class MetadataProvider { } metadata = { - overlays + overlays, }; break; diff --git a/platform/viewer/public/config/default.js b/platform/viewer/public/config/default.js index 4514c834a..4a5d927ae 100644 --- a/platform/viewer/public/config/default.js +++ b/platform/viewer/public/config/default.js @@ -1,7 +1,6 @@ window.config = { // default: '/' routerBasename: '/', - whiteLabelling: {}, extensions: [], showStudyList: true, filterQueryParam: false, diff --git a/platform/viewer/public/config/demo.js b/platform/viewer/public/config/demo.js index bf7640f55..8de041580 100644 --- a/platform/viewer/public/config/demo.js +++ b/platform/viewer/public/config/demo.js @@ -1,6 +1,5 @@ window.config = { routerBasename: '/', - whiteLabelling: {}, extensions: [], showStudyList: true, servers: { diff --git a/platform/viewer/public/config/docker_nginx-orthanc.js b/platform/viewer/public/config/docker_nginx-orthanc.js index 5caddff2b..812972475 100644 --- a/platform/viewer/public/config/docker_nginx-orthanc.js +++ b/platform/viewer/public/config/docker_nginx-orthanc.js @@ -1,6 +1,5 @@ window.config = { routerBasename: '/', - whiteLabelling: {}, showStudyList: true, servers: { dicomWeb: [ diff --git a/platform/viewer/public/config/docker_openresty-orthanc-keycloak.js b/platform/viewer/public/config/docker_openresty-orthanc-keycloak.js index c6fd6596e..a872f4a44 100644 --- a/platform/viewer/public/config/docker_openresty-orthanc-keycloak.js +++ b/platform/viewer/public/config/docker_openresty-orthanc-keycloak.js @@ -1,6 +1,5 @@ window.config = { routerBasename: '/', - whiteLabelling: {}, showStudyList: true, servers: { // This is an array, but we'll only use the first entry for now diff --git a/platform/viewer/public/config/docker_openresty-orthanc.js b/platform/viewer/public/config/docker_openresty-orthanc.js index 32f6aec21..d23915fc7 100644 --- a/platform/viewer/public/config/docker_openresty-orthanc.js +++ b/platform/viewer/public/config/docker_openresty-orthanc.js @@ -1,6 +1,5 @@ window.config = { routerBasename: '/', - whiteLabelling: {}, showStudyList: true, servers: { // This is an array, but we'll only use the first entry for now diff --git a/platform/viewer/public/config/google.js b/platform/viewer/public/config/google.js index 67783d12c..7a4eb9d83 100644 --- a/platform/viewer/public/config/google.js +++ b/platform/viewer/public/config/google.js @@ -1,6 +1,5 @@ window.config = { routerBasename: '/', - whiteLabelling: {}, enableGoogleCloudAdapter: true, healthcareApiEndpoint: 'https://healthcare.googleapis.com/v1beta1', servers: { diff --git a/platform/viewer/public/config/local_dcm4chee.js b/platform/viewer/public/config/local_dcm4chee.js index afc9429ce..1dc87f528 100644 --- a/platform/viewer/public/config/local_dcm4chee.js +++ b/platform/viewer/public/config/local_dcm4chee.js @@ -1,7 +1,6 @@ window.config = { // default: '/' routerBasename: '/', - whiteLabelling: {}, // default: '' showStudyList: true, servers: { diff --git a/platform/viewer/public/config/netlify.js b/platform/viewer/public/config/netlify.js index 81bdd0188..003c7b266 100644 --- a/platform/viewer/public/config/netlify.js +++ b/platform/viewer/public/config/netlify.js @@ -1,6 +1,5 @@ window.config = { routerBasename: '/pwa', - whiteLabelling: {}, showStudyList: true, servers: { dicomWeb: [ diff --git a/platform/viewer/public/config/public_dicomweb.js b/platform/viewer/public/config/public_dicomweb.js index c6c30463a..0569b5045 100644 --- a/platform/viewer/public/config/public_dicomweb.js +++ b/platform/viewer/public/config/public_dicomweb.js @@ -1,6 +1,5 @@ window.config = { routerBasename: '/', - whiteLabelling: {}, showStudyList: true, servers: { dicomWeb: [ diff --git a/platform/viewer/src/App.js b/platform/viewer/src/App.js index 1a196db26..5c39a99e5 100644 --- a/platform/viewer/src/App.js +++ b/platform/viewer/src/App.js @@ -50,7 +50,7 @@ import { getActiveContexts } from './store/layout/selectors.js'; import store from './store'; /** Contexts */ -import WhiteLabellingContext from './context/WhiteLabellingContext'; +import WhiteLabelingContext from './context/WhiteLabelingContext'; import UserManagerContext from './context/UserManagerContext'; import AppContext from './context/AppContext'; @@ -77,7 +77,9 @@ class App extends Component { PropTypes.shape({ routerBasename: PropTypes.string.isRequired, oidc: PropTypes.array, - whiteLabelling: PropTypes.object, + whiteLabeling: PropTypes.shape({ + createLogoComponentFn: PropTypes.func, + }), extensions: PropTypes.array, }), ]).isRequired, @@ -87,7 +89,6 @@ class App extends Component { static defaultProps = { config: { showStudyList: true, - whiteLabelling: {}, oidc: [], extensions: [], }, @@ -107,7 +108,6 @@ class App extends Component { cornerstoneExtensionConfig: {}, extensions: [], routerBasename: '/', - whiteLabelling: {}, }; this._appConfig = { @@ -146,7 +146,7 @@ class App extends Component { } render() { - const { whiteLabelling, routerBasename } = this._appConfig; + const { whiteLabeling, routerBasename } = this._appConfig; const { UINotificationService, UIDialogService, @@ -162,7 +162,7 @@ class App extends Component { - + - + @@ -190,7 +190,7 @@ class App extends Component { - + @@ -198,7 +198,7 @@ class App extends Component { - + diff --git a/platform/viewer/src/components/Header/Header.css b/platform/viewer/src/components/Header/Header.css index d356665c5..7d8d1624d 100644 --- a/platform/viewer/src/components/Header/Header.css +++ b/platform/viewer/src/components/Header/Header.css @@ -4,8 +4,16 @@ height: var(--top-bar-height); } -.dd-item { - width: 100%; +.header-left-box { + display: inline-block; + position: relative; +} + +.header-brand { + text-decoration: none; + height: 30px; + float: left; + clear: both; } /* Home Page */ @@ -17,35 +25,11 @@ 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; + height: 50px; padding: 0; } -.header-logo-image { - fill: transparent; - height: 100%; - margin: 0 8px 0 0; - width: 30px; - float: left; -} - .entry-header.header-big .header-logo-image { margin-right: 20px; width: 50px; @@ -57,6 +41,24 @@ height: auto; } +/** OTHER STYLES **/ + +.dd-item { + width: 100%; +} + +.header-viewerLink { + float: left; +} + +.header-logo-image { + fill: transparent; + height: 100%; + margin: 0 8px 0 0; + width: 30px; + float: left; +} + .header-btn { color: var(--text-secondary-color); cursor: pointer; @@ -130,13 +132,6 @@ width: 40%; } - /* Account for notification bar height */ - .entry-header.header-big .header-brand { - } - - .dd-menu { - } - /* Toggle Notification Bar */ .notification-bar { display: block; diff --git a/platform/viewer/src/connectedComponents/Viewer.js b/platform/viewer/src/connectedComponents/Viewer.js index e0824933a..851d9462f 100644 --- a/platform/viewer/src/connectedComponents/Viewer.js +++ b/platform/viewer/src/connectedComponents/Viewer.js @@ -14,7 +14,7 @@ import SidePanel from './../components/SidePanel.js'; import { extensionManager } from './../App.js'; // Contexts -import WhiteLabellingContext from '../context/WhiteLabellingContext.js'; +import WhiteLabelingContext from '../context/WhiteLabelingContext.js'; import UserManagerContext from '../context/UserManagerContext'; import AppContext from '../context/AppContext'; @@ -227,8 +227,8 @@ class Viewer extends Component { return ( <> {/* HEADER */} - - {whiteLabelling => ( + + {whiteLabeling => ( {userManager => ( @@ -244,14 +244,16 @@ class Viewer extends Component { } userManager={userManager} > - {whiteLabelling.logoComponent} + {whiteLabeling && + whiteLabeling.createLogoComponentFn && + whiteLabeling.createLogoComponentFn(React)} )} )} )} - + {/* TOOLBAR */} OHIFLogo(), +}; + +const WhiteLabelingContext = React.createContext(defaultContextValues); + +export default WhiteLabelingContext; diff --git a/platform/viewer/src/context/WhiteLabellingContext.js b/platform/viewer/src/context/WhiteLabellingContext.js deleted file mode 100644 index d13f9246b..000000000 --- a/platform/viewer/src/context/WhiteLabellingContext.js +++ /dev/null @@ -1,10 +0,0 @@ -import OHIFLogo from '../components/OHIFLogo/OHIFLogo.js'; -import React from 'react'; - -const defaultContextValues = { - logoComponent: OHIFLogo(), -}; - -const WhiteLabellingContext = React.createContext(defaultContextValues); - -export default WhiteLabellingContext; diff --git a/platform/viewer/src/studylist/StudyListRoute.js b/platform/viewer/src/studylist/StudyListRoute.js index 1e2726a55..2808937ea 100644 --- a/platform/viewer/src/studylist/StudyListRoute.js +++ b/platform/viewer/src/studylist/StudyListRoute.js @@ -19,7 +19,7 @@ import filesToStudies from '../lib/filesToStudies.js'; // Contexts import UserManagerContext from '../context/UserManagerContext'; -import WhiteLabellingContext from '../context/WhiteLabellingContext'; +import WhiteLabelingContext from '../context/WhiteLabelingContext'; import AppContext from '../context/AppContext'; const { urlUtil: UrlUtil } = OHIF.utils; @@ -209,8 +209,8 @@ function StudyListRoute(props) { /> ) : null} {healthCareApiWindows} - - {whiteLabelling => ( + + {whiteLabeling => ( {userManager => ( - {whiteLabelling.logoComponent} + {whiteLabeling && + whiteLabeling.createLogoComponentFn && + whiteLabeling.createLogoComponentFn(React)} )} )} - +