diff --git a/platform/ui/index.js b/platform/ui/index.js index 1d51a1e14..606d4ae26 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -3,6 +3,7 @@ export { ButtonGroup, Icon, IconButton, + Svg, ThemeWrapper, Typography, } from './src/components'; diff --git a/platform/ui/src/assets/icons/logo-ohif-small.svg b/platform/ui/src/assets/icons/logo-ohif-small.svg new file mode 100644 index 000000000..6a8f669f6 --- /dev/null +++ b/platform/ui/src/assets/icons/logo-ohif-small.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/platform/ui/src/assets/icons/notificationwarning-diamond.svg b/platform/ui/src/assets/icons/notificationwarning-diamond.svg new file mode 100644 index 000000000..3ab48f2b9 --- /dev/null +++ b/platform/ui/src/assets/icons/notificationwarning-diamond.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/platform/ui/src/assets/svgs/logo-ohif.svg b/platform/ui/src/assets/svgs/logo-ohif.svg new file mode 100644 index 000000000..7bc90681e --- /dev/null +++ b/platform/ui/src/assets/svgs/logo-ohif.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/platform/ui/src/components/Icon/Icon.jsx b/platform/ui/src/components/Icon/Icon.jsx index 992aabec5..7f32ae937 100644 --- a/platform/ui/src/components/Icon/Icon.jsx +++ b/platform/ui/src/components/Icon/Icon.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import getIcon from './getIcon'; const Icon = ({ name, ...otherProps }) => { - return {getIcon(name, otherProps)}; + return {getIcon(name, { ...otherProps })}; }; Icon.propTypes = { diff --git a/platform/ui/src/components/Icon/getIcon.jsx b/platform/ui/src/components/Icon/getIcon.jsx index deb3218ad..743a91df4 100644 --- a/platform/ui/src/components/Icon/getIcon.jsx +++ b/platform/ui/src/components/Icon/getIcon.jsx @@ -7,10 +7,12 @@ import chevronRight from './../../assets/icons/chevron-right.svg'; import infoLink from './../../assets/icons/info-link.svg'; import launchArrow from './../../assets/icons/launch-arrow.svg'; import launchInfo from './../../assets/icons/launch-info.svg'; +import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg'; +import notificationwarningDiamond from './../../assets/icons/notificationwarning-diamond.svg'; import settings from './../../assets/icons/settings.svg'; +import sorting from './../../assets/icons/sorting.svg'; import sortingActiveDown from './../../assets/icons/sorting-active-down.svg'; import sortingActiveUp from './../../assets/icons/sorting-active-up.svg'; -import sorting from './../../assets/icons/sorting.svg'; const ICONS = { active: active, @@ -20,6 +22,8 @@ const ICONS = { 'info-link': infoLink, 'launch-arrow': launchArrow, 'launch-info': launchInfo, + 'logo-ohif-small': logoOhifSmall, + 'notificationwarning-diamond': notificationwarningDiamond, settings: settings, 'sorting-active-down': sortingActiveDown, 'sorting-active-up': sortingActiveUp, diff --git a/platform/ui/src/components/Svg/Svg.jsx b/platform/ui/src/components/Svg/Svg.jsx new file mode 100644 index 000000000..8e1ab3699 --- /dev/null +++ b/platform/ui/src/components/Svg/Svg.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import getSvg from './getSvg'; + +const Svg = ({ name, ...otherProps }) => { + return {getSvg(name, { ...otherProps })}; +}; + +Svg.propTypes = { + name: PropTypes.string.isRequired, +}; + +export default Svg; diff --git a/platform/ui/src/components/Svg/getSvg.jsx b/platform/ui/src/components/Svg/getSvg.jsx new file mode 100644 index 000000000..dc5e0cb9a --- /dev/null +++ b/platform/ui/src/components/Svg/getSvg.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +// Svgs +import logoOhif from './../../assets/svgs/logo-ohif.svg'; + +const SVGS = { + 'logo-ohif': logoOhif, +}; + +/** + * Return the matching SVG as a React Component. + * Results in an inlined SVG Element. If there's no match, + * return `null` + */ +export default function getSvg(key, props) { + if (!key || !SVGS[key]) { + return React.createElement('div', null, 'Missing SVG'); + } + + return React.createElement(SVGS[key], props); +} + +export { SVGS }; diff --git a/platform/ui/src/components/Svg/index.js b/platform/ui/src/components/Svg/index.js new file mode 100644 index 000000000..600f15e1d --- /dev/null +++ b/platform/ui/src/components/Svg/index.js @@ -0,0 +1,2 @@ +import Svg from './Svg'; +export default Svg; diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js index 42984a806..fdcfc7438 100644 --- a/platform/ui/src/components/index.js +++ b/platform/ui/src/components/index.js @@ -2,7 +2,8 @@ import Button from './Button'; import ButtonGroup from './ButtonGroup'; import Icon from './Icon'; import IconButton from './IconButton'; +import Svg from './Svg'; import ThemeWrapper from './ThemeWrapper/'; import Typography from './Typography'; -export { Button, ButtonGroup, Icon, IconButton, ThemeWrapper, Typography }; +export { Button, ButtonGroup, Icon, IconButton, Svg, ThemeWrapper, Typography }; diff --git a/platform/ui/src/views/StudyList/components/Header.js b/platform/ui/src/views/StudyList/components/Header.js index d684df216..a5937afef 100644 --- a/platform/ui/src/views/StudyList/components/Header.js +++ b/platform/ui/src/views/StudyList/components/Header.js @@ -14,7 +14,7 @@ function Header({ appLogo = OHIFLogo(), children, t }) { return (
-
{appLogo}
+
{appLogo}
{children}
diff --git a/platform/ui/src/views/StudyList/components/OHIFLogo.js b/platform/ui/src/views/StudyList/components/OHIFLogo.js index cb7105e2f..1e5598182 100644 --- a/platform/ui/src/views/StudyList/components/OHIFLogo.js +++ b/platform/ui/src/views/StudyList/components/OHIFLogo.js @@ -1,7 +1,12 @@ import React from 'react'; +import { Svg } from '@ohif/ui'; function OHIFLogo() { - return ICON - Open Health Imaging Foundation; + return ( + + + + ); } export default OHIFLogo;