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>
2020-08-19 15:02:59 -04:00
1 parent ae3d05ebf7
commit 3e944780dc
@@ -43,6 +43,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
  const extensionManager = new ExtensionManager({
    commandsManager,
    servicesManager,
+    hotkeysManager,
    appConfig,
  });

@@ -1,101 +0,0 @@
-import React from 'react';
-import { Typography, Icon } from '@ohif/ui';
-import detect from 'browser-detect';
-
-const Link = ({ href, children, showIcon = false }) => {
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer">
-      <Typography
-        variant="subtitle"
-        component="p"
-        className="flex items-center text-primary-active"
-      >
-        {children}
-        {!!showIcon && (
-          <Icon name="external-link" className="w-5 text-white ml-2" />
-        )}
-      </Typography>
-    </a>
-  );
-};
-
-const Row = ({ title, value, link }) => {
-  return (
-    <div className="flex mb-4">
-      <Typography variant="subtitle" component="p" className="text-white w-48">
-        {title}
-      </Typography>
-
-      {link ? (
-        <Link href={link}>{value}</Link>
-      ) : (
-        <Typography
-          variant="subtitle"
-          component="p"
-          className="text-white w-48"
-        >
-          {value}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-const AboutModal = () => {
-  const { os, version, name } = detect();
-  const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
-
-  const renderRowTitle = title => (
-    <div className="border-b-2 border-black pb-3 mb-3">
-      <Typography variant="h6" className="text-primary-light">
-        {title}
-      </Typography>
-    </div>
-  );
-  return (
-    <div>
-      {renderRowTitle('Important Links')}
-      <div className="flex mb-8">
-        <Link
-          href="https://groups.google.com/forum/#!forum/cornerstone-platform"
-          showIcon={true}
-        >
-          Visit the forum
-        </Link>
-        <span className="ml-4">
-          <Link
-            href="https://github.com/OHIF/Viewers/issues/new/choose"
-            showIcon={true}
-          >
-            Report an issue
-          </Link>
-        </span>
-        <span className="ml-4">
-          <Link href="http://ohif.org/" showIcon={true}>
-            More details
-          </Link>
-        </span>
-      </div>
-
-      {renderRowTitle('Version Information')}
-      <div className="flex flex-col">
-        <Row
-          title="Repository URL"
-          value="https://github.com/OHIF/Viewers/"
-          link="https://github.com/OHIF/Viewers/"
-        />
-        <Row
-          title="Last Master Commits"
-          value="https://github.com/OHIF/Viewers/commits/master"
-          link="https://github.com/OHIF/Viewers/commits/master"
-        />
-        <Row title="Version Number" value={process.env.VERSION_NUMBER} />
-        <Row title="Build number" value={process.env.BUILD_NUM} />
-        <Row title="Browser" value={browser} />
-        <Row title="OS" value={os} />
-      </div>
-    </div>
-  );
-};
-
-export default AboutModal;
@@ -1,56 +0,0 @@
-import React from 'react';
-import AboutModal from './AboutModal';
-import { Dropdown, IconButton, Icon, useModal } from '@ohif/ui';
-
-const PreferencesDropdown = () => {
-  const { show } = useModal();
-
-  const showAboutModal = () => {
-    show({
-      content: AboutModal,
-      title: 'About OHIF Viewer',
-    });
-  };
-
-  const showPreferencesModal = () => {
-    const modalComponent = () => <div>Preferences modal</div>;
-    show({
-      content: modalComponent,
-      title: 'Preferences',
-    });
-  };
-
-  return (
-    <Dropdown
-      showDropdownIcon={false}
-      list={[
-        { title: 'About', icon: 'info', onClick: showAboutModal },
-        {
-          title: '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"
-        onClick={() => {}}
-      >
-        <Icon name="chevron-down" />
-      </IconButton>
-    </Dropdown>
-  );
-};
-
-export default PreferencesDropdown;
@@ -1 +0,0 @@
-export { default } from './PreferencesDropdown';
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 // TODO: DicomMetadataStore should be injected?
 import { DicomMetadataStore, utils } from '@ohif/core';
 import { DragAndDropProvider, ImageViewerProvider } from '@ohif/ui';
-//
 import { useQuery } from '@hooks';
 import ViewportGrid from '@components/ViewportGrid';
 import Compose from './Compose';
@@ -88,12 +87,10 @@ export default function ModeRoute({
      return;
    }

-    console.debug('[hotkeys] Setting up hotkeys...');
    hotkeysManager.setDefaultHotKeys(hotkeys);
    hotkeysManager.setHotkeys(hotkeys);

    return () => {
-      console.debug('[hotkeys] Removing hotkeys...');
      hotkeysManager.destroy();
    };
  }, []);
@@ -282,4 +279,5 @@ ModeRoute.propTypes = {
  dataSourceName: PropTypes.string,
  extensionManager: PropTypes.object,
  servicesManager: PropTypes.object,
+  hotkeysManager: PropTypes.object,
 };
@@ -5,25 +5,26 @@ import { Link } from 'react-router-dom';
 import moment from 'moment';
 import qs from 'query-string';
 import isEqual from 'lodash.isequal';
-
+import { useTranslation } from 'react-i18next';
+//
 import filtersMeta from './filtersMeta.js';
 import { useAppConfig } from '@state';
 import { useDebounce, useQuery } from '@hooks';
 import { utils } from '@ohif/core';

-import PreferencesDropdown from '../../components/PreferencesDropdown';
-
 import {
  Icon,
  StudyListExpandedRow,
  Button,
-  NavBar,
-  Svg,
  EmptyStudies,
  StudyListTable,
  StudyListPagination,
  StudyListFilter,
  TooltipClipboard,
+  Header,
+  useModal,
+  AboutModal,
+  UserPreferences
 } from '@ohif/ui';

 const seriesInStudiesMap = new Map();
@@ -32,7 +33,11 @@ const seriesInStudiesMap = new Map();
 * TODO:
 * - debounce `setFilterValues` (150ms?)
 */
-function WorkList({ history, data: studies, isLoadingData, dataSource }) {
+function WorkList({ history, data: studies, isLoadingData, dataSource, hotkeysManager }) {
+  const { hotkeyDefinitions, hotkeyDefaults } = hotkeysManager;
+  const { show, hide } = useModal();
+  const { t } = useTranslation();
+
  // ~ Modes
  const [appConfig] = useAppConfig();
  // ~ Filters
@@ -340,25 +345,39 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {

  const hasStudies = numOfStudies > 0;

+  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()
+        }
+      })
+    },
+  ];
+
  return (
    <div
      className={classnames('bg-black h-full', {
        'h-screen': !hasStudies,
      })}
    >
-      <NavBar className="justify-between border-b-4 border-black" isSticky>
-        <div className="flex items-center">
-          <div className="mx-3">
-            <Svg name="logo-ohif" />
-          </div>
-        </div>
-        <div className="flex items-center">
-          <span className="mr-3 text-lg text-common-light">
-            FOR INVESTIGATIONAL USE ONLY
-          </span>
-          <PreferencesDropdown />
-        </div>
-      </NavBar>
+      <Header menuOptions={menuOptions} isReturnEnabled={false} />
      <StudyListFilter
        numOfStudies={numOfStudies}
        filtersMeta={filtersMeta}
@@ -51,7 +51,13 @@ const createRoutes = ({
            render={props => (
              // eslint-disable-next-line react/jsx-props-no-spreading
              <ErrorBoundary context={`Route ${route.path}`} fallbackRoute="/">
-                <route.component {...props} {...route.props} route={route} />
+                <route.component
+                  {...props}
+                  {...route.props}
+                  route={route}
+                  servicesManager={servicesManager}
+                  hotkeysManager={hotkeysManager}
+                />
              </ErrorBoundary>
            )}
          />
				`@@ -1 +0,0 @@`
				`export { default } from './PreferencesDropdown';`