Add go to page navigation to channel pagination options #1166

Merged

miikkatu merged 2 commits from channel-pagination-go-to-page into master

2018-03-30 19:17:27 +02:00

miikkatu commented

2018-03-22 17:22:48 +01:00

(Migrated from github.com)

This would close #711.

The component used for pagination (react-navigate) doesn't offer customisation options, so a separate control for choosing the target page is needed. The implementation is such that the user would enter a page number and presses the enter key.

This would close #711. The component used for pagination (react-navigate) doesn't offer customisation options, so a separate control for choosing the target page is needed. The implementation is such that the user would enter a page number and presses the enter key. <img width="902" alt="unfocused" src="https://user-images.githubusercontent.com/16205520/37783164-747059ac-2dfd-11e8-87f0-2a5e0598599b.png"> <img width="900" alt="focused" src="https://user-images.githubusercontent.com/16205520/37783169-78b74a66-2dfd-11e8-9309-1ffd9f5aa292.png">

liamcardenas commented

2018-03-29 21:44:32 +02:00

(Migrated from github.com)

@seanyesmunt assigning this code review to you based on what we discussed in slack.

neb-b commented

2018-03-30 01:23:54 +02:00

(Migrated from github.com)

@miikkatu Thanks for the contribution!!

You should be able to use <FormRow verticallyCenterered> ... </FormRow> and <FormField type="text" prefix={__('Go to page:')} />

Instead of adding more css. I think the only thing you might need to do is add a class input__paginate or something to set a width on the input so it isn't too long. And a new prop to FormRow, maybe centered? To add justify-content: center

Something like this:

            <FormRow verticallyCentered centered>
              <ReactPaginate
                pageCount={totalPages}
                pageRangeDisplayed={2}
                previousLabel="‹"
                nextLabel="›"
                activeClassName="pagination__item--selected"
                pageClassName="pagination__item"
                previousClassName="pagination__item pagination__item--previous"
                nextClassName="pagination__item pagination__item--next"
                breakClassName="pagination__item pagination__item--break"
                marginPagesDisplayed={2}
                onPageChange={e => this.changePage(e.selected + 1)}
                initialPage={parseInt(page - 1, 10)}
                containerClassName="pagination"
              />

              <FormField
                type="text"
                id="paginate-page"
                prefix={__('Go to page:')}
                onKeyUp={e => this.paginate(e, totalPages)}
              />
          </FormRow>

@miikkatu Thanks for the contribution!! You should be able to use `<FormRow verticallyCenterered> ... </FormRow>` and `<FormField type="text" prefix={__('Go to page:')} />` Instead of adding more css. I think the only thing you might need to do is add a class `input__paginate` or something to set a width on the input so it isn't too long. And a new prop to `FormRow`, maybe `centered`? To add `justify-content: center` Something like this: ``` <FormRow verticallyCentered centered> <ReactPaginate pageCount={totalPages} pageRangeDisplayed={2} previousLabel="‹" nextLabel="›" activeClassName="pagination__item--selected" pageClassName="pagination__item" previousClassName="pagination__item pagination__item--previous" nextClassName="pagination__item pagination__item--next" breakClassName="pagination__item pagination__item--break" marginPagesDisplayed={2} onPageChange={e => this.changePage(e.selected + 1)} initialPage={parseInt(page - 1, 10)} containerClassName="pagination" /> <FormField type="text" id="paginate-page" prefix={__('Go to page:')} onKeyUp={e => this.paginate(e, totalPages)} /> </FormRow> ```

neb-b commented

2018-03-30 01:24:16 +02:00

(Migrated from github.com)

Please feel free to reach out on discord if you have any questions!

neb-b (Migrated from github.com) requested changes 2018-03-30 01:24:51 +02:00

neb-b (Migrated from github.com) left a comment

Almost there. I would like to avoid adding a lot of CSS for this

miikkatu commented

2018-03-30 18:46:39 +02:00

(Migrated from github.com)

I updated the PR. I agree that the suggested solution is definitely better.

I also fixed some unrelated issues in the same file that prevented committing, because of the new rules introduced after the initial PR.

The new version looks like this:

I updated the PR. I agree that the suggested solution is definitely better. I also fixed some unrelated issues in the same file that prevented committing, because of the new rules introduced after the initial PR. The new version looks like this: <img width="756" alt="screen shot 2018-03-30 at 19 34 20" src="https://user-images.githubusercontent.com/16205520/38145639-fc2cdb62-3452-11e8-88e4-55d65124d3fa.png">

neb-b commented

2018-03-30 18:59:18 +02:00

(Migrated from github.com)

@miikkatu Awesome! Looking a lot better. Could you just change the paginate-channel id to a class?

@miikkatu Awesome! Looking a lot better. Could you just change the `paginate-channel` id to a class?

miikkatu commented

2018-03-30 19:06:04 +02:00

(Migrated from github.com)

That id is now a class, done!

🎉 1

neb-b (Migrated from github.com) approved these changes 2018-03-30 19:07:20 +02:00

neb-b commented