From 1bae3cce69603d1cf996c765f88b62815d8cf5ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andre=CC=81=20Rivet?= Date: Thu, 20 Aug 2020 16:28:16 -0400 Subject: [PATCH 1/4] Support displaying up to 6-7 characters for current page / total pages + visual test --- src/dash-table/components/Table/Table.less | 44 ++++++++++---------- tests/visual/percy-storybook/Style.percy.tsx | 25 +++++++++-- 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/src/dash-table/components/Table/Table.less b/src/dash-table/components/Table/Table.less index 7162d7034..a0ed3f448 100644 --- a/src/dash-table/components/Table/Table.less +++ b/src/dash-table/components/Table/Table.less @@ -143,41 +143,39 @@ .dash-table-container { .previous-next-container { - display: inline-block; float: right; padding: 5px 0px; .page-number { font-family: monospace; display: inline-block; + .last-page { - min-width: 30px; - display: inline-block; - text-align: center; - margin: 0.5em; + width: 7ch; + display: inline-block; + text-align: center; } - } - - input.current-page { - display: inline-block; - border-bottom: solid lightgrey 1px !important; - color: black; - border: none; - width: 30px; - text-align: center; - font-family: monospace; - font-size: 10pt; - margin: 0.5em; - &::placeholder { + input.current-page { + display: inline-block; + border-bottom: solid lightgrey 1px !important; color: black; - } - - &:focus { - outline: none; + border: none; + width: 7ch; + text-align: center; + font-family: monospace; + font-size: 10pt; &::placeholder { - opacity: 0; + color: black; + } + + &:focus { + outline: none; + + &::placeholder { + opacity: 0; + } } } } diff --git a/tests/visual/percy-storybook/Style.percy.tsx b/tests/visual/percy-storybook/Style.percy.tsx index 9696a21c9..a25e7dd13 100644 --- a/tests/visual/percy-storybook/Style.percy.tsx +++ b/tests/visual/percy-storybook/Style.percy.tsx @@ -384,10 +384,29 @@ storiesOf('DashTable/Style type condition', module) style_data_conditional={[{ if: { column_editable: true }, background_color: 'MediumPurple' }]} - pagination_settings={{ - current_page: 0, - page_size: 10 + page_current={0} + page_size={10} + />)) + .add('large current page', () => ( R.merge(col, { + name: col.name, + deletable: true + }))} + style_table={{ + width: '100%' }} + row_deletable={true} + row_selectable={true} + pagination_mode={'fe'} + style_data_conditional={[{ + if: { column_editable: true }, background_color: 'MediumPurple' + }]} + page_action='custom' + page_count={999999} + page_current={987654} + page_size={10} />)) .add('data column_id array', () => ( Date: Thu, 20 Aug 2020 16:31:02 -0400 Subject: [PATCH 2/4] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 70917f091..38d889367 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Fixed - [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell - [#818](https://github.com/plotly/dash-table/pull/818) Fix a regression causing copy/paste not to work when selecting a range of cells with Shift + mouse click +- [#819](https://github.com/plotly/dash-table/pull/819) Fix pagination `page_current` and `page_count` fields to accomodate numbers with more digits ## [4.9.0] - 2020-07-27 ### Added From 9fe5f70064321624cee6848a82f1e00905ef03cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andre=CC=81=20Rivet?= Date: Thu, 20 Aug 2020 16:32:43 -0400 Subject: [PATCH 3/4] typo --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38d889367..08f3db3f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Fixed - [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell - [#818](https://github.com/plotly/dash-table/pull/818) Fix a regression causing copy/paste not to work when selecting a range of cells with Shift + mouse click -- [#819](https://github.com/plotly/dash-table/pull/819) Fix pagination `page_current` and `page_count` fields to accomodate numbers with more digits +- [#819](https://github.com/plotly/dash-table/pull/819) Fix pagination `page_current` and `page_count` fields to accommodate larger numbers ## [4.9.0] - 2020-07-27 ### Added From 7b3cc55bf6dbe7921d81149457dfe6ff82f42417 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andre=CC=81=20Rivet?= Date: Fri, 21 Aug 2020 08:39:31 -0400 Subject: [PATCH 4/4] dynamic and reactive width --- .../components/PageNavigation/index.tsx | 51 ++++++++++++------- src/dash-table/components/Table/Table.less | 44 ++++++++++------ tests/visual/percy-storybook/Style.percy.tsx | 20 ++++++++ 3 files changed, 82 insertions(+), 33 deletions(-) diff --git a/src/dash-table/components/PageNavigation/index.tsx b/src/dash-table/components/PageNavigation/index.tsx index f7974c769..fe3220379 100644 --- a/src/dash-table/components/PageNavigation/index.tsx +++ b/src/dash-table/components/PageNavigation/index.tsx @@ -23,8 +23,17 @@ export default class PageNavigation extends Component { render() { const {paginator, page_current} = this.props; - return paginator.lastPage !== undefined && - paginator.lastPage <= 0 ? null : ( + if (paginator.lastPage !== undefined && paginator.lastPage <= 0) { + return null; + } + + const pageChars = Math.max( + 3, + ((paginator.lastPage ?? 0) + 1).toString().length + ); + const minWidth = `${pageChars + 1}ch`; + + return (
- { - this.goToPage(event.target.value); - event.target.value = ''; - }} - onKeyDown={event => { - if (event.keyCode === KEY_CODES.ENTER) { - event.currentTarget.blur(); - } - }} - placeholder={(page_current + 1).toString()} - defaultValue='' - > +
+
+ {(page_current + 1).toString()} +
+ { + this.goToPage(event.target.value); + event.target.value = ''; + }} + onKeyDown={event => { + if (event.keyCode === KEY_CODES.ENTER) { + event.currentTarget.blur(); + } + }} + placeholder={(page_current + 1).toString()} + defaultValue='' + > +
{paginator.lastPage !== undefined ? ' / ' : ''} {paginator.lastPage !== undefined ? ( -
+
{paginator.lastPage + 1}
) : ( diff --git a/src/dash-table/components/Table/Table.less b/src/dash-table/components/Table/Table.less index a0ed3f448..def317038 100644 --- a/src/dash-table/components/Table/Table.less +++ b/src/dash-table/components/Table/Table.less @@ -151,32 +151,46 @@ display: inline-block; .last-page { - width: 7ch; display: inline-block; text-align: center; + padding: 1px 2px; } - input.current-page { + .current-page-container { display: inline-block; - border-bottom: solid lightgrey 1px !important; - color: black; - border: none; - width: 7ch; - text-align: center; - font-family: monospace; - font-size: 10pt; + position: relative; - &::placeholder { + .current-page-shadow, + input.current-page { + display: inline-block; + border-bottom: solid lightgrey 1px !important; color: black; - } - - &:focus { - outline: none; + border: none; + text-align: center; + font-family: monospace; + font-size: 10pt; + padding: 1px 2px; &::placeholder { - opacity: 0; + color: black; + } + + &:focus { + outline: none; + + &::placeholder { + opacity: 0; + } } } + + input.current-page { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } } } diff --git a/tests/visual/percy-storybook/Style.percy.tsx b/tests/visual/percy-storybook/Style.percy.tsx index a25e7dd13..05d63c03b 100644 --- a/tests/visual/percy-storybook/Style.percy.tsx +++ b/tests/visual/percy-storybook/Style.percy.tsx @@ -408,6 +408,26 @@ storiesOf('DashTable/Style type condition', module) page_current={987654} page_size={10} />)) + .add('large current page and unknown page count', () => ( R.merge(col, { + name: col.name, + deletable: true + }))} + style_table={{ + width: '100%' + }} + row_deletable={true} + row_selectable={true} + pagination_mode={'fe'} + style_data_conditional={[{ + if: { column_editable: true }, background_color: 'MediumPurple' + }]} + page_action='custom' + page_current={987654} + page_size={10} + />)) .add('data column_id array', () => (