diff --git a/packages/devextreme-scss/scss/widgets/base/_gridBase.scss b/packages/devextreme-scss/scss/widgets/base/_gridBase.scss index a12312552cb2..2a7e52ccdac2 100644 --- a/packages/devextreme-scss/scss/widgets/base/_gridBase.scss +++ b/packages/devextreme-scss/scss/widgets/base/_gridBase.scss @@ -56,14 +56,14 @@ border-top: 0; } - > .dx-#{$widget-name}-pager { - margin-top: -1px; - } - > .dx-#{$widget-name}-header-panel { border-bottom: 0; } + > .dx-pager { + margin-top: -1px; + } + > .dx-#{$widget-name}-rowsview.dx-last-row-border { tbody:last-child > .dx-data-row:nth-last-child(2) { &, diff --git a/packages/devextreme-scss/scss/widgets/base/_pager.scss b/packages/devextreme-scss/scss/widgets/base/_pagination.scss similarity index 84% rename from packages/devextreme-scss/scss/widgets/base/_pager.scss rename to packages/devextreme-scss/scss/widgets/base/_pagination.scss index ebaa67401bc9..cf6de65f799f 100644 --- a/packages/devextreme-scss/scss/widgets/base/_pager.scss +++ b/packages/devextreme-scss/scss/widgets/base/_pagination.scss @@ -3,14 +3,15 @@ // adduse -$pager-paddings: 8px; -$pager-info-paddings: 9px; +$pagination-paddings: 8px; +$pagination-info-paddings: 9px; -.dx-pager { +.dx-pager, +.dx-pagination { overflow: hidden; width: 100%; - padding-top: $pager-paddings; - padding-bottom: $pager-paddings; + padding-top: $pagination-paddings; + padding-bottom: $pagination-paddings; line-height: normal; @include user-select(none); @@ -39,7 +40,7 @@ $pager-info-paddings: 9px; .dx-info { display: inline-block; - margin-right: $pager-info-paddings; + margin-right: $pagination-info-paddings; opacity: 0.7; } @@ -49,7 +50,7 @@ $pager-info-paddings: 9px; cursor: pointer; display: inline-block; vertical-align: top; - padding: $pager-paddings - 1px 13px; + padding: $pagination-paddings - 1px 13px; box-sizing: content-box; &.dx-button-disable { @@ -117,7 +118,9 @@ $pager-info-paddings: 9px; } .dx-rtl .dx-pager, -.dx-pager.dx-rtl { +.dx-pager.dx-rtl, +.dx-rtl .dx-pagination, +.dx-pagination.dx-rtl { .dx-pages { float: left; direction: ltr; @@ -132,7 +135,7 @@ $pager-info-paddings: 9px; .dx-info { direction: rtl; - margin-left: $pager-info-paddings; + margin-left: $pagination-info-paddings; margin-right: 0; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss index d491ea6d0fcf..a385f4a60f84 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss @@ -24,7 +24,7 @@ // adduse @use "../scrollable"; @use "../overlay"; -@use "../pager"; +@use "../pagination"; $fluent-grid-base-border-hidden: 1px solid transparent; $fluent-grid-base-row-border: 1px solid transparent; diff --git a/packages/devextreme-scss/scss/widgets/fluent/pager/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/pager/_sizes.scss deleted file mode 100644 index 19a58ad38293..000000000000 --- a/packages/devextreme-scss/scss/widgets/fluent/pager/_sizes.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use "../sizes" as *; - -// adduse - -$fluent-pager-paddings: 13px !default; -$fluent-pager-separator-paddings: 8px !default; -$fluent-pager-page-padding: 9px 12px !default; -$fluent-pager-page-line-height: 12px !default; -$fluent-pager-page-font-size: 12px !default; -$fluent-pager-navbutton-paddings: $fluent-pager-page-padding !default; -$fluent-pager-navbutton-height: 12px !default; -$fluent-pager-navbutton-icon-size: null !default; -$fluent-pager-light-pagesizes-min-width: null !default; -$fluent-pager-light-pageindex-min-width: null !default; - -@if $size == "default" { - $fluent-pager-navbutton-icon-size: 21px !default; - $fluent-pager-light-pagesizes-min-width: 62px !default; - $fluent-pager-light-pageindex-min-width: 32px !default; -} - -@else if $size == "compact" { - $fluent-pager-navbutton-icon-size: 16px !default; - $fluent-pager-light-pagesizes-min-width: 42px !default; - $fluent-pager-light-pageindex-min-width: 27px !default; -} diff --git a/packages/devextreme-scss/scss/widgets/fluent/pager/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/pagination/_colors.scss similarity index 54% rename from packages/devextreme-scss/scss/widgets/fluent/pager/_colors.scss rename to packages/devextreme-scss/scss/widgets/fluent/pagination/_colors.scss index 09366aa7c225..8868f5b732ac 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/pager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/pagination/_colors.scss @@ -8,11 +8,11 @@ * $name 180. Pager selected item text color * $type color */ -$pager-page-selected-color: $base-inverted-text-color !default; -$pager-page-hovered-bg: $base-hover-bg !default; +$pagination-page-selected-color: $base-inverted-text-color !default; +$pagination-page-hovered-bg: $base-hover-bg !default; /** * $name 190. Pager selected item background color * $type color */ -$pager-page-selected-bg: $base-accent !default; +$pagination-page-selected-bg: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/pager/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/pagination/_index.scss similarity index 50% rename from packages/devextreme-scss/scss/widgets/fluent/pager/_index.scss rename to packages/devextreme-scss/scss/widgets/fluent/pagination/_index.scss index 83d7c1516e27..81da614fc64f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/pager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/pagination/_index.scss @@ -4,22 +4,23 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/icons" as *; -@use "../../base/pager"; +@use "../../base/pagination"; @use "../gridBase/sizes" as *; // adduse -.dx-pager { - padding: $fluent-pager-paddings $fluent-grid-base-cell-horizontal-padding; +.dx-pager, +.dx-pagination { + padding: $fluent-pagination-paddings $fluent-grid-base-cell-horizontal-padding; &.dx-light-mode { .dx-page-sizes { - min-width: $fluent-pager-light-pagesizes-min-width; + min-width: $fluent-pagination-light-pagesizes-min-width; } .dx-page-index { - min-width: $fluent-pager-light-pageindex-min-width; + min-width: $fluent-pagination-light-pageindex-min-width; } .dx-pages { @@ -36,19 +37,19 @@ .dx-pages { .dx-page { - padding: $fluent-pager-page-padding; - line-height: $fluent-pager-page-line-height; + padding: $fluent-pagination-page-padding; + line-height: $fluent-pagination-page-line-height; } .dx-separator { - padding-left: $fluent-pager-separator-paddings; - padding-right: $fluent-pager-separator-paddings; + padding-left: $fluent-pagination-separator-paddings; + padding-right: $fluent-pagination-separator-paddings; } .dx-navigate-button { width: 9px; - height: $fluent-pager-navbutton-height; - padding: $fluent-pager-navbutton-paddings; + height: $fluent-pagination-navbutton-height; + padding: $fluent-pagination-navbutton-paddings; } .dx-prev-button { @@ -61,16 +62,16 @@ .dx-prev-button, .dx-next-button { - @include dx-icon-font-centered-sizing($fluent-pager-navbutton-icon-size); + @include dx-icon-font-centered-sizing($fluent-pagination-navbutton-icon-size); } } .dx-page, .dx-page-size { - font-size: $fluent-pager-page-font-size; + font-size: $fluent-pagination-page-font-size; &:hover { - background-color: $pager-page-hovered-bg; + background-color: $pagination-page-hovered-bg; } border-radius: 20px; @@ -82,16 +83,16 @@ margin-left: 0; } - padding: $fluent-pager-page-padding; - line-height: $fluent-pager-page-line-height; + padding: $fluent-pagination-page-padding; + line-height: $fluent-pagination-page-line-height; } .dx-pages, .dx-page-sizes { .dx-selection { font-weight: 500; - background-color: $pager-page-selected-bg; - color: $pager-page-selected-color; + background-color: $pagination-page-selected-bg; + color: $pagination-page-selected-color; } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/pagination/_sizes.scss new file mode 100644 index 000000000000..67a2a019698a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent/pagination/_sizes.scss @@ -0,0 +1,26 @@ +@use "../sizes" as *; + +// adduse + +$fluent-pagination-paddings: 13px !default; +$fluent-pagination-separator-paddings: 8px !default; +$fluent-pagination-page-padding: 9px 12px !default; +$fluent-pagination-page-line-height: 12px !default; +$fluent-pagination-page-font-size: 12px !default; +$fluent-pagination-navbutton-paddings: $fluent-pagination-page-padding !default; +$fluent-pagination-navbutton-height: 12px !default; +$fluent-pagination-navbutton-icon-size: null !default; +$fluent-pagination-light-pagesizes-min-width: null !default; +$fluent-pagination-light-pageindex-min-width: null !default; + +@if $size == "default" { + $fluent-pagination-navbutton-icon-size: 21px !default; + $fluent-pagination-light-pagesizes-min-width: 62px !default; + $fluent-pagination-light-pageindex-min-width: 32px !default; +} + +@else if $size == "compact" { + $fluent-pagination-navbutton-icon-size: 16px !default; + $fluent-pagination-light-pagesizes-min-width: 42px !default; + $fluent-pagination-light-pageindex-min-width: 27px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss index ed2d829589cc..33c721c1f162 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss @@ -20,7 +20,7 @@ // adduse @use "../scrollable"; @use "../overlay"; -@use "../pager"; +@use "../pagination"; $generic-grid-base-border-hidden: 1px solid transparent; $generic-grid-base-row-border: 1px solid transparent; @@ -964,25 +964,6 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he background-color: $datagrid-base-background-color; } - .dx-#{$widget-name}-pager { - border-top: 1px solid $datagrid-border-color; - - .dx-page, - .dx-page-size, - .dx-navigate-button { - outline: none; - } - - &.dx-state-focused { - .dx-page:focus, - .dx-page-size:focus, - .dx-navigate-button:focus { - outline: 2px solid $datagrid-focused-border-color; - outline-offset: -2px; - } - } - } - .dx-#{$widget-name}-summary-item { color: $datagrid-summary-color; } diff --git a/packages/devextreme-scss/scss/widgets/generic/pager/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/pager/_colors.scss deleted file mode 100644 index d8b33708a113..000000000000 --- a/packages/devextreme-scss/scss/widgets/generic/pager/_colors.scss +++ /dev/null @@ -1,67 +0,0 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; - -// adduse - -/** -* $name 180. Pager selected item text color -* $type color -*/ -$pager-page-selected-color: null !default; - -/** -* $name 190. Pager selected item background color -* $type color -*/ -$pager-page-selected-bg: null !default; -$pager-page-selected-border-color: null !default; -$pager-page-border-radius: $base-border-radius - 1px !default; - -@if $color == "carmine" { - $pager-page-selected-color: lighten($base-text-color, 100%) !default; - $pager-page-selected-bg: $base-accent !default; - $pager-page-selected-border-color: transparent !default; -} - -@if $color == "contrast" { - $pager-page-selected-bg: $base-inverted-bg !default; - $pager-page-selected-border-color: $base-border-color !default; - $pager-page-selected-color: $base-inverted-text-color !default; -} - -@if $color == "dark" { - $pager-page-selected-color: $base-text-color !default; - $pager-page-selected-bg: lighten($base-bg, 17%) !default; - $pager-page-selected-border-color: transparent !default; -} - -@if $color == "darkmoon" { - $pager-page-selected-color: $base-bg !default; - $pager-page-selected-bg: $base-accent !default; - $pager-page-selected-border-color: transparent !default; -} - -@if $color == "darkviolet" { - $pager-page-selected-bg: lighten($base-bg, 17%) !default; - $pager-page-selected-border-color: transparent !default; - $pager-page-selected-color: $base-text-color !default; -} - -@if $color == "greenmist" { - $pager-page-selected-bg: $base-link-color !default; - $pager-page-selected-border-color: transparent !default; - $pager-page-selected-color: lighten($base-text-color, 100%) !default; -} - -@if $color == "light" { - $pager-page-selected-color: $base-text-color !default; - $pager-page-selected-bg: darken($base-bg, 17%) !default; - $pager-page-selected-border-color: transparent !default; -} - -@if $color == "softblue" { - $pager-page-selected-color: $base-text-color !default; - $pager-page-selected-bg: $base-border-color !default; - $pager-page-selected-border-color: transparent !default; -} diff --git a/packages/devextreme-scss/scss/widgets/generic/pager/_index.scss b/packages/devextreme-scss/scss/widgets/generic/pager/_index.scss deleted file mode 100644 index d0424d44e880..000000000000 --- a/packages/devextreme-scss/scss/widgets/generic/pager/_index.scss +++ /dev/null @@ -1,83 +0,0 @@ -@use "sass:color"; -@use "colors" as *; -@use "../colors" as *; -@use "sizes" as *; -@use "../sizes" as *; -@use "../../base/icons" as *; -@use "../../base/pager"; - -// adduse - - -.dx-pager { - padding-top: $generic-pager-paddings; - padding-bottom: $generic-pager-paddings; - - &.dx-light-mode { - .dx-page-sizes { - min-width: 42px; - } - - .dx-page-indexes { - vertical-align: middle; - } - - .dx-page-index { - min-width: 19px; - } - } - - .dx-pages { - .dx-page { - padding: $generic-pager-page-padding-top $generic-pager-page-padding-left-right $generic-pager-page-padding-bottom; - } - - .dx-separator { - padding-left: $generic-pager-separator-paddings; - padding-right: $generic-pager-separator-paddings; - } - - .dx-navigate-button { - width: 9px; - height: $generic-pager-navbutton-height; - padding: $generic-pager-navbutton-paddings; - } - - .dx-prev-button { - @include dx-icon(chevronleft); - } - - .dx-next-button { - @include dx-icon(chevronright); - } - - .dx-prev-button, - .dx-next-button { - @include dx-icon-font-centered-sizing(21px); - } - } - - .dx-page, - .dx-page-size { - border-radius: $pager-page-border-radius; - border-style: solid; - border-width: 1px; - border-color: transparent; - } - - .dx-page-sizes .dx-page-size { - padding-left: $generic-pager-pagesize-padding-left; - padding-right: $generic-pager-pagesize-padding-right; - padding-top: $generic-pager-pagesize-padding-top; - padding-bottom: $generic-pager-pagesize-padding-bottom; - } - - .dx-pages, - .dx-page-sizes { - .dx-selection { - color: $pager-page-selected-color; - border-color: $pager-page-selected-border-color; - background-color: $pager-page-selected-bg; - } - } -} diff --git a/packages/devextreme-scss/scss/widgets/generic/pager/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/pager/_sizes.scss deleted file mode 100644 index 9626fe190a02..000000000000 --- a/packages/devextreme-scss/scss/widgets/generic/pager/_sizes.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use "../sizes" as *; - -// adduse - -$generic-pager-paddings: null !default; -$generic-pager-separator-paddings: null !default; -$generic-pager-page-padding-left-right: null !default; -$generic-pager-page-padding-top: null !default; -$generic-pager-page-padding-bottom: null !default; -$generic-pager-navbutton-paddings: null !default; -$generic-pager-navbutton-height: null !default; -$generic-pager-pagesize-padding-top: null !default; -$generic-pager-pagesize-padding-bottom: null !default; -$generic-pager-pagesize-padding-left: null !default; -$generic-pager-pagesize-padding-right: null !default; - -@if $size == "default" { - $generic-pager-paddings: 9px !default; - $generic-pager-separator-paddings: 8px !default; - $generic-pager-page-padding-left-right: 9px !default; - $generic-pager-page-padding-top: 7px !default; - $generic-pager-page-padding-bottom: 8px !default; - $generic-pager-navbutton-paddings: $generic-pager-paddings 13px !default; - $generic-pager-navbutton-height: 17px !default; - $generic-pager-pagesize-padding-top: 7px !default; - $generic-pager-pagesize-padding-bottom: 8px !default; - $generic-pager-pagesize-padding-left: 10px !default; - $generic-pager-pagesize-padding-right: 9px !default; -} - -@else if $size == "compact" { - $generic-pager-paddings: 5px !default; - $generic-pager-page-padding-left-right: 6px !default; - $generic-pager-page-padding-top: 4px !default; - $generic-pager-page-padding-bottom: 5px !default; - $generic-pager-separator-paddings: 4px !default; - $generic-pager-navbutton-paddings: $generic-pager-paddings 7px !default; - $generic-pager-navbutton-height: 16px !default; - $generic-pager-pagesize-padding-top: 4px !default; - $generic-pager-pagesize-padding-bottom: 5px !default; - $generic-pager-pagesize-padding-left: 8px !default; - $generic-pager-pagesize-padding-right: 6px !default; -} diff --git a/packages/devextreme-scss/scss/widgets/generic/pagination/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/pagination/_colors.scss new file mode 100644 index 000000000000..43ed2535c5d0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/generic/pagination/_colors.scss @@ -0,0 +1,76 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 180. Pager selected item text color +* $type color +*/ +$pagination-page-selected-color: null !default; + +/** +* $name 190. Pager selected item background color +* $type color +*/ +$pagination-page-selected-bg: null !default; +$pagination-page-selected-border-color: null !default; +$pagination-page-border-radius: $base-border-radius - 1px !default; +$pagination-outline-color: null !default; + +@if $color == "carmine" { + $pagination-page-selected-color: lighten($base-text-color, 100%) !default; + $pagination-page-selected-bg: $base-accent !default; + $pagination-page-selected-border-color: transparent !default; + $pagination-outline-color: mix($base-bg, darken($base-accent, 15%), 20%) !default; +} + +@if $color == "contrast" { + $pagination-page-selected-bg: $base-inverted-bg !default; + $pagination-page-selected-border-color: $base-border-color !default; + $pagination-page-selected-color: $base-inverted-text-color !default; + $pagination-outline-color: $base-accent !default; +} + +@if $color == "dark" { + $pagination-page-selected-color: $base-text-color !default; + $pagination-page-selected-bg: lighten($base-bg, 17%) !default; + $pagination-page-selected-border-color: transparent !default; + $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default; +} + +@if $color == "darkmoon" { + $pagination-page-selected-color: $base-bg !default; + $pagination-page-selected-bg: $base-accent !default; + $pagination-page-selected-border-color: transparent !default; + $pagination-outline-color: mix($base-bg, darken($base-accent, 20%), 20%) !default; +} + +@if $color == "darkviolet" { + $pagination-page-selected-bg: lighten($base-bg, 17%) !default; + $pagination-page-selected-border-color: transparent !default; + $pagination-page-selected-color: $base-text-color !default; + $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default; +} + +@if $color == "greenmist" { + $pagination-page-selected-bg: $base-link-color !default; + $pagination-page-selected-border-color: transparent !default; + $pagination-page-selected-color: lighten($base-text-color, 100%) !default; + $pagination-outline-color: mix($base-bg, darken($base-focus-bg, 15%), 20%) !default; +} + +@if $color == "light" { + $pagination-page-selected-color: $base-text-color !default; + $pagination-page-selected-bg: darken($base-bg, 17%) !default; + $pagination-page-selected-border-color: transparent !default; + $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default; +} + +@if $color == "softblue" { + $pagination-page-selected-color: $base-text-color !default; + $pagination-page-selected-bg: $base-border-color !default; + $pagination-page-selected-border-color: transparent !default; + $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss new file mode 100644 index 000000000000..8dcc39ff8ca0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss @@ -0,0 +1,100 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icons" as *; +@use "../../base/pagination"; + +// adduse + + +.dx-pager, +.dx-pagination { + padding-top: $generic-pagination-paddings; + padding-bottom: $generic-pagination-paddings; + border-top: 1px solid $base-border-color; + + .dx-page, + .dx-page-size, + .dx-navigate-button { + outline: none; + } + + &.dx-state-focused { + .dx-page:focus, + .dx-page-size:focus, + .dx-navigate-button:focus { + outline: 2px solid $pagination-outline-color; + outline-offset: -2px; + } + } + + &.dx-light-mode { + .dx-page-sizes { + min-width: 42px; + } + + .dx-page-indexes { + vertical-align: middle; + } + + .dx-page-index { + min-width: 19px; + } + } + + .dx-pages { + .dx-page { + padding: $generic-pagination-page-padding-top $generic-pagination-page-padding-left-right $generic-pagination-page-padding-bottom; + } + + .dx-separator { + padding-left: $generic-pagination-separator-paddings; + padding-right: $generic-pagination-separator-paddings; + } + + .dx-navigate-button { + width: 9px; + height: $generic-pagination-navbutton-height; + padding: $generic-pagination-navbutton-paddings; + } + + .dx-prev-button { + @include dx-icon(chevronleft); + } + + .dx-next-button { + @include dx-icon(chevronright); + } + + .dx-prev-button, + .dx-next-button { + @include dx-icon-font-centered-sizing(21px); + } + } + + .dx-page, + .dx-page-size { + border-radius: $pagination-page-border-radius; + border-style: solid; + border-width: 1px; + border-color: transparent; + } + + .dx-page-sizes .dx-page-size { + padding-left: $generic-pagination-pagesize-padding-left; + padding-right: $generic-pagination-pagesize-padding-right; + padding-top: $generic-pagination-pagesize-padding-top; + padding-bottom: $generic-pagination-pagesize-padding-bottom; + } + + .dx-pages, + .dx-page-sizes { + .dx-selection { + color: $pagination-page-selected-color; + border-color: $pagination-page-selected-border-color; + background-color: $pagination-page-selected-bg; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/generic/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/pagination/_sizes.scss new file mode 100644 index 000000000000..abc8ce74466f --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/generic/pagination/_sizes.scss @@ -0,0 +1,43 @@ +@use "../sizes" as *; + +// adduse + +$generic-pagination-paddings: null !default; +$generic-pagination-separator-paddings: null !default; +$generic-pagination-page-padding-left-right: null !default; +$generic-pagination-page-padding-top: null !default; +$generic-pagination-page-padding-bottom: null !default; +$generic-pagination-navbutton-paddings: null !default; +$generic-pagination-navbutton-height: null !default; +$generic-pagination-pagesize-padding-top: null !default; +$generic-pagination-pagesize-padding-bottom: null !default; +$generic-pagination-pagesize-padding-left: null !default; +$generic-pagination-pagesize-padding-right: null !default; + +@if $size == "default" { + $generic-pagination-paddings: 9px !default; + $generic-pagination-separator-paddings: 8px !default; + $generic-pagination-page-padding-left-right: 9px !default; + $generic-pagination-page-padding-top: 7px !default; + $generic-pagination-page-padding-bottom: 8px !default; + $generic-pagination-navbutton-paddings: $generic-pagination-paddings 13px !default; + $generic-pagination-navbutton-height: 17px !default; + $generic-pagination-pagesize-padding-top: 7px !default; + $generic-pagination-pagesize-padding-bottom: 8px !default; + $generic-pagination-pagesize-padding-left: 10px !default; + $generic-pagination-pagesize-padding-right: 9px !default; +} + +@else if $size == "compact" { + $generic-pagination-paddings: 5px !default; + $generic-pagination-page-padding-left-right: 6px !default; + $generic-pagination-page-padding-top: 4px !default; + $generic-pagination-page-padding-bottom: 5px !default; + $generic-pagination-separator-paddings: 4px !default; + $generic-pagination-navbutton-paddings: $generic-pagination-paddings 7px !default; + $generic-pagination-navbutton-height: 16px !default; + $generic-pagination-pagesize-padding-top: 4px !default; + $generic-pagination-pagesize-padding-bottom: 5px !default; + $generic-pagination-pagesize-padding-left: 8px !default; + $generic-pagination-pagesize-padding-right: 6px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss index a78368884f4b..38416bd67292 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss @@ -24,7 +24,7 @@ // adduse @use "../scrollable"; @use "../overlay"; -@use "../pager"; +@use "../pagination"; $material-grid-base-border-hidden: 1px solid transparent; $material-grid-base-row-border: 1px solid transparent; diff --git a/packages/devextreme-scss/scss/widgets/material/pager/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/pager/_sizes.scss deleted file mode 100644 index 00dada552fa3..000000000000 --- a/packages/devextreme-scss/scss/widgets/material/pager/_sizes.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use "../sizes" as *; - -// adduse - -$material-pager-paddings: 13px !default; -$material-pager-separator-paddings: 8px !default; -$material-pager-page-padding: 9px 12px !default; -$material-pager-page-line-height: 12px !default; -$material-pager-page-font-size: 12px !default; -$material-pager-navbutton-paddings: $material-pager-page-padding !default; -$material-pager-navbutton-height: 12px !default; -$material-pager-light-pagesizes-min-width: null !default; -$material-pager-light-pageindex-min-width: null !default; - -@if $size == "default" { - $material-pager-light-pagesizes-min-width: 62px !default; - $material-pager-light-pageindex-min-width: 32px !default; -} - -@else if $size == "compact" { - $material-pager-light-pagesizes-min-width: 42px !default; - $material-pager-light-pageindex-min-width: 27px !default; -} diff --git a/packages/devextreme-scss/scss/widgets/material/pager/_colors.scss b/packages/devextreme-scss/scss/widgets/material/pagination/_colors.scss similarity index 54% rename from packages/devextreme-scss/scss/widgets/material/pager/_colors.scss rename to packages/devextreme-scss/scss/widgets/material/pagination/_colors.scss index 09366aa7c225..8868f5b732ac 100644 --- a/packages/devextreme-scss/scss/widgets/material/pager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/pagination/_colors.scss @@ -8,11 +8,11 @@ * $name 180. Pager selected item text color * $type color */ -$pager-page-selected-color: $base-inverted-text-color !default; -$pager-page-hovered-bg: $base-hover-bg !default; +$pagination-page-selected-color: $base-inverted-text-color !default; +$pagination-page-hovered-bg: $base-hover-bg !default; /** * $name 190. Pager selected item background color * $type color */ -$pager-page-selected-bg: $base-accent !default; +$pagination-page-selected-bg: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/material/pager/_index.scss b/packages/devextreme-scss/scss/widgets/material/pagination/_index.scss similarity index 53% rename from packages/devextreme-scss/scss/widgets/material/pager/_index.scss rename to packages/devextreme-scss/scss/widgets/material/pagination/_index.scss index db072ca451b7..461b383bd6a0 100644 --- a/packages/devextreme-scss/scss/widgets/material/pager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/pagination/_index.scss @@ -4,22 +4,23 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/icons" as *; -@use "../../base/pager"; +@use "../../base/pagination"; @use "../gridBase/sizes" as *; // adduse -.dx-pager { - padding: $material-pager-paddings $material-grid-base-cell-horizontal-padding; +.dx-pager, +.dx-pagination { + padding: $material-pagination-paddings $material-grid-base-cell-horizontal-padding; &.dx-light-mode { .dx-page-sizes { - min-width: $material-pager-light-pagesizes-min-width; + min-width: $material-pagination-light-pagesizes-min-width; } .dx-page-index { - min-width: $material-pager-light-pageindex-min-width; + min-width: $material-pagination-light-pageindex-min-width; } .dx-pages { @@ -36,19 +37,19 @@ .dx-pages { .dx-page { - padding: $material-pager-page-padding; - line-height: $material-pager-page-line-height; + padding: $material-pagination-page-padding; + line-height: $material-pagination-page-line-height; } .dx-separator { - padding-left: $material-pager-separator-paddings; - padding-right: $material-pager-separator-paddings; + padding-left: $material-pagination-separator-paddings; + padding-right: $material-pagination-separator-paddings; } .dx-navigate-button { width: 9px; - height: $material-pager-navbutton-height; - padding: $material-pager-navbutton-paddings; + height: $material-pagination-navbutton-height; + padding: $material-pagination-navbutton-paddings; } .dx-prev-button { @@ -67,10 +68,10 @@ .dx-page, .dx-page-size { - font-size: $material-pager-page-font-size; + font-size: $material-pagination-page-font-size; &:hover { - background-color: $pager-page-hovered-bg; + background-color: $pagination-page-hovered-bg; } border-radius: 20px; @@ -82,16 +83,16 @@ margin-left: 0; } - padding: $material-pager-page-padding; - line-height: $material-pager-page-line-height; + padding: $material-pagination-page-padding; + line-height: $material-pagination-page-line-height; } .dx-pages, .dx-page-sizes { .dx-selection { font-weight: 500; - background-color: $pager-page-selected-bg; - color: $pager-page-selected-color; + background-color: $pagination-page-selected-bg; + color: $pagination-page-selected-color; } } } diff --git a/packages/devextreme-scss/scss/widgets/material/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/pagination/_sizes.scss new file mode 100644 index 000000000000..1a106ab27ce0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/material/pagination/_sizes.scss @@ -0,0 +1,23 @@ +@use "../sizes" as *; + +// adduse + +$material-pagination-paddings: 13px !default; +$material-pagination-separator-paddings: 8px !default; +$material-pagination-page-padding: 9px 12px !default; +$material-pagination-page-line-height: 12px !default; +$material-pagination-page-font-size: 12px !default; +$material-pagination-navbutton-paddings: $material-pagination-page-padding !default; +$material-pagination-navbutton-height: 12px !default; +$material-pagination-light-pagesizes-min-width: null !default; +$material-pagination-light-pageindex-min-width: null !default; + +@if $size == "default" { + $material-pagination-light-pagesizes-min-width: 62px !default; + $material-pagination-light-pageindex-min-width: 32px !default; +} + +@else if $size == "compact" { + $material-pagination-light-pagesizes-min-width: 42px !default; + $material-pagination-light-pageindex-min-width: 27px !default; +} diff --git a/packages/devextreme/js/__internal/pager/common/consts.ts b/packages/devextreme/js/__internal/pager/common/consts.ts index 14974c0b76c4..2f16c72e96e8 100644 --- a/packages/devextreme/js/__internal/pager/common/consts.ts +++ b/packages/devextreme/js/__internal/pager/common/consts.ts @@ -1,10 +1,11 @@ export const PAGER_CLASS = 'dx-pager'; +export const PAGINATION_CLASS = 'dx-pagination'; export const LIGHT_MODE_CLASS = 'dx-light-mode'; -export const PAGER_PAGES_CLASS = 'dx-pages'; -export const PAGER_PAGE_INDEXES_CLASS = 'dx-page-indexes'; -export const PAGER_PAGE_CLASS = 'dx-page'; -export const PAGER_SELECTION_CLASS = 'dx-selection'; -export const PAGER_PAGE_SIZE_CLASS = 'dx-page-size'; -export const PAGER_PAGE_SIZES_CLASS = 'dx-page-sizes'; -export const PAGER_SELECTED_PAGE_SIZE_CLASS = `${PAGER_PAGE_SIZE_CLASS} ${PAGER_SELECTION_CLASS}`; +export const PAGINATION_PAGES_CLASS = 'dx-pages'; +export const PAGINATION_PAGE_INDEXES_CLASS = 'dx-page-indexes'; +export const PAGINATION_PAGE_CLASS = 'dx-page'; +export const PAGINATION_SELECTION_CLASS = 'dx-selection'; +export const PAGINATION_PAGE_SIZE_CLASS = 'dx-page-size'; +export const PAGINATION_PAGE_SIZES_CLASS = 'dx-page-sizes'; +export const PAGINATION_SELECTED_PAGE_SIZE_CLASS = `${PAGINATION_PAGE_SIZE_CLASS} ${PAGINATION_SELECTION_CLASS}`; export const FIRST_CHILD_CLASS = 'dx-first-child'; diff --git a/packages/devextreme/js/__internal/pager/content.tsx b/packages/devextreme/js/__internal/pager/content.tsx index af8d20d8fda0..db14ff329a8c 100644 --- a/packages/devextreme/js/__internal/pager/content.tsx +++ b/packages/devextreme/js/__internal/pager/content.tsx @@ -10,7 +10,11 @@ import type { EventCallback } from '../core/r1/event_callback'; import type { DisposeEffectReturn } from '../core/r1/utils/effect_return'; import { combineClasses } from '../core/r1/utils/render_utils'; import { - LIGHT_MODE_CLASS, PAGER_CLASS, PAGER_PAGE_INDEXES_CLASS, PAGER_PAGES_CLASS, + LIGHT_MODE_CLASS, + PAGER_CLASS, + PAGINATION_CLASS, + PAGINATION_PAGE_INDEXES_CLASS, + PAGINATION_PAGES_CLASS, } from './common/consts'; import type { KeyboardActionContextType } from './common/keyboard_action_context'; import { KeyboardActionContext } from './common/keyboard_action_context'; @@ -155,7 +159,8 @@ export class PaginationContent extends InfernoComponent getClasses(): string { const classesMap = { [`${this.props.className}`]: !!this.props.className, - [PAGER_CLASS]: true, + [PAGER_CLASS]: !!this.props.isGridCompatibilityMode, + [PAGINATION_CLASS]: !this.props.isGridCompatibilityMode, [LIGHT_MODE_CLASS]: !this.getIsLargeDisplayMode(), }; return combineClasses(classesMap); @@ -243,7 +248,7 @@ export class PaginationContent extends InfernoComponent )} {this.getPagesContainerVisible() && (
{this.getInfoVisible() && ( @@ -257,7 +262,7 @@ export class PaginationContent extends InfernoComponent )} {this.getPageIndexSelectorVisible() && (
} = _ref3; const selected = processedPageSize === pageSize; const className = combineClasses({ - [selected ? PAGER_SELECTED_PAGE_SIZE_CLASS : PAGER_PAGE_SIZE_CLASS]: true, + [selected ? PAGINATION_SELECTED_PAGE_SIZE_CLASS : PAGINATION_PAGE_SIZE_CLASS]: true, [FIRST_CHILD_CLASS]: index === 0, }); return { diff --git a/packages/devextreme/js/__internal/pager/page_size/selector.tsx b/packages/devextreme/js/__internal/pager/page_size/selector.tsx index f1855f1043a6..029d2a568516 100644 --- a/packages/devextreme/js/__internal/pager/page_size/selector.tsx +++ b/packages/devextreme/js/__internal/pager/page_size/selector.tsx @@ -6,7 +6,7 @@ import { InfernoComponent, InfernoEffect } from '@devextreme/runtime/inferno'; import type { RefObject } from '@devextreme-generator/declarations'; import { createRef as infernoCreateRef } from 'inferno'; -import { PAGER_PAGE_SIZES_CLASS } from '../common/consts'; +import { PAGINATION_PAGE_SIZES_CLASS } from '../common/consts'; import type { PaginationProps } from '../common/pagination_props'; import { PaginationDefaultProps } from '../common/pagination_props'; import type { FullPageSize } from '../common/types'; @@ -96,7 +96,7 @@ export class PageSizeSelector extends InfernoComponent +
{isLargeDisplayMode && ( { @@ -39,7 +39,7 @@ export class Page extends BaseInfernoComponent { getClassName(): string { return combineClasses({ [`${this.props.className}`]: !!this.props.className, - [PAGER_SELECTION_CLASS]: !!this.props.selected, + [PAGINATION_SELECTION_CLASS]: !!this.props.selected, }); } diff --git a/packages/devextreme/js/__internal/pager/pagination.tsx b/packages/devextreme/js/__internal/pager/pagination.tsx index 52bb0a48004f..10c08f49d718 100644 --- a/packages/devextreme/js/__internal/pager/pagination.tsx +++ b/packages/devextreme/js/__internal/pager/pagination.tsx @@ -7,6 +7,7 @@ import type { PaginationProps } from './common/pagination_props'; import { PaginationDefaultProps } from './common/pagination_props'; import { PaginationContent } from './content'; import { ResizableContainer } from './resizable_container'; +import { isGridCompatibilityMode } from './utils/compatibility_utils'; export class Pagination extends InfernoWrapperComponent { public __getterCache = {}; @@ -42,8 +43,7 @@ export class Pagination extends InfernoWrapperComponent { getClassName(): string | undefined { return combineClasses({ - // TODO: check if the class needed - 'dx-datagrid-pager': true, + 'dx-datagrid-pager': isGridCompatibilityMode(this.context), [`${this.props.className}`]: !!this.props.className, }); } diff --git a/packages/devextreme/js/__internal/pager/utils/compatibility_utils.ts b/packages/devextreme/js/__internal/pager/utils/compatibility_utils.ts index 7379f6e35828..4881cc6d2d46 100644 --- a/packages/devextreme/js/__internal/pager/utils/compatibility_utils.ts +++ b/packages/devextreme/js/__internal/pager/utils/compatibility_utils.ts @@ -12,10 +12,13 @@ function getPaginationConfig(context): PaginationConfigContextValue { return PaginationConfigContext.defaultValue; } +export function isGridCompatibilityMode(context): boolean { + return !!getPaginationConfig(context)?.isGridCompatibilityMode; +} + export function getLocalizationMessage(context, key: string): string { - const isGridCompatibilityMode = getPaginationConfig(context)?.isGridCompatibilityMode; let actualKey = key; - if (isGridCompatibilityMode) { + if (isGridCompatibilityMode(context)) { actualKey = key.replace('dxPagination', 'dxPager'); } return messageLocalization.getFormatter(actualKey)(); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/pagination.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/pagination.tests.js index 46919277a692..8b16bebfb1a2 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/pagination.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/pagination.tests.js @@ -93,7 +93,8 @@ function() { const $pageSizeButton = $pagination.find('.dx-page-size').first(); const $pageNumberButton = $pagination.find('.dx-page').eq(2); - assert.ok($pagination.hasClass('dx-pager'), 'pagination class'); + assert.notOk($pagination.hasClass('dx-pager'), 'compatibility pager class'); + assert.ok($pagination.hasClass('dx-pagination'), 'pagination class'); assert.notStrictEqual($pagination.css('display'), 'none', 'element is visible'); assert.strictEqual($pagination.find('.dx-pages').length, 1, 'pages chooser element'); @@ -167,7 +168,7 @@ function() { instance._render(); - assert.equal($('.' + 'dx-pager').length, 1, 'drawn one pagination only'); + assert.equal($('.' + 'dx-pagination').length, 1, 'drawn one pagination only'); }); @@ -413,7 +414,7 @@ function() { QUnit.test('Pagination is not displayed when visible is false', function(assert) { const $pagination = $('#container').dxPagination({ maxPagesCount: 8, pageCount: 10, allowedPageSizes: [5, 10, 20], visible: false }); - assert.strictEqual($('.' + 'dx-pager').length, 1, 'pagination is rendered'); + assert.strictEqual($('.' + 'dx-pagination').length, 1, 'pagination is rendered'); assert.equal($pagination.css('display'), 'none', 'pagination is hidden'); }); @@ -1650,16 +1651,16 @@ function() { localization.loadMessages(dictionary); localization.locale('en'); - const pagerElement = $('#container').dxPagination({ + const paginationElement = $('#container').dxPagination({ allowedPageSizes: ['all'], showNavigationButtons: true, showInfo: true }); - let pageSize = pagerElement.find('.dx-page-size'); - let buttonNext = pagerElement.find('.dx-next-button'); - let buttonPrev = pagerElement.find('.dx-prev-button'); - let page = pagerElement.find('.dx-page'); + let pageSize = paginationElement.find('.dx-page-size'); + let buttonNext = paginationElement.find('.dx-next-button'); + let buttonPrev = paginationElement.find('.dx-prev-button'); + let page = paginationElement.find('.dx-page'); assert.equal(pageSize.attr('aria-label'), dictionary['en']['dxPagination-pageSize'].replace('{0}', dictionary['en']['dxPagination-pageSizesAllText']), 'correct aria-label for page size on initial render'); assert.equal(page.attr('aria-label'), dictionary['en']['dxPagination-page'].replace('{0}', '1'), 'correct aria-label for page on initial render'); @@ -1667,12 +1668,12 @@ function() { assert.equal(buttonPrev.attr('aria-label'), dictionary['en']['dxPagination-prevPage'], 'correct aria-label for prev page on initial render'); localization.locale('fr'); - pagerElement.dxPagination('instance').repaint(); + paginationElement.dxPagination('instance').repaint(); - pageSize = pagerElement.find('.dx-page-size'); - buttonNext = pagerElement.find('.dx-next-button'); - buttonPrev = pagerElement.find('.dx-prev-button'); - page = pagerElement.find('.dx-page'); + pageSize = paginationElement.find('.dx-page-size'); + buttonNext = paginationElement.find('.dx-next-button'); + buttonPrev = paginationElement.find('.dx-prev-button'); + page = paginationElement.find('.dx-page'); assert.equal(pageSize.attr('aria-label'), dictionary['fr']['dxPagination-pageSize'].replace('{0}', dictionary['fr']['dxPagination-pageSizesAllText']), 'correct aria-label for page size on locale change'); assert.equal(page.attr('aria-label'), dictionary['fr']['dxPagination-page'].replace('{0}', '1'), 'correct aria-label for page on locale change');