Fix/update branch cherry pick (#2039)
* Update all the icons * Turn off global tool sync; watch as the world burns * Shift a bunch of things around so we can start tracking/setting per element * ToolBarService to initiate one of three different calls; callback passed to all button types * SplitButton and Toolbar Button to use new `onInteraction` prop and new toolbar state * Changes to toolbar button interface and config * Fix broken layout selector * Update SR viewport to activate tools in viewport component * Duplicate activation logic in measurement tracking extension * Add alternative/dashed variants for SR Viewport * pass through "setToolActive" commands for other viewport types * fix small overlay bugs (no wwwc or scale info) * Show SpacingBetweenSlices instead of PixelSpacing in patient information dialog * Fix prop-types * Update tracked viewport to have alternative tracked styling * alt styling for SR viewports * Update to support isLocked + isRehydratable * fix broken logic * fix broken logic * switch icon style * fix icon styles * hover and click to start flow * expedited workflow when data is not dirty (just after SR hydration) * fix: setting elliptical roi tool * fix arrow annotate dialog * fix: do not show learn more button for now * remove dead code * simpler cache invalidation * simpler cache invalidation part 2 * Fix for unable to spand study cards on separate pages
This commit is contained in:
Danny Brown authored and GitHub committed
1 parent
365ba2fa72
commit
cae54b0779
78 files changed
+1678
-1263
No files matched your search
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g fill-rule="evenodd">
|
||||
<path fill="currentcolor" fill-rule="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" fill-rule="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>
|
||||
|
After Width: | Height: | Size: 568 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
|
||||
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g stroke="currentColor">
|
||||
<path stroke-width="1.5" d="M0.5 3L0.5 0" transform="translate(0 1) translate(6 3)"/>
|
||||
<path d="M0.5 4.5L0.5 4.5" transform="translate(0 1) translate(6 3)"/>
|
||||
<path stroke-width="1.5" d="M.489 5.25c-.065.002-.127.03-.172.078-.044.048-.068.112-.065.177.005.135.115.243.25.245h.009c.065-.002.127-.03.171-.078.045-.048.068-.112.066-.177-.004-.134-.112-.241-.246-.245" transform="translate(0 1) translate(6 3)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 677 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 512"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Angle Left</title>
|
||||
<path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 365 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1792 1792"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Bars</title>
|
||||
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 472 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Square Outline</title>
|
||||
<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 374 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Circle</title>
|
||||
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 243 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Dot Circle</title>
|
||||
<path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 469 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 22 28"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Ellipse Horizontal</title>
|
||||
<path d="M6 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM14 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 555 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 28"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Adjust</title>
|
||||
<path d="M12 22.5v-17c-4.688 0-8.5 3.813-8.5 8.5s3.813 8.5 8.5 8.5zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 306 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 28"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Reset</title>
|
||||
<path d="M24 14c0 6.609-5.391 12-12 12-3.578 0-6.953-1.578-9.234-4.328-0.156-0.203-0.141-0.5 0.031-0.672l2.141-2.156c0.109-0.094 0.25-0.141 0.391-0.141 0.141 0.016 0.281 0.078 0.359 0.187 1.531 1.984 3.828 3.109 6.312 3.109 4.406 0 8-3.594 8-8s-3.594-8-8-8c-2.047 0-3.984 0.781-5.437 2.141l2.141 2.156c0.297 0.281 0.375 0.719 0.219 1.078-0.156 0.375-0.516 0.625-0.922 0.625h-7c-0.547 0-1-0.453-1-1v-7c0-0.406 0.25-0.766 0.625-0.922 0.359-0.156 0.797-0.078 1.078 0.219l2.031 2.016c2.203-2.078 5.187-3.313 8.266-3.313 6.609 0 12 5.391 12 12z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 701 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">Rotate Right</title>
|
||||
<path d="M16.875 15.469c0.563-0.75 0.891-1.594 1.031-2.484h2.016c-0.188 1.406-0.703 2.719-1.594 3.891zM12.984 17.906c0.891-0.141 1.734-0.469 2.484-1.031l1.453 1.453c-1.172 0.891-2.531 1.406-3.938 1.594v-2.016zM19.922 11.016h-2.016c-0.141-0.891-0.469-1.734-1.031-2.484l1.453-1.406c0.891 1.172 1.406 2.484 1.594 3.891zM15.563 5.531l-4.547 4.453v-3.891c-2.859 0.469-5.016 2.953-5.016 5.906s2.156 5.438 5.016 5.906v2.016c-3.938-0.469-7.031-3.844-7.031-7.922s3.094-7.453 7.031-7.922v-3.094z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 654 B |
@@ -1,9 +0,0 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 28 28"
|
||||
aria-labelledby="title"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title id="title">YouTube Logo</title>
|
||||
<path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 766 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 17">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
|
||||
<path d="M2.5 14.5L20.688 14.438" transform="translate(1 1)"/>
|
||||
<path d="M1 13.378L13.065 1.313" transform="translate(1 1) rotate(-10 7.033 7.345)"/>
|
||||
<path stroke-dasharray="1 2.7" d="M16.194 11.65c.903-3.897-.636-6.269-4.62-7.115" transform="translate(1 1)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 465 B |
@@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M8.593 20.252L0 20.252 0 11.659M0 20.252L19.642.61" transform="translate(1 1)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 303 B |
@@ -1,12 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
|
||||
<g stroke-linecap="square" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M0.067 14.79L14 1" transform="translate(5 4)"/>
|
||||
<path d="M2.16 3.908L11.899 12.138" transform="translate(5 4) rotate(4.465 7.03 8.023)"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor">
|
||||
<g stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke-width="1.5" d="M19.729-.336c.448 0 .895.171 1.237.513h0l1.819 1.817c.314.314.483.717.51 1.127.027.433-.106.873-.398 1.226h0l-18.8 18.81c-.37.37-.854.554-1.338.554-.485 0-.97-.185-1.339-.554h0L-.196 21.54c-.37-.37-.554-.854-.554-1.339 0-.484.185-.968.554-1.338h0L18.492.177c.341-.342.79-.513 1.237-.513z" transform="translate(2 2)"/>
|
||||
<path d="M4.145 18.914L5.716 20.477M6.569 16.49L8.143 18.05M8.993 14.066L10.565 15.627M11.417 11.642L12.992 13.201M13.841 9.217L15.407 10.787M16.135 6.923L17.7 8.494M18.559 4.499L20.125 6.069" transform="translate(2 2)"/>
|
||||
</g>
|
||||
<rect width="5" height="5" x="3" y="3" stroke-width="1.5" rx="2.5"/>
|
||||
<rect width="5" height="5" x="16" y="16" stroke-width="1.5" rx="2.5"/>
|
||||
<rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
|
||||
<rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
|
||||
<path stroke-width="1.5" d="M9.873 5.904L6.089 2.121c-.39-.39-1.024-.39-1.414 0L2.907 3.889c-.39.39-.39 1.023 0 1.414l3.784 3.783h0M14 16.382l3.783 3.783c.391.39 1.024.39 1.415 0l1.767-1.767c.39-.39.39-1.024 0-1.415L17.182 13.2h0" transform="translate(2 2)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 727 B After Width: | Height: | Size: 1.0 KiB |
@@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 18">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1.139)">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
|
||||
<path d="M5.983 2.556c.406-.022.795-.173 1.109-.432L8.944.432c.314-.26.703-.41 1.11-.432h2.903c.403.023.788.175 1.099.432l1.852 1.692c.314.259.703.41 1.11.432h3.426c1.099.112 1.93 1.045 1.917 2.149v8.712c0 1.058-.858 1.916-1.917 1.916H2.556c-1.059 0-1.917-.858-1.917-1.916V4.705c-.013-1.104.818-2.037 1.917-2.15h3.427z"/>
|
||||
<circle cx="11.5" cy="7.986" r="3.514"/>
|
||||
<path d="M19.167 5.43c.176 0 .32.144.32.32 0 .176-.144.32-.32.32-.177 0-.32-.144-.32-.32 0-.176.143-.32.32-.32"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 735 B After Width: | Height: | Size: 731 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1.5" transform="translate(1 1)">
|
||||
<circle cx="11" cy="10.999" r="10.542" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path fill="currentColor" d="M8.542 8.724l5.762 2.306-5.762 2.88V8.725z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 387 B |
@@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 25">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
|
||||
<ellipse cx="10.5" cy="7" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
|
||||
<ellipse cx="10.5" cy="7" stroke-width="1.5" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 386 B After Width: | Height: | Size: 405 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
|
||||
<path d="M6.632 3.316H2c-1.105 0-2 .895-2 2v9.263c0 1.105.895 2 2 2h4.632" transform="translate(1 1)"/>
|
||||
<path stroke-dasharray="1 3.1" d="M14.368 3.316H19c1.105 0 2 .895 2 2v9.263c0 1.105-.895 2-2 2h-4.632 0" transform="translate(1 1)"/>
|
||||
<path d="M10.5 0.553L10.5 19.342" transform="translate(1 1)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 506 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
|
||||
<rect width="20" height="18" stroke="currentColor" stroke-width="1.5" rx="2"/>
|
||||
<path fill="currentColor" d="M10 18H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0h8v3C6.686 3 4 5.686 4 9c0 3.238 2.566 5.878 5.775 5.996L10 15v3zM10 3c3.314 0 6 2.686 6 6s-2.686 6-6 6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 423 B |
@@ -1,7 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
|
||||
<path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M5 18.79L19.436 4.353"/>
|
||||
<rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
|
||||
<rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
|
||||
<rect width="24.749" height="7.779" x="-.375" y="8.111" stroke-width="1.5" rx="1" transform="rotate(-45.001 12 12)"/>
|
||||
<path d="M5.617 12.884L7.632 14.868M8.185 10.315L10.685 12.815M10.622 7.879L12.372 9.629M13.058 5.442L15.558 7.942M15.612 2.888L17.627 4.874M3.063 15.438L5.563 17.938"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 417 B After Width: | Height: | Size: 517 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
|
||||
<circle cx="8.75" cy="8.749" r="8.333"/>
|
||||
<path d="M19.583 19.582L14.643 14.642M4.583 8.749L12.917 8.749M8.75 4.582L8.75 12.916"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 378 B |
@@ -1,8 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
|
||||
<g fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1.5)"/>
|
||||
<path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1.5) rotate(-180 9.888 18.536)"/>
|
||||
<path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1.5) rotate(-90 1.242 9.888)"/>
|
||||
<path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1.5) rotate(90 18.536 9.888)"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1)"/>
|
||||
<path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1) rotate(-180 9.888 18.536)"/>
|
||||
<path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1) rotate(-90 1.242 9.888)"/>
|
||||
<path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1) rotate(90 18.536 9.888)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 680 B After Width: | Height: | Size: 663 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
|
||||
<path d="M10 0L10 3.333M10 16.667L10 20M0 10L3.333 10M16.667 10L20 10"/>
|
||||
<circle cx="10" cy="10" r="6.667"/>
|
||||
<path d="M10 9.583c.23 0 .417.187.417.417 0 .23-.187.417-.417.417-.23 0-.417-.187-.417-.417 0-.23.187-.417.417-.417"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 484 B |
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round">
|
||||
<g stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M3.788 0L3.788 7.576M7.576 3.788L0 3.788" transform="translate(1 1) translate(11.818 10)"/>
|
||||
</g>
|
||||
<path stroke-width="1.5" d="M8.03 13.788H2c-1.105 0-2-.896-2-2V2C0 .895.895 0 2 0h13.892c1.105 0 2 .895 2 2v4.506h0" transform="translate(1 1)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 495 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M12.308 6.923L19.231 6.923 19.231 0" transform="translate(0 1)"/>
|
||||
<path d="M18.705 6.923C17.303 2.956 13.397.44 9.205.802 5.015 1.165 1.598 4.315.9 8.464c-.7 4.148 1.495 8.245 5.335 9.962 3.841 1.716 8.357.619 10.981-2.67" transform="translate(0 1)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 482 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23">
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
|
||||
<rect width="14.444" height="11.111" x="5.556" y="10" fill="currentColor" rx="2"/>
|
||||
<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M8.889 3.333H4.444C1.99 3.333 0 5.323 0 7.778v4.444"/>
|
||||
<path d="M5.556 0L8.889 3.333 5.556 6.667"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 481 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1.5" transform="translate(1 1)">
|
||||
<rect width="14.286" height="14.286" y="5.714" rx="2"/>
|
||||
<path stroke-linecap="round" d="M3.01 2.857h11.98c1.105 0 2 .896 2 2v12.286h0"/>
|
||||
<path stroke-linecap="round" d="M5.714 0h11.982c1.104 0 2 .895 2 2v12.286h0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 425 B |
@@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(1 1.5)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
|
||||
<circle cx="10" cy="10" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path fill="currentColor" d="M17.484 3.367C19.049 5.132 20 7.455 20 10c0 5.523-4.477 10-10 10-2.545 0-4.868-.95-6.633-2.516z"/>
|
||||
</g>
|
||||
|
||||
|
Before Width: | Height: | Size: 409 B After Width: | Height: | Size: 407 B |
@@ -1,3 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 0 136 136.21852" >
|
||||
<path fill="currentColor" d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031 " style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
|
||||
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
|
||||
<ellipse cx="8.558" cy="8.091" rx="7.814" ry="7.636"/>
|
||||
<path d="M14.419 13.818L20.279 19.545"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 342 B |
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
// Icons
|
||||
|
||||
import arrowDown from './../../assets/icons/arrow-down.svg';
|
||||
import arrowLeft from './../../assets/icons/arrow-left.svg';
|
||||
import calendar from './../../assets/icons/calendar.svg';
|
||||
import cancel from './../../assets/icons/cancel.svg';
|
||||
import clipboard from './../../assets/icons/clipboard.svg';
|
||||
@@ -13,6 +14,7 @@ import chevronLeft from './../../assets/icons/chevron-left.svg';
|
||||
import chevronRight from './../../assets/icons/chevron-right.svg';
|
||||
import eyeVisible from './../../assets/icons/eye-visible.svg';
|
||||
import eyeHidden from './../../assets/icons/eye-hidden.svg';
|
||||
import exclamation from './../../assets/icons/exclamation.svg';
|
||||
import externalLink from './../../assets/icons/external-link.svg';
|
||||
import groupLayers from './../../assets/icons/group-layers.svg';
|
||||
import info from './../../assets/icons/info.svg';
|
||||
@@ -47,18 +49,18 @@ import toolAnnotate from './../../assets/icons/tool-annotate.svg';
|
||||
import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
|
||||
import toolElipse from './../../assets/icons/tool-elipse.svg';
|
||||
import toolLength from './../../assets/icons/tool-length.svg';
|
||||
import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg';
|
||||
import toolMagnify from './../../assets/icons/tool-magnify.svg';
|
||||
import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg';
|
||||
import toolInvert from './../../assets/icons/tool-invert.svg';
|
||||
import toolRotateRight from './../../assets/icons/tool-rotate-right.svg';
|
||||
import toolCine from './../../assets/icons/tool-cine.svg';
|
||||
import toolProbe from './../../assets/icons/tool-probe.svg';
|
||||
import toolAngle from './../../assets/icons/tool-angle.svg';
|
||||
import toolReset from './../../assets/icons/tool-reset.svg';
|
||||
import toolRectangle from './../../assets/icons/tool-rectangle.svg';
|
||||
|
||||
/** Old OHIF */
|
||||
import oldBars from './../../assets/icons/old-bars.svg';
|
||||
import oldCircle from './../../assets/icons/old-circle.svg';
|
||||
import oldEllipseH from './../../assets/icons/old-ellipse-h.svg';
|
||||
import oldInvert from './../../assets/icons/old-invert.svg';
|
||||
import oldRotateRight from './../../assets/icons/old-rotate-right.svg';
|
||||
import oldYoutube from './../../assets/icons/old-youtube.svg';
|
||||
import oldDotCircle from './../../assets/icons/old-dot-circle.svg';
|
||||
import oldAngleLeft from './../../assets/icons/old-angle-left.svg';
|
||||
import oldReset from './../../assets/icons/old-reset.svg';
|
||||
import oldCircleO from './../../assets/icons/old-circle-o.svg';
|
||||
import oldTrash from './../../assets/icons/old-trash.svg';
|
||||
import oldPlay from './../../assets/icons/old-play.svg';
|
||||
import oldStop from './../../assets/icons/old-stop.svg';
|
||||
@@ -80,6 +82,7 @@ const ICONS = {
|
||||
'group-layers': groupLayers,
|
||||
info: info,
|
||||
'info-link': infoLink,
|
||||
'arrow-left': arrowLeft,
|
||||
'launch-arrow': launchArrow,
|
||||
'launch-info': launchInfo,
|
||||
link: link,
|
||||
@@ -87,6 +90,7 @@ const ICONS = {
|
||||
lock: lock,
|
||||
'logo-ohif-small': logoOhifSmall,
|
||||
magnifier: magnifier,
|
||||
exclamation: exclamation,
|
||||
'notificationwarning-diamond': notificationwarningDiamond,
|
||||
pencil: pencil,
|
||||
profile: profile,
|
||||
@@ -110,18 +114,18 @@ const ICONS = {
|
||||
'tool-bidirectional': toolBidirectional,
|
||||
'tool-elipse': toolElipse,
|
||||
'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-probe': toolProbe,
|
||||
'tool-angle': toolAngle,
|
||||
'tool-reset': toolReset,
|
||||
'tool-rectangle': toolRectangle,
|
||||
|
||||
/** Old OHIF */
|
||||
'old-bars': oldBars,
|
||||
'old-circle': oldCircle,
|
||||
'old-ellipse-h': oldEllipseH,
|
||||
'old-invert': oldInvert,
|
||||
'old-rotate-right': oldRotateRight,
|
||||
'old-youtube': oldYoutube,
|
||||
'old-dot-circle': oldDotCircle,
|
||||
'old-angle-left': oldAngleLeft,
|
||||
'old-reset': oldReset,
|
||||
'old-circle-o': oldCircleO,
|
||||
'old-trash': oldTrash,
|
||||
'old-play': oldPlay,
|
||||
'old-stop': oldStop,
|
||||
|
||||
@@ -6,117 +6,210 @@ import OutsideClickHandler from 'react-outside-click-handler';
|
||||
import { Icon, Tooltip, ListMenu } from '@ohif/ui';
|
||||
|
||||
const baseClasses = {
|
||||
Button: 'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
|
||||
Primary: 'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
|
||||
Secondary: 'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
|
||||
Button:
|
||||
'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
|
||||
Primary:
|
||||
'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
|
||||
Secondary:
|
||||
'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
|
||||
PrimaryIcon: 'w-5 h-5',
|
||||
SecondaryIcon: 'w-4 h-full stroke-1',
|
||||
Separator: 'border-l pt-2 pb-2',
|
||||
Content: 'absolute z-10 top-0 mt-16'
|
||||
Content: 'absolute z-10 top-0 mt-16',
|
||||
};
|
||||
|
||||
const classes = {
|
||||
Button: ({ isExpanded, primary }) => classNames(
|
||||
baseClasses.Button,
|
||||
!isExpanded && !primary.isActive && 'hover:bg-primary-dark hover:border-primary-dark'
|
||||
),
|
||||
Button: ({ isExpanded, primary }) =>
|
||||
classNames(
|
||||
baseClasses.Button,
|
||||
!isExpanded &&
|
||||
!primary.isActive &&
|
||||
'hover:bg-primary-dark hover:border-primary-dark'
|
||||
),
|
||||
Interface: 'h-full flex flex-row items-center',
|
||||
Primary: ({ primary, isExpanded }) => classNames(
|
||||
baseClasses.Primary,
|
||||
primary.isActive && !isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md' :
|
||||
isExpanded ? 'bg-primary-dark' : 'bg-secondary-dark hover:bg-primary-dark'
|
||||
),
|
||||
Secondary: ({ isExpanded, primary }) => classNames(
|
||||
baseClasses.Secondary,
|
||||
isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md'
|
||||
: primary.isActive ? 'bg-secondary-dark' : 'hover:bg-primary-dark bg-secondary-dark'
|
||||
),
|
||||
PrimaryIcon: ({ primary, isExpanded }) => classNames(
|
||||
baseClasses.PrimaryIcon,
|
||||
primary.isActive && !isExpanded ? 'text-primary-dark' : 'text-common-bright'
|
||||
),
|
||||
SecondaryIcon: ({ isExpanded }) => classNames(
|
||||
baseClasses.SecondaryIcon,
|
||||
isExpanded ? 'text-primary-dark' : 'text-primary-active hover:text-common-bright'
|
||||
),
|
||||
Separator: ({ primary, isExpanded, isHovering }) => classNames(
|
||||
baseClasses.Separator,
|
||||
isHovering || isExpanded || primary.isActive ? 'border-transparent' : 'border-primary-active'
|
||||
),
|
||||
Content: ({ isExpanded }) => classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden')
|
||||
Primary: ({ primary, isExpanded }) =>
|
||||
classNames(
|
||||
baseClasses.Primary,
|
||||
primary.isActive && !isExpanded
|
||||
? 'bg-primary-light rounded-tr-md rounded-br-md'
|
||||
: isExpanded
|
||||
? 'bg-primary-dark'
|
||||
: 'bg-secondary-dark hover:bg-primary-dark'
|
||||
),
|
||||
Secondary: ({ isExpanded, primary }) =>
|
||||
classNames(
|
||||
baseClasses.Secondary,
|
||||
isExpanded
|
||||
? 'bg-primary-light rounded-tr-md rounded-br-md'
|
||||
: primary.isActive
|
||||
? 'bg-secondary-dark'
|
||||
: 'hover:bg-primary-dark bg-secondary-dark'
|
||||
),
|
||||
PrimaryIcon: ({ primary, isExpanded }) =>
|
||||
classNames(
|
||||
baseClasses.PrimaryIcon,
|
||||
primary.isActive && !isExpanded
|
||||
? 'text-primary-dark'
|
||||
: 'text-common-bright'
|
||||
),
|
||||
SecondaryIcon: ({ isExpanded }) =>
|
||||
classNames(
|
||||
baseClasses.SecondaryIcon,
|
||||
isExpanded
|
||||
? 'text-primary-dark'
|
||||
: 'text-primary-active hover:text-common-bright'
|
||||
),
|
||||
Separator: ({ primary, isExpanded, isHovering }) =>
|
||||
classNames(
|
||||
baseClasses.Separator,
|
||||
isHovering || isExpanded || primary.isActive
|
||||
? 'border-transparent'
|
||||
: 'border-primary-active'
|
||||
),
|
||||
Content: ({ isExpanded }) =>
|
||||
classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden'),
|
||||
};
|
||||
|
||||
const SplitButton = ({
|
||||
isRadio,
|
||||
isAction,
|
||||
//
|
||||
bState,
|
||||
//
|
||||
groupId,
|
||||
primary: _primary,
|
||||
secondary,
|
||||
onClick,
|
||||
items: _items,
|
||||
renderer,
|
||||
onInteraction,
|
||||
}) => {
|
||||
const { primaryToolId, toggles, groups } = bState;
|
||||
/* Bubbles up individual item clicks */
|
||||
const getSplitButtonItems = items => items.map((item, index) => ({
|
||||
...item,
|
||||
index,
|
||||
onClick: () => {
|
||||
if (item.onClick) item.onClick({ ...item, index });
|
||||
onClick({ item, index });
|
||||
const getSplitButtonItems = items =>
|
||||
items.map((item, index) => ({
|
||||
...item,
|
||||
index,
|
||||
onClick: () => {
|
||||
onInteraction({
|
||||
groupId,
|
||||
//
|
||||
itemId: item.id,
|
||||
interactionType: item.type,
|
||||
// splitButtonId? (so we can track group?)
|
||||
// info to fire item's command/event?
|
||||
commandName: item.commandName,
|
||||
commandOptions: item.commandOptions,
|
||||
});
|
||||
|
||||
setState(state => ({
|
||||
...state,
|
||||
primary: !isAction ? { ...item, index } : state.primary,
|
||||
isExpanded: false,
|
||||
items: getSplitButtonItems(_items).filter(item => isRadio && !isAction ? item.index !== index : true)
|
||||
}));
|
||||
}
|
||||
}));
|
||||
setState(state => ({
|
||||
...state,
|
||||
primary: !isAction ? { ...item, index } : state.primary,
|
||||
isExpanded: false,
|
||||
items: getSplitButtonItems(_items).filter(item =>
|
||||
isRadio && !isAction ? item.index !== index : true
|
||||
),
|
||||
}));
|
||||
},
|
||||
}));
|
||||
|
||||
const [state, setState] = useState({
|
||||
primary: _primary,
|
||||
items: getSplitButtonItems(_items),
|
||||
items: getSplitButtonItems(_items).filter(item =>
|
||||
isRadio && !isAction ? item.id !== _primary.id : true
|
||||
),
|
||||
isHovering: false,
|
||||
isExpanded: false
|
||||
isExpanded: false,
|
||||
});
|
||||
|
||||
const onSecondaryClickHandler = () => setState(state => ({ ...state, isExpanded: !state.isExpanded }));
|
||||
const onMouseEnterHandler = () => setState(state => ({ ...state, isHovering: true }));
|
||||
const onMouseLeaveHandler = () => setState(state => ({ ...state, isHovering: false }));
|
||||
const outsideClickHandler = () => setState(state => ({ ...state, isExpanded: false }));
|
||||
const onSecondaryClickHandler = () =>
|
||||
setState(state => ({ ...state, isExpanded: !state.isExpanded }));
|
||||
const onMouseEnterHandler = () =>
|
||||
setState(state => ({ ...state, isHovering: true }));
|
||||
const onMouseLeaveHandler = () =>
|
||||
setState(state => ({ ...state, isHovering: false }));
|
||||
const outsideClickHandler = () =>
|
||||
setState(state => ({ ...state, isExpanded: false }));
|
||||
const onPrimaryClickHandler = () => {
|
||||
const primary = { ...state.primary, isActive: !state.primary.isActive };
|
||||
state.primary.onClick(primary);
|
||||
setState(state => ({ ...state, isExpanded: false, primary }));
|
||||
onInteraction({
|
||||
groupId,
|
||||
itemId: state.primary.id,
|
||||
interactionType: state.primary.type,
|
||||
// splitButtonId? (so we can track group?)
|
||||
// info to fire item's command/event?
|
||||
//
|
||||
commandName: state.primary.commandName,
|
||||
commandOptions: state.primary.commandOptions,
|
||||
});
|
||||
};
|
||||
|
||||
const isPrimaryActive =
|
||||
(state.primary.type === 'tool' && primaryToolId === state.primary.id) ||
|
||||
(state.primary.type === 'toggle' && toggles[state.primary.id] === true);
|
||||
|
||||
return (
|
||||
<OutsideClickHandler onOutsideClick={outsideClickHandler}>
|
||||
<div name='SplitButton' className="relative">
|
||||
<div name="SplitButton" className="relative">
|
||||
<div
|
||||
className={classes.Button({ ...state })}
|
||||
className={classes.Button({
|
||||
...state,
|
||||
primary: { isActive: isPrimaryActive },
|
||||
})}
|
||||
onMouseEnter={onMouseEnterHandler}
|
||||
onMouseLeave={onMouseLeaveHandler}
|
||||
>
|
||||
<div className={classes.Interface}>
|
||||
<div onClick={onPrimaryClickHandler} className={classes.Primary({ ...state })}>
|
||||
<Tooltip isDisabled={!state.primary.tooltip} content={state.primary.tooltip}>
|
||||
<div className='p-3 flex items-center justify-center h-full w-full'>
|
||||
<Icon name={state.primary.icon} className={classes.PrimaryIcon({ ...state })} />
|
||||
<div
|
||||
onClick={onPrimaryClickHandler}
|
||||
className={classes.Primary({
|
||||
...state,
|
||||
primary: { isActive: isPrimaryActive },
|
||||
})}
|
||||
>
|
||||
<Tooltip
|
||||
isDisabled={!state.primary.tooltip}
|
||||
content={state.primary.tooltip}
|
||||
>
|
||||
<div className="flex items-center justify-center w-full h-full p-3">
|
||||
<Icon
|
||||
name={state.primary.icon}
|
||||
className={classes.PrimaryIcon({
|
||||
...state,
|
||||
primary: { isActive: isPrimaryActive },
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className={classes.Separator({ ...state })}></div>
|
||||
<div className={classes.Secondary({ ...state })} onClick={onSecondaryClickHandler}>
|
||||
<div
|
||||
className={classes.Separator({
|
||||
...state,
|
||||
primary: { isActive: isPrimaryActive },
|
||||
})}
|
||||
></div>
|
||||
<div
|
||||
className={classes.Secondary({
|
||||
...state,
|
||||
primary: { isActive: isPrimaryActive },
|
||||
})}
|
||||
onClick={onSecondaryClickHandler}
|
||||
>
|
||||
<Tooltip
|
||||
isDisabled={state.isExpanded || !secondary.tooltip}
|
||||
content={secondary.tooltip}
|
||||
className="h-full"
|
||||
>
|
||||
<Icon name={secondary.icon} className={classes.SecondaryIcon({ ...state })} />
|
||||
<Icon
|
||||
name={secondary.icon}
|
||||
className={classes.SecondaryIcon({
|
||||
...state,
|
||||
primary: { isActive: isPrimaryActive },
|
||||
})}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* EXPANDED LIST OF OPTIONS */}
|
||||
<div className={classes.Content({ ...state })}>
|
||||
<ListMenu items={state.items} renderer={renderer} />
|
||||
</div>
|
||||
@@ -126,21 +219,20 @@ const SplitButton = ({
|
||||
};
|
||||
|
||||
const DefaultListItemRenderer = ({ icon, label, isActive }) => (
|
||||
<div className={classNames(
|
||||
'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
|
||||
isActive && 'bg-primary-dark'
|
||||
)}
|
||||
<div
|
||||
className={classNames(
|
||||
'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
|
||||
isActive && 'bg-primary-dark'
|
||||
)}
|
||||
>
|
||||
<span className='text-common-bright mr-4 text-base'>
|
||||
<Icon name={icon} className='w-5 h-5 text-common-bright' />
|
||||
<span className="mr-4 text-base text-common-bright">
|
||||
<Icon name={icon} className="w-5 h-5 text-common-bright" />
|
||||
</span>
|
||||
<span className='text-common-bright text-base mr-5'>
|
||||
{label}
|
||||
</span>
|
||||
</div >
|
||||
<span className="mr-5 text-base text-common-bright">{label}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const noop = () => { };
|
||||
const noop = () => {};
|
||||
|
||||
SplitButton.defaultProps = {
|
||||
isRadio: false,
|
||||
@@ -148,47 +240,45 @@ SplitButton.defaultProps = {
|
||||
primary: {
|
||||
label: null,
|
||||
tooltip: null,
|
||||
isActive: true,
|
||||
onClick: noop
|
||||
},
|
||||
secondary: {
|
||||
icon: 'chevron-down',
|
||||
label: null,
|
||||
isActive: true,
|
||||
tooltip: 'More Measure Tools'
|
||||
tooltip: 'More Measure Tools',
|
||||
},
|
||||
items: [],
|
||||
renderer: DefaultListItemRenderer,
|
||||
onClick: noop
|
||||
};
|
||||
|
||||
SplitButton.propTypes = {
|
||||
primary: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
id: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
|
||||
tooltip: PropTypes.string,
|
||||
isActive: PropTypes.bool,
|
||||
}),
|
||||
secondary: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
tooltip: PropTypes.string,
|
||||
isActive: PropTypes.bool
|
||||
isActive: PropTypes.bool,
|
||||
}),
|
||||
onClick: PropTypes.func,
|
||||
renderer: PropTypes.func,
|
||||
items: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
|
||||
tooltip: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
isActive: PropTypes.bool,
|
||||
})
|
||||
)
|
||||
),
|
||||
/** Callback function to inform ToolbarService of important events */
|
||||
onInteraction: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default SplitButton;
|
||||
@@ -2,7 +2,6 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Button, Icon, Typography, InputGroup } from '../../components';
|
||||
import { useModal } from '../../contextProviders';
|
||||
|
||||
const StudyListFilter = ({
|
||||
filtersMeta,
|
||||
@@ -21,42 +20,17 @@ const StudyListFilter = ({
|
||||
});
|
||||
};
|
||||
const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
|
||||
const { show } = useModal();
|
||||
|
||||
const showLearnMoreContent = () => {
|
||||
const modalContent = () => <div>Search Instructions</div>;
|
||||
|
||||
show({
|
||||
content: modalContent,
|
||||
title: 'Learn More',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<div className="bg-primary-dark">
|
||||
<div className="container m-auto relative flex flex-col pt-5">
|
||||
<div className="flex flex-row justify-between mb-5 px-12">
|
||||
<div className="container relative flex flex-col pt-5 m-auto">
|
||||
<div className="flex flex-row justify-between px-12 mb-5">
|
||||
<div className="flex flex-row">
|
||||
<Typography variant="h4" className="text-primary-light mr-6">
|
||||
<Typography variant="h4" className="mr-6 text-primary-light">
|
||||
Study list
|
||||
</Typography>
|
||||
<div className="flex flex-row items-end">
|
||||
<Button
|
||||
variant="text"
|
||||
size="small"
|
||||
color="inherit"
|
||||
className="text-primary-active"
|
||||
startIcon={<Icon name="info-link" className="w-2" />}
|
||||
onClick={showLearnMoreContent}
|
||||
>
|
||||
<span className="flex flex-col flex-1">
|
||||
<span>Learn more</span>
|
||||
<span className="opacity-50 pt-1 border-b border-primary-active"></span>
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
{isFiltering && (
|
||||
@@ -64,7 +38,7 @@ const StudyListFilter = ({
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
className="text-primary-active border-primary-active mx-8"
|
||||
className="mx-8 text-primary-active border-primary-active"
|
||||
startIcon={<Icon name="cancel" />}
|
||||
onClick={clearFilters}
|
||||
>
|
||||
@@ -76,7 +50,7 @@ const StudyListFilter = ({
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
className="text-common-light self-end pb-1"
|
||||
className="self-end pb-1 text-common-light"
|
||||
>
|
||||
Studies
|
||||
</Typography>
|
||||
@@ -89,7 +63,7 @@ const StudyListFilter = ({
|
||||
className="sticky z-10 border-b-4 border-black"
|
||||
style={{ top: '57px' }}
|
||||
>
|
||||
<div className="bg-primary-dark pt-3 pb-3 ">
|
||||
<div className="pt-3 pb-3 bg-primary-dark ">
|
||||
<InputGroup
|
||||
inputMeta={filtersMeta}
|
||||
values={filterValues}
|
||||
@@ -101,7 +75,7 @@ const StudyListFilter = ({
|
||||
</div>
|
||||
{numOfStudies > 100 && (
|
||||
<div className="container m-auto">
|
||||
<div className="bg-primary-main text-center text-base py-1 rounded-b">
|
||||
<div className="py-1 text-base text-center rounded-b bg-primary-main">
|
||||
<p className="text-white">
|
||||
Filter list to 100 studies or less to enable sorting
|
||||
</p>
|
||||
|
||||
@@ -7,12 +7,19 @@ import { IconButton, Icon, Tooltip } from '../';
|
||||
const ToolbarButton = ({
|
||||
type,
|
||||
id,
|
||||
isActive,
|
||||
onClick,
|
||||
icon,
|
||||
label,
|
||||
commandName,
|
||||
commandOptions,
|
||||
onInteraction,
|
||||
dropdownContent,
|
||||
//
|
||||
isActive: _isActive,
|
||||
bState = {},
|
||||
//
|
||||
}) => {
|
||||
const { primaryToolId, toggles, groups } = bState;
|
||||
const isActive = _isActive || (type === 'tool' && id === primaryToolId);
|
||||
const classes = {
|
||||
type: {
|
||||
primary: isActive
|
||||
@@ -23,7 +30,6 @@ const ToolbarButton = ({
|
||||
: 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
|
||||
},
|
||||
};
|
||||
|
||||
const shouldShowDropdown = !!isActive && !!dropdownContent;
|
||||
|
||||
return (
|
||||
@@ -36,7 +42,14 @@ const ToolbarButton = ({
|
||||
<IconButton
|
||||
variant={isActive ? 'contained' : 'text'}
|
||||
className={classnames('mx-1', classes.type[type])}
|
||||
onClick={onClick}
|
||||
onClick={() => {
|
||||
onInteraction({
|
||||
itemId: id,
|
||||
interactionType: type,
|
||||
commandName: commandName,
|
||||
commandOptions: commandOptions,
|
||||
});
|
||||
}}
|
||||
key={id}
|
||||
>
|
||||
<Icon name={icon} />
|
||||
@@ -49,15 +62,15 @@ const ToolbarButton = ({
|
||||
ToolbarButton.defaultProps = {
|
||||
dropdownContent: null,
|
||||
isActive: false,
|
||||
type: 'primary',
|
||||
type: 'action',
|
||||
};
|
||||
|
||||
ToolbarButton.propTypes = {
|
||||
/* Influences background/hover styling */
|
||||
type: PropTypes.oneOf(['primary', 'secondary']),
|
||||
type: PropTypes.oneOf(['action', 'toggle', 'tool']),
|
||||
id: PropTypes.string.isRequired,
|
||||
isActive: PropTypes.bool,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
onInteraction: PropTypes.func.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
label: PropTypes.string.isRequired,
|
||||
/** Tooltip content can be replaced for a customized content by passing a node to this value. */
|
||||
|
||||
@@ -24,7 +24,14 @@ const arrowPositionStyle = {
|
||||
},
|
||||
};
|
||||
|
||||
const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) => {
|
||||
const Tooltip = ({
|
||||
content,
|
||||
isSticky,
|
||||
position,
|
||||
tight,
|
||||
children,
|
||||
isDisabled,
|
||||
}) => {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
const handleMouseOver = () => {
|
||||
@@ -43,7 +50,7 @@ const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) =
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-full"
|
||||
className="relative"
|
||||
onMouseOver={handleMouseOver}
|
||||
onFocus={handleMouseOver}
|
||||
onMouseOut={handleMouseOut}
|
||||
@@ -84,7 +91,7 @@ Tooltip.defaultProps = {
|
||||
tight: false,
|
||||
isSticky: false,
|
||||
position: 'bottom',
|
||||
isDisabled: false
|
||||
isDisabled: false,
|
||||
};
|
||||
|
||||
Tooltip.propTypes = {
|
||||
|
||||
@@ -52,7 +52,9 @@ Viewport.propTypes = {
|
||||
studyData: PropTypes.shape({
|
||||
label: PropTypes.string.isRequired,
|
||||
isTracked: PropTypes.bool.isRequired,
|
||||
/* Specific to SR Viewports only... */
|
||||
isLocked: PropTypes.bool.isRequired,
|
||||
isRehydratable: PropTypes.bool.isRequired,
|
||||
studyDate: PropTypes.string.isRequired,
|
||||
currentSeries: PropTypes.number.isRequired,
|
||||
seriesDescription: PropTypes.string.isRequired,
|
||||
|
||||
@@ -28,6 +28,7 @@ import { Viewport } from '@ohif/ui';
|
||||
label: 'A',
|
||||
isTracked: true,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2011',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
|
||||
@@ -19,6 +19,8 @@ const ViewportActionBar = ({
|
||||
showPatientInfo: patientInfoVisibility,
|
||||
onSeriesChange,
|
||||
onDoubleClick,
|
||||
//
|
||||
onPillClick,
|
||||
}) => {
|
||||
const [showPatientInfo, setShowPatientInfo] = useState(patientInfoVisibility);
|
||||
|
||||
@@ -33,6 +35,8 @@ const ViewportActionBar = ({
|
||||
label,
|
||||
isTracked,
|
||||
isLocked,
|
||||
isRehydratable,
|
||||
useAltStyling,
|
||||
modality,
|
||||
studyDate,
|
||||
currentSeries,
|
||||
@@ -52,7 +56,6 @@ const ViewportActionBar = ({
|
||||
|
||||
const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
|
||||
const closePatientInfo = () => setShowPatientInfo(false);
|
||||
|
||||
const showPatientInfoRef = useRef(null);
|
||||
const clickOutsideListener = useOnClickOutside(
|
||||
showPatientInfoRef,
|
||||
@@ -71,30 +74,121 @@ const ViewportActionBar = ({
|
||||
|
||||
const renderIconStatus = () => {
|
||||
if (modality === 'SR') {
|
||||
const TooltipMessage = isLocked
|
||||
? () => (
|
||||
<div>
|
||||
This SR is locked. <br />
|
||||
Measurements cannot be duplicated.
|
||||
</div>
|
||||
)
|
||||
: () => <div>This SR is unlocked.</div>;
|
||||
// 1 - Incompatible
|
||||
// 2 - Locked
|
||||
// 3 - Rehydratable / Open
|
||||
const state =
|
||||
isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
|
||||
let ToolTipMessage = null;
|
||||
let StatusIcon = null;
|
||||
|
||||
switch (state) {
|
||||
case 1:
|
||||
StatusIcon = () => (
|
||||
<div
|
||||
className="flex items-center justify-center -mr-1 rounded-full"
|
||||
style={{
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
backgroundColor: '#98e5c1',
|
||||
border: 'solid 1.5px #000000',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
name="exclamation"
|
||||
style={{ color: '#000', width: '12px', height: '12px' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
ToolTipMessage = () => (
|
||||
<div>
|
||||
This structured report is not compatible
|
||||
<br />
|
||||
with this application.
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
case 2:
|
||||
StatusIcon = () => (
|
||||
<div
|
||||
className="flex items-center justify-center -mr-1 bg-black rounded-full"
|
||||
style={{
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
name="lock"
|
||||
style={{ color: '#05D97C', width: '8px', height: '11px' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
ToolTipMessage = () => (
|
||||
<div>
|
||||
This structured report is currently read-only
|
||||
<br />
|
||||
because you are tracking measurements in
|
||||
<br />
|
||||
another viewport.
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
case 3:
|
||||
StatusIcon = () => (
|
||||
<div
|
||||
className="flex items-center justify-center -mr-1 bg-white rounded-full group-hover:bg-customblue-200"
|
||||
style={{
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
border: 'solid 1.5px #000000',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
name="arrow-left"
|
||||
style={{ color: '#000', width: '14px', height: '14px' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
ToolTipMessage = () => <div>Click to restore measurements.</div>;
|
||||
}
|
||||
|
||||
const StatusPill = () => (
|
||||
<div
|
||||
className={classnames(
|
||||
'group relative flex items-center justify-center px-2 rounded-full cursor-default bg-customgreen-100',
|
||||
{
|
||||
'hover:bg-customblue-100': state === 3,
|
||||
'cursor-pointer': state === 3,
|
||||
}
|
||||
)}
|
||||
style={{
|
||||
height: '24px',
|
||||
width: '55px',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (state === 3) {
|
||||
onPillClick?.();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="pr-1 text-lg font-bold leading-none text-black">
|
||||
SR
|
||||
</span>
|
||||
<StatusIcon />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip content={<TooltipMessage />} position="bottom-left">
|
||||
<div className="relative flex p-1 border rounded cursor-default border-primary-light">
|
||||
<span className="text-sm font-bold leading-none text-primary-light">
|
||||
SR
|
||||
</span>
|
||||
{isLocked && (
|
||||
<Icon
|
||||
name="lock"
|
||||
className="absolute w-3 text-white"
|
||||
style={{ top: -6, right: -6 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{ToolTipMessage && (
|
||||
<Tooltip content={<ToolTipMessage />} position="bottom-left">
|
||||
<StatusPill />
|
||||
</Tooltip>
|
||||
)}
|
||||
{!ToolTipMessage && <StatusPill />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -119,13 +213,13 @@ const ViewportActionBar = ({
|
||||
can be viewed <br /> in the measurement panel
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Measurements for
|
||||
<>
|
||||
Measurements for
|
||||
<span className="font-bold text-white"> untracked </span>
|
||||
series <br /> will not be shown in the <br /> measurements
|
||||
panel
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -137,15 +231,26 @@ const ViewportActionBar = ({
|
||||
);
|
||||
};
|
||||
|
||||
const borderColor = useAltStyling ? '#365A6A' : '#1D205A';
|
||||
const backgroundColor = useAltStyling
|
||||
? '#031923'
|
||||
: isTracked
|
||||
? '#020424'
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-wrap items-center p-2 border-b select-none border-primary-light -mt-2"
|
||||
className="flex flex-wrap items-center p-2 -mt-2 border-b select-none"
|
||||
style={{
|
||||
borderColor: borderColor,
|
||||
backgroundColor: backgroundColor,
|
||||
}}
|
||||
onDoubleClick={onDoubleClick}
|
||||
>
|
||||
<div className="flex flex-grow min-w-48 flex-1 mt-2">
|
||||
<div className="flex flex-1 flex-grow mt-2 min-w-48">
|
||||
<div className="flex items-center">
|
||||
<span className="mr-2 text-white text-large">{label}</span>
|
||||
{renderIconStatus()}
|
||||
<span className="ml-2 text-white text-large">{label}</span>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start ml-4">
|
||||
<div className="flex">
|
||||
@@ -173,14 +278,14 @@ const ViewportActionBar = ({
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
size="initial"
|
||||
className="px-2 py-1"
|
||||
className="px-2 py-1 bg-black"
|
||||
onClick={() => onSeriesChange('left')}
|
||||
>
|
||||
<Icon name="chevron-left" className="w-4 text-white" />
|
||||
</Button>
|
||||
<Button
|
||||
size="initial"
|
||||
className="px-2 py-1"
|
||||
className="px-2 py-1 bg-black"
|
||||
onClick={() => onSeriesChange('right')}
|
||||
>
|
||||
<Icon name="chevron-right" className="w-4 text-white" />
|
||||
@@ -189,11 +294,11 @@ const ViewportActionBar = ({
|
||||
</div>
|
||||
)}
|
||||
{showCine && !showNavArrows && (
|
||||
<div className="mt-2 min-w-48 max-w-48 mr-auto">
|
||||
<div className="mt-2 mr-auto min-w-48 max-w-48">
|
||||
<CinePlayer {...cineProps} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex h-8 ml-4 mr-2 mt-2" onClick={onPatientInfoClick}>
|
||||
<div className="flex h-8 mt-2 ml-4 mr-2" onClick={onPatientInfoClick}>
|
||||
<PatientInfo
|
||||
showPatientInfoRef={showPatientInfoRef}
|
||||
isOpen={showPatientInfo}
|
||||
@@ -217,9 +322,12 @@ ViewportActionBar.propTypes = {
|
||||
cineProps: PropTypes.object,
|
||||
showPatientInfo: PropTypes.bool,
|
||||
studyData: PropTypes.shape({
|
||||
//
|
||||
useAltStyling: PropTypes.bool,
|
||||
//
|
||||
label: PropTypes.string.isRequired,
|
||||
isTracked: PropTypes.bool.isRequired,
|
||||
isLocked: PropTypes.bool.isRequired,
|
||||
isRehydratable: PropTypes.bool.isRequired,
|
||||
studyDate: PropTypes.string.isRequired,
|
||||
currentSeries: PropTypes.number.isRequired,
|
||||
seriesDescription: PropTypes.string.isRequired,
|
||||
|
||||
@@ -22,11 +22,12 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={(direction) => alert(`Series ${direction}`)}
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: true,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
@@ -45,42 +46,42 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={(direction) => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={(direction) => alert(`Series ${direction}`)}
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
@@ -99,15 +100,15 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={(direction) => alert(`Series ${direction}`)}
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: true,
|
||||
isLocked: false,
|
||||
isRehydratable: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
|
||||
@@ -88,6 +88,7 @@ import { tabs } from './studyBrowserMockData';
|
||||
label: 'A',
|
||||
isTracked: true,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2011',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
|
||||
@@ -46,6 +46,15 @@ module.exports = {
|
||||
active: '#2c3074',
|
||||
},
|
||||
|
||||
customgreen: {
|
||||
100: '#05D97C',
|
||||
},
|
||||
|
||||
customblue: {
|
||||
100: '#c4fdff',
|
||||
200: '#38daff',
|
||||
},
|
||||
|
||||
gray: {
|
||||
100: '#f7fafc',
|
||||
200: '#edf2f7',
|
||||
|
||||
Reference in new issue
Block a user