OHIF-332: Users should be able to see all available hotkeys and language settings in one place (#1895)

* OHIF-330: Update Modal Styles

* feat/ohif-332: finish raw ui

* feat/ohif-332: update mode configuration strategy

* feat/ohif-332: fix hotkey errors

* feat/ohif-332: update hotkey logic with recent merged changes

* feat/ohif-322: wrap

* feat/ohif-322: add disable state

* ohif-332: cr updates

* ohif-332: disable

* ohif-332: cr updates

* ohif-332: extract header component

* ohif-332: cr update to fix merge conflicts and design issue

Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

extensions/default/src/ViewerLayout/Header.jsx

@@ -1,102 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-// TODO: This may fail if package is split from PWA build
-import { useHistory } from 'react-router-dom';
-//
-import { NavBar, Svg, Icon, IconButton, Dropdown, useModal } from '@ohif/ui';
-
-function Header({ children }) {
-  const { t } = useTranslation();
-  const history = useHistory();
-  const { show } = useModal();
-
-  // TODO: IT SHOULD BE REFACTORED WHEN THE MODAL CONTENT IS DEFINED
-  const showAboutModal = useCallback(() => {
-    const modalComponent = () => (
-      <div>{t('AboutModal:OHIF Viewer - About')}</div>
-    );
-    show({
-      title: t('AboutModal:OHIF Viewer - About'),
-      content: modalComponent,
-    });
-  }, [show, t]);
-
-  // TODO: IT SHOULD BE REFACTORED WHEN THE MODAL CONTENT IS DEFINED
-  const showPreferencesModal = useCallback(() => {
-    const modalComponent = () => (
-      <div>{t('UserPreferencesModal:User Preferences')}</div>
-    );
-    show({
-      title: t('UserPreferencesModal:User Preferences'),
-      content: modalComponent,
-    });
-  }, [show, t]);
-
-  return (
-    <NavBar className="justify-between border-b-4 border-black">
-      <div className="flex justify-between flex-1">
-        <div className="flex items-center">
-          {/* // TODO: Should preserve filter/sort
-              // Either injected service? Or context (like react router's `useLocation`?) */}
-          <div
-            className="inline-flex items-center mr-3"
-            onClick={() => history.push('/')}
-          >
-            <Icon
-              name="chevron-left"
-              className="w-8 cursor-pointer text-primary-active"
-            />
-            <div className="ml-4 cursor-pointer">
-              <Svg name="logo-ohif" />
-            </div>
-          </div>
-        </div>
-        <div className="flex items-center">{children}</div>
-        <div className="flex items-center">
-          <span className="mr-3 text-lg text-common-light">
-            {t('Header:INVESTIGATIONAL USE ONLY')}
-          </span>
-          <Dropdown
-            showDropdownIcon={false}
-            list={[
-              {
-                title: t('Header:About'),
-                icon: 'info',
-                onClick: showAboutModal,
-              },
-              {
-                title: t('Header:Preferences'),
-                icon: 'settings',
-                onClick: showPreferencesModal,
-              },
-            ]}
-          >
-            <IconButton
-              variant="text"
-              color="inherit"
-              size="initial"
-              className="text-primary-active"
-            >
-              <Icon name="settings" />
-            </IconButton>
-            <IconButton
-              variant="text"
-              color="inherit"
-              size="initial"
-              className="text-primary-active"
-            >
-              <Icon name="chevron-down" />
-            </IconButton>
-          </Dropdown>
-        </div>
-      </div>
-    </NavBar>
-  );
-}
-
-Header.propTypes = {
-  children: PropTypes.any.isRequired,
-};
-
-export default Header;

extensions/default/src/ViewerLayout/index.jsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { SidePanel, ErrorBoundary } from '@ohif/ui';
-import Header from './Header.jsx';
+import { useTranslation } from 'react-i18next';
+import { SidePanel, ErrorBoundary, UserPreferences, AboutModal, Header, useModal } from '@ohif/ui';
+
 import NestedMenu from './ToolbarButtonNestedMenu.jsx';
 
 // TODO: Having ToolbarPrimary and ToolbarSecondary is ugly, but
 // these are going to be unified shortly so this is good enough for now.
-function ToolbarPrimary({servicesManager}) {
+function ToolbarPrimary({ servicesManager }) {
   const { ToolBarService } = servicesManager.services;
   const defaultTool = {
     icon: 'tool-more-menu',
@@ -82,7 +83,7 @@ function ToolbarPrimary({servicesManager}) {
   </>
 }
 
-function ToolbarSecondary({servicesManager}) {
+function ToolbarSecondary({ servicesManager }) {
   const { ToolBarService } = servicesManager.services;
   const defaultTool = {
     icon: 'tool-more-menu',
@@ -137,19 +138,46 @@ function ToolbarSecondary({servicesManager}) {
   </>
 }
 
-
 function ViewerLayout({
   // From Extension Module Params
   extensionManager,
   servicesManager,
-  commandsManager,
+  hotkeysManager,
   // From Modes
   leftPanels,
   rightPanels,
   viewports,
-  children,
   ViewportGridComp,
 }) {
+  const { t } = useTranslation();
+  const { show, hide } = useModal();
+
+  const { hotkeyDefinitions, hotkeyDefaults } = hotkeysManager;
+  const menuOptions = [
+    {
+      title: t('Header:About'),
+      icon: 'info',
+      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' })
+    },
+    {
+      title: t('Header:Preferences'),
+      icon: 'settings',
+      onClick: () => show({
+        title: t('UserPreferencesModal:User Preferences'),
+        content: UserPreferences,
+        contentProps: {
+          hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
+          hotkeyDefinitions,
+          onCancel: hide,
+          onSubmit: ({ hotkeyDefinitions }) => {
+            hotkeysManager.setHotkeys(hotkeyDefinitions);
+            hide();
+          },
+          onReset: () => hotkeysManager.restoreDefaultBindings()
+        }
+      })
+    },
+  ];
 
   /**
    * Set body classes (tailwindcss) that don't allow vertical
@@ -194,10 +222,10 @@ function ViewerLayout({
 
   return (
     <div>
-      <Header>
+      <Header menuOptions={menuOptions}>
         <ErrorBoundary context="Primary Toolbar">
           <div className="relative flex justify-center">
-            <ToolbarPrimary servicesManager={servicesManager}/>
+            <ToolbarPrimary servicesManager={servicesManager} />
           </div>
         </ErrorBoundary>
       </Header>
@@ -220,7 +248,7 @@ function ViewerLayout({
           <div className="flex h-12 border-b border-transparent flex-2 w-100">
             <ErrorBoundary context="Secondary Toolbar">
               <div className="flex items-center w-full px-3 bg-primary-dark">
-                <ToolbarSecondary servicesManager={servicesManager}/>
+                <ToolbarSecondary servicesManager={servicesManager} />
               </div>
             </ErrorBoundary>
           </div>

extensions/default/src/getLayoutTemplateModule.js

@@ -5,16 +5,18 @@ import ViewerLayout from './ViewerLayout';
 - Init layout based on the displaySets and the objects.
 */
 
-export default function({
+export default function ({
   servicesManager,
   extensionManager,
   commandsManager,
+  hotkeysManager
 }) {
   function ViewerLayoutWithServices(props) {
     return ViewerLayout({
       servicesManager,
       extensionManager,
       commandsManager,
+      hotkeysManager,
       ...props,
     });
   }