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

fix(ui): Update dependencies and add missing icons (#4699)

Browse Source
This commit is contained in:
Alireza authored and GitHub committed 2025-01-21 09:34:19 -05:00
1 parent ad7ade28ea
commit cf97fa9b7b
16 files changed
+132 -83
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/docs/docs/platform/extensions/modules/hpModule.md
+1 -1
View File
@@ -505,7 +505,7 @@ running OHIF with two studies, and a comparison hanging protocol available by
default.
```bash
http://localhost:3000/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5&StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095722.1&hangingprotocolId=@ohif/hpCompare
https://viewer-dev.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5&StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095258.1&hangingprotocolId=@ohif/hpCompare
```
The `&hangingProtocolId` option forces the specific hanging protocol to be
platform/ui-next/src/components/Icons/Icons.tsx
+25 -11
View File
@@ -184,7 +184,8 @@ import LoadingOHIFMark from './Sources/LoadingOHIFMark';
import ArrowLeftBold from './Sources/ArrowLeftBold';
import Pencil from './Sources/Pencil';
import NotificationWarning from './Sources/NotificationWarning';
//
import ArrowRight from './Sources/ArrowRight';
import ChevronLeft from './Sources/ChevronLeft';
//
//
type IconProps = React.HTMLAttributes<SVGElement>;
@@ -481,6 +482,23 @@ export const Icons = {
ViewportViews,
ChevronClosed,
ChevronOpen,
ChevronRight: (props: IconProps) => {
return (
<ChevronLeft
{...props}
className={`${props.className || ''} rotate-180`.trim()}
/>
);
},
ChevronLeft,
ChevronDown: (props: IconProps) => {
return (
<ChevronLeft
{...props}
className={`${props.className || ''} -rotate-90`.trim()}
/>
);
},
Alert,
AlertOutline,
NotificationInfo,
@@ -495,20 +513,13 @@ export const Icons = {
Link,
LoadingOHIFMark,
ArrowLeft: ChevronClosed,
ArrowRight: (props: IconProps) => {
return (
<ChevronClosed
{...props}
className="rotate-180"
/>
);
},
ArrowRight,
ArrowLeftBold,
ArrowRightBold: (props: IconProps) => {
return (
<ArrowLeftBold
{...props}
className="rotate-180"
className={`${props.className || ''} rotate-180`.trim()}
/>
);
},
@@ -516,7 +527,7 @@ export const Icons = {
return (
<ChevronOpen
{...props}
className="rotate-180"
className={`${props.className || ''} -rotate-90`.trim()}
/>
);
},
@@ -675,6 +686,9 @@ export const Icons = {
pencil: (props: IconProps) => Pencil(props),
'icon-list-view': (props: IconProps) => ListView(props),
'chevron-menu': 'chevron-down',
'icon-status-alert': (props: IconProps) => Alert(props),
'info-link': (props: IconProps) => InfoLink(props),
'launch-info': (props: IconProps) => LaunchInfo(props),
clipboard: (props: IconProps) => Clipboard(props),
/** Adds an icon to the set of icons */
platform/ui-next/src/components/Icons/Sources/ArrowRight.tsx
+25
View File
@@ -0,0 +1,25 @@
import React from 'react';
import type { IconProps } from '../types';
export const ArrowLeftBold = (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
{...props}
>
<g fillRule="evenodd">
<path
fill="currentcolor"
fillRule="nonzero"
d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"
/>
<path
fill="currentcolor"
fillRule="nonzero"
d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"
/>
</g>
</svg>
);
export default ArrowLeftBold;
platform/ui-next/src/components/Icons/Sources/ChevronLeft.tsx
+28
View File
@@ -0,0 +1,28 @@
import React from 'react';
import type { IconProps } from '../types';
export const ChevronLeft = (props: IconProps) => (
<svg
width="7"
height="12"
viewBox="0 0 7 12"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g
fill="none"
fillRule="evenodd"
>
<path d="M0 0h7v12H0z" />
<path
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
d="M5.757 1.757 1.515 6l4.242 4.243"
/>
</g>
</svg>
);
export default ChevronLeft;
platform/ui-next/src/components/Icons/Sources/LaunchInfo.tsx
+1
View File
@@ -6,6 +6,7 @@ export const LaunchInfo = (props: IconProps) => (
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
{...props}
viewBox="0 0 21 22"
>
<g fillRule="evenodd">
platform/ui-next/src/components/Icons/Sources/StatusTracking.tsx
+20 -35
View File
@@ -3,48 +3,33 @@ import type { IconProps } from '../types';
export const StatusTracking = (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
version="1.1"
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>status-tracking</title>
<g
id="status-tracking"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<rect
id="Rectangle"
stroke="#5ACCE6"
fill="#5ACCE6"
x="4.5"
y="4.5"
width="15"
height="15"
rx="7.5"
></rect>
<path
d="M15.388889,9 L11.7739644,14.5948033 C11.6112717,14.8456871 11.3630166,15.0025668 11.0931982,15.0249993 C10.8233798,15.0474318 10.5584004,14.9332222 10.3665704,14.7118131 L8.5,12.5449644"
id="Path"
stroke="#090C29"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</g>
<path d="M0 0h16v16H0z" />
<rect
stroke="#5ACCE6"
fill="#5ACCE6"
x=".5"
y=".5"
width="15"
height="15"
rx="7.5"
/>
<path
d="m11.389 5-3.615 5.595a.91.91 0 0 1-.68.43.866.866 0 0 1-.727-.313L4.5 8.545"
stroke="#000"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
);
platform/ui/src/components/CinePlayer/CinePlayer.tsx
+2 -2
View File
@@ -120,7 +120,7 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
onClick={() => handleSetFrameRate(frameRate - 1)}
data-cy={'cine-player-left-arrow'}
>
<Icons.ArrowLeft />
<Icons.ChevronLeft />
</div>
<Tooltip
position="top"
@@ -152,7 +152,7 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
onClick={() => handleSetFrameRate(frameRate + 1)}
data-cy={'cine-player-right-arrow'}
>
<Icons.ArrowRight />
<Icons.ChevronRight />
</div>
</div>
<Icons.Close
platform/ui/src/components/InputNumber/InputNumber.tsx
+2 -2
View File
@@ -130,7 +130,7 @@ const InputNumber: React.FC<{
className={arrowHorizontalClassName}
onClick={() => decrement()}
>
<Icons.ByName name="arrow-left" />
<Icons.ChevronLeft />
</div>
)}
<input
@@ -148,7 +148,7 @@ const InputNumber: React.FC<{
className={arrowHorizontalClassName}
onClick={() => increment()}
>
<Icons.ByName name="arrow-right" />
<Icons.ChevronRight />
</div>
)}
{showAdjustmentArrows && arrowsDirection === 'vertical' && (
platform/ui/src/components/ProgressDropdown/ProgressDropdown.tsx
+1 -1
View File
@@ -108,7 +108,7 @@ const ProgressDropdown = ({
{!selectedOption && <div className="ml-1 grow text-base leading-6">{children}</div>}
</div>
<Icons.ChevronOpen className="text-primary-active mt-0.5 ml-1" />
<Icons.ChevronDown className="text-primary-active mt-1.5 ml-1 mr-2" />
</div>
<button
className={classnames('ml-1.5 w-[26px] rounded text-base', {