From 8aeb9232aee0985c36fc84eafd13aa2dcbc7c476 Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Mon, 22 Jun 2020 12:01:50 +0200
Subject: [PATCH] feat: improve pagination and sorting components
---
.../src/Pagination.jsx | 90 ++++++++++---------
.../src/UsersManager.jsx | 50 ++++++++++-
.../component-users-manager/src/style.js | 25 ++++++
app/theme/index.js | 2 +-
4 files changed, 121 insertions(+), 46 deletions(-)
diff --git a/app/components/component-users-manager/src/Pagination.jsx b/app/components/component-users-manager/src/Pagination.jsx
index 3c13cd0ae5..10f86269ed 100644
--- a/app/components/component-users-manager/src/Pagination.jsx
+++ b/app/components/component-users-manager/src/Pagination.jsx
@@ -2,18 +2,49 @@ import React from 'react'
import { Action } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
import { th, grid } from '@pubsweet/ui-toolkit'
-// TODO: Standardize shared components
import Icon from '../../shared/Icon'
+import { zIndex } from '../../../globals'
+
const Page = styled.div`
- // height: ${grid(3)};
- // padding: ${grid(1)};
line-height: ${grid(5)};
+ width: ${grid(5)};
+ border: 1px solid ${th('colorFurniture')};
+ text-align: center;
+ margin-left: -1px;
+ button {
+ cursor: pointer;
+ color: ${th('colorText')};
+ width: ${grid(5)};
+ line-height: ${grid(5)};
+ left: -1px;
+ }
${props =>
props.active &&
css`
- color: ${th('colorPrimary')};
+ z-index: ${zIndex.form};
+
+ button {
+ &[disabled], &[disabled]:hover {
+ opacity: 1;
+ color: ${th('colorPrimary')};
+
+ :before {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ // color: ${th('colorPrimary')};
+
+ &:before:[disabled] {
+
+ visibility: visible;
+ opacity: 1;
+
+ }
+ }
+ // border-color: ${th('colorPrimary')};
`}
`
@@ -24,7 +55,11 @@ const Pagination = styled.div`
padding: ${grid(2)} ${grid(3)};
`
-const PaginationInfo = styled.div``
+const PaginationInfo = styled.div`
+ strong {
+ font-weight: 500;
+ }
+`
const Paginators = styled.div`
display: inline-flex;
@@ -50,33 +85,6 @@ const PreviousButton = styled.div`
const NextButton = styled(PreviousButton)`
margin-left: -1px;
-
- button {
- &:before {
- margin-left: -1px;
- }
- }
-`
-
-const Paginator = styled.div`
- margin-left: -1px;
- border: 1px solid ${th('colorFurniture')};
- color: ${th('colorFurniture')};
- text-align: center;
- width: ${grid(5)};
- svg {
- stroke: ${th('colorFurniture')};
- }
-
- button {
- width: ${grid(5)};
- line-height: ${grid(5)};
- cursor: pointer;
- color: ${th('colorText')};
- &:before {
- margin-left: -1px;
- }
- }
`
const PaginationContainer = ({ setPage, limit, page, totalCount }) => {
@@ -102,14 +110,11 @@ const PaginationContainer = ({ setPage, limit, page, totalCount }) => {
const PageNumber = ({ pageNumber }) => {
const active = page === pageNumber
return (
- <Paginator>
- <Page active={active}>
- {active && <>{pageNumber}</>}
- {!active && (
- <Action onClick={() => setPage(pageNumber)}>{pageNumber}</Action>
- )}
- </Page>
- </Paginator>
+ <Page active={active}>
+ <Action disabled={active} onClick={() => setPage(pageNumber)}>
+ {pageNumber}
+ </Action>
+ </Page>
)
}
@@ -124,12 +129,13 @@ const PaginationContainer = ({ setPage, limit, page, totalCount }) => {
return (
<Pagination>
<PaginationInfo>
- Showing {firstResult} to {lastResult} of {totalCount} results
+ Showing <strong>{firstResult}</strong> to <strong>{lastResult}</strong>{' '}
+ of <strong>{totalCount}</strong> results
</PaginationInfo>
<Paginators>
<Previous />
{pages.map(pageNumber => (
- <PageNumber pageNumber={pageNumber} />
+ <PageNumber key={pageNumber} pageNumber={pageNumber} />
))}
<Next />
</Paginators>
diff --git a/app/components/component-users-manager/src/UsersManager.jsx b/app/components/component-users-manager/src/UsersManager.jsx
index 84e7adc8df..763daf696e 100644
--- a/app/components/component-users-manager/src/UsersManager.jsx
+++ b/app/components/component-users-manager/src/UsersManager.jsx
@@ -4,7 +4,7 @@ import { useQuery } from '@apollo/react-hooks'
import { Heading } from '@pubsweet/ui'
import User from './User'
-import { Container, Table, Header } from './style'
+import { Container, Table, Header, Caret, Carets } from './style'
import Spinner from '../../shared/Spinner'
import Pagination from './Pagination'
@@ -30,6 +30,39 @@ const GET_USERS = gql`
}
`
+const CaretUp = ({ active }) => (
+ <Caret
+ aria-hidden="true"
+ className=""
+ data-icon="caret-up"
+ fill="currentColor"
+ focusable="false"
+ height="1em"
+ viewBox="0 0 100 100"
+ width="1em"
+ active={active}
+ >
+ <path d="M50 17L100.229 67.25H-0.229473L50 17Z" />
+ </Caret>
+)
+
+
+const CaretDown = ({ active }) => (
+ <Caret
+ active={active}
+ aria-hidden="true"
+ className=""
+ data-icon="caret-down"
+ fill="currentColor"
+ focusable="false"
+ height="1em"
+ viewBox="0 0 100 100"
+ width="1em"
+ >
+ <path d="M50 84L-0.229473 33.75L100.229 33.75L50 84Z" />
+ </Caret>
+)
+
const UsersManager = () => {
const SortHeader = ({ thisSortName, children }) => {
const changeSort = () => {
@@ -46,7 +79,13 @@ const UsersManager = () => {
const UpDown = () => {
if (thisSortName === sortName) {
- return sortDirection
+ return (
+ <Carets>
+ <CaretUp active={sortDirection === 'ASC'} />
+ <CaretDown active={sortDirection === 'DESC'} />
+ </Carets>
+ )
+ // return sortDirection
}
}
@@ -94,7 +133,12 @@ const UsersManager = () => {
))}
</tbody>
</Table>
- <Pagination setPage={setPage} limit={limit} page={page} totalCount={totalCount} />
+ <Pagination
+ limit={limit}
+ page={page}
+ setPage={setPage}
+ totalCount={totalCount}
+ />
</Container>
)
}
diff --git a/app/components/component-users-manager/src/style.js b/app/components/component-users-manager/src/style.js
index cf45ed6ce3..fa04f19adc 100644
--- a/app/components/component-users-manager/src/style.js
+++ b/app/components/component-users-manager/src/style.js
@@ -68,3 +68,28 @@ export const Secondary = styled.div`
export const UserInfo = styled.div`
margin-left: ${grid(1)};
`
+
+export const Caret = styled.svg`
+ ${props =>
+ props.active
+ ? css`
+ color: ${th('colorPrimary')};
+ `
+ : css`
+ color: ${th('colorSecondary')};
+ `}
+`
+
+export const Carets = styled.span`
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ vertical-align: middle;
+ margin-left: ${grid(0.5)};
+ svg {
+ height: ${grid(1.5)};
+ }
+ svg:nth-of-type(2) {
+ margin-top: ${grid(-0.5)};
+ }
+`
diff --git a/app/theme/index.js b/app/theme/index.js
index 5ffdb00593..b5e92de403 100644
--- a/app/theme/index.js
+++ b/app/theme/index.js
@@ -17,7 +17,7 @@ const cokoTheme = {
/* Colors */
colorBackground: 'white',
colorPrimary: '#0B65CB',
- colorSecondary: '#E7E7E7',
+ colorSecondary: '#9e9e9e',
colorFurniture: '#E8E8E8',
colorBorder: '#AAA',
colorBackgroundHue: '#f9fafb',
--
GitLab