TrizTech/ohif-viewer
18
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate icons to ui-next (#4606)

Browse Source
This commit is contained in:
Alireza authored and GitHub committed 2024-12-17 13:20:19 -05:00
1 parent e93a9c70c5
commit 4e2ae32874
967 files changed
+9222 -10948
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/components/AboutModal/AboutModal.tsx
+4 -9
View File
@@ -4,7 +4,7 @@ import detect from 'browser-detect';
import { useTranslation } from 'react-i18next';
import Typography from '../Typography';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const Link = ({ href, children, showIcon = false }) => {
return (
@@ -20,12 +20,7 @@ const Link = ({ href, children, showIcon = false }) => {
className="flex items-center"
>
{children}
{!!showIcon && (
<Icon
name="external-link"
className="ml-2 w-5 text-white"
/>
)}
{!!showIcon && <Icons.ExternalLink className="ml-2 w-5 text-white" />}
</Typography>
</a>
);
@@ -81,7 +76,7 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
href="https://community.ohif.org/"
showIcon={true}
>
{t('Visit the forum')}
{t('Visit the forum')}
</Link>
<span className="ml-4">
<Link
@@ -96,7 +91,7 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
href="https://ohif.org/"
showIcon={true}
>
{t('More details')}
{t('More details')}
</Link>
</span>
</div>
platform/ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx
+4 -3
View File
@@ -1,7 +1,8 @@
import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { PanelSection, Icon, Tooltip } from '../../components';
import { PanelSection, Tooltip } from '../../components';
import ToolSettings from './ToolSettings';
import { Icons } from '@ohif/ui-next';
/**
* Use Toolbox component instead of this although it doesn't have "Advanced" in its name
@@ -44,14 +45,14 @@ const AdvancedToolbox = ({ title, items }) => {
>
<div
className={classnames(
'text-primary-active grid h-[40px] w-[40px] place-items-center rounded-md bg-black ',
'text-primary-active grid h-[40px] w-[40px] place-items-center rounded-md bg-black',
activeItemName === item.name && 'bg-primary-light text-black',
item.disabled && 'opacity-50',
!item.disabled &&
'hover:bg-primary-light cursor-pointer hover:cursor-pointer hover:text-black'
)}
>
<Icon name={item.icon} />
<Icons.ByName name={item.icon} />
</div>
</div>
</Tooltip>
platform/ui/src/components/AllInOneMenu/BackItem.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { Icon } from '@ohif/ui';
import { Icons } from '@ohif/ui-next';
import DividerItem from './DividerItem';
type BackItemProps = {
@@ -15,7 +15,7 @@ const BackItem = ({ backLabel, onBackClick }: BackItemProps) => {
className="all-in-one-menu-item all-in-one-menu-item-effects"
onClick={onBackClick}
>
<Icon name="content-prev"></Icon>
<Icons.ByName name="content-prev"></Icons.ByName>
<div className="pl-2">{backLabel || 'Back to Display Options'}</div>
</div>
platform/ui/src/components/AllInOneMenu/IconMenu.tsx
+4 -3
View File
@@ -1,9 +1,10 @@
import React, { useCallback, useEffect, useState } from 'react';
import React, { useCallback, useState } from 'react';
import OutsideClickHandler from 'react-outside-click-handler';
import { MenuProps } from './Menu';
import getIcon from '../Icon/getIcon';
import classNames from 'classnames';
import { AllInOneMenu } from '..';
import { Icons } from '@ohif/ui-next';
export interface IconMenuProps extends MenuProps {
icon: string;
iconClassName?: string;
@@ -51,7 +52,7 @@ export default function IconMenu({
className={iconClassName}
onClick={toggleMenuVisibility}
>
{getIcon(icon)}
<Icons.ByName name={icon} />
</div>
<AllInOneMenu.Menu
key={menuKey}
platform/ui/src/components/AllInOneMenu/SubMenu.tsx
+4 -7
View File
@@ -1,7 +1,6 @@
import React, { useCallback, useContext } from 'react';
import { MenuContext, MenuProps } from './Menu';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
export interface SubMenuProps extends MenuProps {
itemLabel: string;
onClick?: () => void;
@@ -22,15 +21,13 @@ const SubMenu = (props: SubMenuProps) => {
onClick={onClickHandler}
>
{props.itemIcon && (
<Icon
<Icons.ByName
name={props.itemIcon}
width="25px"
height="25px"
className="mr-2"
></Icon>
></Icons.ByName>
)}
<div className="mr-auto">{props.itemLabel}</div>
<Icon name="content-next"></Icon>
<Icons.ByName name="content-next"></Icons.ByName>
</div>
);
};
platform/ui/src/components/CheckBox/CheckBox.tsx
+8 -4
View File
@@ -1,6 +1,7 @@
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { Icon, Typography } from '../../';
import { Typography } from '../../';
import { Icons } from '@ohif/ui-next';
/**
* REACT CheckBox component
@@ -31,12 +32,15 @@ const CheckBox: React.FC<{
className={`flex cursor-pointer items-center space-x-1 ${className ? className : ''}`}
onClick={handleClick}
>
{isChecked ? <Icon name="checkbox-checked" /> : <Icon name="checkbox-unchecked" />}
{isChecked ? (
<Icons.ByName name="checkbox-checked" />
) : (
<Icons.ByName name="checkbox-unchecked" />
)}
<Typography
variant={labelVariant ?? 'subtitle'}
component="p"
className={labelClassName ?? 'text-white '}
className={labelClassName ?? 'text-white'}
>
{label}
</Typography>
platform/ui/src/components/CinePlayer/CinePlayer.tsx
+6 -8
View File
@@ -2,10 +2,9 @@ import React, { useEffect, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import debounce from 'lodash.debounce';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import InputRange from '../InputRange';
import { Icons } from '@ohif/ui-next';
import './CinePlayer.css';
export type CinePlayerProps = {
@@ -98,14 +97,14 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
'border-secondary-light/60 bg-primary-dark inline-flex select-none items-center gap-2 rounded border px-2 py-2'
}
>
<Icon
<Icons.ByName
name={getPlayPauseIconName()}
className="active:text-primary-light hover:bg-customblue-300 cursor-pointer text-white hover:rounded"
onClick={() => onPlayPauseChange(!isPlaying)}
data-cy={'cine-player-play-pause'}
/>
{isDynamic && dynamicInfo && (
<div className="min-w-16 max-w-44 flex flex-col text-white">
<div className="min-w-16 max-w-44 flex flex-col text-white">
{/* Add Tailwind classes for monospace font and center alignment */}
<div className="text-[11px]">
<span className="w-2 text-white">{dynamicInfo.timePointIndex}</span>{' '}
@@ -121,7 +120,7 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
onClick={() => handleSetFrameRate(frameRate - 1)}
data-cy={'cine-player-left-arrow'}
>
<Icon name="arrow-left-small" />
<Icons.ArrowLeft />
</div>
<Tooltip
position="top"
@@ -153,11 +152,10 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
onClick={() => handleSetFrameRate(frameRate + 1)}
data-cy={'cine-player-right-arrow'}
>
<Icon name="arrow-right-small" />
<Icons.ArrowRight />
</div>
</div>
<Icon
name="icon-close"
<Icons.Close
className="text-primary-active active:text-primary-light hover:bg-customblue-300 cursor-pointer hover:rounded"
onClick={onClose}
data-cy={'cine-player-close'}
platform/ui/src/components/ContextMenu/ContextMenu.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import Typography from '../Typography';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const ContextMenu = ({ items, ...props }) => {
if (!items) {
@@ -23,7 +23,7 @@ const ContextMenu = ({ items, ...props }) => {
>
<Typography>{item.label}</Typography>
{item.iconRight && (
<Icon
<Icons.ByName
name={item.iconRight}
className="inline"
/>
platform/ui/src/components/Dialog/Header.tsx
+2 -3
View File
@@ -3,14 +3,13 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import Typography from '../Typography';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const CloseButton = ({ onClick }) => {
return (
<Icon
<Icons.Close
data-cy="close-button"
onClick={onClick}
name="close"
className="text-primary-active cursor-pointer"
/>
);
platform/ui/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
+2 -3
View File
@@ -1,9 +1,8 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import PortalTooltip from '../Tooltip/PortalTooltip';
import Icon from '../Icon';
import { useTranslation } from 'react-i18next';
import { Icons } from '@ohif/ui-next';
/**
* Displays a tooltip with a list of messages of a displaySet
* @param param0
@@ -15,7 +14,7 @@ const DisplaySetMessageListTooltip = ({ messages, id }): React.ReactNode => {
if (messages?.size()) {
return (
<>
<Icon
<Icons.ByName
id={id}
onMouseOver={() => setIsOpen(true)}
onFocus={() => setIsOpen(true)}
platform/ui/src/components/Dropdown/Dropdown.tsx
+4 -4
View File
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import ReactDOM from 'react-dom';
import Icon from '../Icon';
import Typography from '../Typography';
import { Icons } from '@ohif/ui-next';
const borderStyle = 'border-b last:border-b-0 border-secondary-main';
@@ -48,7 +48,7 @@ const Dropdown = ({
<div
key={title}
className={classnames(
'hover:bg-secondary-main flex cursor-pointer items-center px-4 py-2 transition duration-300 ',
'hover:bg-secondary-main flex cursor-pointer items-center px-4 py-2 transition duration-300',
titleClassName,
showBorders && borderStyle
)}
@@ -59,7 +59,7 @@ const Dropdown = ({
data-cy={id}
>
{!!icon && (
<Icon
<Icons.ByName
name={icon}
className="mr-2 w-4 text-white"
/>
@@ -96,7 +96,7 @@ const Dropdown = ({
<div className="flex items-center">
{children}
{showDropdownIcon && (
<Icon
<Icons.ByName
name="chevron-down"
className="ml-1"
/>
platform/ui/src/components/EmptyStudies/EmptyStudies.tsx
+2 -6
View File
@@ -3,18 +3,14 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useTranslation } from 'react-i18next';
import Icon from '../Icon';
import Typography from '../Typography';
import { Icons } from '@ohif/ui-next';
// TODO: Add loading spinner to OHIF + use it here.
const EmptyStudies = ({ className = '' }) => {
const { t } = useTranslation('StudyList');
return (
<div className={classnames('inline-flex flex-col items-center', className)}>
<Icon
name="magnifier"
className="mb-4"
/>
<Icons.Magnifier className="mb-4" />
<Typography
className="text-primary-light"
variant="h5"
platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
+2 -7
View File
@@ -5,9 +5,8 @@ import { useTranslation } from 'react-i18next';
import i18n from 'i18next';
import Modal from '../Modal';
import Icon from '../Icon';
import IconButton from '../IconButton';
import { Icons } from '@ohif/ui-next';
const isProduction = process.env.NODE_ENV === 'production';
const DefaultFallback = ({ error, context, resetErrorBoundary = () => {}, fallbackRoute }) => {
@@ -40,11 +39,7 @@ const DefaultFallback = ({ error, context, resetErrorBoundary = () => {}, fallba
>
<React.Fragment>
<div>{t('Stack Trace')}</div>
<Icon
width="15px"
height="15px"
name="chevron-down"
/>
<Icons.ChevronOpen />
</React.Fragment>
</IconButton>
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
+2 -3
View File
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import IconButton from '../IconButton';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
import './ExpandableToolbarButton.css';
const ExpandableToolbarButton = ({
@@ -55,7 +54,7 @@ const ExpandableToolbarButton = ({
onClick={onClickHandler}
key={id}
>
<Icon name={icon} />
<Icons.ByName name={icon} />
</IconButton>
<div className="absolute z-10 pt-4">
<div className={classnames('ExpandableToolbarButton__content w-48', className)}>
platform/ui/src/components/Header/Header.tsx
+5 -12
View File
@@ -4,13 +4,11 @@ import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import NavBar from '../NavBar';
import Svg from '../Svg';
import Icon from '../Icon';
import IconButton from '../IconButton';
import Dropdown from '../Dropdown';
import HeaderPatientInfo from '../HeaderPatientInfo';
import { PatientInfoVisibility } from '../../types/PatientInfoVisibility';
import { Icons } from '@ohif/ui-next';
function Header({
children,
menuOptions,
@@ -39,7 +37,7 @@ function Header({
isSticky={isSticky}
{...props}
>
<div className="relative h-[48px] items-center ">
<div className="relative h-[48px] items-center">
<div className="absolute left-0 top-1/2 flex -translate-y-1/2 items-center">
<div
className={classNames(
@@ -49,18 +47,13 @@ function Header({
onClick={onClickReturn}
data-cy="return-to-work-list"
>
{isReturnEnabled && (
<Icon
name="chevron-left"
className="text-primary-active w-8"
/>
)}
{isReturnEnabled && <Icons.ChevronClosed className="text-primary-active w-8" />}
<div className="ml-1">
{WhiteLabeling?.createLogoComponentFn?.(React, props) || <Svg name="logo-ohif" />}
</div>
</div>
</div>
<div className="absolute top-1/2 left-[250px] h-8 -translate-y-1/2">{Secondary}</div>
<div className="absolute top-1/2 left-[250px] h-8 -translate-y-1/2">{Secondary}</div>
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<div className="flex items-center justify-center space-x-2">{children}</div>
</div>
@@ -86,7 +79,7 @@ function Header({
size="initial"
className="text-primary-active hover:bg-primary-dark h-full w-full"
>
<Icon name="icon-settings" />
<Icons.ByName name="icon-settings" />
</IconButton>
</Dropdown>
</div>
platform/ui/src/components/HeaderPatientInfo/HeaderPatientInfo.tsx
+3 -6
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Icon } from '@ohif/ui';
import { utils } from '@ohif/core';
import { Icons } from '@ohif/ui-next';
import { PatientInfoVisibility } from '../../types';
const { formatDate, formatPN } = utils;
@@ -97,7 +97,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }: withAppTypes) {
className="hover:bg-primary-dark flex cursor-pointer items-center justify-center gap-1 rounded-lg"
onClick={handleOnClick}
>
<Icon
<Icons.ByName
name={isMixedPatients ? 'icon-multiple-patients' : 'icon-patient'}
className="text-primary-active"
/>
@@ -120,10 +120,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }: withAppTypes) {
</div>
)}
</div>
<Icon
name="icon-chevron-patient"
className={`text-primary-active ${expanded ? 'rotate-180' : ''}`}
/>
<Icons.ArrowLeft className={`text-primary-active ${expanded ? 'rotate-180' : ''}`} />
</div>
);
}
platform/ui/src/components/Icon/getIcon.js
+2 -423
View File
@@ -1,427 +1,6 @@
import React from 'react';
import { ReactComponent as arrowDown } from './../../assets/icons/arrow-down.svg';
import { ReactComponent as arrowLeft } from './../../assets/icons/arrow-left.svg';
import { ReactComponent as arrowRight } from './../../assets/icons/arrow-right.svg';
import { ReactComponent as arrowLeftSmall } from './../../assets/icons/arrow-left-small.svg';
import { ReactComponent as arrowRightSmall } from './../../assets/icons/arrow-right-small.svg';
import { ReactComponent as calendar } from './../../assets/icons/calendar.svg';
import { ReactComponent as cancel } from './../../assets/icons/cancel.svg';
import { ReactComponent as clipboard } from './../../assets/icons/clipboard.svg';
import { ReactComponent as close } from './../../assets/icons/closeIcon.svg';
import { ReactComponent as database } from './../../assets/icons/database.svg';
import { ReactComponent as dottedCircle } from './../../assets/icons/dotted-circle.svg';
import { ReactComponent as circledCheckmark } from './../../assets/icons/circled-checkmark.svg';
import { ReactComponent as chevronDown } from './../../assets/icons/chevron-down.svg';
import { ReactComponent as chevronLeft } from './../../assets/icons/chevron-left.svg';
import { ReactComponent as chevronMenu } from './../../assets/icons/chevron-menu.svg';
import { ReactComponent as chevronNext } from './../../assets/icons/chevron-next.svg';
import { ReactComponent as chevronPrev } from './../../assets/icons/chevron-prev.svg';
import { ReactComponent as chevronRight } from './../../assets/icons/chevron-right.svg';
import { ReactComponent as contentNext } from './../../assets/icons/content-next.svg';
import { ReactComponent as contentPrev } from './../../assets/icons/content-prev.svg';
import { ReactComponent as eyeVisible } from './../../assets/icons/eye-visible.svg';
import { ReactComponent as eyeHidden } from './../../assets/icons/eye-hidden.svg';
import { ReactComponent as exclamation } from './../../assets/icons/exclamation.svg';
import { ReactComponent as externalLink } from './../../assets/icons/external-link.svg';
import { ReactComponent as groupLayers } from './../../assets/icons/group-layers.svg';
import { ReactComponent as info } from './../../assets/icons/info.svg';
import { ReactComponent as infoAction } from './../../assets/icons/info-action.svg';
import { ReactComponent as infoLink } from './../../assets/icons/info-link.svg';
import { ReactComponent as launchArrow } from './../../assets/icons/launch-arrow.svg';
import { ReactComponent as launchInfo } from './../../assets/icons/launch-info.svg';
import { ReactComponent as link } from './../../assets/icons/tool-stack-image-sync.svg';
import { ReactComponent as listBullets } from './../../assets/icons/list-bullets.svg';
import { ReactComponent as lock } from './../../assets/icons/lock.svg';
import { ReactComponent as logoOhifSmall } from './../../assets/icons/logo-ohif-small.svg';
import { ReactComponent as logoDarkBackGround } from './../../assets/icons/ohif-logo-color-darkbg.svg';
import { ReactComponent as magnifier } from './../../assets/icons/magnifier.svg';
import { ReactComponent as notificationwarningDiamond } from './../../assets/icons/notificationwarning-diamond.svg';
import { ReactComponent as pencil } from './../../assets/icons/pencil.svg';
import { ReactComponent as powerOff } from './../../assets/icons/power-off.svg';
import { ReactComponent as profile } from './../../assets/icons/profile.svg';
import { ReactComponent as pushLeft } from './../../assets/icons/push-left.svg';
import { ReactComponent as pushRight } from './../../assets/icons/push-right.svg';
import { ReactComponent as settings } from './../../assets/icons/settings.svg';
import { ReactComponent as sidePanelCloseLeft } from './../../assets/icons/side-panel-close-left.svg';
import { ReactComponent as sidePanelCloseRight } from './../../assets/icons/side-panel-close-right.svg';
import { ReactComponent as sorting } from './../../assets/icons/sorting.svg';
import { ReactComponent as sortingActiveDown } from './../../assets/icons/sorting-active-down.svg';
import { ReactComponent as sortingActiveUp } from './../../assets/icons/sorting-active-up.svg';
import { ReactComponent as statusAlertWarning } from './../../assets/icons/status-alert-warning.svg';
import { ReactComponent as statusAlert } from './../../assets/icons/status-alert.svg';
import { ReactComponent as statusLocked } from './../../assets/icons/status-locked.svg';
import { ReactComponent as statusTracked } from './../../assets/icons/status-tracked.svg';
import { ReactComponent as statusUntracked } from './../../assets/icons/status-untracked.svg';
import { ReactComponent as tracked } from './../../assets/icons/tracked.svg';
import { ReactComponent as unlink } from './../../assets/icons/unlink.svg';
import { ReactComponent as checkboxChecked } from './../../assets/icons/checkbox-checked.svg';
import { ReactComponent as checkboxUnchecked } from './../../assets/icons/checkbox-unchecked.svg';
import { ReactComponent as iconAlertOutline } from './../../assets/icons/icons-alert-outline.svg';
import { ReactComponent as iconAlertSmall } from './../../assets/icons/icon-alert-small.svg';
import { ReactComponent as iconClose } from './../../assets/icons/icon-close.svg';
import { ReactComponent as iconClearField } from './../../assets/icons/icon-clear-field.svg';
import { ReactComponent as iconNextInactive } from './../../assets/icons/icon-next-inactive.svg';
import { ReactComponent as iconNext } from './../../assets/icons/icon-next.svg';
import { ReactComponent as iconPlay } from './../../assets/icons/icon-play.svg';
import { ReactComponent as iconPause } from './../../assets/icons/icon-pause.svg';
import { ReactComponent as iconPrevInactive } from './../../assets/icons/icon-prev-inactive.svg';
import { ReactComponent as iconPrev } from './../../assets/icons/icon-prev.svg';
import { ReactComponent as iconSearch } from './../../assets/icons/icon-search.svg';
import { ReactComponent as iconStatusAlert } from './../../assets/icons/icon-status-alert.svg';
import { ReactComponent as iconTransferring } from './../../assets/icons/icon-transferring.svg';
import { ReactComponent as iconUpload } from './../../assets/icons/icon-upload.svg';
import { ReactComponent as navigationPanelRightHide } from './../../assets/icons/navigation-panel-right-hide.svg';
import { ReactComponent as navigationPanelRightReveal } from './../../assets/icons/navigation-panel-right-reveal.svg';
import { ReactComponent as tabLinear } from './../../assets/icons/tab-linear.svg';
import { ReactComponent as tabPatientInfo } from './../../assets/icons/tab-patient-info.svg';
import { ReactComponent as tabROIThreshold } from './../../assets/icons/tab-roi-threshold.svg';
import { ReactComponent as tabSegmentation } from './../../assets/icons/tab-segmentation.svg';
import { ReactComponent as tabStudies } from './../../assets/icons/tab-studies.svg';
import { ReactComponent as uiArrowDown } from './../../assets/icons/ui-arrow-down.svg';
import { ReactComponent as uiArrowUp } from './../../assets/icons/ui-arrow-up.svg';
import { ReactComponent as uiArrowLeft } from './../../assets/icons/ui-arrow-left.svg';
import { ReactComponent as uiArrowRight } from './../../assets/icons/ui-arrow-right.svg';
import { ReactComponent as loadingOHIFMark } from './../../assets/icons/loading-ohif-mark.svg';
import { ReactComponent as notificationsInfo } from './../../assets/icons/notifications-info.svg';
import { ReactComponent as notificationsWarning } from './../../assets/icons/notifications-warning.svg';
import { ReactComponent as notificationsError } from './../../assets/icons/notifications-error.svg';
import { ReactComponent as notificationsSuccess } from './../../assets/icons/notifications-success.svg';
import { ReactComponent as nextArrow } from './../../assets/icons/next-arrow.svg';
import { ReactComponent as prevArrow } from './../../assets/icons/prev-arrow.svg';
import { ReactComponent as viewportStatusTracked } from './../../assets/icons/viewport-status-tracked.svg';
import { ReactComponent as toggleDicomOverlay } from './../../assets/icons/tool-toggle-dicom-overlay.svg';
import { ReactComponent as toolZoom } from './../../assets/icons/tool-zoom.svg';
import { ReactComponent as toolCapture } from './../../assets/icons/tool-capture.svg';
import { ReactComponent as toolLayout } from './../../assets/icons/tool-layout-default.svg';
import { ReactComponent as toolMore } from './../../assets/icons/tool-more-menu.svg';
import { ReactComponent as toolMove } from './../../assets/icons/tool-move.svg';
import { ReactComponent as toolWindow } from './../../assets/icons/tool-window-level.svg';
import { ReactComponent as toolAnnotate } from './../../assets/icons/tool-annotate.svg';
import { ReactComponent as toolBidirectional } from './../../assets/icons/tool-bidirectional.svg';
import { ReactComponent as toolElipse } from './../../assets/icons/tool-measure-elipse.svg';
import { ReactComponent as toolCircle } from './../../assets/icons/tool-circle.svg';
import { ReactComponent as toolLength } from './../../assets/icons/tool-length.svg';
import { ReactComponent as toolStackScroll } from './../../assets/icons/tool-stack-scroll.svg';
import { ReactComponent as toolMagnify } from './../../assets/icons/tool-quick-magnify.svg';
import { ReactComponent as toolFlipHorizontal } from './../../assets/icons/tool-flip-horizontal.svg';
import { ReactComponent as toolInvert } from './../../assets/icons/tool-invert.svg';
import { ReactComponent as toolRotateRight } from './../../assets/icons/tool-rotate-right.svg';
import { ReactComponent as toolCine } from './../../assets/icons/tool-cine.svg';
import { ReactComponent as toolCrosshair } from './../../assets/icons/tool-crosshair.svg';
import { ReactComponent as toolProbe } from './../../assets/icons/focus-frame-target.svg';
import { ReactComponent as toolAngle } from './../../assets/icons/tool-angle.svg';
import { ReactComponent as toolReset } from './../../assets/icons/tool-reset.svg';
import { ReactComponent as toolRectangle } from './../../assets/icons/tool-rectangle.svg';
import { ReactComponent as toolFusionColor } from './../../assets/icons/tool-fusion-color.svg';
import { ReactComponent as toolCreateThreshold } from './../../assets/icons/tool-create-threshold.svg';
import { ReactComponent as toolCalibration } from './../../assets/icons/tool-calibrate.svg';
import { ReactComponent as toolFreehand } from './../../assets/icons/tool-freehand.svg';
import { ReactComponent as toolFreehandPolygon } from './../../assets/icons/tool-freehand-polygon.svg';
import { ReactComponent as toolPolygon } from './../../assets/icons/tool-polygon.svg';
import { ReactComponent as editPatient } from './../../assets/icons/edit-patient.svg';
import { ReactComponent as panelGroupMore } from './../../assets/icons/panel-group-more.svg';
import { ReactComponent as panelGroupOpenClose } from './../../assets/icons/panel-group-open-close.svg';
import { ReactComponent as rowAdd } from './../../assets/icons/row-add.svg';
import { ReactComponent as rowEdit } from './../../assets/icons/row-edit.svg';
import { ReactComponent as rowHidden } from './../../assets/icons/row-hidden.svg';
import { ReactComponent as rowShown } from './../../assets/icons/row-shown.svg';
import { ReactComponent as rowLock } from './../../assets/icons/row-lock.svg';
import { ReactComponent as rowUnlock } from './../../assets/icons/row-unlock.svg';
import { ReactComponent as iconMPR } from './../../assets/icons/icon-mpr-alt.svg';
import { ReactComponent as checkboxDefault } from './../../assets/icons/checkbox-default.svg';
import { ReactComponent as checkboxActive } from './../../assets/icons/checkbox-active.svg';
import { ReactComponent as referenceLines } from './../../assets/icons/tool-reference-lines.svg';
import { ReactComponent as chevronDownNew } from './../../assets/icons/icon-disclosure-close.svg';
import { ReactComponent as chevronLeftNew } from './../../assets/icons/icon-disclosure-open.svg';
import { ReactComponent as settingsBars } from './../../assets/icons/icon-display-settings.svg';
import { ReactComponent as iconAdd } from './../../assets/icons/icon-add.svg';
import { ReactComponent as iconRename } from './../../assets/icons/icon-rename.svg';
import { ReactComponent as iconDelete } from './../../assets/icons/icon-delete.svg';
import { ReactComponent as iconMoreMenu } from './../../assets/icons/icon-more-menu.svg';
import { ReactComponent as iconToolBrush } from './../../assets/icons/tool-seg-brush.svg';
import { ReactComponent as iconToolEraser } from './../../assets/icons/tool-seg-eraser.svg';
import { ReactComponent as iconToolScissor } from './../../assets/icons/icon-tool-scissor.svg';
import { ReactComponent as iconToolShape } from './../../assets/icons/tool-seg-shape.svg';
import { ReactComponent as iconToolThreshold } from './../../assets/icons/tool-seg-threshold.svg';
import { ReactComponent as viewportWindowLevel } from './../../assets/icons/viewport-window-level.svg';
import { ReactComponent as dicomTagBrowser } from './../../assets/icons/tool-dicom-tag-browser.svg';
import { ReactComponent as iconToolFreehandRoi } from './../../assets/icons/tool-freehand-roi.svg';
import { ReactComponent as iconToolLivewire } from './../../assets/icons/tool-magnetic-roi.svg';
import { ReactComponent as iconToolSplineRoi } from './../../assets/icons/tool-spline-roi.svg';
import { ReactComponent as iconToolUltrasoundBidirectional } from './../../assets/icons/tool-ultrasound-bidirectional.svg';
import { ReactComponent as iconToolLoupe } from './../../assets/icons/tool-magnify.svg';
import { ReactComponent as oldTrash } from './../../assets/icons/old-trash.svg';
import { ReactComponent as oldPlay } from './../../assets/icons/old-play.svg';
import { ReactComponent as oldStop } from './../../assets/icons/old-stop.svg';
import { ReactComponent as iconColorLUT } from './../../assets/icons/icon-color-lut.svg';
import { ReactComponent as iconChevronPatient } from './../../assets/icons/icon-chevron-patient.svg';
import { ReactComponent as iconPatient } from './../../assets/icons/icon-patient.svg';
import { ReactComponent as iconSettings } from './../../assets/icons/icon-settings.svg';
import { ReactComponent as iconToolbarBack } from './../../assets/icons/icon-toolbar-back.svg';
import { ReactComponent as iconMultiplePatients } from './../../assets/icons/icon-multiple-patients.svg';
import { ReactComponent as layoutAdvanced3DFourUp } from './../../assets/icons/layout-advanced-3d-four-up.svg';
import { ReactComponent as layoutAdvanced3DMain } from './../../assets/icons/layout-advanced-3d-main.svg';
import { ReactComponent as layoutAdvanced3DOnly } from './../../assets/icons/layout-advanced-3d-only.svg';
import { ReactComponent as layoutAdvanced3DPrimary } from './../../assets/icons/layout-advanced-3d-primary.svg';
import { ReactComponent as layoutAdvancedAxialPrimary } from './../../assets/icons/layout-advanced-axial-primary.svg';
import { ReactComponent as layoutAdvancedMPR } from './../../assets/icons/layout-advanced-mpr.svg';
import { ReactComponent as layoutCommon1x1 } from './../../assets/icons/layout-common-1x1.svg';
import { ReactComponent as layoutCommon1x2 } from './../../assets/icons/layout-common-1x2.svg';
import { ReactComponent as layoutCommon2x2 } from './../../assets/icons/layout-common-2x2.svg';
import { ReactComponent as layoutCommon2x3 } from './../../assets/icons/layout-common-2x3.svg';
import { ReactComponent as iconToolRotate } from './../../assets/icons/tool-3d-rotate.svg';
import { ReactComponent as tab4D } from './../../assets/icons/tab-4d.svg';
import { ReactComponent as investigationalUse } from './../../assets/icons/illustration-investigational-use.svg';
import { ReactComponent as actionNewDialog } from './../../assets/icons/action-new-dialog.svg';
import { ReactComponent as iconToolCobbAngle } from './../../assets/icons/tool-cobb-angle.svg';
import { ReactComponent as iconToolWindowRegion } from './../../assets/icons/tool-window-region.svg';
import CTAAA from './../../assets/icons/CT-AAA.png';
import CTAAA2 from './../../assets/icons/CT-AAA2.png';
import CTAir from './../../assets/icons/CT-Air.png';
import CTBone from './../../assets/icons/CT-Bone.png';
import CTBones from './../../assets/icons/CT-Bones.png';
import CTCardiac from './../../assets/icons/CT-Cardiac.png';
import CTCardiac2 from './../../assets/icons/CT-Cardiac2.png';
import CTCardiac3 from './../../assets/icons/CT-Cardiac3.png';
import CTChestContrastEnhanced from './../../assets/icons/CT-Chest-Contrast-Enhanced.png';
import CTChestVessels from './../../assets/icons/CT-Chest-Vessels.png';
import CTCoronaryArteries from './../../assets/icons/CT-Coronary-Arteries.png';
import CTCoronaryArteries2 from './../../assets/icons/CT-Coronary-Arteries-2.png';
import CTCoronaryArteries3 from './../../assets/icons/CT-Coronary-Arteries-3.png';
import CTCroppedVolumeBone from './../../assets/icons/CT-Cropped-Volume-Bone.png';
import CTFat from './../../assets/icons/CT-Fat.png';
import CTLiverVasculature from './../../assets/icons/CT-Liver-Vasculature.png';
import CTLung from './../../assets/icons/CT-Lung.png';
import CTMIP from './../../assets/icons/CT-MIP.png';
import CTMuscle from './../../assets/icons/CT-Muscle.png';
import CTPulmonaryArteries from './../../assets/icons/CT-Pulmonary-Arteries.png';
import CTSoftTissue from './../../assets/icons/CT-Soft-Tissue.png';
import DTIFABrain from './../../assets/icons/DTI-FA-Brain.png';
import MRAngio from './../../assets/icons/MR-Angio.png';
import MRDefault from './../../assets/icons/MR-Default.png';
import MRMIP from './../../assets/icons/MR-MIP.png';
import MRT2Brain from './../../assets/icons/MR-T2-Brain.png';
import VolumeRendering from './../../assets/icons/VolumeRendering.png';
const ICONS = {
'arrow-down': arrowDown,
'arrow-left': arrowLeft,
'arrow-right': arrowRight,
'arrow-left-small': arrowLeftSmall,
'arrow-right-small': arrowRightSmall,
calendar: calendar,
cancel: cancel,
clipboard: clipboard,
close: close,
database: database,
'dotted-circle': dottedCircle,
'circled-checkmark': circledCheckmark,
'chevron-down': chevronDown,
'chevron-left': chevronLeft,
'chevron-menu': chevronMenu,
'chevron-next': chevronNext,
'chevron-prev': chevronPrev,
'chevron-right': chevronRight,
'content-next': contentNext,
'content-prev': contentPrev,
'eye-visible': eyeVisible,
'eye-hidden': eyeHidden,
'external-link': externalLink,
'group-layers': groupLayers,
info: info,
'icon-alert-outline': iconAlertOutline,
'icon-alert-small': iconAlertSmall,
'icon-clear-field': iconClearField,
'icon-close': iconClose,
'icon-play': iconPlay,
'icon-pause': iconPause,
'icon-search': iconSearch,
'icon-status-alert': iconStatusAlert,
'icon-transferring': iconTransferring,
'info-action': infoAction,
'info-link': infoLink,
'launch-arrow': launchArrow,
'launch-info': launchInfo,
link: link,
'list-bullets': listBullets,
lock: lock,
'logo-ohif-small': logoOhifSmall,
'logo-dark-background': logoDarkBackGround,
magnifier: magnifier,
exclamation: exclamation,
'notificationwarning-diamond': notificationwarningDiamond,
pencil: pencil,
'power-off': powerOff,
profile: profile,
'push-left': pushLeft,
'push-right': pushRight,
settings: settings,
'side-panel-close-left': sidePanelCloseLeft,
'side-panel-close-right': sidePanelCloseRight,
'sorting-active-down': sortingActiveDown,
'sorting-active-up': sortingActiveUp,
'status-alert': statusAlert,
'status-alert-warning': statusAlertWarning,
'status-locked': statusLocked,
'status-tracked': statusTracked,
'status-untracked': statusUntracked,
sorting: sorting,
tracked: tracked,
unlink: unlink,
'panel-group-more': panelGroupMore,
'panel-group-open-close': panelGroupOpenClose,
'row-add': rowAdd,
'row-edit': rowEdit,
'row-hidden': rowHidden,
'row-shown': rowShown,
'row-lock': rowLock,
'row-unlock': rowUnlock,
'checkbox-checked': checkboxChecked,
'checkbox-unchecked': checkboxUnchecked,
'loading-ohif-mark': loadingOHIFMark,
'notifications-info': notificationsInfo,
'notifications-error': notificationsError,
'notifications-success': notificationsSuccess,
'notifications-warning': notificationsWarning,
/** Tools */
'toggle-dicom-overlay': toggleDicomOverlay,
'tool-zoom': toolZoom,
'tool-capture': toolCapture,
'tool-layout': toolLayout,
'tool-more-menu': toolMore,
'tool-move': toolMove,
'tool-window-level': toolWindow,
'tool-annotate': toolAnnotate,
'tool-bidirectional': toolBidirectional,
'tool-ellipse': toolElipse,
'tool-circle': toolCircle,
'tool-length': toolLength,
'tool-stack-scroll': toolStackScroll,
'tool-magnify': toolMagnify,
'tool-flip-horizontal': toolFlipHorizontal,
'tool-invert': toolInvert,
'tool-rotate-right': toolRotateRight,
'tool-cine': toolCine,
'tool-crosshair': toolCrosshair,
'tool-probe': toolProbe,
'tool-angle': toolAngle,
'tool-reset': toolReset,
'tool-rectangle': toolRectangle,
'tool-fusion-color': toolFusionColor,
'tool-create-threshold': toolCreateThreshold,
'tool-calibration': toolCalibration,
'tool-point': toolCircle,
'tool-freehand-line': toolFreehand,
'tool-freehand-polygon': toolFreehandPolygon,
'tool-polygon': toolPolygon,
'tool-3d-rotate': iconToolRotate,
'edit-patient': editPatient,
'icon-mpr': iconMPR,
'icon-next-inactive': iconNextInactive,
'icon-next': iconNext,
'icon-prev-inactive': iconPrevInactive,
'icon-prev': iconPrev,
'icon-upload': iconUpload,
'navigation-panel-right-hide': navigationPanelRightHide,
'navigation-panel-right-reveal': navigationPanelRightReveal,
'tab-linear': tabLinear,
'tab-patient-info': tabPatientInfo,
'tab-roi-threshold': tabROIThreshold,
'tab-segmentation': tabSegmentation,
'tab-studies': tabStudies,
'ui-arrow-down': uiArrowDown,
'ui-arrow-up': uiArrowUp,
'ui-arrow-left': uiArrowLeft,
'ui-arrow-right': uiArrowRight,
'checkbox-default': checkboxDefault,
'checkbox-active': checkboxActive,
'tool-referenceLines': referenceLines,
'chevron-left-new': chevronLeftNew,
'chevron-down-new': chevronDownNew,
'settings-bars': settingsBars,
'icon-rename': iconRename,
'icon-add': iconAdd,
'icon-delete': iconDelete,
'icon-more-menu': iconMoreMenu,
'icon-tool-brush': iconToolBrush,
'icon-tool-eraser': iconToolEraser,
'icon-tool-scissor': iconToolScissor,
'icon-tool-shape': iconToolShape,
'icon-tool-threshold': iconToolThreshold,
'next-arrow': nextArrow,
'prev-arrow': prevArrow,
'viewport-status-tracked': viewportStatusTracked,
'viewport-window-level': viewportWindowLevel,
'dicom-tag-browser': dicomTagBrowser,
/** New Tools */
'icon-tool-freehand-roi': iconToolFreehandRoi,
'icon-tool-livewire': iconToolLivewire,
'icon-tool-spline-roi': iconToolSplineRoi,
'icon-tool-ultrasound-bidirectional': iconToolUltrasoundBidirectional,
'icon-tool-loupe': iconToolLoupe,
'icon-tool-cobb-angle': iconToolCobbAngle,
'icon-tool-window-region': iconToolWindowRegion,
/** Old OHIF */
'old-trash': oldTrash,
'old-play': oldPlay,
'old-stop': oldStop,
/** ColorLut */
'icon-color-lut': iconColorLUT,
/** New Patient Info Toolbar */
'icon-chevron-patient': iconChevronPatient,
'icon-patient': iconPatient,
'icon-settings': iconSettings,
'icon-toolbar-back': iconToolbarBack,
'icon-multiple-patients': iconMultiplePatients,
/** Volume Rendering */
'CT-AAA': CTAAA,
'CT-AAA2': CTAAA2,
'CT-Air': CTAir,
'CT-Bone': CTBone,
'CT-Bones': CTBones,
'CT-Cardiac': CTCardiac,
'CT-Cardiac2': CTCardiac2,
'CT-Cardiac3': CTCardiac3,
'CT-Chest-Contrast-Enhanced': CTChestContrastEnhanced,
'CT-Chest-Vessels': CTChestVessels,
'CT-Coronary-Arteries': CTCoronaryArteries,
'CT-Coronary-Arteries-2': CTCoronaryArteries2,
'CT-Coronary-Arteries-3': CTCoronaryArteries3,
'CT-Cropped-Volume-Bone': CTCroppedVolumeBone,
'CT-Fat': CTFat,
'CT-Liver-Vasculature': CTLiverVasculature,
'CT-Lung': CTLung,
'CT-MIP': CTMIP,
'CT-Muscle': CTMuscle,
'CT-Pulmonary-Arteries': CTPulmonaryArteries,
'CT-Soft-Tissue': CTSoftTissue,
'DTI-FA-Brain': DTIFABrain,
'MR-Angio': MRAngio,
'MR-Default': MRDefault,
'MR-MIP': MRMIP,
'MR-T2-Brain': MRT2Brain,
VolumeRendering: VolumeRendering,
'action-new-dialog': actionNewDialog,
/** LAYOUT */
'layout-advanced-3d-four-up': layoutAdvanced3DFourUp,
'layout-advanced-3d-main': layoutAdvanced3DMain,
'layout-advanced-3d-only': layoutAdvanced3DOnly,
'layout-advanced-3d-primary': layoutAdvanced3DPrimary,
'layout-advanced-axial-primary': layoutAdvancedAxialPrimary,
'layout-advanced-mpr': layoutAdvancedMPR,
'layout-common-1x1': layoutCommon1x1,
'layout-common-1x2': layoutCommon1x2,
'layout-common-2x2': layoutCommon2x2,
'layout-common-2x3': layoutCommon2x3,
'tab-4d': tab4D,
/** New investigational use */
'illustration-investigational-use': investigationalUse,
};
const ICONS = {};
function addIcon(iconName, iconSVG) {
if (ICONS[iconName]) {
console.warn(`Icon ${iconName} already exists.`);
@@ -439,7 +18,7 @@ export default function getIcon(key, props) {
const icon = ICONS[key];
if (!key || !icon) {
return React.createElement('div', null, 'Missing Icon');
return React.createElement('div', null, 'Missing Icon ' + key);
}
if (typeof icon === 'string' && icon.endsWith('.png')) {
platform/ui/src/components/InputFilterText/InputFilterText.tsx
+5 -7
View File
@@ -1,8 +1,7 @@
import classNames from 'classnames';
import debounce from 'lodash.debounce';
import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
type InputFilterTextProps = {
className?: string;
@@ -56,26 +55,25 @@ const InputFilterText = ({
return (
<label className={classNames('relative', className)}>
<span className="absolute inset-y-0 left-0 flex items-center pl-2">
<Icon name="icon-search"></Icon>
<Icons.Search />
</span>
<input
ref={searchInputRef}
type="text"
className="border-inputfield-main focus:border-inputfield-focus disabled:border-inputfield-disabled placeholder:text-inputfield-placeholder block w-full w-full appearance-none rounded-md border bg-black py-2 px-9 text-base leading-tight shadow transition duration-300 focus:outline-none"
className="border-inputfield-main focus:border-inputfield-focus disabled:border-inputfield-disabled placeholder:text-inputfield-placeholder block w-full appearance-none rounded-md border bg-black py-2 px-9 text-base leading-tight shadow transition duration-300 focus:outline-none"
placeholder={placeholder}
onChange={event => handleFilterTextChanged(event.target.value)}
autoComplete="off"
value={filterValue}
></input>
<span className="absolute inset-y-0 right-0 flex items-center pr-2">
<Icon
name="icon-clear-field"
<Icons.Clear
className={classNames('cursor-pointer', filterValue ? '' : 'hidden')}
onClick={() => {
searchInputRef.current.value = '';
handleFilterTextChanged('');
}}
></Icon>
></Icons.Clear>
</span>
</label>
);
platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx
+6 -14
View File
@@ -1,15 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const baseLabelClassName = 'flex flex-col flex-1 text-white text-lg pl-1 select-none';
const spanClassName = 'flex flex-row items-center cursor-pointer focus:outline-none';
const sortIconMap = {
descending: 'sorting-active-up',
ascending: 'sorting-active-down',
none: 'sorting',
descending: () => <Icons.SortingDescending className="text-primary-main mx-2 w-2" />,
ascending: () => <Icons.SortingAscending className="text-primary-main mx-2 w-2" />,
none: () => <Icons.Sorting className="text-primary-main mx-2 w-2" />,
};
const InputLabelWrapper = ({
@@ -38,15 +38,7 @@ const InputLabelWrapper = ({
tabIndex="0"
>
{label}
{isSortable && (
<Icon
name={sortIconMap[sortDirection]}
className={classnames(
'mx-2 w-2',
sortDirection !== 'none' ? 'text-primary-light' : 'text-primary-main'
)}
/>
)}
{isSortable && sortIconMap[sortDirection]()}
</span>
<span>{children}</span>
</label>
platform/ui/src/components/InputNumber/InputNumber.tsx
+4 -5
View File
@@ -1,10 +1,9 @@
import React, { useState, useCallback, useEffect } from 'react';
import IconButton from '../IconButton';
import Icon from '../Icon';
import './InputNumber.css';
import Label from '../Label';
import getMaxDigits from '../../utils/getMaxDigits';
import { Icons } from '@ohif/ui-next';
const arrowHorizontalClassName =
'cursor-pointer text-primary-active active:text-primary-light hover:opacity-70 w-4 flex items-center justify-center';
@@ -131,7 +130,7 @@ const InputNumber: React.FC<{
className={arrowHorizontalClassName}
onClick={() => decrement()}
>
<Icon name="arrow-left-small" />
<Icons.ByName name="arrow-left" />
</div>
)}
<input
@@ -149,7 +148,7 @@ const InputNumber: React.FC<{
className={arrowHorizontalClassName}
onClick={() => increment()}
>
<Icon name="arrow-right-small" />
<Icons.ByName name="arrow-right" />
</div>
)}
{showAdjustmentArrows && arrowsDirection === 'vertical' && (
@@ -178,7 +177,7 @@ const ArrowButton = ({ onClick, rotate = false }: { onClick: () => void; rotate?
className={`text-[#726f7e] ${rotate ? 'rotate-180 transform' : ''}`}
onClick={onClick}
>
<Icon name="ui-arrow-down" />
<Icons.ByName name="arrow-down" />
</IconButton>
);
platform/ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx
+2 -5
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
import Button, { ButtonEnums } from '../Button';
export enum showDialogOption {
@@ -65,10 +65,7 @@ const InvestigationalUseDialog = ({
<div className="fixed bottom-2 z-50 flex h-[86px] w-full justify-center">
<div className="bg-secondary-dark border-primary-dark flex w-[90%] items-center justify-between rounded-lg border-2 pl-[22px] pr-[22px] pt-[10px] pb-[10px] shadow-lg">
<div className="flex items-center gap-4">
<Icon
name="illustration-investigational-use"
className="h-18 w-18"
/>
<Icons.InvestigationalUse className="h-18 w-18" />
<div className="flex flex-col">
<div className="text-[19px] text-white">
OHIF Viewer is{' '}
platform/ui/src/components/LayoutPreset/LayoutPreset.tsx
+3 -2
View File
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../Icon/Icon';
import { Icons } from '@ohif/ui-next';
function LayoutPreset({
onSelection = () => {},
@@ -11,6 +11,7 @@ function LayoutPreset({
classNames: classNameProps,
disabled,
}) {
console.debug('🚀 ~ icon:', icon);
return (
<div
className={classNames(classNameProps, disabled && 'ohif-disabled')}
@@ -19,7 +20,7 @@ function LayoutPreset({
}}
data-cy={title}
>
<Icon
<Icons.ByName
name={icon}
className="group-hover:text-primary-light"
/>
platform/ui/src/components/LayoutSelector/LayoutSelector.tsx
-1
View File
@@ -34,7 +34,6 @@ function LayoutSelector({ onSelection = () => {}, rows = 3, columns = 4 }) {
onClick={() => {
const x = index % columns;
const y = Math.floor(index / columns);
onSelection({
numRows: y + 1,
numCols: x + 1,
platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
+2 -5
View File
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
import debounce from 'lodash.debounce';
import IconButton from '../IconButton';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
import './LegacyCinePlayerCustomInputRange.css';
const LegacyCinePlayer = ({
@@ -66,14 +65,12 @@ const LegacyCinePlayer = ({
className="text-primary-active border-primary-active mr-3 rounded-full border"
onClick={onClose}
>
<Icon name="close" />
<Icons.Close />
</IconButton>
</div>
);
};
const noop = () => {};
LegacyCinePlayer.propTypes = {
/** Minimum value for range slider */
minFrameRate: PropTypes.number.isRequired,
platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx
+2 -6
View File
@@ -1,9 +1,8 @@
import React from 'react';
import classNames from 'classnames';
import Icon from '../Icon';
import ProgressLoadingBar from '../ProgressLoadingBar';
import { Icons } from '@ohif/ui-next';
/**
* A React component that renders a loading indicator.
* if progress is not provided, it will render an infinite loading indicator
@@ -18,10 +17,7 @@ function LoadingIndicatorProgress({ className, textBlock, progress }) {
className
)}
>
<Icon
name="loading-ohif-mark"
className="h-12 w-12 text-white"
/>
<Icons.LoadingOHIFMark className="h-12 w-12 text-white" />
<div className="w-48">
<ProgressLoadingBar progress={progress} />
</div>
platform/ui/src/components/MeasurementTable/MeasurementItem.tsx
+3 -5
View File
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const MeasurementItem = ({
uid,
@@ -56,8 +56,7 @@ const MeasurementItem = ({
onMouseLeave={() => setIsIndexHovering(false)}
>
{isIndexHovering ? (
<Icon
name="close"
<Icons.Close
className={classnames(
'mx-auto mt-1 w-[10px] text-center transition duration-500 hover:opacity-80',
{
@@ -80,13 +79,12 @@ const MeasurementItem = ({
dangerouslySetInnerHTML={{ __html: line }}
></span>
))}
<Icon
<Icons.Pencil
className={classnames(
'absolute w-3 cursor-pointer text-white transition duration-300 hover:opacity-80',
{ 'invisible mr-2 opacity-0': !isActive && !isHovering },
{ 'opacity-1 visible': !isActive && isHovering }
)}
name="pencil"
style={{
top: 7,
right: 14,
platform/ui/src/components/Modal/Modal.tsx
+3 -3
View File
@@ -4,7 +4,8 @@ import ReactModal from 'react-modal';
import Draggable from 'react-draggable';
import { useModal } from '../../contextProviders';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
import Typography from '../Typography';
import './Modal.css';
@@ -43,9 +44,8 @@ const Modal = ({
{title}
</Typography>
{closeButton && (
<Icon
<Icons.Close
onClick={onClose}
name="close"
className="text-primary-active cursor-pointer"
/>
)}
platform/ui/src/components/Notification/Notification.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import classnames from 'classnames';
import PropTypes from 'prop-types';
import Button, { ButtonEnums } from '../Button';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const Notification = ({
id,
@@ -80,7 +80,7 @@ const Notification = ({
tabIndex={0}
>
<div className="flex grow items-center">
<Icon
<Icons.ByName
name={icon}
className={classnames('h-6 w-6', color)}
/>
platform/ui/src/components/PanelSection/PanelSection.tsx
+3 -4
View File
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import { Icon } from '@ohif/ui';
import PropTypes from 'prop-types';
import { Icons } from '@ohif/ui-next';
const PanelSection = ({ title, children, actionIcons = [], childrenClassName }) => {
const [areChildrenVisible, setChildrenVisible] = useState(true);
@@ -18,7 +17,7 @@ const PanelSection = ({ title, children, actionIcons = [], childrenClassName })
<div className="text-aqua-pale">{title}</div>
<div className="flex items-center space-x-1">
{actionIcons.map((icon, index) => (
<Icon
<Icons.ByName
key={index}
name={icon.name}
onClick={e => {
@@ -31,7 +30,7 @@ const PanelSection = ({ title, children, actionIcons = [], childrenClassName })
/>
))}
<div className="grid h-[28px] w-[28px] place-items-center">
<Icon name={areChildrenVisible ? 'chevron-down-new' : 'chevron-left-new'} />
{areChildrenVisible ? <Icons.ChevronOpen /> : <Icons.ChevronClosed />}
</div>
</div>
</div>
platform/ui/src/components/PatientInfo/PatientInfo.tsx
+3 -6
View File
@@ -3,7 +3,7 @@ import classnames from 'classnames';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
import Tooltip from '../Tooltip';
const classes = {
@@ -40,7 +40,7 @@ function PatientInfo({
isOpen && (
<div className="flex py-2">
<div className="flex pt-1">
<Icon
<Icons.ByName
name="info-link"
className="text-primary-main w-4"
/>
@@ -115,10 +115,7 @@ function PatientInfo({
)
}
>
<Icon
className="hover:text-primary-light cursor-pointer text-white"
name="info-action"
/>
<Icons.Info className="hover:text-primary-light cursor-pointer text-white" />
</Tooltip>
</div>
);
platform/ui/src/components/ProgressDropdown/ProgressDropdown.tsx
+4 -8
View File
@@ -4,7 +4,7 @@ import classnames from 'classnames';
import ProgressDiscreteBar from './ProgressDiscreteBar';
import ProgressItemDetail from './ProgressItemDetail';
import ProgressItem from './ProgressItem';
import { Icon } from '../../components';
import { Icons } from '@ohif/ui-next';
import { ProgressDropdownOption, ProgressDropdownOptionPropType } from './types';
const ProgressDropdown = ({
@@ -108,10 +108,7 @@ const ProgressDropdown = ({
{!selectedOption && <div className="ml-1 grow text-base leading-6">{children}</div>}
</div>
<Icon
name="chevron-down"
className="text-primary-active mt-0.5 ml-1"
/>
<Icons.ChevronOpen className="text-primary-active mt-0.5 ml-1" />
</div>
<button
className={classnames('ml-1.5 w-[26px] rounded text-base', {
@@ -119,8 +116,7 @@ const ProgressDropdown = ({
'bg-primary-dark pointer-events-none': !canMoveNext,
})}
>
<Icon
name="arrow-right"
<Icons.ArrowRight
className={classnames('relative left-0.5 h-6 w-6 text-white', {
'text-white': canMoveNext,
'text-secondary-light': !canMoveNext,
@@ -132,7 +128,7 @@ const ProgressDropdown = ({
<div
className={classnames(
'absolute top-7 left-0 right-8 z-10 mt-0.5 origin-top',
'bg-primary-dark overflow-hidden transition-[max-height] duration-300 ',
'bg-primary-dark overflow-hidden transition-[max-height] duration-300',
'border-secondary-main rounded border shadow',
{
hidden: !open,
platform/ui/src/components/ProgressDropdown/ProgressItemDetail.tsx
+3 -2
View File
@@ -1,5 +1,6 @@
import React, { useState, useMemo, ReactElement } from 'react';
import { Icon, Tooltip } from '../../components';
import { Icons } from '@ohif/ui-next';
import { Tooltip } from '../../components';
import { ProgressDropdownOption, ProgressDropdownOptionPropType } from './types';
const MAX_TOOLTIP_LENGTH = 150;
@@ -45,7 +46,7 @@ const ProgressItemDetail = ({ option }: { option: ProgressDropdownOption }): Rea
<>
{icon && (
<div>
<Icon
<Icons.ByName
name={icon}
className={iconClassNames}
/>
platform/ui/src/components/SegmentationGroupTable/AddSegmentRow.tsx
+5 -12
View File
@@ -1,7 +1,6 @@
import React from 'react';
import Icon from '../Icon';
import { useTranslation } from 'react-i18next';
import { Icons } from '@ohif/ui-next';
function AddSegmentRow({ onClick, onToggleSegmentationVisibility = null, segmentation = null }) {
const { t } = useTranslation('SegmentationTable');
return (
@@ -12,7 +11,7 @@ function AddSegmentRow({ onClick, onToggleSegmentationVisibility = null, segment
>
<div className="text-primary-active group-hover:bg-secondary-dark flex items-center rounded-[4px] pr-2">
<div className="grid h-[28px] w-[28px] place-items-center">
<Icon name="icon-add" />
<Icons.Add />
</div>
<span className="text-[13px]">{t('Add segment')}</span>
</div>
@@ -20,19 +19,13 @@ function AddSegmentRow({ onClick, onToggleSegmentationVisibility = null, segment
{segmentation && (
<div className="flex items-center">
<div
className="hover:bg-secondary-dark ml-3 mr-1 grid h-[28px] w-[28px] cursor-pointer place-items-center rounded-[4px]"
className="hover:bg-secondary-dark ml-3 mr-1 grid h-[28px] w-[28px] cursor-pointer place-items-center rounded-[4px]"
onClick={() => onToggleSegmentationVisibility(segmentation.id)}
>
{segmentation.isVisible ? (
<Icon
name="row-shown"
className="text-primary-active"
/>
<Icons.EyeVisible className="text-primary-active" />
) : (
<Icon
name="row-hidden"
className="text-primary-active"
/>
<Icons.EyeHidden className="text-primary-active" />
)}
</div>
</div>
platform/ui/src/components/SegmentationGroupTable/NoSegmentationRow.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import React from 'react';
import Icon from '../Icon';
import { useTranslation } from 'react-i18next';
import { Icons } from '@ohif/ui-next';
function NoSegmentationRow({ onSegmentationAdd, addSegmentationClassName }) {
const { t } = useTranslation('SegmentationTable');
return (
@@ -11,7 +10,7 @@ function NoSegmentationRow({ onSegmentationAdd, addSegmentationClassName }) {
>
<div className="text-primary-active group-hover:bg-secondary-dark flex items-center rounded-[4px] group-hover:cursor-pointer">
<div className="grid h-[28px] w-[28px] place-items-center">
<Icon name="icon-add" />
<Icons.Add />
</div>
<span className="text-[13px]">{t('Add segmentation')}</span>
</div>
platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import React, { useState } from 'react';
import Icon from '../Icon';
import InputRange from '../InputRange';
import CheckBox from '../CheckBox';
import InputNumber from '../InputNumber';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Icons } from '@ohif/ui-next';
const getRoundedValue = value => {
return Math.round(value * 100) / 100;
@@ -143,7 +143,7 @@ const SegmentationConfig = ({
onClick={() => setIsMinimized(!isMinimized)}
className="flex cursor-pointer items-center pl-2 pb-[9px]"
>
<Icon
<Icons.ByName
name="panel-group-open-close"
className={classNames('h-5 w-5 cursor-pointer text-white transition duration-300', {
'rotate-90 transform': !isMinimized,
platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx
+7 -20
View File
@@ -1,7 +1,8 @@
import React from 'react';
import { Select, Icon, Dropdown, Tooltip } from '../../components';
import { Select, Dropdown, Tooltip } from '../../components';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Icons } from '@ohif/ui-next';
function SegmentationDropDownRow({
segmentations = [],
@@ -99,7 +100,7 @@ function SegmentationDropDownRow({
]}
>
<div className="hover:bg-secondary-dark grid h-[28px] w-[28px] cursor-pointer place-items-center rounded-[4px]">
<Icon name="icon-more-menu"></Icon>
<Icons.More />
</div>
</Dropdown>
</div>
@@ -109,12 +110,7 @@ function SegmentationDropDownRow({
isClearable={false}
onChange={handleChange}
components={{
DropdownIndicator: () => (
<Icon
name={'chevron-down-new'}
className="mr-2"
/>
),
DropdownIndicator: () => <Icons.ChevronOpen className="mr-2" />,
}}
isSearchable={false}
options={selectOptions}
@@ -132,25 +128,16 @@ function SegmentationDropDownRow({
</div>
}
>
<Icon
name="info-action"
className="text-primary-active"
/>
<Icons.Info className="text-primary-active" />
</Tooltip>
<div
className="hover:bg-secondary-dark mr-1 grid h-[28px] w-[28px] cursor-pointer place-items-center rounded-[4px]"
onClick={() => onToggleSegmentationVisibility(activeSegmentation.id)}
>
{activeSegmentation.isVisible ? (
<Icon
name="row-shown"
className="text-primary-active"
/>
<Icons.EyeVisible className="text-primary-active" />
) : (
<Icon
name="row-hidden"
className="text-primary-active"
/>
<Icons.EyeHidden className="text-primary-active" />
)}
</div>
</div>
platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
+6 -15
View File
@@ -1,8 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const SegmentItem = ({
segmentIndex,
@@ -51,8 +50,7 @@ const SegmentItem = ({
onMouseLeave={() => setIsNumberBoxHovering(false)}
>
{isNumberBoxHovering && showDelete ? (
<Icon
name="close"
<Icons.Close
className={classnames('h-[8px] w-[8px]', {
'hover:cursor-pointer hover:opacity-60': !disableEditing,
})}
@@ -102,8 +100,7 @@ const SegmentItem = ({
>
<div className="group-hover/row:hidden">
{!isVisible && (
<Icon
name="row-hidden"
<Icons.EyeHidden
className="h-5 w-5 text-[#3d5871]"
onClick={e => {
e.stopPropagation();
@@ -117,8 +114,7 @@ const SegmentItem = ({
<div className="group-hover/row:hidden">
{isLocked && (
<div className="flex">
<Icon
name="row-lock"
<Icons.Lock
className="h-5 w-5 text-[#3d5871]"
onClick={e => {
e.stopPropagation();
@@ -127,12 +123,7 @@ const SegmentItem = ({
/>
{/* This icon is visible when 'isVisible' is true */}
{isVisible && (
<Icon
name="row-hidden"
className="h-5 w-5 opacity-0"
/>
)}
{isVisible && <Icons.Lock className="h-5 w-5 opacity-0" />}
</div>
)}
</div>
@@ -193,7 +184,7 @@ const HoveringIcons = ({
};
const createIcon = (name, action, color = null) => (
<Icon
<Icons.ByName
name={name}
className={classnames(iconClass, color ?? 'text-white')}
onClick={e => handleIconClick(e, action)}
platform/ui/src/components/SegmentationGroupTable/SegmentationItem.tsx
+7 -9
View File
@@ -1,11 +1,12 @@
import React, { useState } from 'react';
import { Icon, Dropdown } from '../../components';
import { Dropdown } from '../../components';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import AddSegmentRow from './AddSegmentRow';
import SegmentationGroupSegment from './SegmentationGroupSegment';
import { Tooltip } from '../../components';
import { Icons } from '@ohif/ui-next';
function SegmentationItem({
segmentation = {},
@@ -94,12 +95,12 @@ function SegmentationItem({
],
]}
>
<div className="hover:bg-secondary-dark grid h-[28px] w-[28px] cursor-pointer place-items-center rounded-[4px]">
<Icon name="icon-more-menu"></Icon>
<div className="hover:bg-secondary-dark grid h-[28px] w-[28px] cursor-pointer place-items-center rounded-[4px]">
<Icons.More />
</div>
</Dropdown>
<div
className=" h-[28px] bg-black"
className="h-[28px] bg-black"
style={{ width: '3px' }}
></div>
</div>
@@ -118,13 +119,10 @@ function SegmentationItem({
</div>
}
>
<Icon
name="info-action"
className="text-primary-active"
/>
<Icons.Info className="text-primary-active" />
</Tooltip>
<div className={areChildrenVisible ? '' : 'mr-[4px]'}>
<Icon name={areChildrenVisible ? 'chevron-down-new' : 'chevron-left-new'} />
{areChildrenVisible ? <Icons.ChevronOpen /> : <Icons.ChevronClosed />}
</div>
</div>
</div>
platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
+26 -17
View File
@@ -1,8 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const SegmentationItem = ({
id,
@@ -53,8 +52,7 @@ const SegmentationItem = ({
)}
>
{isHovering ? (
<Icon
name="close"
<Icons.Close
className={classnames('w-[10px] text-center transition duration-500 hover:opacity-80', {
'bg-primary-light text-black': isActive,
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
@@ -79,13 +77,12 @@ const SegmentationItem = ({
</div>
<div className="flex w-1/4 items-center">
<div>
<Icon
<Icons.Pencil
className={classnames(
'absolute w-3 cursor-pointer text-white transition duration-300 hover:opacity-80',
{ 'invisible mr-2 opacity-0': !isActive && !isHovering },
{ 'opacity-1 visible': !isActive && isHovering }
)}
name="pencil"
style={{
top: 7,
right: 14,
@@ -95,17 +92,29 @@ const SegmentationItem = ({
/>
</div>
<div>
<Icon
className={classnames(
'w-4 cursor-pointer text-white transition duration-300 hover:opacity-80'
)}
name={isVisible ? 'eye-visible' : 'eye-hidden'}
onClick={e => {
// stopPropagation needed to avoid disable the current active item
e.stopPropagation();
toggleVisibility(e, id);
}}
/>
{isVisible ? (
<Icons.EyeVisible
className={classnames(
'w-4 cursor-pointer text-white transition duration-300 hover:opacity-80'
)}
onClick={e => {
// stopPropagation needed to avoid disable the current active item
e.stopPropagation();
toggleVisibility(e, id);
}}
/>
) : (
<Icons.EyeHidden
className={classnames(
'w-4 cursor-pointer text-white transition duration-300 hover:opacity-80'
)}
onClick={e => {
// stopPropagation needed to avoid disable the current active item
e.stopPropagation();
toggleVisibility(e, id);
}}
/>
)}
</div>
</div>
</div>
platform/ui/src/components/SegmentationTable/SegmentationTable.tsx
+2 -4
View File
@@ -1,8 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import SegmentationItem from './SegmentationItem';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const SegmentationTable = ({
title = '',
@@ -51,8 +50,7 @@ const SegmentationTable = ({
<span className="text-base font-bold uppercase tracking-widest text-white">{title}</span>
<div className="flex">
<span className="text-base font-bold text-white">{amount}</span>
<Icon
name="eye-hidden"
<Icons.EyeHidden
className="ml-2 w-6 cursor-pointer text-white transition duration-300 hover:opacity-80"
onClick={() => handleToggleAll()}
/>
platform/ui/src/components/Select/Select.tsx
+3 -4
View File
@@ -2,8 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import ReactSelect, { components } from 'react-select';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
import './Select.css';
@@ -24,9 +23,9 @@ const Option = props => {
<div className="flex items-center">
<div className="h-2 w-2">
{props.isSelected ? (
<Icon name={'checkbox-active'} />
<Icons.ByName name={'checkbox-active'} />
) : (
<Icon name={'checkbox-default'} />
<Icons.ByName name={'checkbox-default'} />
)}
</div>
<label
platform/ui/src/components/SelectTree/SelectTree.tsx
+5 -10
View File
@@ -2,10 +2,9 @@ import React, { Component } from 'react';
import InputRadio from './InputRadio';
import SelectTreeBreadcrumb from './SelectTreeBreadcrumb';
import cloneDeep from 'lodash.clonedeep';
import Icon from '../Icon';
import Button, { ButtonEnums } from '../Button';
import { LabelInfo } from '../Labelling/LabellingFlow';
import { Icons } from '@ohif/ui-next';
interface PropType {
autoFocus: boolean;
searchEnabled: boolean;
@@ -172,12 +171,11 @@ export class SelectTree extends Component<PropType> {
const title = this.props.selectTreeFirstTitle;
return (
<div className="flex flex-col justify-between border-b-2 border-solid border-black p-4 ">
<div className="flex flex-col justify-between border-b-2 border-solid border-black p-4">
<div className="text-primary-active m-0 mb-5 p-2 leading-tight">
<span className="text-primary-light align-sub text-xl">{title}</span>
<div className="float-right">
<Icon
name="icon-close"
<Icons.Close
className="cursor-pointer"
onClick={() => this.props.closePopup()}
fill="#a3a3a3"
@@ -188,16 +186,13 @@ export class SelectTree extends Component<PropType> {
<div className="flex w-full flex-col">
{this.props.items.length > 0 && (
<div className="absolute mt-2 mr-2.5 mb-3 ml-3 h-4 w-4">
<Icon
name="icon-search"
fill="#a3a3a3"
/>
<Icons.Magnifier fill="#a3a3a3" />
</div>
)}
<input
data-cy="input-annotation"
type="text"
className={`border-primary-main border-primary-main appearance-none rounded border bg-black bg-black py-2 pr-3 text-sm leading-tight shadow transition duration-300 hover:border-gray-500 focus:border-gray-500 focus:outline-none focus:outline-none ${inputLeftPadding}`}
className={`border-primary-main border-primary-main appearance-none rounded border bg-black py-2 pr-3 text-sm leading-tight shadow transition duration-300 hover:border-gray-500 focus:border-gray-500 focus:outline-none ${inputLeftPadding}`}
placeholder={this.props.items.length > 0 ? 'Search labels' : 'Enter label'}
autoFocus={this.props.autoFocus}
onChange={this.searchLocations}
platform/ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx
+3 -4
View File
@@ -1,7 +1,6 @@
import { Component } from 'react';
import React from 'react';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
interface PropType {
value: string;
label: string;
@@ -23,9 +22,9 @@ export default class SelectTreeBreadcrumb extends Component<PropType> {
value={this.props.value}
onChange={this.props.onSelected}
/>
<span className="cursor-pointer whitespace-nowrap ">
<span className="cursor-pointer whitespace-nowrap">
<span className="pr-2.5">
<Icon name="fast-backward" />
<Icons.ByName name="fast-backward" />
</span>
{this.props.label}
</span>
platform/ui/src/components/SidePanel/SidePanel.tsx
+6 -8
View File
@@ -2,8 +2,7 @@ import classnames from 'classnames';
import PropTypes from 'prop-types';
import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
import Tooltip from '../Tooltip';
type StyleMap = {
@@ -224,8 +223,7 @@ const SidePanel = ({
}}
data-cy={`side-panel-header-${side}`}
>
<Icon
name={'navigation-panel-right-reveal'}
<Icons.NavigationPanelReveal
className={classnames('text-primary-active', side === 'left' && 'rotate-180 transform')}
/>
</div>
@@ -248,7 +246,7 @@ const SidePanel = ({
return childComponent.disabled ? null : updateActiveTabIndex(index);
}}
>
<Icon
<Icons.ByName
name={childComponent.iconName}
className={classnames({
'text-primary-active': true,
@@ -280,7 +278,7 @@ const SidePanel = ({
}}
data-cy={`side-panel-header-${side}`}
>
<Icon
<Icons.ByName
name={openStateIconName[side]}
className="text-primary-active"
/>
@@ -331,14 +329,14 @@ const SidePanel = ({
data-cy={`${tab.name}-btn`}
>
<div className={getTabIconClassNames(tabs.length, tabIndex === activeTabIndex)}>
<Icon
<Icons.ByName
name={tab.iconName}
className={`${tab.disabled && 'ohif-disabled'}`}
style={{
width: '22px',
height: '22px',
}}
></Icon>
/>
</div>
</div>
</Tooltip>
platform/ui/src/components/Snackbar/SnackbarItem.tsx
+3 -4
View File
@@ -1,9 +1,8 @@
import React, { useEffect } from 'react';
import classNames from 'classnames';
import Icon from '../Icon';
import SnackbarTypes from './SnackbarTypes';
import { Icons } from '@ohif/ui-next';
const iconClasses = {
[SnackbarTypes.INFO]: 'notifications-info',
[SnackbarTypes.WARNING]: 'notifications-warning',
@@ -34,7 +33,7 @@ const SnackbarItem = ({ options, onClose }) => {
className={classNames(`${options.visible ? '' : hidden} sb-item`, typeClasses[options.type])}
>
<div className="flex">
<Icon
<Icons.ByName
name={iconClasses[options.type]}
className="mt-[1px] h-5 w-5"
/>
@@ -51,7 +50,7 @@ const SnackbarItem = ({ options, onClose }) => {
onClick={handleClose}
className="relative left-[3px] top-[-3px] ml-auto flex h-5 w-5 items-center justify-center self-start rounded-full text-[#0944b3]"
>
<Icon
<Icons.ByName
name="close"
className="text-black"
/>
platform/ui/src/components/SplitButton/SplitButton.tsx
+6 -6
View File
@@ -4,16 +4,16 @@ import classNames from 'classnames';
import OutsideClickHandler from 'react-outside-click-handler';
import { useTranslation } from 'react-i18next';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import ListMenu from '../ListMenu';
import { Icons } from '@ohif/ui-next';
const baseClasses = {
Button: 'flex items-center rounded-md border-transparent group/button',
Primary: 'h-full rounded-tl-md rounded-bl-md group/primary',
Secondary:
'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4 border-2 border-transparent group/secondary',
SecondaryIcon: 'w-4 h-full stroke-1',
SecondaryIcon: 'w-[24px] h-full stroke-1',
Separator: 'border-l py-3 ml-0.5',
Content: 'absolute z-10 top-0 mt-12',
};
@@ -66,12 +66,12 @@ const DefaultListItemRenderer = props => {
'flex h-8 w-full select-none flex-row items-center p-3',
'whitespace-pre text-base',
className,
`${isActive ? 'hover:opacity-80' : 'hover:bg-primary-dark '}`
`${isActive ? 'hover:opacity-80' : 'hover:bg-primary-dark'}`
)}
>
{icon && (
<span className="mr-4">
<Icon
<Icons.ByName
name={icon}
className="h-[28px] w-[28px]"
/>
@@ -93,7 +93,7 @@ const SplitButton = ({
items,
renderer = null,
onInteraction,
Component = Icon,
Component = Icons.ByName,
}) => {
const { t } = useTranslation('Buttons');
const [state, setState] = useState({ isHovering: false, isExpanded: false });
@@ -148,7 +148,7 @@ const SplitButton = ({
content={secondary.tooltip}
className="h-full"
>
<Icon
<Icons.ByName
name={secondary.icon}
className={classes.SecondaryIcon({ ...state })}
/>
platform/ui/src/components/StudyBrowserSort/StudyBrowserSort.tsx
+6 -5
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
export default function StudyBrowserSort({ servicesManager }: withAppTypes) {
const { customizationService, displaySetService } = servicesManager.services;
@@ -63,10 +63,11 @@ export default function StudyBrowserSort({ servicesManager }: withAppTypes) {
onClick={toggleSortDirection}
className="border-inputfield-main flex items-center justify-center rounded border bg-black"
>
<Icon
name={sortDirection === 'ascending' ? 'sorting-active-up' : 'sorting-active-down'}
className="text-primary-main mx-2 w-2"
/>
{sortDirection === 'ascending' ? (
<Icons.SortingAscending className="text-primary-main mx-2 w-2" />
) : (
<Icons.SortingDescending className="text-primary-main mx-2 w-2" />
)}
</button>
</div>
);
platform/ui/src/components/StudyItem/StudyItem.tsx
+3 -10
View File
@@ -2,8 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useTranslation } from 'react-i18next';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const baseClasses =
'first:border-0 border-t border-secondary-light cursor-pointer select-none outline-none';
@@ -33,10 +32,7 @@ const StudyItem = ({
<div className="flex flex-row items-center justify-between pt-2 pb-2">
<div className="text-base text-white">{date}</div>
<div className="flex flex-row items-center text-base text-blue-300">
<Icon
name="group-layers"
className="mx-2 w-4 text-blue-300"
/>
<Icons.GroupLayers className="mx-2 w-4 text-blue-300" />
{numInstances}
</div>
</div>
@@ -55,10 +51,7 @@ const StudyItem = ({
: 'mx-4 mb-4 rounded-sm'
)}
>
<Icon
name="tracked"
className="text-primary-light mr-2 w-4"
/>
<Icons.StatusTracking className="text-primary-light mr-2 w-4" />
{t('Tracked series', { trackedSeries: trackedSeries })}
</div>
</div>
platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
+3 -3
View File
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import LegacyButton from '../LegacyButton';
import Icon from '../Icon';
import Typography from '../Typography';
import InputGroup from '../InputGroup';
import { Icons } from '@ohif/ui-next';
const StudyListFilter = ({
filtersMeta,
@@ -47,7 +47,7 @@ const StudyListFilter = ({
className="text-primary-active flex cursor-pointer items-center gap-2 self-center text-lg font-semibold"
onClick={onUploadClick}
>
<Icon name="icon-upload"></Icon>
<Icons.Upload />
<span>{t('Upload')}</span>
</div>
)}
@@ -61,7 +61,7 @@ const StudyListFilter = ({
color="primaryActive"
border="primaryActive"
className="mx-8"
startIcon={<Icon name="cancel" />}
startIcon={<Icons.Cancel />}
onClick={clearFilters}
>
{t('ClearFilters')}
platform/ui/src/components/StudyListTable/StudyListTableRow.tsx
+6 -6
View File
@@ -2,8 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import getGridWidthClass from '../../utils/getGridWidthClass';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const StudyListTableRow = props => {
const { tableData } = props;
@@ -62,10 +61,11 @@ const StudyListTableRow = props => {
<div className="flex">
{index === 0 && (
<div>
<Icon
name={isExpanded ? 'chevron-down' : 'chevron-right'}
className="mr-4 inline-flex"
/>
{isExpanded ? (
<Icons.ChevronOpen className="-mt-1 mr-4 inline-flex" />
) : (
<Icons.ChevronClosed className="-mt-1 mr-4 inline-flex rotate-180" />
)}
</div>
)}
<div
platform/ui/src/components/Svg/Svg.tsx
-13
View File
@@ -1,13 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import getSvg from './getSvg';
const Svg = ({ name, ...otherProps }) => {
return <React.Fragment>{getSvg(name, { ...otherProps })}</React.Fragment>;
};
Svg.propTypes = {
name: PropTypes.string.isRequired,
};
export default Svg;
platform/ui/src/components/Svg/getSvg.tsx
-22
View File
@@ -1,22 +0,0 @@
import React from 'react';
// Svgs
import { ReactComponent as logoOhif } from './../../assets/svgs/ohif-logo.svg';
const SVGS = {
'logo-ohif': logoOhif,
};
/**
* Return the matching SVG as a React Component.
* Results in an inlined SVG Element. If there's no match,
* return `null`
*/
export default function getSvg(key, props) {
if (!key || !SVGS[key]) {
return React.createElement('div', null, 'Missing SVG');
}
return React.createElement(SVGS[key], props);
}
export { SVGS };
platform/ui/src/components/Svg/index.js
-2
View File
@@ -1,2 +0,0 @@
import Svg from './Svg';
export default Svg;
platform/ui/src/components/Thumbnail/Thumbnail.tsx
+8 -16
View File
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useDrag } from 'react-dnd';
import Icon from '../Icon';
import { StringNumber } from '../../types';
import DisplaySetMessageListTooltip from '../DisplaySetMessageListTooltip';
import { Icons } from '@ohif/ui-next';
/**
* Display a thumbnail for a display set.
@@ -90,25 +90,17 @@ const Thumbnail = ({
{seriesNumber}
</div>
<div className="flex flex-1 flex-row items-center">
<Icon
name={countIcon || 'group-layers'}
className="mr-2 w-3"
/>
<Icons.GroupLayers className="mr-2 w-3" />
{` ${numInstances}`}
</div>
<div className="mr-2 flex last:mr-0">
{loadingProgress && loadingProgress < 1 && <>{Math.round(loadingProgress * 100)}%</>}
{loadingProgress && loadingProgress === 1 && (
<Icon
name={'database'}
className="w-3"
/>
)}
</div>
<DisplaySetMessageListTooltip
messages={messages}
id={`display-set-tooltip-${displaySetInstanceUID}`}
/>
{loadingProgress && loadingProgress === 1 && <Icons.Database className="w-3" />}
</div>
<DisplaySetMessageListTooltip
messages={messages}
id={`display-set-tooltip-${displaySetInstanceUID}`}
/>
</div>
<div className="break-all text-base text-white">{description}</div>
</div>
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx
+4 -7
View File
@@ -2,11 +2,10 @@ import React, { useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { useDrag } from 'react-dnd';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import Typography from '../Typography';
import DisplaySetMessageListTooltip from '../DisplaySetMessageListTooltip';
import { Icons } from '@ohif/ui-next';
const ThumbnailNoImage = ({
displaySetInstanceUID,
description,
@@ -63,8 +62,7 @@ const ThumbnailNoImage = ({
<div ref={drag}>
<div className="flex flex-1 flex-col">
<div className="mb-2 flex flex-1 flex-row items-center">
<Icon
name="list-bullets"
<Icons.ListView
className={classnames(
'w-12',
isHydratedForDerivedDisplaySet ? 'text-primary-light' : 'text-secondary-light'
@@ -76,7 +74,7 @@ const ThumbnailNoImage = ({
>
<div
className={classnames(
'rounded-sm px-3 text-lg',
'rounded-sm px-3 text-lg',
isHydratedForDerivedDisplaySet
? 'bg-primary-light text-black'
: 'bg-primary-main text-white'
@@ -93,8 +91,7 @@ const ThumbnailNoImage = ({
</div>
<div className="flex flex-row">
{canReject && (
<Icon
name="old-trash"
<Icons.Trash
style={{ minWidth: '12px' }}
className="ml-4 w-3 text-red-500"
onClick={onReject}
platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx
+4 -11
View File
@@ -2,12 +2,11 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../Icon';
import Thumbnail from '../Thumbnail';
import Tooltip from '../Tooltip';
import { StringNumber } from '../../types';
import { useTranslation } from 'react-i18next';
import { Icons } from '@ohif/ui-next';
// Todo: This class to me feels like it belongs in an extension, not in platform/ui
// because it is dealing with mode specific components/information
function ThumbnailTracked({
@@ -48,10 +47,7 @@ function ThumbnailTracked({
content={
<div className="flex flex-1 flex-row">
<div className="flex-2 flex items-center justify-center pr-4">
<Icon
name="info-link"
className="text-primary-active"
/>
<Icons.InfoLink className="text-primary-active" />
</div>
<div className="flex flex-1 flex-col">
<span>
@@ -63,7 +59,7 @@ function ThumbnailTracked({
</div>
}
>
<Icon
<Icons.ByName
name={trackedIcon}
className="text-primary-light mb-2 w-4"
/>
@@ -71,10 +67,7 @@ function ThumbnailTracked({
</div>
{isTracked && (
<div onClick={onClickUntrack}>
<Icon
name="cancel"
className="text-primary-active w-4"
/>
<Icons.Cancel className="text-primary-active w-4" />
</div>
)}
</div>
platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
+6 -2
View File
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import IconButton from '../IconButton';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
import Tooltip from '../Tooltip';
const ToolbarButton = ({
@@ -24,7 +24,11 @@ const ToolbarButton = ({
//
}) => {
const shouldShowDropdown = !!dropdownContent;
const iconEl = icon ? <Icon name={icon} /> : <div>{label || 'Missing icon and label'}</div>;
const iconEl = icon ? (
<Icons.ByName name={icon} />
) : (
<div>{label || 'Missing icon and label'}</div>
);
const sizeToUse = size ?? 'toolbar';
const toolTipClassNameToUse =
platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
+2 -3
View File
@@ -2,8 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
const DELAY_TO_SHOW = 1000;
const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide
@@ -145,7 +144,7 @@ const TooltipClipboard = ({ children, text = '' }) => {
<>
{children}
<div className="border-secondary-light ml-2 border-l pl-2">
<Icon
<Icons.ByName
name="clipboard"
className="w-4 text-white"
/>
platform/ui/src/components/ViewportActionArrows/ViewportActionArrows.tsx
+3 -9
View File
@@ -1,6 +1,6 @@
import React from 'react';
import Icon from '../Icon';
import classNames from 'classnames';
import { Icons } from '@ohif/ui-next';
const arrowClasses =
'cursor-pointer flex items-center justify-center shrink-0 text-primary-light active:text-white hover:bg-secondary-light/60 rounded';
@@ -15,16 +15,10 @@ function ViewportActionArrows({ onArrowsClick, className }: ViewportActionArrows
// The arrows are only visible when hover over the viewport.
<div className={classNames(className, 'flex')}>
<div className={arrowClasses}>
<Icon
name="prev-arrow"
onClick={() => onArrowsClick(-1)}
/>
<Icons.ArrowLeftBold onClick={() => onArrowsClick(-1)} />
</div>
<div className={arrowClasses}>
<Icon
name="next-arrow"
onClick={() => onArrowsClick(1)}
/>
<Icons.ArrowRightBold onClick={() => onArrowsClick(1)} />
</div>
</div>
);
platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx
+3 -4
View File
@@ -11,8 +11,7 @@ import { useResizeObserver } from '../../hooks';
import useOnClickOutside from '../../utils/useOnClickOutside';
import PatientInfo from '../PatientInfo';
import Icon from '../Icon';
import { Icons } from '@ohif/ui-next';
export type ViewportActionBarProps = {
studyData: any;
onArrowsClick: (arrow: string) => void;
@@ -135,12 +134,12 @@ const ViewportActionBar = ({
)}
{showArrows && (
<>
<Icon
<Icons.ByName
className={`ml-auto ${arrowClasses}`}
name="chevron-prev"
onClick={() => onArrowsClick('left')}
/>
<Icon
<Icons.ByName
className={arrowClasses}
name="chevron-next"
onClick={() => onArrowsClick('right')}
platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx
+2 -3
View File
@@ -5,11 +5,10 @@ import Typography from '../Typography';
import Input from '../Input';
import Tooltip from '../Tooltip';
import IconButton from '../IconButton';
import Icon from '../Icon';
import Select from '../Select';
import InputLabelWrapper from '../InputLabelWrapper';
import Button, { ButtonEnums } from '../Button';
import { Icons } from '@ohif/ui-next';
const FILE_TYPE_OPTIONS = [
{
value: 'jpg',
@@ -315,7 +314,7 @@ const ViewportDownloadForm = ({
size="small"
rounded="full"
>
<Icon name={keepAspect ? 'link' : 'unlink'} />
<Icons.ByName name={keepAspect ? 'link' : 'unlink'} />
</IconButton>
</Tooltip>
</div>
platform/ui/src/components/index.js
-2
View File
@@ -40,7 +40,6 @@ import StudyListFilter from './StudyListFilter';
import StudyListPagination from './StudyListPagination';
import { StudyListTable, StudyListTableRow } from './StudyListTable';
import StudySummary from './StudySummary';
import Svg from './Svg';
import Table from './Table';
import TableBody from './TableBody';
import TableCell from './TableCell';
@@ -162,7 +161,6 @@ export {
StudyListTable,
StudyListTableRow,
StudySummary,
Svg,
SwitchButton,
SwitchLabelLocation,
Table,