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

fix: Select pagination and buttons (#1521)

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-03-13 11:37:17 -03:00 committed by James A. Petts
parent 2bf5486112
commit 88846e5c70
3 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
platform/ui/src/assets/icons/arrow-down.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 4" width="10.48" height="4">
<g fill="currentColor" fill-rule="evenodd">
<path d="M7.86 2L10.48 0L5.24 0L0 0L2.62 2L5.24 4L7.86 2Z" fill="currentColor"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 237 B

2
platform/ui/src/components/Icon/getIcon.jsx
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
// Icons // Icons
import arrowDown from './../../assets/icons/arrow-down.svg';
import seriesActive from './../../assets/icons/series-active.svg'; import seriesActive from './../../assets/icons/series-active.svg';
import seriesInactive from './../../assets/icons/series-inactive.svg'; import seriesInactive from './../../assets/icons/series-inactive.svg';
import cancel from './../../assets/icons/cancel.svg'; import cancel from './../../assets/icons/cancel.svg';
@ -17,6 +18,7 @@ import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
import sortingActiveUp from './../../assets/icons/sorting-active-up.svg'; import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
const ICONS = { const ICONS = {
'arrow-down': arrowDown,
'series-active': seriesActive, 'series-active': seriesActive,
'series-inactive': seriesInactive, 'series-inactive': seriesInactive,
cancel: cancel, cancel: cancel,

36
platform/ui/src/views/StudyList/components/StudyListPagination.js
View File

@ -4,6 +4,7 @@ import {
ButtonGroup, ButtonGroup,
Button, Button,
IconButton, IconButton,
Icon,
} from '../../../components/'; } from '../../../components/';
const StudyListPagination = props => { const StudyListPagination = props => {
@ -19,14 +20,24 @@ const StudyListPagination = props => {
<div className="container m-auto relative px-8"> <div className="container m-auto relative px-8">
<div className="flex justify-between"> <div className="flex justify-between">
<div className="flex items-center"> <div className="flex items-center">
<select <div className="relative mr-3">
defaultValue="25" <select
className="bg-black text-white border border-custom-darkSlateBlue text-base h-8 mr-3 focus:outline-none" defaultValue="25"
> className="block appearance-none w-full bg-transparent border border-custom-darkSlateBlue text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
<option value="25">25</option> style={{ height: 28 }}
<option value="50">50</option> >
<option value="100">100</option> <option value="25">25</option>
</select> <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>
<Typography className="text-base opacity-60"> <Typography className="text-base opacity-60">
Results per page Results per page
</Typography> </Typography>
@ -39,7 +50,8 @@ const StudyListPagination = props => {
<ButtonGroup color="primary"> <ButtonGroup color="primary">
<IconButton <IconButton
size="small" size="small"
className="border-custom-darkSlateBlue px-4" className="border-custom-darkSlateBlue px-4 py-2 text-base"
style={{ padding: '3px 12px', minWidth: 0 }}
color="white" color="white"
onClick={() => navigateToPage(1)} onClick={() => navigateToPage(1)}
> >
@ -47,13 +59,15 @@ const StudyListPagination = props => {
</IconButton> </IconButton>
<Button <Button
size="small" size="small"
className="border-custom-darkSlateBlue" className="border-custom-darkSlateBlue py-2 text-base"
style={{ padding: '3px 8px', minWidth: 0 }}
color="white" color="white"
onClick={() => navigateToPage(currentPage - 1)} onClick={() => navigateToPage(currentPage - 1)}
>{`< Previous`}</Button> >{`< Previous`}</Button>
<Button <Button
size="small" size="small"
className="border-custom-darkSlateBlue" className="border-custom-darkSlateBlue py-2 text-base"
style={{ padding: '3px 20px', minWidth: 0 }}
color="white" color="white"
onClick={() => navigateToPage(currentPage + 1)} onClick={() => navigateToPage(currentPage + 1)}
> >