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';
// Icons
import arrowDown from './../../assets/icons/arrow-down.svg';
import seriesActive from './../../assets/icons/series-active.svg';
import seriesInactive from './../../assets/icons/series-inactive.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';
const ICONS = {
'arrow-down': arrowDown,
'series-active': seriesActive,
'series-inactive': seriesInactive,
cancel: cancel,

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

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