Improve pagination UI

extension.json

@@ -77,8 +77,11 @@
 		"remoteExtPath": "Bucket"
 	},
 	"ResourceModules": {
-		"ext.bucket.bucketpage.css": {
-			"styles": "resources/bucket-json.css"
+		"ext.bucket.page.styles": {
+			"styles": "resources/ext.bucket.page.styles.css"
+		},
+		"ext.bucket.view.styles": {
+			"styles": "resources/ext.bucket.view.styles.less"
 		}
 	},
 	"config": {

i18n/en.json

@@ -1,33 +1,41 @@
 {
+    "bucket-description": "Store things",
+
     "bucket": "Bucket browse",
     "allbuckets": "All Buckets",
-    "bucket-sidebar-action": "View Bucket",
-    "bucket-description": "Store things",
+    "specialpages-group-bucket": "Bucket",
+
     "bucket-view-help-bucket-name": "The current bucket name",
     "bucket-view-help-select": "Names of fields to select, seperated by a space. Such as page_name uses_material",
     "bucket-view-help-where": "A valid lua string to be run inside bucket.where()",
     "bucket-view-help-limit": "The number of results to return per page. Maximum 500",
     "bucket-view-help-offset": "How far to offset the returned values",
     "bucket-view-submit": "Submit",
+	"bucket-view-result": "Result",
     "bucket-previous": "Previous",
     "bucket-previous-results": "Previous $1 results",
     "bucket-next": "Next",
     "bucket-next-results": "Next $1 results",
-    "specialpages-group-bucket": "Bucket",
-    "bucket-specialpage-search": "Bucket Search",
+	"bucket-limit-tooltip": "Show $1 results per page.",
+	"bucket-pagination-limit": "Results per page",
+	"bucket-pagination-results": "{{PLURAL:$3|Result <strong>$1</strong> of <strong>$3</strong>|Results <strong>$1 – $2</strong> of <strong>$3</strong>}}",
+	"bucket-pagination-results-nototal": "{{PLURAL:$2|Result <strong>$1</strong>|Results <strong>$1 – $2</strong>}}",
+	"bucket-empty": "This Bucket does not contain any entry.",
+	"bucket-empty-query": "The query does not match any entry in the Bucket.",
 
-    "allbuckets-heading": "Bucket",
+	"allbuckets-heading": "Bucket",
 
     "bucket-action-title": "View Bucket: $1",
-    "bucket-action-writes-empty": "No Buckets are written to from this page.",
+    "bucket-sidebar-action": "View Bucket",
+    "bucket-action-writes-empty": "No Buckets are written to from this page",
 
     "bucket-api-help-query": "Invalidates all other params. Must be a fully valid lua Bucket call",
     "bucket-api-help-bucket": "A valid Bucket name. Required if query param is not set",
     "bucket-api-help-select": "A list of fields to select, seperated by spaces",
     "bucket-api-help-where": "A lua string that goes inside of bucket.where()",
 
-    "bucket-page-result-counter": "Displaying $1 results $2 – $3",
     "bucket-page-dive-into": "Dive into this Bucket",
+    "bucket-view": "Bucket view",
 
     "bucket-namespace-move-into": "Cannot move pages to the Bucket namespace",
     "bucket-namespace-move": "Cannot move Bucket pages",

includes/BucketPage.php

@@ -3,6 +3,7 @@
 namespace MediaWiki\Extension\Bucket;
 
 use Article;
+use MediaWiki\Html\Html;
 use MediaWiki\MediaWikiServices;
 use Mediawiki\Title\Title;
 use MediaWiki\Title\TitleValue;
@@ -18,9 +19,13 @@ public function view() {
 		$context = $this->getContext();
 		$out = $this->getContext()->getOutput();
 		$out->enableOOUI();
-		$out->addModuleStyles( 'ext.bucket.bucketpage.css' );
+		$out->addModuleStyles( [
+			'ext.bucket.page.styles',
+			'mediawiki.codex.messagebox.styles'
+		] );
 		$title = $this->getTitle();
 		$out->setPageTitle( $title );
+		// $out->addHelpLink( 'https://meta.runescape.wiki/w/User:Cook_Me_Plox/Bucket', true );
 
 		$dbw = BucketDatabase::getDB();
 		$linkRenderer = MediaWikiServices::getInstance()->getLinkRenderer();
@@ -67,19 +72,21 @@ public function view() {
 			->select( 'COUNT(*)' )
 			->from( BucketDatabase::getBucketTableName( $bucketName ) )
 			->fetchField();
-		$out->addWikiTextAsContent( 'Bucket entries: ' . $maxCount );
-
-		$out->addWikiMsg( 'bucket-page-result-counter', $resultCount, $offset, $endResult );
 
 		$specialQueryValues = $context->getRequest()->getQueryValues();
 		unset( $specialQueryValues['action'] );
 		unset( $specialQueryValues['title'] );
 		$specialQueryValues['bucket'] = $bucketName;
-		$out->addHTML( ' ' );
+
 		$out->addHTML( $linkRenderer->makeKnownLink( new TitleValue( NS_SPECIAL, 'Bucket' ), wfMessage( 'bucket-page-dive-into' ), [], $specialQueryValues ) );
-		$out->addHTML( '<br>' );
 
-		$pageLinks = BucketPageHelper::getPageLinks( $title, $limit, $offset, $context->getRequest()->getQueryValues(), ( $resultCount === $limit ) );
+		$out->addHTML( '<h2>'  . $out->msg( 'bucket-view' ) .'</h2>' );
+
+		if ( $maxCount === '0' ) {
+			return $out->addHTML( Html::noticeBox( $out->msg( 'bucket-empty' )->parse(), '' ) );
+		}
+
+		$pageLinks = BucketPageHelper::getPageLinks( $out, $title, $limit, $offset, $maxCount, $context->getRequest()->getQueryValues(), ( $resultCount === $limit ) );
 
 		$out->addHTML( $pageLinks );
 		$out->addWikiTextAsContent( BucketPageHelper::getResultTable( $schemas[$bucketName], $fullResult['fields'], $queryResult ) );

includes/BucketPageHelper.php

@@ -3,6 +3,7 @@
 namespace MediaWiki\Extension\Bucket;
 
 use MediaWiki\Api\ApiMain;
+use MediaWiki\Html\Html;
 use MediaWiki\Request\DerivativeRequest;
 use OOUI;
 
@@ -84,36 +85,85 @@ public static function getResultTable( $schema, $fields, $result ) {
 		return '';
 	}
 
-	public static function getPageLinks( $title, $limit, $offset, $query, $hasNext = true ) {
-		$links = [];
-
-		$previousOffset = max( 0, $offset - $limit );
-		$links[] = new OOUI\ButtonWidget( [
-			'href' => $title->getLocalURL( [ 'limit' => $limit, 'offset' => max( 0, $previousOffset ) ] + $query ),
-			'title' => wfMessage( 'bucket-previous-results', $limit ),
-			'label' => wfMessage( 'bucket-previous' ) . " $limit",
-			'disabled' => ( $offset === 0 )
+	/**
+	 * @param \MediaWiki\Output\OutputPage $out
+	 * @param \MediaWiki\Title\Title $title
+	 * @param int $limit
+	 * @param int $offset
+	 * @param int|null $totalResults
+	 * @param array $query
+	 * @param bool $hasNext
+	 * @return string HTML for pagination links
+	 */
+	public static function getPageLinks(
+		$out, $title, $limit, $offset, $totalResults, $query, $hasNext = true
+	) {
+		$out->enableOOUI();
+		$out->addModuleStyles( [
+			'oojs-ui.styles.icons-movement',
+			'ext.bucket.view.styles'
 		] );
 
+		$limits = [];
 		foreach ( [ 20, 50, 100, 250, 500 ] as $num ) {
 			$query = [ 'limit' => $num, 'offset' => $offset ] + $query;
-			$tooltip = "Show $num results per page.";
-			$links[] = new OOUI\ButtonWidget( [
+			$tooltip = $out->msg( 'bucket-limit-tooltip' )->numParams( $num )->parse();
+			$limits[] = new OOUI\ButtonWidget( [
 				'href' => $title->getLocalURL( $query ),
 				'title' => $tooltip,
 				'label' => $num,
 				'active' => ( $num === $limit )
 			] );
 		}
 
-		$links[] = new OOUI\ButtonWidget( [
+		if ( $totalResults !== null ) {
+			$resultsMessage = $out->msg( 'bucket-pagination-results' )
+				->numParams( $offset + 1, $offset + $limit, $totalResults )
+				->parse();
+		} else {
+			$resultsMessage = $out->msg( 'bucket-pagination-results-nototal' )
+				->numParams( $offset + 1, $offset + $limit )
+				->parse();
+		}
+
+
+		$previousOffset = max( 0, $offset - $limit );
+		$prev = new OOUI\ButtonWidget( [
+			'flags' => [ 'progressive' ],
+			'framed' => false,
+			'href' => $title->getLocalURL( [ 'limit' => $limit, 'offset' => max( 0, $previousOffset ) ] + $query ),
+			'title' => wfMessage( 'bucket-previous-results' )->numParams( $limit )->parse(),
+			'label' => wfMessage( 'bucket-previous-results' )->numParams( $limit )->parse(),
+			'invisibleLabel' => true,
+			'icon' => 'previous',
+			'disabled' => ( $offset === 0 )
+		] );
+
+		$next = new OOUI\ButtonWidget( [
+			'flags' => [ 'progressive' ],
+			'framed' => false,
 			'href' => $title->getLocalURL( [ 'limit' => $limit, 'offset' => $offset + $limit ] + $query ),
-			'title' => wfMessage( 'bucket-next-results', $limit ),
-			'label' => wfMessage( 'bucket-next' ) . " $limit",
+			'title' => wfMessage( 'bucket-next-results' )->numParams( $limit )->parse(),
+			'label' => wfMessage( 'bucket-next-results' )->numParams( $limit )->parse(),
+			'invisibleLabel' => true,
+			'icon' => 'next',
 			'disabled' => !$hasNext
 		] );
 
-		return new OOUI\ButtonGroupWidget( [ 'items' => $links ] );
+		return Html::rawElement( 'div', [ 'class' => 'bucket-pagination' ],
+			Html::rawElement( 'div', [ 'class' => 'bucket-pagination-message' ], $resultsMessage ) .
+			Html::rawElement( 'div', [ 'class' => 'bucket-pagination-limit' ],
+				$out->msg( 'bucket-pagination-limit' )->parse() .
+				new OOUI\ButtonGroupWidget( [
+					'items' => $limits
+				] )
+			) .
+			Html::rawElement( 'div', [ 'class' => 'bucket-pagination-buttons' ],
+				new OOUI\ButtonGroupWidget( [
+					'items' => [ $prev, $next ]
+				] )
+			)
+		);
 	}
 
 	/**

includes/BucketSpecial.php

@@ -2,6 +2,7 @@
 
 namespace MediaWiki\Extension\Bucket;
 
+use MediaWiki\Html\Html;
 use MediaWiki\SpecialPage\SpecialPage;
 use OOUI;
 
@@ -113,7 +114,10 @@ public function execute( $par ) {
 		$out = $this->getOutput();
 		$this->setHeaders();
 		$out->enableOOUI();
-		$out->setPageTitle( 'Bucket browse' );
+		$out->setPageTitleMsg( $out->msg( 'bucket' ) );
+		$out->addModuleStyles( [
+			'mediawiki.codex.messagebox.styles'
+		] );
 
 		$bucket = $request->getText( 'bucket', '' );
 		$select = $request->getText( 'select', '*' );
@@ -151,11 +155,16 @@ public function execute( $par ) {
 			$queryResult = $fullResult['bucket'];
 		}
 
+		$out->addHTML( '<h2>'  . $out->msg( 'bucket-view-result' ) .'</h2>' );
+
 		$resultCount = count( $fullResult['bucket'] );
 		$endResult = $offset + $resultCount;
-		$out->addHTML( wfMessage( 'bucket-page-result-counter', $resultCount, $offset, $endResult ) . '<br>' );
 
-		$pageLinks = BucketPageHelper::getPageLinks( $this->getFullTitle(), $limit, $offset, $request->getQueryValues(), ( $resultCount === $limit ) );
+		if ( $resultCount === 0 ) {
+			return $out->addHTML( Html::noticeBox( $out->msg( 'bucket-empty-query' )->parse(), '' ) );
+		}
+
+		$pageLinks = BucketPageHelper::getPageLinks( $out, $this->getFullTitle(), $limit, $offset, null, $request->getQueryValues(), ( $resultCount === $limit ) );
 
 		$out->addHTML( $pageLinks );
 		$out->addWikiTextAsContent( BucketPageHelper::getResultTable( $schemas[$bucketName], $fullResult['fields'], $queryResult ) );

resources/ext.bucket.view.styles.less

@@ -0,0 +1,18 @@
+@import 'mediawiki.skin.variables.less';
+
+.bucket-pagination {
+	& {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: @spacing-50;
+	}
+
+	& > .bucket-pagination-limit {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: @spacing-50;
+	}
+}