Implement tooltip on remaining paces

2020-04-23 19:23:37 -03:00 · 2020-04-23 19:23:37 -03:00 · 11e58e70f6
commit 11e58e70f6
parent 57f4f4691c
6 changed files with 100 additions and 119 deletions
--- a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
+++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
@ -28,6 +28,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                onClick={() => onClick(measurementItem.id)}
                onKeyDown={() => onClick(measurementItem.id)}
                role="button"
+                tabIndex="0"
              >
                <div
                  className={classnames(
@ -60,6 +61,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                      right: 4,
                      transform: isActive ? '' : 'translateX(100%)',
                    }}
+                    e
                    onClick={(e) => {
                      // stopPropagation needed to avoid disable the current active item
                      e.stopPropagation();
--- a/platform/ui/src/components/SegmentationTable/SegmentationTable.jsx
+++ b/platform/ui/src/components/SegmentationTable/SegmentationTable.jsx
@ -43,6 +43,16 @@ const SegmentationTable = ({ title, amount, data }) => {
            const itemKey = i;
            const currentItem = i + 1;
            const isActive = !!activeItem && activeItem[title] === i;
+
+            const handleOnClick = () => {
+              setActiveItem((s) => {
+                return {
+                  ...s,
+                  [title]: s && s[title] === itemKey ? null : itemKey,
+                };
+              });
+            };
+
            return (
              <div
                key={i}
@ -52,14 +62,10 @@ const SegmentationTable = ({ title, amount, data }) => {
                    'border-primary-light': isActive,
                  }
                )}
-                onClick={() => {
-                  setActiveItem((s) => {
-                    return {
-                      ...s,
-                      [title]: s && s[title] === itemKey ? null : itemKey,
-                    };
-                  });
-                }}
+                onClick={handleOnClick}
+                onKeyDown={handleOnClick}
+                role="button"
+                tabIndex="0"
              >
                <div
                  className={classnames(
--- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
+++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { Icon, Thumbnail } from '@ohif/ui';
+import { Icon, Thumbnail, Tooltip } from '@ohif/ui';

 const ThumbnailTracked = ({
  className,
@ -29,51 +29,37 @@ const ThumbnailTracked = ({
        <div
          className={classnames(
            'flex flex-col items-center justify-start p-2 mb-2 relative cursor-pointer',
-            isTracked && 'rounded-sm hover:bg-gray-900 showTooltipOnHover'
+            isTracked && 'rounded-sm hover:bg-gray-900'
          )}
        >
-          <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
-          <div className="text-white text-xl leading-tight h-5">
-            {viewportIdentificator}
-          </div>
-          <div
-            className={classnames(
-              'tooltip tooltip-right bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
-            )}
-          >
-            <div className="flex flex-row flex-1">
-              <div className="flex flex-col flex-1 pr-4">
-                <span>
-                  Series is <span className="text-white">tracked</span>
-                </span>
-                {viewportIdentificator && (
+          <Tooltip
+            position="right"
+            content={
+              <div className="flex flex-row flex-1">
+                <div className="flex flex-col flex-1 pr-4">
                  <span>
-                    in viewport
-                    <span className="ml-1 text-white">
-                      {viewportIdentificator}
-                    </span>
+                    Series is <span className="text-white">tracked</span>
                  </span>
-                )}
-              </div>
-              <div className="flex flex-2 items-center justify-center">
-                <Icon name="info-link" className="text-primary-active" />
+                  {viewportIdentificator && (
+                    <span>
+                      in viewport
+                      <span className="ml-1 text-white">
+                        {viewportIdentificator}
+                      </span>
+                    </span>
+                  )}
+                </div>
+                <div className="flex flex-2 items-center justify-center">
+                  <Icon name="info-link" className="text-primary-active" />
+                </div>
              </div>
+            }
+          >
+            <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
+            <div className="text-white text-xl leading-tight h-5">
+              {viewportIdentificator}
            </div>
-            <svg
-              className="absolute text-black stroke-secondary-main stroke-2"
-              style={{
-                top: 'calc(50% - 8px)',
-                left: -15,
-                transform: 'rotate(270deg)',
-              }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
+          </Tooltip>
        </div>
        {isTracked && (
          <Icon
--- a/platform/ui/src/components/Tooltip/Tooltip.jsx
+++ b/platform/ui/src/components/Tooltip/Tooltip.jsx
@ -26,19 +26,27 @@ const arrowPositionStyle = {

 const Tooltip = ({ position, content, tight, children }) => {
  const [isActive, setIsActive] = useState(false);
+
+  const handleMouseOver = () => {
+    if (!isActive) {
+      setIsActive(true);
+    }
+  };
+
+  const handleMouseOut = () => {
+    if (isActive) {
+      setIsActive(false);
+    }
+  };
+
  return (
    <div
-      className="relative"
-      onMouseOver={() => {
-        if (!isActive) {
-          setIsActive(true);
-        }
-      }}
-      onMouseOut={() => {
-        if (isActive) {
-          setIsActive(false);
-        }
-      }}
+      className="relative "
+      onMouseOver={handleMouseOver}
+      onFocus={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onBlur={handleMouseOut}
+      role="tooltip"
    >
      {children}
      <div
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
+++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, ButtonGroup, Button } from '@ohif/ui';
+import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';

 const classes = {
  infoHeader: 'text-base text-primary-light',
@ -51,40 +51,29 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
    }

    return (
-      <div className="showTooltipOnHover relative">
-        <Icon
-          name={isTracked ? 'tracked' : 'dotted-circle'}
-          className="text-primary-light w-6"
-        />
-        {isTracked && (
-          <div
-            className={classnames(
-              'tooltip tooltip-top-left bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
-            )}
+      <div className="relative">
+        {!isTracked ? (
+          <Icon name="dotted-circle" className="text-primary-light w-6" />
+        ) : (
+          <Tooltip
+            position="bottom-left"
+            content={
+              <div className="flex py-2">
+                <div className="flex pt-1">
+                  <Icon name="info-link" className="w-4 text-primary-main" />
+                </div>
+                <div className="flex ml-4">
+                  <span className="text-base text-common-light">
+                    Series is
+                    <span className="text-white font-bold"> tracked</span> and
+                    can be viewed <br /> in the measurement panel
+                  </span>
+                </div>
+              </div>
+            }
          >
-            <div className="flex py-2">
-              <div className="flex pt-1">
-                <Icon name="info-link" className="w-4 text-primary-main" />
-              </div>
-              <div className="flex ml-4">
-                <span className="text-base text-common-light">
-                  Series is
-                  <span className="text-white font-bold"> tracked</span> and can
-                  be viewed <br /> in the measurement panel
-                </span>
-              </div>
-            </div>
-            <svg
-              className="absolute text-primary-dark h-4 left-0 stroke-secondary-main"
-              style={{ top: -15 }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
+            <Icon name="tracked" className="text-primary-light w-6" />
+          </Tooltip>
        )}
      </div>
    );
@ -129,20 +118,9 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
        </ButtonGroup>
      </div>
      <div className="flex ml-4 mr-2">
-        <div className="showTooltipOnHover flex justify-end relative">
-          <div className="relative">
-            <Icon name="profile" className="text-white w-5" />
-            <Icon
-              name="info-link"
-              className="bg-black text-white w-5 absolute"
-              style={{ right: -7, bottom: -10 }}
-            />
-          </div>
-          <div
-            className={classnames(
-              'tooltip tooltip-top-right bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content ml-1'
-            )}
-          >
+        <Tooltip
+          position="bottom-right"
+          content={
            <div className="flex py-2">
              <div className="flex pt-1">
                <Icon name="info-link" className="w-4 text-primary-main" />
@ -197,18 +175,19 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
                </div>
              </div>
            </div>
-            <svg
-              className="absolute text-primary-dark h-4 right-0 stroke-secondary-main"
-              style={{ top: -15 }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
+          }
+        >
+          <div className="showTooltipOnHover flex justify-end relative">
+            <div className="relative">
+              <Icon name="profile" className="text-white w-5" />
+              <Icon
+                name="info-link"
+                className="bg-black text-white w-5 absolute"
+                style={{ right: -7, bottom: -10 }}
+              />
+            </div>
          </div>
-        </div>
+        </Tooltip>
      </div>
    </div>
  );
--- a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
+++ b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
@ -9,7 +9,7 @@ const ViewportGrid = ({ rows, cols, viewportContents }) => {
      <div
        key={index}
        className={classnames(
-          'rounded-lg hover:border-primary-light transition duration-300',
+          'rounded-lg hover:border-primary-light transition duration-300 outline-none',
          {
            'border-2 border-primary-light -m-px': isActive,
            'border border-secondary-light': !isActive,