Merge pull request #97 from jlmitch5/newPagination

New pagination

__tests__/components/Pagination.test.jsx

@@ -120,8 +120,8 @@ describe('<Pagination />', () => {
   });
 
   test('submit a new page by typing in input works', () => {
-    const textInputSelector = '.pf-l-split__item.pf-m-main .pf-c-form-control';
-    const submitFormSelector = '.pf-l-split__item.pf-m-main form';
+    const textInputSelector = '.awx-pagination__page-input.pf-c-form-control';
+    const submitFormSelector = '.awx-pagination__page-input-form';
     const onSetPage = jest.fn();
 
     pagination = mount(

src/components/Pagination/Pagination.jsx

@@ -7,11 +7,7 @@ import {
   DropdownDirection,
   DropdownItem,
   DropdownToggle,
-  Level,
-  LevelItem,
-  TextInput,
-  Split,
-  SplitItem,
+  TextInput
 } from '@patternfly/react-core';
 
 class Pagination extends Component {
@@ -120,120 +116,102 @@ class Pagination extends Component {
     const itemMin = ((page - 1) * page_size) + 1;
     const itemMax = itemMin + itemCount - 1;
 
-    const disabledStyle = {
-      backgroundColor: '#EDEDED',
-      border: '1px solid #C2C2CA',
-      borderRadius: '0px',
-      color: '#C2C2CA',
-    };
-
     return (
       <I18n>
         {({ i18n }) => (
           <div className="awx-pagination">
-            <Level>
-              <LevelItem>
-                <Dropdown
-                  onToggle={this.onTogglePageSize}
-                  onSelect={this.onSelectPageSize}
-                  direction={up}
-                  isOpen={isOpen}
-                  toggle={(
-                    <DropdownToggle
-                      className="togglePageSize"
-                      onToggle={this.onTogglePageSize}
+            <div className="awx-pagination__page-size-selection">
+              <Trans>Items Per Page</Trans>
+              <Dropdown
+                onToggle={this.onTogglePageSize}
+                onSelect={this.onSelectPageSize}
+                direction={up}
+                isOpen={isOpen}
+                toggle={(
+                  <DropdownToggle
+                    className="togglePageSize"
+                    onToggle={this.onTogglePageSize}
+                  >
+                    {page_size}
+                  </DropdownToggle>
+                )}
+              >
+                {opts.map(option => (
+                  <DropdownItem
+                    key={option}
+                    component="button"
+                  >
+                    {option}
+                  </DropdownItem>
+                ))}
+              </Dropdown>
+            </div>
+            <div className="awx-pagination__counts">
+              <div className="awx-pagination__item-count">
+                <Trans>{`Items ${itemMin} - ${itemMax} of ${count}`}</Trans>
+              </div>
+              {pageCount !== 1 && (
+                <div className="awx-pagination__page-count">
+                  <div className="pf-c-input-group pf-m-previous">
+                    <Button
+                      className="awx-pagination__page-button"
+                      variant="tertiary"
+                      aria-label={i18n._(t`First`)}
+                      isDisabled={isOnFirst}
+                      onClick={this.onFirst}
                     >
-                      {page_size}
-                    </DropdownToggle>
-                  )}
-                >
-                  {opts.map(option => (
-                    <DropdownItem
-                      key={option}
-                      component="button"
+                      <i className="fas fa-angle-double-left" />
+                    </Button>
+                    <Button
+                      className="awx-pagination__page-button"
+                      variant="tertiary"
+                      aria-label={i18n._(t`Previous`)}
+                      isDisabled={isOnFirst}
+                      onClick={this.onPrevious}
                     >
-                      {option}
-                    </DropdownItem>
-                  ))}
-                </Dropdown>
-                <Trans> Per Page</Trans>
-              </LevelItem>
-              <LevelItem>
-                <Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">
-                  <SplitItem>
-                    <Trans>{`${itemMin} - ${itemMax} of ${count}`}</Trans>
-                  </SplitItem>
-                  <SplitItem>
-                    <div className="pf-c-input-group">
-                      <Button
-                        variant="tertiary"
-                        aria-label={i18n._(t`First`)}
-                        style={isOnFirst ? disabledStyle : {}}
-                        isDisabled={isOnFirst}
-                        onClick={this.onFirst}
-                      >
-                        <i className="fas fa-angle-double-left" />
-                      </Button>
-                      <Button
-                        variant="tertiary"
-                        aria-label={i18n._(t`Previous`)}
-                        style={isOnFirst ? disabledStyle : {}}
-                        isDisabled={isOnFirst}
-                        onClick={this.onPrevious}
-                      >
-                        <i className="fas fa-angle-left" />
-                      </Button>
-                    </div>
-                  </SplitItem>
-                  <SplitItem isMain>
-                    <form onSubmit={this.onSubmit}>
-                      <Trans>
-                        {'Page '}
-                        <TextInput
-                          isDisabled={pageCount === 1}
-                          aria-label={i18n._(t`Page Number`)}
-                          style={{
-                            height: '30px',
-                            width: '30px',
-                            textAlign: 'center',
-                            padding: '0',
-                            margin: '0',
-                            ...(pageCount === 1 ? disabledStyle : {})
-                          }}
-                          value={value}
-                          type="text"
-                          onChange={this.onPageChange}
-                        />
-                        {' of '}
-                        {pageCount}
-                      </Trans>
-                    </form>
-                  </SplitItem>
-                  <SplitItem>
-                    <div className="pf-c-input-group">
-                      <Button
-                        variant="tertiary"
-                        aria-label={i18n._(t`Next`)}
-                        style={isOnLast ? disabledStyle : {}}
-                        isDisabled={isOnLast}
-                        onClick={this.onNext}
-                      >
-                        <i className="fas fa-angle-right" />
-                      </Button>
-                      <Button
-                        variant="tertiary"
-                        aria-label={i18n._(t`Last`)}
-                        style={isOnLast ? disabledStyle : {}}
-                        isDisabled={isOnLast}
-                        onClick={this.onLast}
-                      >
-                        <i className="fas fa-angle-double-right" />
-                      </Button>
-                    </div>
-                  </SplitItem>
-                </Split>
-              </LevelItem>
-            </Level>
+                      <i className="fas fa-angle-left" />
+                    </Button>
+                  </div>
+                  <form
+                    className="awx-pagination__page-input-form"
+                    onSubmit={this.onSubmit}
+                  >
+                    <Trans>
+                      {'Page '}
+                      <TextInput
+                        className="awx-pagination__page-input"
+                        aria-label={i18n._(t`Page Number`)}
+                        value={value}
+                        type="text"
+                        onChange={this.onPageChange}
+                      />
+                      {' of '}
+                      {pageCount}
+                    </Trans>
+                  </form>
+                  <div className="pf-c-input-group">
+                    <Button
+                      className="awx-pagination__page-button"
+                      variant="tertiary"
+                      aria-label={i18n._(t`Next`)}
+                      isDisabled={isOnLast}
+                      onClick={this.onNext}
+                    >
+                      <i className="fas fa-angle-right" />
+                    </Button>
+                    <Button
+                      className="awx-pagination__page-button"
+                      variant="tertiary"
+                      aria-label={i18n._(t`Last`)}
+                      isDisabled={isOnLast}
+                      onClick={this.onLast}
+                    >
+                      <i className="fas fa-angle-double-right" />
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
         )}
       </I18n>

src/components/Pagination/styles.scss

@@ -1,39 +1,87 @@
 .awx-pagination {
   --awx-pagination--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --awx-pagination--BorderColor: var(--pf-global--Color--light-200);
-  --awx-pagination--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --awx-pagination--BorderColor: var(--pf-global--BackgroundColor--light-300);
+  --awx-pagination--disabled-BackgroundColor: #f2f2f2;
+  --awx-pagination--disabled-Color: #C2C2CA;
 
-  border: var(--awx-pagination--BorderWidth) solid var(--awx-pagination--BorderColor);
+  border-top: 1px solid var(--awx-pagination--BorderColor);
   background-color: var(--awx-pagination--BackgroundColor);
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 20px;
-  height: 70px;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  font-size: 14px;
+  font-weight: bold;
 
   --pf-global--target-size--MinHeight: 30px;
   --pf-global--target-size--MinWidth: 30px;
   --pf-global--FontSize--md: 14px;
 
-  .pf-c-input-group button {
-    width: 30px;
-    height: 30px;
-    padding: 0px;
+  .awx-pagination__page-size-selection .pf-c-dropdown__toggle {
+    font-weight: bold;
+    margin-left: 10px;
   }
 
-  .pf-c-dropdown button {
-    width: 55px;
-    height: 30px;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 0px;
-    margin-right: 10px;
-    text-align: left;
+  .awx-pagination__counts {
+    display: flex;
+    align-items: center;
+    margin-right: -20px;
+  }
 
-    .pf-c-dropdown__toggle-icon {
-        margin: 0px;
-        margin-top: 2px;
-        padding: 0px;
-        float: right;
-      }
+  .awx-pagination__item-count {
+    margin-right: 20px;
+  }
+
+  .awx-pagination__page-count {
+    margin-left: -10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .awx-pagination__page-input-form {
+    display: flex;
+    align-items: center;
+    margin: 0 10px;
+    white-space: nowrap;
+  }
+
+  .awx-pagination__page-input {
+    width: 35px;
+    margin: 0 10px;
+    font-weight: bold;
+  }
+
+  .awx-pagination__page-button {
+    width: 55px;
+    height: 55px;
+  }
+
+  .pf-c-input-group .awx-pagination__page-button,
+  .pf-c-input-group .awx-pagination__page-button:after {
+    border: 0;
+    border-radius: 0;
+  }
+
+  .pf-c-input-group .pf-c-button {
+    border-left: 1px solid var(--awx-pagination--BorderColor);
+  }
+  
+  .pf-c-input-group {
+    height: 56px;
+  }
+
+  .pf-c-input-group.pf-m-previous {
+    border-right: 1px solid var(--awx-pagination--BorderColor);
+  }
+
+  .pf-c-input-group .pf-c-button.pf-m-disabled {
+    border: 1px solid var(--awx-pagination--BorderColor);
+    background-color: var(--awx-pagination--disabled-BackgroundColor);
+    color: var(--awx-pagination--disabled-Color);
+  }
+
+  .pf-c-input-group.pf-m-previous .pf-c-button.pf-m-disabled {
+    border-right: 0;
   }
 }

src/pages/Organizations/screens/OrganizationsList.jsx

@@ -8,6 +8,7 @@ import {
 import { I18n, i18nMark } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
+  Card,
   PageSection,
   PageSectionVariants,
 } from '@patternfly/react-core';
@@ -195,46 +196,48 @@ class OrganizationsList extends Component {
     return (
       <Fragment>
         <PageSection variant={medium}>
-          <DataListToolbar
-            addUrl={`${match.url}/add`}
-            isAllSelected={selected.length === results.length}
-            sortedColumnKey={sortedColumnKey}
-            sortOrder={sortOrder}
-            columns={this.columns}
-            onSearch={this.onSearch}
-            onSort={this.onSort}
-            onSelectAll={this.onSelectAll}
-            showDelete
-            showSelectAll
-          />
-          <I18n>
-            {({ i18n }) => (
-              <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
-                { results.map(o => (
-                  <OrganizationListItem
-                    key={o.id}
-                    itemId={o.id}
-                    name={o.name}
-                    detailUrl={`${match.url}/${o.id}`}
-                    userCount={o.summary_fields.related_field_counts.users}
-                    teamCount={o.summary_fields.related_field_counts.teams}
-                    isSelected={selected.includes(o.id)}
-                    onSelect={() => this.onSelect(o.id)}
-                  />
-                ))}
-              </ul>
-            )}
-          </I18n>
-          <Pagination
-            count={count}
-            page={page}
-            pageCount={pageCount}
-            page_size={page_size}
-            pageSizeOptions={this.pageSizeOptions}
-            onSetPage={this.onSetPage}
-          />
-          { loading ? <div>loading...</div> : '' }
-          { error ? <div>error</div> : '' }
+          <Card>
+            <DataListToolbar
+              addUrl={`${match.url}/add`}
+              isAllSelected={selected.length === results.length}
+              sortedColumnKey={sortedColumnKey}
+              sortOrder={sortOrder}
+              columns={this.columns}
+              onSearch={this.onSearch}
+              onSort={this.onSort}
+              onSelectAll={this.onSelectAll}
+              showDelete
+              showSelectAll
+            />
+            <I18n>
+              {({ i18n }) => (
+                <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
+                  { results.map(o => (
+                    <OrganizationListItem
+                      key={o.id}
+                      itemId={o.id}
+                      name={o.name}
+                      detailUrl={`${match.url}/${o.id}`}
+                      userCount={o.summary_fields.related_field_counts.users}
+                      teamCount={o.summary_fields.related_field_counts.teams}
+                      isSelected={selected.includes(o.id)}
+                      onSelect={() => this.onSelect(o.id)}
+                    />
+                  ))}
+                </ul>
+              )}
+            </I18n>
+            <Pagination
+              count={count}
+              page={page}
+              pageCount={pageCount}
+              page_size={page_size}
+              pageSizeOptions={this.pageSizeOptions}
+              onSetPage={this.onSetPage}
+            />
+            { loading ? <div>loading...</div> : '' }
+            { error ? <div>error</div> : '' }
+          </Card>
         </PageSection>
       </Fragment>
     );