Merge pull request #2789 from weseek/design-fix-pagination-position

Design fix pagination position

src/client/js/components/Admin/ManageExternalAccount.jsx

@@ -36,14 +36,15 @@ class ManageExternalAccount extends React.Component {
     const { t, adminExternalAccountsContainer } = this.props;
 
     const pager = (
-      <div className="pull-right">
-        <PaginationWrapper
-          activePage={adminExternalAccountsContainer.state.activePage}
-          changePage={this.handleExternalAccountPage}
-          totalItemsCount={adminExternalAccountsContainer.state.totalAccounts}
-          pagingLimit={adminExternalAccountsContainer.state.pagingLimit}
-        />
-      </div>
+
+      <PaginationWrapper
+        activePage={adminExternalAccountsContainer.state.activePage}
+        changePage={this.handleExternalAccountPage}
+        totalItemsCount={adminExternalAccountsContainer.state.totalAccounts}
+        pagingLimit={adminExternalAccountsContainer.state.pagingLimit}
+        align="right"
+      />
+
     );
     return (
       <Fragment>

src/client/js/components/Admin/Security/ShareLinkSetting.jsx

@@ -66,6 +66,7 @@ class ShareLinkSetting extends React.Component {
 
   async deleteLinkById(shareLinkId) {
     const { t, appContainer, adminGeneralSecurityContainer } = this.props;
+    const { shareLinksActivePage } = adminGeneralSecurityContainer.state;
 
     try {
       const res = await appContainer.apiv3Delete(`/share-links/${shareLinkId}`);
@@ -76,53 +77,57 @@ class ShareLinkSetting extends React.Component {
       toastError(err);
     }
 
-    this.getShareLinkList(adminGeneralSecurityContainer.state.shareLinksActivePage);
+    this.getShareLinkList(shareLinksActivePage);
   }
 
 
   render() {
     const { t, adminGeneralSecurityContainer } = this.props;
-
-    const pager = (
-      <div className="pull-right my-3">
+    const {
+      shareLinks, shareLinksActivePage, totalshareLinks, shareLinksPagingLimit,
+    } = adminGeneralSecurityContainer.state;
+
+    function pager() {
+      if (shareLinks.length === 0) {
+        return null;
+      }
+      return (
         <PaginationWrapper
-          activePage={adminGeneralSecurityContainer.state.shareLinksActivePage}
+          activePage={shareLinksActivePage}
           changePage={this.getShareLinkList}
-          totalItemsCount={adminGeneralSecurityContainer.state.totalshareLinks}
-          pagingLimit={adminGeneralSecurityContainer.state.shareLinksPagingLimit}
+          totalItemsCount={totalshareLinks}
+          pagingLimit={shareLinksPagingLimit}
+          align="right"
         />
-      </div>
-    );
+      );
+    }
 
-    const deleteAllButton = (
-      adminGeneralSecurityContainer.state.shareLinks.length > 0
-        ? (
+    return (
+      <Fragment>
+        <div className="mb-3">
           <button
             className="pull-right btn btn-danger"
+            disabled={shareLinks.length === 0}
             type="button"
             onClick={this.showDeleteConfirmModal}
           >
             {t('share_links.delete_all_share_links')}
           </button>
-        )
-        : (
-          <p className="pull-right mr-2">{t('share_links.No_share_links')}</p>
-        )
-    );
-
-    return (
-      <Fragment>
-        <div className="mb-3">
-          {deleteAllButton}
           <h2 className="alert-anchor border-bottom">{t('share_links.share_link_management')}</h2>
         </div>
-
         {pager}
-        <ShareLinkList
-          shareLinks={adminGeneralSecurityContainer.state.shareLinks}
-          onClickDeleteButton={this.deleteLinkById}
-          isAdmin
-        />
+
+        {(shareLinks.length !== 0) ? (
+          <ShareLinkList
+            shareLinks={shareLinks}
+            onClickDeleteButton={this.deleteLinkById}
+            isAdmin
+          />
+          )
+          : (<p className="text-center">{t('share_links.No_share_links')}</p>
+          )
+        }
+
 
         <DeleteAllShareLinksModal
           isOpen={this.state.isDeleteConfirmModalShown}

src/client/js/components/Admin/UserManagement.jsx

@@ -114,12 +114,13 @@ class UserManagement extends React.Component {
     const { t, adminUsersContainer } = this.props;
 
     const pager = (
-      <div className="pull-right my-3">
+      <div className="my-3">
         <PaginationWrapper
           activePage={adminUsersContainer.state.activePage}
           changePage={this.handlePage}
           totalItemsCount={adminUsersContainer.state.totalUsers}
           pagingLimit={adminUsersContainer.state.pagingLimit}
+          align="right"
         />
       </div>
     );

src/client/js/components/PageAttachment.jsx

@@ -150,7 +150,7 @@ class PageAttachment extends React.Component {
     }
 
     return (
-      <div>
+      <>
         <PageAttachmentList
           attachments={this.state.attachments}
           inUse={this.state.inUse}
@@ -165,8 +165,9 @@ class PageAttachment extends React.Component {
           changePage={this.handlePage}
           totalItemsCount={this.state.totalAttachments}
           pagingLimit={this.state.limit}
+          align="center"
         />
-      </div>
+      </>
     );
   }
 

src/client/js/components/PageHistory.jsx

@@ -53,21 +53,19 @@ function PageHistory(props) {
 
   function pager() {
     return (
-      <div className="my-3">
-        <PaginationWrapper
-          activePage={pageHistoryContainer.state.activePage}
-          changePage={handlePage}
-          totalItemsCount={pageHistoryContainer.state.totalPages}
-          pagingLimit={pageHistoryContainer.state.pagingLimit}
-        />
-      </div>
+      <PaginationWrapper
+        activePage={pageHistoryContainer.state.activePage}
+        changePage={handlePage}
+        totalItemsCount={pageHistoryContainer.state.totalPages}
+        pagingLimit={pageHistoryContainer.state.pagingLimit}
+        align="center"
+      />
     );
   }
 
 
   return (
     <div className="mt-4">
-      {pager()}
       <PageRevisionList
         revisions={pageHistoryContainer.state.revisions}
         diffOpened={pageHistoryContainer.state.diffOpened}

src/client/js/components/PageList.jsx

@@ -59,7 +59,7 @@ const PageList = (props) => {
 
   return (
     <div className="page-list-container-create">
-      <ul className="page-list-ul page-list-ul-flat mb-3">
+      <ul className="page-list-ul page-list-ul-flat ">
         {pageList}
       </ul>
       <PaginationWrapper
@@ -67,6 +67,7 @@ const PageList = (props) => {
         changePage={setPageNumber}
         totalItemsCount={totalPages}
         pagingLimit={limit}
+        align="center"
       />
     </div>
   );

src/client/js/components/PageTimeline.jsx

@@ -90,6 +90,7 @@ class PageTimeline extends React.Component {
           changePage={this.handlePage}
           totalItemsCount={this.state.totalPageItems}
           pagingLimit={this.state.limit}
+          align="center"
         />
       </div>
     );

src/client/js/components/PaginationWrapper.jsx

@@ -143,6 +143,20 @@ class PaginationWrapper extends React.Component {
 
   }
 
+  getListClassName() {
+    const listClassNames = [];
+
+    const { align } = this.props;
+    if (align === 'center') {
+      listClassNames.push('justify-content-center');
+    }
+    if (align === 'right') {
+      listClassNames.push('justify-content-end');
+    }
+
+    return listClassNames.join(' ');
+  }
+
   render() {
     const paginationItems = [];
 
@@ -159,7 +173,7 @@ class PaginationWrapper extends React.Component {
 
     return (
       <React.Fragment>
-        <Pagination size="sm">{paginationItems}</Pagination>
+        <Pagination size="sm" listClassName={this.getListClassName()}>{paginationItems}</Pagination>
       </React.Fragment>
     );
   }
@@ -176,6 +190,10 @@ PaginationWrapper.propTypes = {
   changePage: PropTypes.func.isRequired,
   totalItemsCount: PropTypes.number.isRequired,
   pagingLimit: PropTypes.number.isRequired,
+  align: PropTypes.string,
+};
+PaginationWrapper.defaultProps = {
+  align: 'left',
 };
 
 export default withTranslation()(PaginationWrappered);