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

fix: whiteLabeling should support component creation by passing React to defined fn (#1659)

Browse Source
This commit is contained in:
Danny Brown 2020-04-22 16:16:53 -04:00 committed by GitHub
parent b1dad6b61b
commit 2093a00365
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 86 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/latest/viewer/configuration.md
View File

@ -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,

8
docs/latest/viewer/themeing.md
View File

@ -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,
};
```

2
platform/core/src/classes/MetadataProvider.js
View File

@ -378,7 +378,7 @@ class MetadataProvider {
}
metadata = {
overlays
overlays,
};
break;

1
platform/viewer/public/config/default.js
View File

@ -1,7 +1,6 @@
window.config = {
// default: '/'
routerBasename: '/',
whiteLabelling: {},
extensions: [],
showStudyList: true,
filterQueryParam: false,

1
platform/viewer/public/config/demo.js
View File

@ -1,6 +1,5 @@
window.config = {
routerBasename: '/',
whiteLabelling: {},
extensions: [],
showStudyList: true,
servers: {

1
platform/viewer/public/config/docker_nginx-orthanc.js
View File

@ -1,6 +1,5 @@
window.config = {
routerBasename: '/',
whiteLabelling: {},
showStudyList: true,
servers: {
dicomWeb: [

1
platform/viewer/public/config/docker_openresty-orthanc-keycloak.js
View File

@ -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

1
platform/viewer/public/config/docker_openresty-orthanc.js
View File

@ -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

1
platform/viewer/public/config/google.js
View File

@ -1,6 +1,5 @@
window.config = {
routerBasename: '/',
whiteLabelling: {},
enableGoogleCloudAdapter: true,
healthcareApiEndpoint: 'https://healthcare.googleapis.com/v1beta1',
servers: {

1
platform/viewer/public/config/local_dcm4chee.js
View File

@ -1,7 +1,6 @@
window.config = {
// default: '/'
routerBasename: '/',
whiteLabelling: {},
// default: ''
showStudyList: true,
servers: {

1
platform/viewer/public/config/netlify.js
View File

@ -1,6 +1,5 @@
window.config = {
routerBasename: '/pwa',
whiteLabelling: {},
showStudyList: true,
servers: {
dicomWeb: [

1
platform/viewer/public/config/public_dicomweb.js
View File

@ -1,6 +1,5 @@
window.config = {
routerBasename: '/',
whiteLabelling: {},
showStudyList: true,
servers: {
dicomWeb: [

18
platform/viewer/src/App.js
View File

@ -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 {
<OidcProvider store={store} userManager={this._userManager}>
<UserManagerContext.Provider value={this._userManager}>
<Router basename={routerBasename}>
<WhiteLabellingContext.Provider value={whiteLabelling}>
<WhiteLabelingContext.Provider value={whiteLabeling}>
<SnackbarProvider service={UINotificationService}>
<DialogProvider service={UIDialogService}>
<ModalProvider
@ -175,7 +175,7 @@ class App extends Component {
</ModalProvider>
</DialogProvider>
</SnackbarProvider>
</WhiteLabellingContext.Provider>
</WhiteLabelingContext.Provider>
</Router>
</UserManagerContext.Provider>
</OidcProvider>
@ -190,7 +190,7 @@ class App extends Component {
<Provider store={store}>
<I18nextProvider i18n={i18n}>
<Router basename={routerBasename}>
<WhiteLabellingContext.Provider value={whiteLabelling}>
<WhiteLabelingContext.Provider value={whiteLabeling}>
<SnackbarProvider service={UINotificationService}>
<DialogProvider service={UIDialogService}>
<ModalProvider modal={OHIFModal} service={UIModalService}>
@ -198,7 +198,7 @@ class App extends Component {
</ModalProvider>
</DialogProvider>
</SnackbarProvider>
</WhiteLabellingContext.Provider>
</WhiteLabelingContext.Provider>
</Router>
</I18nextProvider>
</Provider>

63
platform/viewer/src/components/Header/Header.css
View File

@ -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;

12
platform/viewer/src/connectedComponents/Viewer.js
View File

@ -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 */}
<WhiteLabellingContext.Consumer>
{whiteLabelling => (
<WhiteLabelingContext.Consumer>
{whiteLabeling => (
<UserManagerContext.Consumer>
{userManager => (
<AppContext.Consumer>
@ -244,14 +244,16 @@ class Viewer extends Component {
}
userManager={userManager}
>
{whiteLabelling.logoComponent}
{whiteLabeling &&
whiteLabeling.createLogoComponentFn &&
whiteLabeling.createLogoComponentFn(React)}
</ConnectedHeader>
)}
</AppContext.Consumer>
)}
</UserManagerContext.Consumer>
)}
</WhiteLabellingContext.Consumer>
</WhiteLabelingContext.Consumer>
{/* TOOLBAR */}
<ConnectedToolbarRow

10
platform/viewer/src/context/WhiteLabelingContext.js Normal file
View File

@ -0,0 +1,10 @@
import OHIFLogo from '../components/OHIFLogo/OHIFLogo.js';
import React from 'react';
const defaultContextValues = {
createLogoComponentFn: React => OHIFLogo(),
};
const WhiteLabelingContext = React.createContext(defaultContextValues);
export default WhiteLabelingContext;

10
platform/viewer/src/context/WhiteLabellingContext.js
View File

@ -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;

12
platform/viewer/src/studylist/StudyListRoute.js
View File

@ -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}
<WhiteLabellingContext.Consumer>
{whiteLabelling => (
<WhiteLabelingContext.Consumer>
{whiteLabeling => (
<UserManagerContext.Consumer>
{userManager => (
<ConnectedHeader
@ -218,12 +218,14 @@ function StudyListRoute(props) {
user={user}
userManager={userManager}
>
{whiteLabelling.logoComponent}
{whiteLabeling &&
whiteLabeling.createLogoComponentFn &&
whiteLabeling.createLogoComponentFn(React)}
</ConnectedHeader>
)}
</UserManagerContext.Consumer>
)}
</WhiteLabellingContext.Consumer>
</WhiteLabelingContext.Consumer>
<div className="study-list-header">
<div className="header">
<h1 style={{ fontWeight: 300, fontSize: '22px' }}>