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)}
)}
)}
-
+