docs: services (#1255)
* docs: process docs to include UX Stories requirement * docs: include note regarding different environments * Services init * Remove unused canny logos * docs: add ModalService diagram * docs: GIF of notification * docs: add ui-services page * docs: simplify ui services call out in the general services docs * docs: tips and tricks for UI services * docs: moar pages * docs: dialog gif * docs: services in summary/sidebar * docs: gif examples at top of dialog and notification pages * docs: add UIModal gif * docs: details for Dialog Service * docs: include usage information for ui modal service * docs: detailed information about our UI Notification Service * docs: services diagram * docs: remove unused links * docs: services example and image
This commit is contained in:
Danny Brown
GitHub
parent
42cfce60f5
commit
a2c4161477
@ -26,6 +26,8 @@
|
|||||||
- [Modules](advanced/extensions.md#modules)
|
- [Modules](advanced/extensions.md#modules)
|
||||||
- [Registering](advanced/extensions.md#registering-extensions)
|
- [Registering](advanced/extensions.md#registering-extensions)
|
||||||
- [OHIF Maintained](advanced/extensions.md#ohif-maintained-extensions)
|
- [OHIF Maintained](advanced/extensions.md#ohif-maintained-extensions)
|
||||||
|
- [Services](services/index.md)
|
||||||
|
- [UI](services/ui/index.md)
|
||||||
- [Custom Tools](advanced/custom-tools.md)
|
- [Custom Tools](advanced/custom-tools.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
@ -1,12 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 260.4 82.9" enable-background="new 0 0 260.4 82.9" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<path fill="#525DF9" d="M31.7,8.9c9.6,0,16.5,4.9,19,13.4l0.1,0.4h9.6l-0.1-0.6C57.6,8.5,46.7,0,31.8,0C13.7,0,0,14.1,0,32.9 s13.7,32.9,31.8,32.9c14.9,0,25.8-8.5,28.6-22.1l0.1-0.6h-9.6l-0.1,0.4c-2.5,8.5-9.5,13.4-19,13.4c-13.1,0-21.9-9.6-21.9-24 C9.8,18.6,18.6,8.9,31.7,8.9z"/>
|
|
||||||
<path fill="#525DF9" d="M110.1,58c-2.3,0-3.5-1.4-3.5-4.2V32.7c0-8.8-7.2-14.7-17.9-14.7c-7.5,0-16.7,3.9-18.3,14.9l-0.1,0.6h8.4 l0.1-0.4c1.4-5.7,5.8-6.9,9.3-6.9c6,0,9.5,2.7,9.5,7.4v2.6l-13.6,1.4c-7.6,0.8-15.7,5-15.7,14.6c0,8.1,6,13.5,14.8,13.5 c6.5,0,11.8-3.4,15-6.8c1.3,4.2,4.5,6.5,9.1,6.5c1.7,0,3.2-0.3,5.2-0.9l0.3-0.1v-7l-0.6,0.2C111.5,57.9,110.9,58,110.1,58z M97.7,43.5v7.3c-4.6,4.6-8.9,6.7-13.5,6.7c-2,0-6.8-0.6-6.8-5.7c0-3.8,2.8-6.3,7.4-6.9L97.7,43.5z"/>
|
|
||||||
<path fill="#525DF9" d="M146.5,18c-6.5,0-12,3.1-15.2,6.1v-5.2h-8.9v46h8.9V34.3c2.2-3.2,6.7-8.3,13-8.3c5.6,0,8.7,3.1,8.7,8.8 v30.1h8.9V33.3C161.9,23.7,156.1,18,146.5,18z"/>
|
|
||||||
<path fill="#525DF9" d="M195.8,18c-6.5,0-12,3.1-15.2,6.1v-5.2h-8.9v46h8.9V34.3c2.2-3.2,6.7-8.3,13-8.3c5.6,0,8.7,3.1,8.7,8.8 v30.1h8.9V33.3C211.2,23.7,205.4,18,195.8,18z"/>
|
|
||||||
<polygon fill="#525DF9" points="251.3,18.9 238.6,51.8 237.8,47.9 225.6,18.9 216.2,18.9 234.3,62.4 226,82.9 235,82.9 260.4,18.9 "/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
@ -1,19 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 445.9 638" enable-background="new 0 0 445.9 638" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#5F5DF9" d="M224.5,638C101.1,638,0,537.8,0,414.7V223.3C0,100.2,101.1,0,224.5,0c109.6,0,202.8,78.3,220.9,186.1
|
|
||||||
c2.9,17.4-8.6,33.8-26,36.8c-17.4,2.9-33.7-8.8-36.7-26.2c-13-77-78.6-132.9-157-132.9c-88.2,0-159.3,71.6-159.3,159.5v191.4
|
|
||||||
c0,88,71.1,159.5,159.3,159.5c78.3,0,144.2-55.9,157.1-132.9c2.9-17.4,19.3-29.1,36.6-26.2c17.4,2.9,28.6,19.4,25.7,36.7
|
|
||||||
C427.2,559.7,334,638,224.5,638z"/>
|
|
||||||
</g>
|
|
||||||
<g opacity="0.5">
|
|
||||||
<path fill="#5F5DF9" d="M153.6,347.7c-17.6,0-30.7-14.3-30.7-31.9v-92.3c0-56.8,45.8-103,102.8-103c38.9,0,73.9,21.6,91.7,56.4
|
|
||||||
c8,15.7,1.7,34.9-14,42.9c-15.7,8-35,1.8-43-13.9c-6.8-13.4-21-21.7-35.8-21.7c-21.8,0-40.2,17.6-40.2,39.2v92.3
|
|
||||||
C184.3,333.4,171.2,347.7,153.6,347.7z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
BIN
docs/latest/assets/img/dialog-example.gif
Normal file
BIN
docs/latest/assets/img/dialog-example.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
docs/latest/assets/img/modal-example.gif
Normal file
BIN
docs/latest/assets/img/modal-example.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
docs/latest/assets/img/notification-example.gif
Normal file
BIN
docs/latest/assets/img/notification-example.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
docs/latest/assets/img/services.png
Normal file
BIN
docs/latest/assets/img/services.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
docs/latest/assets/img/ui-services.png
Normal file
BIN
docs/latest/assets/img/ui-services.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
117
docs/latest/services/index.md
Normal file
117
docs/latest/services/index.md
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
# Services
|
||||||
|
|
||||||
|
- [Overview](#/)
|
||||||
|
- [Anatomy](#/)
|
||||||
|
- [UI Services](#/)
|
||||||
|
- [Parting Words](#/)
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Services are a beefier version of [commands][commands]. They provide a set of
|
||||||
|
operations, often tied to some shared state, and are made available to
|
||||||
|
extensions via the `ServicesManager`. Services are particularly well suited to
|
||||||
|
address [cross-cutting concerns][cross-cutting-concerns].
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<a href="/assets/img/services.png">
|
||||||
|
<img src="/assets/img/services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" />
|
||||||
|
</a>
|
||||||
|
<div><i>Diagram showing relationship between React Context and UI Service</i></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Each service should be:
|
||||||
|
|
||||||
|
- self-contained
|
||||||
|
- able to fail and/or be removed without breaking the application
|
||||||
|
- completely interchangeable with another module implementing the same interface
|
||||||
|
|
||||||
|
### An Example
|
||||||
|
|
||||||
|
The simplest service return a new object that has a `name` property, and
|
||||||
|
methods/properties that give the service its functionality. The "Factory
|
||||||
|
Function" that creates the service is provided with the implementation (this is
|
||||||
|
slightly different for UI Services).
|
||||||
|
|
||||||
|
```js
|
||||||
|
const _speak = () => {
|
||||||
|
console.warn('Speak is not implemented');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Factory function to create `HelloWorldService`
|
||||||
|
*
|
||||||
|
* @param {object} implementation
|
||||||
|
* @param {function} implementation.speak - Speak's implementation
|
||||||
|
* @returns HelloWorldService
|
||||||
|
*/
|
||||||
|
export default function createHelloWorldService({ speak }) {
|
||||||
|
return {
|
||||||
|
name: 'HelloWorldService',
|
||||||
|
speak: speak || _speak,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
A service, once created, can be registered with the `ServicesManager` to make it
|
||||||
|
accessible to extensions. Similarly, the application code can access named
|
||||||
|
services from the `ServicesManager`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// In the application
|
||||||
|
const speak = () => {
|
||||||
|
window.alert('HELLO WORLD');
|
||||||
|
};
|
||||||
|
const HelloWorldService = createHelloWorldService({ speak });
|
||||||
|
const servicesManager = new ServicesManager();
|
||||||
|
|
||||||
|
servicesManager.registerService(HelloWorldService);
|
||||||
|
|
||||||
|
// In an extension
|
||||||
|
const { HelloWorldService } = servicesManager.services;
|
||||||
|
|
||||||
|
if (HelloWorldService) {
|
||||||
|
HelloWorldService.speak();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### A work in progress
|
||||||
|
|
||||||
|
Today, we only have maintained UI Services. You can read more about them below.
|
||||||
|
|
||||||
|
In practice, services are live, but the patterns and guidance for them may shift
|
||||||
|
slightly as we begin to develop real-world features that utilize them.
|
||||||
|
|
||||||
|
## UI Services
|
||||||
|
|
||||||
|
A typical web application will have components and state for common UI like
|
||||||
|
modals, notifications, dialogs, etc. A UI service makes it possible to leverage
|
||||||
|
these components from an extension.
|
||||||
|
|
||||||
|
We maintain the following UI Services:
|
||||||
|
|
||||||
|
- [UIDialogService](./ui/ui-dialog-service.md)
|
||||||
|
- [UIModalService](./ui/ui-modal-service.md)
|
||||||
|
- [UINotificationService](./ui/ui-notification-service.md)
|
||||||
|
|
||||||
|
You can read more about a specific service by selecting it in the above list,
|
||||||
|
and more about [UI services in general: here](./ui/index.md)
|
||||||
|
|
||||||
|
## Parting Words
|
||||||
|
|
||||||
|
Services are "concern-specific" code modules that can be consumed across layers.
|
||||||
|
We try to minimize the coupling they introduce by authoring services that are
|
||||||
|
able to fail or be removed. Related patterns that may reduce coupling include:
|
||||||
|
|
||||||
|
- Pub/Sub
|
||||||
|
- Commands
|
||||||
|
|
||||||
|
<!--
|
||||||
|
LINKS
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- prettier-ignore-start -->
|
||||||
|
[commands]: #/
|
||||||
|
[core-services]: https://github.com/OHIF/Viewers/tree/master/platform/core/src/services
|
||||||
|
[services-manager]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/ServicesManager.js
|
||||||
|
[cross-cutting-concerns]: https://en.wikipedia.org/wiki/Cross-cutting_concern
|
||||||
|
<!-- prettier-ignore-end -->
|
||||||
106
docs/latest/services/ui/index.md
Normal file
106
docs/latest/services/ui/index.md
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
# UI Services
|
||||||
|
|
||||||
|
- [Overview](#/)
|
||||||
|
- [Example](#/)
|
||||||
|
- [Tips & Tricks](#/)
|
||||||
|
- [Maintained Services](#/)
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
A typical web application will have components and state for common UI like
|
||||||
|
modals, notifications, dialogs, etc. A UI service makes it possible to leverage
|
||||||
|
these components from an extension.
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<a href="/assets/img/ui-services.png">
|
||||||
|
<img src="/assets/img/ui-services.png" alt="UI Services Diagram" style="margin: 0 auto; max-width: 500px;" />
|
||||||
|
</a>
|
||||||
|
<div><i>Diagram showing relationship between React Context and UI Service</i></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
In `@ohif/core`, we have a collection of service factories. We select one we
|
||||||
|
would like our application to support, create an instance of it, and pass that
|
||||||
|
instance to our `ServicesManager` AND to a React component (in this example,
|
||||||
|
`ModalContext`'s provider).
|
||||||
|
|
||||||
|
The `ModalContext`'s provider:
|
||||||
|
|
||||||
|
- Exposes context values
|
||||||
|
- Exposes methods that leverage `useCallback` hooks
|
||||||
|
- Sets the service's implementation in a `useEffect` hook
|
||||||
|
|
||||||
|
The `ServicesManager` is:
|
||||||
|
|
||||||
|
- Passed to the `ExtensionManager`
|
||||||
|
- The `ExtensionManager` makes the `ServicesManager` available to:
|
||||||
|
- All of it's lifecycle hooks (`preInit`)
|
||||||
|
- Each "getModuleFunction" (`getToolbarModule`, `getPanelModule`, etc.)
|
||||||
|
|
||||||
|
## An Example
|
||||||
|
|
||||||
|
That's all fine and good, but it's still a little too abstract. What does this
|
||||||
|
translate to in practice?
|
||||||
|
|
||||||
|
```js
|
||||||
|
// In the application
|
||||||
|
const UINotificationService = createUINotificationService();
|
||||||
|
const servicesManager = new ServicesManager();
|
||||||
|
|
||||||
|
servicesManager.registerService(UINotificationService);
|
||||||
|
|
||||||
|
// UI Service Provider
|
||||||
|
useEffect(() => {
|
||||||
|
if (service) {
|
||||||
|
service.setServiceImplementation({ hide, show });
|
||||||
|
}
|
||||||
|
}, [service, hide, show]);
|
||||||
|
|
||||||
|
// In an extension
|
||||||
|
const { UINotificationService } = servicesManager.services;
|
||||||
|
|
||||||
|
if (UINotificationService) {
|
||||||
|
UINotificationService.show('Hello from the other side 👋');
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<a href="/assets/img/notification-example.gif">
|
||||||
|
<img src="/assets/img/notification-example.gif" alt="UI Notification Service Example" style="margin: 0 auto; max-width: 500px;" />
|
||||||
|
</a>
|
||||||
|
<div><i>GIF showing successful call of UINotificationService from an extension.</i></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Tips & Tricks
|
||||||
|
|
||||||
|
It's important to remember that all we're doing is making it possible to control
|
||||||
|
bits of the application's UI from an extension. Here are a few non-obvious
|
||||||
|
takeaways worth mentioning:
|
||||||
|
|
||||||
|
- Your application code should continue to use React context
|
||||||
|
(consumers/providers) as it normally would
|
||||||
|
- You can substitute our "out of the box" UI implementations with your own
|
||||||
|
- You can create and register your own UI services
|
||||||
|
- You can choose not to register a service or provide a service implementation
|
||||||
|
- In extensions, you can provide fallback/alternative behavior if an expected
|
||||||
|
service is not registered
|
||||||
|
- No `UIModalService`? Use the `UINotificationService` to notify users.
|
||||||
|
- While we don't have an examples of this, you can technically register a
|
||||||
|
service in an extension and expose it to the core application
|
||||||
|
|
||||||
|
> Note: These are recommended patterns, not hard and fast rules. Following them
|
||||||
|
> will help reduce confusion and interoperability with the larger OHIF
|
||||||
|
> community, but they're not silver bullets. Please speak up, create an issue,
|
||||||
|
> if you would like to discuss new services or improvements to this pattern.
|
||||||
|
|
||||||
|
## Maintained Services
|
||||||
|
|
||||||
|
Our `@ohif/viewer` project is an example of how to glue together the different
|
||||||
|
parts and pieces of the OHIF Platform to create a polished and powerful product.
|
||||||
|
To accomplish that, we maintain several UI Services that you can use in your own
|
||||||
|
project, or provide alternative implementations for:
|
||||||
|
|
||||||
|
| Name | Description | Docs |
|
||||||
|
| --------------------- | ----------- | ------------------------------------ |
|
||||||
|
| UIDialogService | | [Here](./ui-dialog-service.md) |
|
||||||
|
| UIModalService | | [Here](./ui-modal-service.md) |
|
||||||
|
| UINotificationService | | [Here](./ui-notification-service.md) |
|
||||||
49
docs/latest/services/ui/ui-dialog-service.md
Normal file
49
docs/latest/services/ui/ui-dialog-service.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
# UI Dialog Service
|
||||||
|
|
||||||
|
Dialogs have similar characteristics to that of Modals, but often with a
|
||||||
|
streamlined focus. They can be helpful when:
|
||||||
|
|
||||||
|
- We need to grab the user's attention
|
||||||
|
- We need user input
|
||||||
|
- We need to show additional information
|
||||||
|
|
||||||
|
If you're curious about the DOs and DON'Ts of dialogs and modals, check out this
|
||||||
|
article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<a href="/assets/img/dialog-example.gif">
|
||||||
|
<img src="/assets/img/dialog-example.gif" alt="UI Dialog Service Example" style="margin: 0 auto; max-width: 500px;" />
|
||||||
|
</a>
|
||||||
|
<div><i>GIF showing successful call of UIDialogService from an extension.</i></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Interface
|
||||||
|
|
||||||
|
For a more detailed look on the options and return values each of these methods
|
||||||
|
is expected to support, [check out it's interface in `@ohif/core`][interface]
|
||||||
|
|
||||||
|
| API Member | Description |
|
||||||
|
| -------------- | ------------------------------------------------------ |
|
||||||
|
| `create()` | Creates a new Dialog that is displayed until dismissed |
|
||||||
|
| `dismiss()` | Dismisses the specified dialog |
|
||||||
|
| `dismissAll()` | Dismisses all dialogs |
|
||||||
|
|
||||||
|
## Implementations
|
||||||
|
|
||||||
|
| Implementation | Consumer |
|
||||||
|
| ------------------------------------ | -------------------------- |
|
||||||
|
| [Dialog Provider][dialog-provider]\* | Baked into Dialog Provider |
|
||||||
|
|
||||||
|
`*` - Denotes maintained by OHIF
|
||||||
|
|
||||||
|
> 3rd Party implementers may be added to this table via pull requests.
|
||||||
|
|
||||||
|
<!--
|
||||||
|
LINKS
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- prettier-ignore-start -->
|
||||||
|
[interface]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/UIDialogService/index.js
|
||||||
|
[dialog-provider]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/contextProviders/DialogProvider.js
|
||||||
|
[ux-article]: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
|
||||||
|
<!-- prettier-ignore-end -->
|
||||||
50
docs/latest/services/ui/ui-modal-service.md
Normal file
50
docs/latest/services/ui/ui-modal-service.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
# UI Modal Service
|
||||||
|
|
||||||
|
Modals have similar characteristics to that of Dialogs, but are often larger,
|
||||||
|
and only allow for a single instance to be viewable at once. They also tend to
|
||||||
|
be centered, and not draggable. They're commonly used when:
|
||||||
|
|
||||||
|
- We need to grab the user's attention
|
||||||
|
- We need user input
|
||||||
|
- We need to show additional information
|
||||||
|
|
||||||
|
If you're curious about the DOs and DON'Ts of dialogs and modals, check out this
|
||||||
|
article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<a href="/assets/img/modal-example.gif">
|
||||||
|
<img src="/assets/img/modal-example.gif" alt="UI Modal Service Example" style="margin: 0 auto; max-width: 500px;" />
|
||||||
|
</a>
|
||||||
|
<div><i>GIF showing successful call of UIModalService from an extension.</i></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Interface
|
||||||
|
|
||||||
|
For a more detailed look on the options and return values each of these methods
|
||||||
|
is expected to support, [check out it's interface in `@ohif/core`][interface]
|
||||||
|
|
||||||
|
| API Member | Description |
|
||||||
|
| ---------- | ------------------------------------- |
|
||||||
|
| `hide()` | Hides the open modal |
|
||||||
|
| `show()` | Shows the provided content in a modal |
|
||||||
|
|
||||||
|
## Implementations
|
||||||
|
|
||||||
|
| Implementation | Consumer |
|
||||||
|
| ---------------------------------- | ----------------------------- |
|
||||||
|
| [Modal Provider][modal-provider]\* | [OHIFModal][modal-consumer]\* |
|
||||||
|
|
||||||
|
`*` - Denotes maintained by OHIF
|
||||||
|
|
||||||
|
> 3rd Party implementers may be added to this table via pull requests.
|
||||||
|
|
||||||
|
<!--
|
||||||
|
LINKS
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- prettier-ignore-start -->
|
||||||
|
[interface]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/UIModalService/index.js
|
||||||
|
[modal-provider]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/contextProviders/ModalProvider.js
|
||||||
|
[modal-consumer]: https://github.com/OHIF/Viewers/tree/master/platform/ui/src/components/ohifModal
|
||||||
|
[ux-article]: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
|
||||||
|
<!-- prettier-ignore-end -->
|
||||||
51
docs/latest/services/ui/ui-notification-service.md
Normal file
51
docs/latest/services/ui/ui-notification-service.md
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
# UI Notification Service
|
||||||
|
|
||||||
|
Notifications can be annoying and disruptive. They can also deliver timely
|
||||||
|
helpful information, or expedite the user's workflow. Here is some high level
|
||||||
|
guidance on when and how to use them:
|
||||||
|
|
||||||
|
- Notifications should be non-interfering (timely, relevant, important)
|
||||||
|
- We should only show small/brief notifications
|
||||||
|
- Notifications should be contextual to current behavior/actions
|
||||||
|
- Notifications can serve warnings (acting as a confirmation)
|
||||||
|
|
||||||
|
If you're curious about the DOs and DON'Ts of notifications, check out this
|
||||||
|
article: ["How To Design Notifications For Better UX"][ux-article]
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<a href="/assets/img/notification-example.gif">
|
||||||
|
<img src="/assets/img/notification-example.gif" alt="UI Notification Service Example" style="margin: 0 auto; max-width: 500px;" />
|
||||||
|
</a>
|
||||||
|
<div><i>GIF showing successful call of UINotificationService from an extension.</i></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Interface
|
||||||
|
|
||||||
|
For a more detailed look on the options and return values each of these methods
|
||||||
|
is expected to support, [check out it's interface in `@ohif/core`][interface]
|
||||||
|
|
||||||
|
| API Member | Description |
|
||||||
|
| ---------- | --------------------------------------- |
|
||||||
|
| `hide()` | Hides the specified notification |
|
||||||
|
| `show()` | Creates and displays a new notification |
|
||||||
|
|
||||||
|
## Implementations
|
||||||
|
|
||||||
|
| Implementation | Consumer |
|
||||||
|
| ---------------------------------------- | ----------------------------------------- |
|
||||||
|
| [Snackbar Provider][snackbar-provider]\* | [SnackbarContainer][snackbar-container]\* |
|
||||||
|
|
||||||
|
`*` - Denotes maintained by OHIF
|
||||||
|
|
||||||
|
> 3rd Party implementers may be added to this table via pull requests.
|
||||||
|
|
||||||
|
<!--
|
||||||
|
LINKS
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- prettier-ignore-start -->
|
||||||
|
[interface]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/UINotificationService/index.js
|
||||||
|
[snackbar-provider]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/contextProviders/SnackbarProvider.js
|
||||||
|
[snackbar-container]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/components/snackbar/SnackbarContainer.js
|
||||||
|
[ux-article]: https://uxplanet.org/how-to-design-notifications-for-better-ux-6fb0711be54d
|
||||||
|
<!-- prettier-ignore-end -->
|
||||||
Loading…
Reference in New Issue
Block a user