From 372e5fb6bc51ab37a6638cc6ad2c6f0cfc83e731 Mon Sep 17 00:00:00 2001 From: Jessica Boezwinkle Date: Fri, 30 Jun 2023 11:19:39 +0100 Subject: [PATCH 1/4] chore: fix import button hover --- src/app/new/import/ImportProject.module.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/app/new/import/ImportProject.module.scss b/src/app/new/import/ImportProject.module.scss index bc4b78d9d..ffd37d981 100644 --- a/src/app/new/import/ImportProject.module.scss +++ b/src/app/new/import/ImportProject.module.scss @@ -108,10 +108,6 @@ text-decoration: underline; } -.importButton { - pointer-events: none; -} - .submit { display: none; } From 492a8352251c1c2f8c85a0cb2428692f5783a794 Mon Sep 17 00:00:00 2001 From: Jessica Boezwinkle Date: Fri, 30 Jun 2023 11:19:57 +0100 Subject: [PATCH 2/4] chore: update import project pagination --- src/components/Pagination/index.module.scss | 74 ++++++++++++-- src/components/Pagination/index.tsx | 102 +++++++++++++++++--- 2 files changed, 157 insertions(+), 19 deletions(-) diff --git a/src/components/Pagination/index.module.scss b/src/components/Pagination/index.module.scss index cc2471c31..1df1f769d 100644 --- a/src/components/Pagination/index.module.scss +++ b/src/components/Pagination/index.module.scss @@ -11,12 +11,72 @@ } .button { - background: var(--theme-elevation-500); - border: 0; - outline: none; - line-height: inherit; - font-size: inherit; - font-family: inherit; + all: unset; cursor: pointer; - padding: 0 calc(var(--base) / 2); + width: calc(var(--base) * 3); + height: calc(var(--base) * 3); + display: flex; + align-items: center; + justify-content: center; + border: 1px solid; + border-color: transparent; + margin-right: calc(var(--base) * 0.5); + + svg { + width: var(--base); + height: var(--base); + } + + &:hover { + border-color: #3C3C3C; + } + + &.disabled { + cursor: default; + + &:hover { + border-color: transparent; + } + } + + @include small-break { + width: calc(var(--base) * 2); + height: calc(var(--base) * 2); + margin-right: calc(var(--base) * 0.25); + } +} + +.paginationButton { + all: unset; + cursor: pointer; + width: calc(var(--base) * 3); + height: calc(var(--base) * 3); + display: flex; + align-items: center; + justify-content: center; + border: 1px solid; + border-color: transparent; + margin-right: calc(var(--base) * 0.5); + + &:hover { + border-color: #3C3C3C; + } + + @include small-break { + width: calc(var(--base) * 2); + height: calc(var(--base) * 2); + margin-right: calc(var(--base) * 0.25); + } +} + +.paginationButtonActive { + border: 1px solid #3C3C3C; +} + +.dash { + margin-right: calc(var(--base) * 0.5); +} + +.disabled { + pointer-events: none; } diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx index 197bbc1da..93fa7b528 100644 --- a/src/components/Pagination/index.tsx +++ b/src/components/Pagination/index.tsx @@ -1,5 +1,7 @@ import * as React from 'react' +import { ChevronIconV2 } from '@root/graphics/ChevronIconV2' + import classes from './index.module.scss' export const Pagination: React.FC<{ @@ -7,36 +9,112 @@ export const Pagination: React.FC<{ setPage: (page: number) => void totalPages: number }> = ({ page, setPage, totalPages }) => { + const [indexToShow, setIndexToShow] = React.useState([0, 1, 2, 3, 4]) + const showFirstPage = totalPages > 5 && page >= 2 + const showLastPage = totalPages > 5 && page <= totalPages - 3 + + React.useEffect(() => { + if (showFirstPage && showLastPage) { + setIndexToShow([1, 2, 3]) + } + + if (showFirstPage && !showLastPage) { + setIndexToShow([2, 3, 4]) + } + + if (!showFirstPage && showLastPage) { + setIndexToShow([0, 1, 2]) + } + + if (!showFirstPage && !showLastPage) { + setIndexToShow([0, 1, 2, 3, 4]) + } + }, [showFirstPage, showLastPage]) + return (
+ {showFirstPage && ( + <> + +
—
+ + )} + {[...Array(totalPages)].map((_, index) => { + const currentPage = index + 1 + const isCurrent = page === currentPage + + if (indexToShow.includes(index)) + return ( +
+ +
+ ) + })} + {showLastPage && ( + <> +
—
+ + + )} - {`Page ${page} of ${totalPages}`}
) From ab8c701c357dd4147313b421f1dcbf5cb2571932 Mon Sep 17 00:00:00 2001 From: Jessica Boezwinkle Date: Fri, 30 Jun 2023 17:19:34 +0100 Subject: [PATCH 3/4] chore: moves chevron to icons folder --- src/adapters/AlgoliaPagination/index.tsx | 6 ++--- src/components/Pagination/index.tsx | 6 ++--- src/graphics/ChevronIconV2/index.tsx | 28 ------------------------ src/icons/ChevronIcon/index.tsx | 26 ++++++++++++++++++++++ 4 files changed, 32 insertions(+), 34 deletions(-) delete mode 100644 src/graphics/ChevronIconV2/index.tsx create mode 100644 src/icons/ChevronIcon/index.tsx diff --git a/src/adapters/AlgoliaPagination/index.tsx b/src/adapters/AlgoliaPagination/index.tsx index 1ea8b0571..7df75dd92 100644 --- a/src/adapters/AlgoliaPagination/index.tsx +++ b/src/adapters/AlgoliaPagination/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { usePagination } from 'react-instantsearch-hooks-web' -import { ChevronIconV2 } from '@root/graphics/ChevronIconV2' +import { ChevronIcon } from '@root/icons/ChevronIcon' import classes from './index.module.scss' @@ -112,7 +112,7 @@ export const AlgoliaPagination: React.FC<{ }} disabled={currentRefinement === 0} > - +
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx index 93fa7b528..8c4c7d327 100644 --- a/src/components/Pagination/index.tsx +++ b/src/components/Pagination/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { ChevronIconV2 } from '@root/graphics/ChevronIconV2' +import { ChevronIcon } from '@root/icons/ChevronIcon' import classes from './index.module.scss' @@ -100,7 +100,7 @@ export const Pagination: React.FC<{ }} className={[classes.button, page - 1 < 1 && classes.disabled].filter(Boolean).join(' ')} > - + ) diff --git a/src/graphics/ChevronIconV2/index.tsx b/src/graphics/ChevronIconV2/index.tsx deleted file mode 100644 index b8d24ef6a..000000000 --- a/src/graphics/ChevronIconV2/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react' - -type Props = { - className?: string - rotation?: number -} - -export const ChevronIconV2: React.FC = ({ className, rotation }) => { - return ( - - - - ) -} diff --git a/src/icons/ChevronIcon/index.tsx b/src/icons/ChevronIcon/index.tsx new file mode 100644 index 000000000..4fa4b2412 --- /dev/null +++ b/src/icons/ChevronIcon/index.tsx @@ -0,0 +1,26 @@ +import * as React from 'react' + +import { IconProps } from '../types' + +import classes from '../index.module.scss' + +export const ChevronIcon: React.FC = props => { + const { rotation, size, className, bold } = props + return ( + + + + ) +} From cc291bae9d56ead80d5280b1186e0107fc586cf7 Mon Sep 17 00:00:00 2001 From: Jessica Boezwinkle Date: Fri, 30 Jun 2023 17:36:14 +0100 Subject: [PATCH 4/4] chore: test commit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ab2fcddfd..7c1b604a5 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Payload CMS Website +# Payload CMS Website This is the repository for [Payload's official website](https://payloadcms.com/). It was built completely in public using Payload itself, [more on that here](#⭐-the-cms).