- Looking for a Live Demo?
- Preview The OHIF Viewer
-
-
-
- 
-
-
-
-
-
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- Our translation management is powered by Locize through their generous support of open source.
-
-
- {t('my translated text')}
; -} - -``` - -### Using outside of OHIF viewer - -OHIF Viewer already sets a main -[I18nextProvider](https://react.i18next.com/latest/i18nextprovider) connected to -the shared i18n instance from `@ohif/i18n`, all extensions inside OHIF Viewer -will share this same provider at the end, you don't need to set new providers at -all. - -But, if you need to use it completely outside of OHIF viewer, you can set the -I18nextProvider this way: - -```js -import i18n from '@ohif/i18n'; -import { I18nextProvider } from 'react-i18next'; -import App from './App'; - -
+
+ | Extension | -Description | -Modules | -
|---|---|---|
| - - Cornerstone - - | -
- A viewport powered by cornerstone.js. Adds support for 2D DICOM rendering and manipulation, as well as support for the tools features in cornerstone-tools. Also adds "CINE Dialog" to the Toolbar.
- |
- Viewport, Toolbar | -
| - - VTK.js - - | -
- A viewport powered by vtk.js. Adds support for volume renderings and advanced features like MPR. Also adds "3D Rotate" to the Toolbar.
- |
- Viewport, Toolbar | -
| - DICOM HTML - | -- Renders text and HTML content for specific SopClassUIDs. - | -Viewport, SopClassHandler | -
| - DICOM PDF - | -- Renders PDFs for a specific SopClassUID. - | -Viewport, SopClassHandler | -
| - DICOM Microscopy - | -- Renders Microscopy images for a specific SopClassUID. - | -Viewport, SopClassHandler | -
| - DICOM Segmentation - | -- Renders segmentation images for a specific SopClassUID. - | -Panel, Toolbar | -
Our translation management is powered by - Locize - through their generous support of open source.
- -
+
+
+ {t('my translated text')}
; } -export default withTranslation('MyNameSpace')(MyComponent); ``` -> Important: if you are using React outside the OHIF Viewer, check the -> [I18nextProvider](#using-outside-of-ohif-viewer) section, `withTranslation` -> HOC doesnt works without a I18nextProvider - -#### Using Hooks - -Also, it's possible to get the `t` tool using -[React Hooks](https://react.i18next.com/latest/usetranslation-hook), but it -requires at least React > 16.8 😉 - ### Using outside of OHIF viewer OHIF Viewer already sets a main @@ -156,6 +149,10 @@ becomes a new namespace automatically. - Header: translations related to OHIF's Header Top Bar - MeasurementTable - Translations for the `@ohif/ui` Measurement Table - UserPreferencesModal - Translations for the `@ohif/ui` Preferences Modal +- Modals - Translations available for other modals +- PatientInfo - Translations for patients info hover +- SidePanel - Translations for side panels +- ToolTip - Translations for tool tips ### How to use another NameSpace inside the current NameSpace? @@ -163,7 +160,7 @@ i18next provides a parsing feature able to get translations strings from any NameSpace, like this following example getting data from `Common` NameSpace: ``` -$t(Common:Reset) +$t('Common:Reset') ``` ## Extending Languages in @ohif/i18n @@ -201,21 +198,21 @@ languages tool. You will need to export all Json files in your `index.js` file, mounting an object like this: -```json -{ - en: { - NameSpace: { - keyWord1: 'keyWord1Translation', - keyWord2: 'keyWord2Translation', - keyWord3: 'keyWord3Translation', - } - }, - 'en-UK': { - NameSpace: { - keyWord1: 'keyWord1DifferentTranslation', - } - } -} +```js + { + en: { + NameSpace: { + keyWord1: 'keyWord1Translation', + keyWord2: 'keyWord2Translation', + keyWord3: 'keyWord3Translation', + } + }, + 'en-UK': { + NameSpace: { + keyWord1: 'keyWord1DifferentTranslation', + } + } + } ``` Please check the `index.js` files inside locales folder for an example of this @@ -248,7 +245,7 @@ To set a brand new language you can do it in two different ways: - Setting it only in your project or extension: -You'll need a a final object like the following, what is setting French as +You'll need a final object like the following, what is setting French as language, and send it to `addLocales` method. ```js @@ -284,6 +281,15 @@ You can also set them manually, one by one, using this --- + + +## Test Language +We have created a test language that its translations can be seen in the locales folder. You can copy paste the folder and its `.json` namespaces and add your custom +language translations. + +> If you apply the test-LNG you can see all the elements get appended with 'Test {}'. +> For instance `Study list` becomes `Test Study list`. + ## Language Detections @ohif/i18n uses diff --git a/platform/docs/docs/viewer/themeing.md b/platform/docs/docs/viewer/themeing.md index 420ebbf7e..abe20ac4e 100644 --- a/platform/docs/docs/viewer/themeing.md +++ b/platform/docs/docs/viewer/themeing.md @@ -1,97 +1,163 @@ ---- -sidebar_position: 2 -sidebar_label: Themeing ---- -# Viewer: Themeing +# Viewer: Theming -Themeing is currently accomplished with color variables that are defined within -the [`:root`](https://css-tricks.com/almanac/selectors/r/root/) selector -(allowing them to cascade across all elements). This repository's components, -and the ones we consume from our -[`@ohif/ui` component library](https://react.ohif.org/styling-and-theming) -utilize them. We are interested in pursuing more robust themeing options, and -open to pull requests and discussion issues. -```css -:root { - /* Interface UI Colors */ - --default-color: #9ccef9; - --hover-color: #ffffff; - --active-color: #20a5d6; - --ui-border-color: #44626f; - --ui-border-color-dark: #3c5d80; - --ui-border-color-active: #00a4d9; - --primary-background-color: #000000; - --box-background-color: #3e5975; +`OHIF-v3` has introduced the [`LayoutTemplateModule`](../extensions/modules/layout-template.md) which enables addition of custom layouts. You can easily design your custom components inside an extension and consume it via the layoutTemplate module you write. - --text-primary-color: #ffffff; - --text-secondary-color: #91b9cd; - --input-background-color: #2c363f; - --input-placeholder-color: #d3d3d3; - --table-hover-color: #2c363f; - --table-text-primary-color: #ffffff; - --table-text-secondary-color: #91b9cd; - --large-numbers-color: #6fbde2; - --state-error: #ffcccc; - --state-error-border: #ffcccc; - --state-error-text: #ffcccc; +## Tailwind CSS +[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework for creating custom user interfaces. - /* Common palette */ - --ui-yellow: #e29e4a; - --ui-sky-blue: #6fbde2; - /* State palette */ - --ui-state-error: #ffcccc; - --ui-state-error-border: #993333; - --ui-state-error-text: #661111; - --ui-gray-lighter: #436270; - --ui-gray-light: #516873; - --ui-gray: #263340; - --ui-gray-dark: #16202b; - --ui-gray-darker: #151a1f; - --ui-gray-darkest: #14202a; +Below you can see a compiled version of the tailwind configs. +Each section can be edited accordingly. For instance screen size break points, primary +and secondary colors, etc. - --calendar-day-color: #d3d3d3; - --calendar-day-border-color: #d3d3d3; - --calendar-day-active-hover-background-color: #516873; - --calendar-main-color: #263340; - --viewport-border-thickness: 1px; + + +```js +module.exports = { + prefix: '', + important: false, + separator: ':', + theme: { + screens: { + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + }, + colors: { + overlay: 'rgba(0, 0, 0, 0.8)', + transparent: 'transparent', + black: '#000', + white: '#fff', + initial: 'initial', + inherit: 'inherit', + + indigo: { + dark: '#0b1a42', + }, + aqua: { + pale: '#7bb2ce', + }, + + primary: { + light: '#5acce6', + main: '#0944b3', + dark: '#090c29', + active: '#348cfd', + }, + + secondary: { + light: '#3a3f99', + main: '#2b166b', + dark: '#041c4a', + active: '#1f1f27', + }, + + common: { + bright: '#e1e1e1', + light: '#a19fad', + main: '#fff', + dark: '#726f7e', + active: '#2c3074', + }, + + customgreen: { + 100: '#05D97C', + }, + + customblue: { + 100: '#c4fdff', + 200: '#38daff', + }, + }, + }, } ``` + +You can also use the color variable like before. For instance: + + +```js +primary: { + default: ‘var(--default-color)‘, + light: ‘#5ACCE6’, + main: ‘#0944B3’, + dark: ‘#090C29’, + active: ‘#348CFD’, +} +``` + + ## White Labeling -> A white-label product is a product or service produced by one company (the -> producer) that other companies (the marketers) rebrand to make it appear as if -> they had made it - [Wikipedia: White-Label Product][wikipedia] +A white-label product is a product or service produced by one company (the producer) that other companies (the marketers) rebrand to make it appear as if they had made it - [Wikipedia: White-Label Product](https://en.wikipedia.org/wiki/White-label_product) -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 `whiteLabeling` key to your -[configuration file](./configuration.md). +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 whiteLabeling key to your configuration file. ```js -function RadicalImagingLogo(React) { - return React.createElement( - 'a', - { - target: '_blank', - rel: 'noopener noreferrer', - className: 'header-brand', - href: 'http://radicalimaging.com', +window.config = { + /** .. **/ + whiteLabeling: { + createLogoComponentFn: function (React) { + return React.createElement( + 'a', + { + target: '_blank', + rel: 'noopener noreferrer', + className: 'text-white underline', + href: 'http://radicalimaging.com', + }, + React.createElement('h5', {}, 'RADICAL IMAGING') + ) }, - React.createElement('h5', {}, 'RADICAL IMAGING') - ); + }, + /** .. **/ } - -props.whiteLabeling = { - createLogoComponentFn: RadicalImagingLogo, -}; ``` +> You can simply use the stylings from tailwind CSS in the whiteLabeling + + +In addition to text, you can also add your custom logo + + +```js +window.config = { + /** .. **/ + whiteLabeling: { + createLogoComponentFn: function (React) { + return React.createElement( + 'a', + { + target: '_self', + rel: 'noopener noreferrer', + className: 'text-purple-600 line-through', + href: '/', + }, + React.createElement('img', { + src: './customLogo.svg', + // className: 'w-8 h-8', + }) + ) + }, + }, + /** .. **/ +} +``` + +The output will look like + + + + + + diff --git a/docs/latest/yarn.lock b/platform/docs/docs/yarn.lock similarity index 100% rename from docs/latest/yarn.lock rename to platform/docs/docs/yarn.lock