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

ui(component): Adds flexible DataRow component (#4399)

Browse Source
This commit is contained in:
Dan Rukas authored and GitHub committed 2024-10-08 12:25:44 -04:00
1 parent c8923c5499
commit 8f0035aeef
15 files changed
+1890 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui-next/src/components/Accordion/Accordion.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ const AccordionTrigger = React.forwardRef<
{...props}
>
{children}
<ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
<ChevronDownIcon className="text-primary h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));
platform/ui-next/src/components/DropdownMenu/DropdownMenu.tsx
+2 -2
View File
@@ -142,7 +142,7 @@ const DropdownMenuLabel = React.forwardRef<
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn('px-2 py-1 text-sm font-semibold', inset && 'pl-8', className)}
className={cn('text-muted-foreground px-2 py-1 text-xs', inset && 'pl-8', className)}
{...props}
/>
));
@@ -154,7 +154,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn('bg-muted -mx-1 my-1 h-px', className)}
className={cn('bg-muted my-1 mx-2 h-px', className)}
{...props}
/>
));
platform/ui-next/src/components/Icons/Icons.tsx
+627 -3
View File
@@ -5,6 +5,52 @@ type IconProps = React.HTMLAttributes<SVGElement>;
export const Icons = {
// Usage example: <Icons.ArrowLeft />
Add: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="Add"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<g
id="Group"
transform="translate(6, 6)"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<line
x1="6"
y1="0"
x2="6"
y2="12"
id="Path"
></line>
<line
x1="12"
y1="6"
x2="0"
y2="6"
id="Path"
></line>
</g>
</g>
</svg>
),
ChevronClosed: (props: IconProps) => (
<svg
width="24px"
@@ -75,6 +121,153 @@ export const Icons = {
</g>
</svg>
),
Controls: (props: IconProps) => (
<svg
width="18px"
height="18px"
viewBox="0 0 18 18"
{...props}
>
<g
id="Controls"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle
id="Oval"
stroke="currentColor"
cx="9"
cy="3.34782609"
r="1.73913043"
></circle>
<line
x1="10.7373913"
y1="3.34782609"
x2="16.4095652"
y2="3.34782609"
id="Path"
stroke="currentColor"
></line>
<line
x1="1.62695652"
y1="3.34782609"
x2="7.2573913"
y2="3.34782609"
id="Path"
stroke="currentColor"
></line>
<g
id="Group-26"
transform="translate(9.0183, 9) scale(-1, 1) translate(-9.0183, -9)translate(1.627, 7.2609)"
stroke="currentColor"
>
<circle
id="Oval"
transform="translate(3.8948, 1.7391) scale(-1, 1) translate(-3.8948, -1.7391)"
cx="3.89478261"
cy="1.73913043"
r="1.73913043"
></circle>
<line
x1="5.63043478"
y1="1.73913043"
x2="14.7826087"
y2="1.73913043"
id="Path"
transform="translate(10.2065, 1.7391) scale(-1, 1) translate(-10.2065, -1.7391)"
></line>
<line
x1="0"
y1="1.73913043"
x2="2.15217391"
y2="1.73913043"
id="Path"
transform="translate(1.0761, 1.7391) scale(-1, 1) translate(-1.0761, -1.7391)"
></line>
</g>
<circle
id="Oval"
stroke="currentColor"
cx="7.26086957"
cy="14.6521739"
r="1.73913043"
></circle>
<line
x1="8.99652174"
y1="14.6521739"
x2="16.4095652"
y2="14.6521739"
id="Path"
stroke="currentColor"
></line>
<line
x1="1.62695652"
y1="14.6521739"
x2="5.52173913"
y2="14.6521739"
id="Path"
stroke="currentColor"
></line>
</g>
</svg>
),
Delete: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="Delete"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<circle
id="Oval"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
cx="12"
cy="12"
r="7"
></circle>
<line
x1="8.95652174"
y1="8.95652174"
x2="15.0434783"
y2="15.0434783"
id="Path"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
></line>
<line
x1="15.0434783"
y1="8.95652174"
x2="8.95652174"
y2="15.0434783"
id="Path"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
></line>
</g>
</svg>
),
Download: (props: IconProps) => (
<svg
width="24px"
@@ -146,6 +339,174 @@ export const Icons = {
</g>
</svg>
),
Export: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="Export"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<line
x1="12"
y1="13.125"
x2="12"
y2="5"
id="Path"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
></line>
<polyline
id="Path"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
points="9.1875 7.8125 12 5 14.8125 7.8125"
></polyline>
<path
d="M13.875,10.000625 L16.375,10.000625 C16.720178,10.000625 17,10.280447 17,10.625625 L17,18.750625 C17,19.095803 16.720178,19.375625 16.375,19.375625 L7.625,19.375625 C7.27982203,19.375625 7,19.095803 7,18.750625 L7,10.625625 C7,10.280447 7.27982203,10.000625 7.625,10.000625 L10.125,10.000625"
id="Path"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</g>
</svg>
),
Hide: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="hide"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<circle
id="Oval"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
cx="12.4986195"
cy="11.8041442"
r="2.58684689"
></circle>
<path
d="M20.906611,11.5617197 C20.0470387,10.5861089 16.6094888,7 12.4986195,7 C8.38775024,7 4.95020027,10.5861089 4.090628,11.5617197 C3.96979067,11.7007491 3.96979067,11.9075393 4.090628,12.0465687 C4.95020027,13.0221796 8.38775024,16.6082885 12.4986195,16.6082885 C16.6094888,16.6082885 20.0470387,13.0221796 20.906611,12.0465687 C21.0274483,11.9075393 21.0274483,11.7007491 20.906611,11.5617197 Z"
id="Path"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</g>
</svg>
),
Info: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="icon-download"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
rx="4"
></rect>
<circle
id="Oval"
fillRule="nonzero"
cx="12.192"
cy="12.192"
r="8.192"
></circle>
<path
d="M12.192,4.00160754 C7.66678807,4.00160754 4,7.6683956 4,12.1928038 C4,16.7172119 7.66759184,20.3848038 12.192,20.3848038 C16.7172119,20.3848038 20.384,16.7172119 20.384,12.1928038 C20.384,7.6683956 16.7172119,4.00080377 12.192,4.00080377 L12.192,4.00160754 Z M12.192,4.8053752 C16.2727284,4.8053752 19.5802323,8.11287912 19.5802323,12.1936075 C19.5802323,16.2735322 16.2727284,19.5818399 12.192,19.5818399 C8.11127159,19.5818399 4.80376766,16.2735322 4.80376766,12.1936075 C4.80376766,8.11287912 8.11127159,4.80457143 12.192,4.80457143 L12.192,4.8053752 Z"
id="Shape"
fill="currentColor"
fillRule="nonzero"
></path>
<path
d="M11.5425557,10.4920314 C12.0867064,10.4920314 12.534405,10.905168 12.5882575,11.4356546 L12.5938838,11.5425557 L12.5938838,16.0870581 C12.5938838,16.308898 12.4138399,16.4889419 12.192,16.4889419 C11.9950769,16.4889419 11.8303046,16.346675 11.7965463,16.1593972 L11.7901162,16.0870581 L11.7901162,11.5425557 C11.7901162,11.4260094 11.7089356,11.3279498 11.5996232,11.3014254 L11.5433595,11.2957991 L10.2436672,11.2957991 C10.0218273,11.2957991 9.84178336,11.1157551 9.84178336,10.8939152 C9.84178336,10.6961884 9.98405024,10.5322198 10.1713281,10.4984615 L10.2436672,10.4920314 L11.541752,10.4920314 L11.5425557,10.4920314 Z M11.2178336,7.24561381 L11.3094631,7.25124019 C11.6679435,7.29625118 11.9444396,7.60168289 11.9444396,7.97221978 C11.9444396,8.37410361 11.6197174,8.69882575 11.2178336,8.69882575 C10.8167535,8.69882575 10.4920314,8.37329984 10.4920314,7.97221978 C10.4920314,7.60248666 10.7685275,7.29625118 11.1270078,7.25124019 L11.2178336,7.24561381 Z"
id="Shape"
fill="currentColor"
fillRule="nonzero"
></path>
<path
d="M14.139529,15.6867818 C14.3613689,15.6867818 14.5414129,15.8668257 14.5414129,16.0886656 C14.5414129,16.2855887 14.399146,16.4503611 14.2118681,16.4841193 L14.139529,16.4905495 L10.244471,16.4905495 C10.0226311,16.4905495 9.84258713,16.3105055 9.84258713,16.0886656 C9.84258713,15.8909388 9.984854,15.7269702 10.1721319,15.6932119 L10.244471,15.6867818 L14.139529,15.6867818 L14.139529,15.6867818 Z"
id="Path"
fill="currentColor"
fillRule="nonzero"
></path>
</g>
</svg>
),
Lock: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="Lock"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<path
d="M16,10.6666667 L16,8 C16,5.79133333 14.2086667,4 12,4 C9.79133333,4 8,5.79133333 8,8 L8,10.6666667 L7.5,10.6666667 C6.67157288,10.6666667 6,11.3382395 6,12.1666667 L6,18.5 C6,19.3284271 6.67157288,20 7.5,20 L16.5,20 C17.3284271,20 18,19.3284271 18,18.5 L18,12.1666667 C18,11.3382395 17.3284271,10.6666667 16.5,10.6666667 L16,10.6666667 L16,10.6666667 Z M9.33333333,10.6666667 L9.33333333,8 C9.33333333,6.52933333 10.5293333,5.33333333 12,5.33333333 C13.4706667,5.33333333 14.6666667,6.52933333 14.6666667,8 L14.6666667,10.6666667 L9.33333333,10.6666667 Z"
id="Shape"
fill="currentColor"
fillRule="nonzero"
></path>
</g>
</svg>
),
ListView: (props: IconProps) => (
<svg
width="24px"
@@ -270,6 +631,162 @@ export const Icons = {
</g>
</svg>
),
DisplayFillAndOutline: (props: IconProps) => (
<svg
width="18px"
height="18px"
viewBox="0 0 18 18"
{...props}
>
<g
id="view-outline-fill"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g id="Group-13">
<rect
id="Rectangle"
x="0"
y="0"
width="18"
height="18"
></rect>
<rect
id="Rectangle"
stroke="currentColor"
x="1.5"
y="1.5"
width="15"
height="15"
rx="1"
></rect>
<rect
id="Rectangle"
fill="currentColor"
x="3.5"
y="3.5"
width="11"
height="11"
rx="1"
></rect>
</g>
</g>
</svg>
),
DisplayOutlineOnly: (props: IconProps) => (
<svg
width="18px"
height="18px"
viewBox="0 0 18 18"
{...props}
>
<g
id="view-outline"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g id="Group-13">
<rect
id="Rectangle"
x="0"
y="0"
width="18"
height="18"
></rect>
<rect
id="Rectangle"
stroke="currentColor"
x="1.5"
y="1.5"
width="15"
height="15"
rx="1"
></rect>
</g>
</g>
</svg>
),
DisplayFillOnly: (props: IconProps) => (
<svg
width="18px"
height="18px"
viewBox="0 0 18 18"
{...props}
>
<g
id="view-fill"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g id="Group-13">
<rect
id="Rectangle"
x="0"
y="0"
width="18"
height="18"
></rect>
<rect
id="Rectangle"
fill="currentColor"
x="2"
y="2"
width="14"
height="14"
rx="1"
></rect>
</g>
</g>
</svg>
),
Actions: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="more-dropdown"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<g
id="Group-2"
transform="translate(5, 4)"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle
id="Oval"
cx="6.74621802"
cy="7.5938001"
r="1.68710308"
></circle>
<path
d="M8.17972732,1.06493425 L8.67634848,2.69920529 C8.84616867,3.26259112 9.42371506,3.59782471 9.99714943,3.46585687 L11.6537273,3.08194406 C12.2982043,2.9366791 12.9621245,3.22831522 13.2911435,3.80120174 C13.6201625,4.37408825 13.5374848,5.09450899 13.0872366,5.57796434 L11.9284539,6.82714853 C11.528377,7.25995707 11.528377,7.92764314 11.9284539,8.36045168 L13.0872366,9.60963586 C13.5374848,10.0930912 13.6201625,10.813512 13.2911435,11.3863985 C12.9621245,11.959285 12.2982043,12.2509211 11.6537273,12.1056561 L9.99714943,11.7217433 C9.42371506,11.5897755 8.84616867,11.9250091 8.67634848,12.4883949 L8.17972732,14.122666 C7.98874475,14.7549849 7.40616232,15.1876002 6.745631,15.1876002 C6.08509968,15.1876002 5.50251725,14.7549849 5.31153468,14.122666 L4.81491352,12.4883949 C4.64509333,11.9250091 4.06754694,11.5897755 3.49411257,11.7217433 L1.83753467,12.1056561 C1.19305769,12.2509211 0.529137506,11.959285 0.200118485,11.3863985 C-0.128900535,10.813512 -0.0462227777,10.0930912 0.404025372,9.60963586 L1.56280807,8.36045168 C1.96288499,7.92764314 1.96288499,7.25995707 1.56280807,6.82714853 L0.404025372,5.57796434 C-0.0462227777,5.09450899 -0.128900535,4.37408825 0.200118485,3.80120174 C0.529137506,3.22831522 1.19305769,2.9366791 1.83753467,3.08194406 L3.49411257,3.46585687 C4.06754694,3.59782471 4.64509333,3.26259112 4.81491352,2.69920529 L5.31153468,1.06493425 C5.50251725,0.43261528 6.08509968,0 6.745631,0 C7.40616232,0 7.98874475,0.43261528 8.17972732,1.06493425 Z"
id="Path"
></path>
</g>
</g>
</svg>
),
PinFill: (props: IconProps) => (
<svg
width="24px"
@@ -361,6 +878,51 @@ export const Icons = {
</g>
</svg>
),
Rename: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="Rename"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<g
id="rename"
transform="translate(4.5, 5)"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<polygon
id="Rectangle"
transform="translate(7.6682, 7.2953) rotate(45) translate(-7.6682, -7.2953)"
points="5.71337096 0.360798742 9.62306412 0.360798742 9.62306412 14.2297836 5.71337096 14.2297836"
></polygon>
<polygon
id="Path"
points="1.38207653 10.8162548 0 14.963136 4.14688121 13.5810595"
></polygon>
<path
d="M13.9536949,3.77359418 L11.1895418,1.00944111 L11.650234,0.548748934 C12.4172745,-0.192083594 13.6365239,-0.181488647 14.3905743,0.57256175 C15.1446246,1.32661215 15.1552196,2.54586147 14.4143871,3.312902 L13.9536949,3.77359418 Z"
id="Path"
></path>
</g>
</g>
</svg>
),
ThumbnailView: (props: IconProps) => (
<svg
width="24px"
@@ -718,7 +1280,7 @@ export const Icons = {
{...props}
>
<g
fill="#348CFD"
fill="currentColor"
fillRule="evenodd"
>
<path d="M7 .102A6.899 6.899 0 1 0 7 13.9 6.899 6.899 0 0 0 7 .102zm0 .875a6.024 6.024 0 1 1 0 12.048A6.024 6.024 0 0 1 7 .977z" />
@@ -736,7 +1298,7 @@ export const Icons = {
{...props}
>
<g
stroke="#348CFD"
stroke="currentColor"
strokeWidth="1.5"
fill="none"
fillRule="evenodd"
@@ -770,7 +1332,7 @@ export const Icons = {
<g
id="Segmentation---assets"
transform="translate(-42.127, -62.1087)"
stroke="#348CFD"
stroke="currentColor"
>
<g
id="icon-display-settings"
@@ -849,6 +1411,68 @@ export const Icons = {
</g>
</svg>
),
Show: (props: IconProps) => (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
>
<g
id="show"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect
id="Rectangle"
x="0"
y="0"
width="24"
height="24"
></rect>
<path
d="M18.0567826,8.96286957 C19.1471229,9.75269568 20.1356859,10.674229 21,11.7065217 C21,11.7065217 17.1949565,16.5108696 12.5,16.5108696 C11.7479876,16.5066962 11.0007435,16.3911225 10.2826087,16.167913"
id="Path"
stroke="#348CFD"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="M6.93286957,14.4413043 C5.84666081,13.6535964 4.86162018,12.7350857 4,11.7065217 C4,11.7065217 7.80504348,6.90217391 12.5,6.90217391 C13.1235541,6.90480509 13.7443251,6.98550531 14.3478261,7.1423913"
id="Path"
stroke="#348CFD"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="M9.54347826,11.7065217 C9.54347826,10.0736799 10.8671581,8.75 12.5,8.75"
id="Path"
stroke="#348CFD"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="M15.4565217,11.7065217 C15.4565217,13.3393636 14.1328419,14.6630435 12.5,14.6630435"
id="Path"
stroke="#348CFD"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<line
x1="19.7065217"
y1="4.5"
x2="5.29347826"
y2="18.9130435"
id="Path"
stroke="#348CFD"
strokeLinecap="round"
strokeLinejoin="round"
></line>
</g>
</svg>
),
SidePanelCloseLeft: (props: IconProps) => (
<svg
width="20px"
platform/ui-next/src/components/Tooltip/Tooltip.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
'bg-primary-dark border-secondary-light text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-xs',
'bg-primary-dark border-secondary-light text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border px-3 py-1.5 text-xs',
className
)}
{...props}