From 2fc7169fa441692910e8dc12c4ae0a7bf88e388b Mon Sep 17 00:00:00 2001 From: Danny Brown Date: Mon, 21 Sep 2020 04:42:53 -0400 Subject: [PATCH] fix/chore: Various style improvements (#2015) * 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 * fix: viewport grid area top padding should align with sidepanel gap * fix: don't wrap split button list item text * fix: cine player moz/chrome styles * fix: split button arrows * fix: tighten toolbar and splitbutton styles * chore: clean up worklist sort logic --- extensions/default/src/ViewerLayout/index.jsx | 4 +- modes/longitudinal/src/toolbarButtons.js | 6 +-- .../src/components/CinePlayer/CinePlayer.jsx | 20 ++++---- .../CinePlayer/CinePlayerCustomInputRange.css | 34 +++++++------- .../src/components/IconButton/IconButton.jsx | 5 ++ platform/ui/src/components/NavBar/NavBar.jsx | 3 +- .../components/SplitButton/SplitButton.jsx | 16 +++++-- .../components/SplitButton/SplitButton.mdx | 46 +++++++++++++------ .../StudyListFilter/StudyListFilter.jsx | 2 +- .../ToolbarButton/ToolbarButton.jsx | 1 + platform/ui/src/views/Viewer/Viewer.js | 2 +- platform/ui/src/views/Viewer/Viewer.mdx.todo | 2 +- .../viewer/src/routes/WorkList/WorkList.jsx | 23 +++++----- 13 files changed, 101 insertions(+), 63 deletions(-) diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx index 5cfcc0e75..2884e0e9d 100644 --- a/extensions/default/src/ViewerLayout/index.jsx +++ b/extensions/default/src/ViewerLayout/index.jsx @@ -163,7 +163,7 @@ function ViewerLayout({
{/* LEFT SIDEPANELS */} {leftPanelComponents.length && ( @@ -177,7 +177,7 @@ function ViewerLayout({ )} {/* TOOLBAR + GRID */}
-
+
{ const [frameRate, setFrameRate] = useState(defaultFrameRate); const debouncedSetFrameRate = debounce(onFrameRateChange, 300); @@ -28,21 +28,21 @@ const CinePlayer = ({ const action = { false: { icon: 'old-play' }, - true: { icon: 'old-stop' } + true: { icon: 'old-stop' }, }; return ( -
+
-
+
-

{`${frameRate.toFixed(1)} fps`}

+

{`${frameRate.toFixed( + 1 + )} fps`}

@@ -66,7 +68,7 @@ const CinePlayer = ({ ); }; -const noop = () => { }; +const noop = () => {}; CinePlayer.defaultProps = { isPlaying: false, @@ -76,7 +78,7 @@ CinePlayer.defaultProps = { frameRate: 24, onPlayPauseChange: noop, onFrameRateChange: noop, - onClose: noop + onClose: noop, }; CinePlayer.propTypes = { diff --git a/platform/ui/src/components/CinePlayer/CinePlayerCustomInputRange.css b/platform/ui/src/components/CinePlayer/CinePlayerCustomInputRange.css index 76146efb8..19661d2b9 100644 --- a/platform/ui/src/components/CinePlayer/CinePlayerCustomInputRange.css +++ b/platform/ui/src/components/CinePlayer/CinePlayerCustomInputRange.css @@ -3,17 +3,19 @@ * written in plain CSS with color variables from tailwind * to avoid complex compatibility configuration. */ -.CinePlayer input[type=range] { +.CinePlayer input[type='range'] { -webkit-appearance: none; background: transparent; width: 100%; + height: 20px; + z-index: 5; } -.CinePlayer input[type=range]:focus { +.CinePlayer input[type='range']:focus { outline: none; } -.CinePlayer input[type=range]::-webkit-slider-runnable-track { +.CinePlayer input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: pointer; @@ -24,7 +26,7 @@ border: 0px solid #000000; } -.CinePlayer input[type=range]::-webkit-slider-thumb { +.CinePlayer input[type='range']::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000; border: 4px solid #000000; height: 18px; @@ -36,11 +38,11 @@ margin-top: -9px; } -.CinePlayer input[type=range]:focus::-webkit-slider-runnable-track { +.CinePlayer input[type='range']:focus::-webkit-slider-runnable-track { @apply bg-primary-light; } -.CinePlayer input[type=range]::-moz-range-track { +.CinePlayer input[type='range']::-moz-range-track { width: 100%; height: 2px; cursor: pointer; @@ -51,17 +53,17 @@ border: 0px solid #000000; } -.CinePlayer input[type=range]::-moz-range-thumb { +.CinePlayer input[type='range']::-moz-range-thumb { box-shadow: 0px 0px 0px #000000; - border: 4px solid #000000; - height: 18px; - width: 17px; + border: 2px solid #000000; + height: 12px; + width: 12px; border-radius: 50px; @apply bg-primary-light; cursor: pointer; } -.CinePlayer input[type=range]::-ms-track { +.CinePlayer input[type='range']::-ms-track { width: 100%; height: 2px; cursor: pointer; @@ -71,21 +73,21 @@ color: transparent; } -.CinePlayer input[type=range]::-ms-fill-lower { +.CinePlayer input[type='range']::-ms-fill-lower { @apply bg-primary-light; border: 0px solid #000000; border-radius: 10px; box-shadow: 0px 0px 0px #000000; } -.CinePlayer input[type=range]::-ms-fill-upper { +.CinePlayer input[type='range']::-ms-fill-upper { @apply bg-primary-light; border: 0px solid #000000; border-radius: 10px; box-shadow: 0px 0px 0px #000000; } -.CinePlayer input[type=range]::-ms-thumb { +.CinePlayer input[type='range']::-ms-thumb { margin-top: 1px; box-shadow: 0px 0px 0px #000000; border: 4px solid #000000; @@ -96,10 +98,10 @@ cursor: pointer; } -.CinePlayer input[type=range]:focus::-ms-fill-lower { +.CinePlayer input[type='range']:focus::-ms-fill-lower { @apply bg-primary-light; } -.CinePlayer input[type=range]:focus::-ms-fill-upper { +.CinePlayer input[type='range']:focus::-ms-fill-upper { @apply bg-primary-light; } diff --git a/platform/ui/src/components/IconButton/IconButton.jsx b/platform/ui/src/components/IconButton/IconButton.jsx index 79a9e4606..5bea648eb 100644 --- a/platform/ui/src/components/IconButton/IconButton.jsx +++ b/platform/ui/src/components/IconButton/IconButton.jsx @@ -62,12 +62,14 @@ const sizeClasses = { medium: 'py-3 px-3 text-lg', large: 'py-4 px-4 text-xl', initial: '', + toolbar: 'text-lg', }; const iconSizeClasses = { small: 'w-4 h-4', medium: 'w-5 h-5', large: 'w-6 h-6', + toolbar: 'w-5 h-5', }; const fullWidthClasses = { @@ -106,6 +108,9 @@ const IconButton = ({ disabledClasses[disabled], className )} + style={{ + padding: size === 'toolbar' ? '10px' : null, + }} ref={buttonElement} onClick={handleOnClick} type={type} diff --git a/platform/ui/src/components/NavBar/NavBar.jsx b/platform/ui/src/components/NavBar/NavBar.jsx index 4492ebc6c..fcf3152cb 100644 --- a/platform/ui/src/components/NavBar/NavBar.jsx +++ b/platform/ui/src/components/NavBar/NavBar.jsx @@ -9,11 +9,12 @@ const NavBar = ({ className, children, isSticky }) => { return (
{children}
diff --git a/platform/ui/src/components/SplitButton/SplitButton.jsx b/platform/ui/src/components/SplitButton/SplitButton.jsx index f26fb54e7..3d4cf4635 100644 --- a/platform/ui/src/components/SplitButton/SplitButton.jsx +++ b/platform/ui/src/components/SplitButton/SplitButton.jsx @@ -7,7 +7,7 @@ import { Icon, Tooltip, ListMenu } from '@ohif/ui'; const baseClasses = { Button: - 'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer', + '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: @@ -15,7 +15,7 @@ const baseClasses = { 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-12', }; const classes = { @@ -154,6 +154,7 @@ const SplitButton = ({ ...state, primary: { isActive: isPrimaryActive }, })} + style={{ height: '40px' }} onMouseEnter={onMouseEnterHandler} onMouseLeave={onMouseLeaveHandler} > @@ -169,7 +170,10 @@ const SplitButton = ({ isDisabled={!state.primary.tooltip} content={state.primary.tooltip} > -
+
( isActive && 'bg-primary-dark' )} > - + - {label} + + {label} +
); diff --git a/platform/ui/src/components/SplitButton/SplitButton.mdx b/platform/ui/src/components/SplitButton/SplitButton.mdx index 00804b43f..016b81c68 100644 --- a/platform/ui/src/components/SplitButton/SplitButton.mdx +++ b/platform/ui/src/components/SplitButton/SplitButton.mdx @@ -24,7 +24,7 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui'; primary: { tooltip: 'W/L', icon: 'tool-window-level', - onClick: (args) => console.debug('Primary click!', args) + onClick: args => console.debug('Primary click!', args), }, secondary: { icon: 'chevron-down', @@ -33,23 +33,43 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui'; tooltip: 'More Measure Tools', }, items: [ - { id: '1', icon: 'tool-layout', label: 'Layout', onClick: (args) => console.debug('Item click!', args) }, - { id: '2', icon: 'tool-window-level', label: 'W/L', onClick: (args) => console.debug('Item click!', args) }, - { id: '3', icon: 'tool-length', label: 'Length', onClick: (args) => console.debug('Item click!', args) } + { + id: '1', + icon: 'tool-layout', + label: 'Layout', + onClick: args => console.debug('Item click!', args), + }, + { + id: '2', + icon: 'tool-window-level', + label: 'W/L', + onClick: args => console.debug('Item click!', args), + }, + { + id: '3', + icon: 'tool-length', + label: 'Length', + onClick: args => console.debug('Item click!', args), + }, ], - onClick: (args) => console.debug('Any click!', args) + onClick: args => console.debug('Any click!', args), }; return (
-
+
- +
diff --git a/platform/ui/src/components/StudyListFilter/StudyListFilter.jsx b/platform/ui/src/components/StudyListFilter/StudyListFilter.jsx index ab71cd0fe..5b82b0c23 100644 --- a/platform/ui/src/components/StudyListFilter/StudyListFilter.jsx +++ b/platform/ui/src/components/StudyListFilter/StudyListFilter.jsx @@ -61,7 +61,7 @@ const StudyListFilter = ({
{ onInteraction({ diff --git a/platform/ui/src/views/Viewer/Viewer.js b/platform/ui/src/views/Viewer/Viewer.js index ecaeadab5..706e427a2 100644 --- a/platform/ui/src/views/Viewer/Viewer.js +++ b/platform/ui/src/views/Viewer/Viewer.js @@ -11,7 +11,7 @@ const Viewer = () => {
{/* LEFT SIDEPANELS */} { - const noSortApplied = sortBy === '' || !sortBy; - const sortModifier = sortDirection === 'descending' ? 1 : -1; + const canSort = studiesTotal < STUDIES_LIMIT; + const shouldUseDefaultSort = sortBy === '' || !sortBy; + const sortModifier = sortDirection === 'descending' ? 1 : -1; + const defaultSortValues = + shouldUseDefaultSort && canSort + ? { sortBy: 'studyDate', sortDirection: 'ascending' } + : {}; + const sortedStudies = studies; - if (noSortApplied && studiesTotal < STUDIES_LIMIT) { + if (canSort) { + studies.sort((s1, s2) => { + if (shouldUseDefaultSort) { const ascendingSortModifier = -1; - defaultSortValues = { sortBy: 'studyDate', sortDirection: 'ascending' }; return _sortStringDates(s1, s2, ascendingSortModifier); - } else if (noSortApplied) { - return 0; } const s1Prop = s1[sortBy]; @@ -96,6 +96,7 @@ function WorkList({ return 0; }); + } // ~ Rows & Studies const [expandedRows, setExpandedRows] = useState([]);