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

fix(UI): fixed results per page select menu (#3384)

Browse Source
This commit is contained in:
Joe Boccanfuso 2023-05-11 09:52:32 -04:00 committed by GitHub
parent 656f9cf761
commit cba57a1b65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
platform/ui/src/components/Select/Select.css
View File

@ -52,18 +52,19 @@
border-radius: 6px; border-radius: 6px;
} }
.css-4ljt47-MenuList { .ohif-select .customSelect__menu-list {
overflow-x: hidden !important; overflow-x: hidden !important;
margin-right: 4px; margin-right: 4px;
margin-top: 4px; margin-top: 4px;
padding-top: 0px !important; padding-top: 0px !important;
} }
.css-4ljt47-MenuList::-webkit-scrollbar {
.ohif-select .customSelect__menu-list::-webkit-scrollbar {
width: 6px; width: 6px;
border-radius: 10px; border-radius: 10px;
} }
.css-4ljt47-MenuList::-webkit-scrollbar-thumb { .ohif-select .customSelect__menu-list::-webkit-scrollbar-thumb {
background-color: #0944b3; background-color: #0944b3;
border-radius: 10px; border-radius: 10px;
} }
@ -71,26 +72,19 @@
.customSelect__option:focus { .customSelect__option:focus {
background-color: #0944b391 !important; background-color: #0944b391 !important;
} }
.customSelect__option label {
.ohif-select .customSelect__option, .ohif-select .customSelect__option label {
color: #d6d6d6; color: #d6d6d6;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.css-1n7v3ny-option { .ohif-select .customSelect__option:hover {
background-color: #0944b391 !important;
}
.css-1n7v3ny-option:focus {
background-color: #0944b391 !important;
}
.customSelect__option:hover {
background-color: #0944b391; background-color: #0944b391;
} }
.css-26l3qy-menu { .ohif-select .customSelect__menu {
border: 2px solid #0944b3; border: 2px solid #0944b3;
border-radius: 6px; border-radius: 6px;
background-color: #151515 !important; background-color: #151515 !important;

2
platform/ui/src/components/Select/Select.tsx
View File

@ -77,7 +77,7 @@ const Select = ({
inputId={`input-${id}`} inputId={`input-${id}`}
className={classnames( className={classnames(
className, className,
'flex flex-col flex-1 customSelect__wrapper' 'ohif-select flex flex-col flex-1 customSelect__wrapper'
)} )}
data-cy={`input-${id}`} data-cy={`input-${id}`}
classNamePrefix="customSelect" classNamePrefix="customSelect"

2
platform/ui/src/components/StudyListPagination/StudyListPagination.tsx
View File

@ -36,7 +36,7 @@ const StudyListPagination = ({
<div className="flex items-center"> <div className="flex items-center">
<Select <Select
id="rows-per-page" id="rows-per-page"
className="relative mr-3 w-16 border-primary-main" className="relative mr-3 w-24 border-primary-main"
options={ranges} options={ranges}
value={selectedRange} value={selectedRange}
isMulti={false} isMulti={false}

20
platform/viewer/src/routes/WorkList/WorkList.tsx
View File

@ -466,7 +466,7 @@ function WorkList({
isReturnEnabled={false} isReturnEnabled={false}
WhiteLabeling={appConfig.whiteLabeling} WhiteLabeling={appConfig.whiteLabeling}
/> />
<div className="overflow-y-auto ohif-scrollbar"> <div className="overflow-y-auto ohif-scrollbar flex flex-col grow">
<StudyListFilter <StudyListFilter
numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies} numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
filtersMeta={filtersMeta} filtersMeta={filtersMeta}
@ -477,19 +477,21 @@ function WorkList({
onUploadClick={uploadProps ? () => show(uploadProps) : undefined} onUploadClick={uploadProps ? () => show(uploadProps) : undefined}
/> />
{hasStudies ? ( {hasStudies ? (
<> <div className="grow flex flex-col">
<StudyListTable <StudyListTable
tableDataSource={tableDataSource.slice(offset, offsetAndTake)} tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
numOfStudies={numOfStudies} numOfStudies={numOfStudies}
filtersMeta={filtersMeta} filtersMeta={filtersMeta}
/> />
<StudyListPagination <div className="grow">
onChangePage={onPageNumberChange} <StudyListPagination
onChangePerPage={onResultsPerPageChange} onChangePage={onPageNumberChange}
currentPage={pageNumber} onChangePerPage={onResultsPerPageChange}
perPage={resultsPerPage} currentPage={pageNumber}
/> perPage={resultsPerPage}
</> />
</div>
</div>
) : ( ) : (
<div className="flex flex-col items-center justify-center pt-48"> <div className="flex flex-col items-center justify-center pt-48">
{appConfig.showLoadingIndicator && isLoadingData ? ( {appConfig.showLoadingIndicator && isLoadingData ? (