diff --git a/platform/ui/src/design/styles/common/button.styl b/platform/ui/src/design/styles/common/button.styl index ea3f0b1eb..fc9086038 100644 --- a/platform/ui/src/design/styles/common/button.styl +++ b/platform/ui/src/design/styles/common/button.styl @@ -51,3 +51,9 @@ button.close position: relative; display: inline-block; vertical-align: middle; + +.btn-sm + padding: .25rem .5rem; + font-size: .875rem; + line-height: 1.5; + border-radius: .2rem; diff --git a/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.css b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.css new file mode 100644 index 000000000..c357a188e --- /dev/null +++ b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.css @@ -0,0 +1,18 @@ +.ErrorBoundaryDialogTitle { + margin-top: 0; +} + +.ErrorBoundaryDialogButton { + outline: none; +} + +.ErrorBoundaryDialogIcon { + margin-right: 5px; + width: 10px; + transform: rotate(-90deg); + vertical-align: middle; +} + +.ErrorBoundaryDialogIcon.opened { + transform: rotate(0deg); +} diff --git a/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js index 24a5807c0..6137e59a8 100644 --- a/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js +++ b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js @@ -1,26 +1,46 @@ -import React from 'react'; +import React, { useState } from 'react'; +import classnames from 'classnames'; import PropTypes from 'prop-types'; -import { ErrorBoundary } from '@ohif/ui'; +import { ErrorBoundary, Icon } from '@ohif/ui'; import { servicesManager } from './../../App'; +import './ErrorBoundaryDialog.css'; + const { UIModalService } = servicesManager.services; const ErrorBoundaryDialog = ({ context, children }) => { const handleOnError = (error, componentStack) => { - const ErrorDialog = () => ( -
-
-

- {context}: {error.message} -

+ const ErrorDialog = () => { + const [open, setOpen] = useState(false); + + return ( +
+
+

+ {context}: {error.message} +

+
+ + + {open &&
{componentStack}
}
-
{componentStack}
-
- ); + ); + }; UIModalService.show({ content: ErrorDialog, - title: `${context}: ${error.message}`, + title: `Something went wrong in ${context}`, }); };