pkp/pkp-lib#8884 Update design for the Pagination component

Vitaliy-1 · Aug 10, 2023 · 61bb14c · 61bb14c
1 parent 19635f8
commit 61bb14c
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 56 deletions.
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
@@ -81,15 +81,11 @@ export default {
 		border-color: @primary;
 	}
 
-	&:focus {
+	&:focus-visible {
 		color: @primary;
 		border-color: @primary;
 		outline: 1px solid @primary;
 	}
-
-	&:active {
-		box-shadow: 0 0 2px;
-	}
 }
 
 /**
@@ -102,22 +98,30 @@ export default {
 	box-shadow: 0 1px 0 @primary;
 
 	&:hover,
-	&:focus {
+	&:focus-visible {
 		background: @primary-lift;
 		color: #fff;
 	}
 }
 
 .pkpButton--isLink {
+	font-weight: @normal;
+	text-transform: uppercase;
 	box-shadow: none;
 	border-color: transparent;
+	text-decoration: underline;
+
+	&:hover {
+		color: @primary-lift;
+		border-color: transparent;
+	}
 }
 
 .pkpButton--isWarnable {
 	color: @no;
 
 	&:hover,
-	&:focus {
+	&:focus-visible {
 		border-color: @no;
 		color: @no;
 	}
@@ -133,7 +137,7 @@ export default {
 	box-shadow: 0 1px 0 @primary;
 
 	&:hover,
-	&:focus {
+	&:focus-visible {
 		background: @primary-lift;
 		color: #fff;
 	}
@@ -147,10 +151,14 @@ export default {
 	box-shadow: none;
 
 	&:hover,
-	&:focus {
+	&:focus-visible {
 		cursor: not-allowed;
 		outline: none;
 		box-shadow: none;
 	}
 }
+
+.pkpButton--isLink:disabled {
+	border-color: transparent;
+}
 </style>
diff --git a/src/components/Pagination/Pagination.vue b/src/components/Pagination/Pagination.vue
@@ -13,6 +13,7 @@
 							page: __('common.pagination.previous'),
 						})
 					"
+					:is-link="true"
 					@click="setPage('previous')"
 				>
 					{{ __('common.pagination.previous') }}
@@ -35,10 +36,8 @@
 					:disabled="item.isDisabled"
 					:aria-label="item.ariaLabel"
 					:aria-current="item.isCurrent"
-					:is-link="
-						!item.isCurrent && !['previous', 'next'].includes(item.value)
-					"
-					:is-active="item.isCurrent"
+					class="pkpPagination__page"
+					:is-link="true"
 					@click="setPage(item.value)"
 				>
 					{{ item.label }}
@@ -47,6 +46,7 @@
 			<li>
 				<pkp-button
 					:disabled="currentPage === lastPage"
+					:is-link="true"
 					@click="setPage('next')"
 				>
 					{{ __('common.pagination.next') }}
@@ -183,34 +183,35 @@ export default {
 @import '../../styles/_import';
 
 .pkpPagination {
+	display: flex;
+	justify-content: flex-start;
 	font-size: @font-tiny;
 	line-height: 1.5em;
 	text-align: center;
 
 	ul {
+		display: flex;
+		align-items: center;
 		margin: 0;
 		padding: 0;
 		list-style: none;
 	}
 
-	li {
-		display: inline-block;
-		margin-left: 1px;
-		margin-right: 1px;
+	.pkpButton {
+		padding-inline-start: 0.75rem;
+		padding-inline-end: 0.75rem;
+	}
 
-		&:first-child {
-			float: left;
-		}
+	.pkpPagination__page {
+		padding-inline-start: 0.5rem;
+		padding-inline-end: 0.5rem;
+		text-decoration: none;
+		color: @text;
 
-		&:last-child {
-			float: right;
+		&[aria-current='true'] {
+			font-weight: @bold;
 		}
 	}
-
-	.pkpButton {
-		padding-left: 0.75rem;
-		padding-right: 0.75rem;
-	}
 }
 
 .pkpPagination__separator {
@@ -224,16 +225,10 @@ export default {
 	width: 34px;
 }
 
-[dir='rtl'] {
-	.pkpPagination {
-		li {
-			&:first-child {
-				float: right;
-			}
-			&:last-child {
-				float: left;
-			}
-		}
-	}
+/**
+ * Pagination components inside of a ListPanel footer
+ */
+.listPanel__footer .pkpPagination {
+	justify-content: flex-end;
 }
 </style>
diff --git a/src/docs/components/Pagination/previews/PreviewPagination.vue b/src/docs/components/Pagination/previews/PreviewPagination.vue
@@ -1,18 +1,22 @@
 <template>
 	<div class="previewPagination">
-		<pagination
-			:current-page="currentPage"
-			:last-page="10"
-			:isLoading="isLoading"
-			@set-page="setPage"
-		/>
-		<pagination
-			:current-page="currentPage"
-			:last-page="10"
-			:show-adjacent-pages="2"
-			:isLoading="isLoading"
-			@set-page="setPage"
-		/>
+		<div style="display: flex; justify-content: center">
+			<pagination
+				:current-page="currentPage"
+				:last-page="10"
+				:isLoading="isLoading"
+				@set-page="setPage"
+			/>
+		</div>
+		<div style="display: flex; justify-content: center; margin-top: 2em">
+			<pagination
+				:current-page="currentPage"
+				:last-page="10"
+				:show-adjacent-pages="2"
+				:isLoading="isLoading"
+				@set-page="setPage"
+			/>
+		</div>
 	</div>
 </template>
 

diff --git a/src/docs/components/Table/previews/PreviewPagination.vue b/src/docs/components/Table/previews/PreviewPagination.vue
@@ -23,22 +23,26 @@
 				</table-cell>
 			</tr>
 		</pkp-table>
-		<pagination
-			:currentPage="currentPage"
-			:lastPage="lastPage"
-			@set-page="setPage"
-		/>
+		<button-row>
+			<pagination
+				:currentPage="currentPage"
+				:lastPage="lastPage"
+				@set-page="setPage"
+			/>
+		</button-row>
 	</div>
 </template>
 
 <script>
 import PreviewTable from './PreviewTable.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 import articleStats from '../helpers/articleStats.js';
+import ButtonRow from '../../../../components/ButtonRow/ButtonRow.vue';
 
 export default {
 	extends: PreviewTable,
 	components: {
+		ButtonRow,
 		Pagination,
 	},
 	data() {