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

OHIF-298: Fix dropdown color in win browsers (#1981)

Browse Source 
* ohif-298: use new select in pagination

* ohif-298: add menu placement

* ohif-298: update border

* ohif-298: fix sticky menu

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
This commit is contained in:
Igor Octaviano 2020-08-19 17:17:05 -03:00 committed by GitHub
parent 8cea1a04d6
commit db39cc2fde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
extensions/default/src/ViewerLayout/index.jsx
View File

@ -143,6 +143,7 @@ function ViewerLayout({
extensionManager,
servicesManager,
hotkeysManager,
commandsManager,
// From Modes
leftPanels,
rightPanels,

17
platform/ui/src/components/Header/Header.jsx
View File

@ -6,7 +6,7 @@ import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
function Header({ children, menuOptions, isReturnEnabled }) {
function Header({ children, menuOptions, isReturnEnabled, isSticky }) {
const { t } = useTranslation();
const history = useHistory();
@ -17,7 +17,7 @@ function Header({ children, menuOptions, isReturnEnabled }) {
};
return (
<NavBar className="justify-between border-b-4 border-black">
<NavBar className='justify-between border-b-4 border-black' isSticky={isSticky}>
<div className="flex justify-between flex-1">
<div className="flex items-center">
{/* // TODO: Should preserve filter/sort
@ -60,12 +60,21 @@ function Header({ children, menuOptions, isReturnEnabled }) {
}
Header.propTypes = {
menuOptions: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string.isRequired,
icon: PropTypes.string,
onClick: PropTypes.func.isRequired,
})
),
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
isReturnEnabled: PropTypes.bool
isReturnEnabled: PropTypes.bool,
isSticky: PropTypes.bool
};
Header.defaultProps = {
isReturnEnabled: true
isReturnEnabled: true,
isSticky: false
};
export default Header;

15
platform/ui/src/components/Select/Select.jsx
View File

@ -43,9 +43,13 @@ const Select = ({
onChange,
options,
placeholder,
noIcons,
menuPlacement,
value,
}) => {
const _components = isMulti ? { Option, MultiValue } : {};
const _noIconComponents = { DropdownIndicator: () => null, IndicatorSeparator: () => null };
let _components = isMulti ? { Option, MultiValue } : {};
_components = noIcons ? { ..._components, ..._noIconComponents } : _components;
const selectedOptions = [];
// Map array of values to an array of selected options
@ -69,12 +73,13 @@ const Select = ({
isClearable={isClearable}
isMulti={isMulti}
isSearchable={isSearchable}
menuPlacement={menuPlacement}
closeMenuOnSelect={closeMenuOnSelect}
hideSelectedOptions={hideSelectedOptions}
components={_components}
placeholder={placeholder}
options={options}
value={isMulti ? selectedOptions : value}
value={value && Array.isArray(value) ? selectedOptions : value}
onChange={(selectedOptions, { action }) => {
const newSelection = !selectedOptions.length
? selectedOptions
@ -93,6 +98,8 @@ Select.defaultProps = {
isDisabled: false,
isMulti: false,
isSearchable: true,
noIcons: false,
menuPlacement: 'auto',
value: [],
};
@ -104,6 +111,8 @@ Select.propTypes = {
isDisabled: PropTypes.bool,
isMulti: PropTypes.bool,
isSearchable: PropTypes.bool,
noIcons: PropTypes.bool,
menuPlacement: PropTypes.oneOf(['auto', 'bottom', 'top']),
onChange: PropTypes.func.isRequired,
options: PropTypes.arrayOf(
PropTypes.shape({
@ -112,7 +121,7 @@ Select.propTypes = {
})
),
placeholder: PropTypes.string,
value: PropTypes.oneOfType(PropTypes.string, PropTypes.arrayOf(PropTypes.string)),
value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.any]),
};
export default Select;

51
platform/ui/src/components/StudyListPagination/StudyListPagination.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, ButtonGroup, Icon, Typography } from '../';
import { Button, ButtonGroup, Typography, Select } from '../';
const StudyListPagination = ({
onChangePage,
@ -13,30 +13,33 @@ const StudyListPagination = ({
onChangePage(toPage);
};
const ranges = [
{ value: '25', label: '25' },
{ value: '50', label: '50' },
{ value: '100', label: '100' },
];
const [selectedRange, setSelectedRange] = useState(ranges.find(r => r.value == perPage));
const onSelectedRange = (selectedRange) => {
setSelectedRange(selectedRange);
onChangePerPage(selectedRange.value);
};
return (
<div className="bg-black py-10">
<div className="container m-auto relative px-8">
<div className="flex justify-between">
<div className="flex items-center">
<div className="relative mr-3">
<select
value={perPage}
className="block appearance-none w-full bg-transparent border border-common-active text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none h-8"
onChange={e => onChangePerPage(e.target.value)}
onBlur={() => {}}
>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<Icon
name="arrow-down"
className="text-white"
style={{ width: 6 }}
/>
</div>
</div>
<Select
className="relative mr-3 w-16 border-primary-main"
options={ranges}
value={selectedRange}
isMulti={false}
isClearable={false}
isSearchable={false}
closeMenuOnSelect={false}
hideSelectedOptions={true}
onChange={onSelectedRange}
/>
<Typography className="text-base opacity-60">
Results per page
</Typography>
@ -49,7 +52,7 @@ const StudyListPagination = ({
<ButtonGroup color="primary">
<Button
size="initial"
className="border-common-active px-4 py-2 text-base"
className="border-primary-main px-4 py-2 text-base"
color="white"
onClick={() => navigateToPage(1)}
>
@ -57,13 +60,13 @@ const StudyListPagination = ({
</Button>
<Button
size="initial"
className="border-common-active py-2 px-2 text-base"
className="border-primary-main py-2 px-2 text-base"
color="white"
onClick={() => navigateToPage(currentPage - 1)}
>{`< Previous`}</Button>
<Button
size="initial"
className="border-common-active py-2 px-4 text-base"
className="border-primary-main py-2 px-4 text-base"
color="white"
onClick={() => navigateToPage(currentPage + 1)}
>

2
platform/viewer/src/routes/WorkList/WorkList.jsx
View File

@ -377,7 +377,7 @@ function WorkList({ history, data: studies, isLoadingData, dataSource, hotkeysMa
'h-screen': !hasStudies,
})}
>
<Header menuOptions={menuOptions} isReturnEnabled={false} />
<Header isSticky menuOptions={menuOptions} isReturnEnabled={false} />
<StudyListFilter
numOfStudies={numOfStudies}
filtersMeta={filtersMeta}