diff --git a/css/backoffice/components/_datatable.scss b/css/backoffice/components/_datatable.scss index c588b322c..b2dff080e 100644 --- a/css/backoffice/components/_datatable.scss +++ b/css/backoffice/components/_datatable.scss @@ -3,53 +3,46 @@ * @license http://opensource.org/licenses/AGPL-3.0 */ -$ibo-datatable--padding-y: 2em !default; - -$ibo-datatable-cell-row--line-height: 30px !default; -$ibo-datatable-cell-row--padding-x: 1em !default; -$ibo-datatable-cell-row--link--color: $ibo-color-primary-600 !default; - -$ibo-datatable-row--odd--background-color: $ibo-color-white-200 !default; -$ibo-datatable-row--even--background-color: $ibo-color-white-100 !default; - +$ibo-datatable--toolbar--padding-x: 6px !default; +$ibo-datatable--toolbar--padding-y: 0 !default; +$ibo-datatable--toolbar--text-color: $ibo-color-grey-700 !default; +$ibo-datatable--toolbar--elements-spacing: 1rem !default; +$ibo-datatable--toolbar--table-spacing: 18px !default; $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default; $ibo-datatable--selection-validation-buttons-toolbar--margin-top: 10px !default; - $ibo-list-column--max-height: 150px; -.ibo-datatable { - padding-bottom: $ibo-datatable--padding-y; - padding-top: $ibo-datatable--padding-y; +.ibo-datatable--toolbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: $ibo-datatable--toolbar--padding-y $ibo-datatable--toolbar--padding-x; - thead tr th, tbody tr td { - line-height: $ibo-datatable-cell-row--line-height; - padding-right: $ibo-datatable-cell-row--padding-x; - padding-left: $ibo-datatable-cell-row--padding-x; - @extend %ibo-font-ral-med-100; + color: $ibo-datatable--toolbar--text-color; + @extend %ibo-font-ral-med-100; - a { - color: $ibo-datatable-cell-row--link--color; - } + /* Above the table */ + &:first-child { + margin-bottom: $ibo-datatable--toolbar--table-spacing; } - .ibo-datatable-header.sorting, .ibo-datatable-header.sorting_asc, .ibo-datatable-header.sorting_desc { - cursor: pointer; - } - - tbody tr:nth-child(odd) { - background-color: $ibo-datatable-row--odd--background-color; - } - - tbody tr:nth-child(even) { - background-color: $ibo-datatable-row--even--background-color; + /* below the table */ + &:not(:first-child) { + margin-top: $ibo-datatable--toolbar--table-spacing; } } -.ibo-datatable thead tr th { - position: relative; +.ibo-datatable--toolbar-left, +.ibo-datatable--toolbar-right { + @extend %ibo-fully-centered-content; + + > *:not(:first-child) { + margin-left: $ibo-datatable--toolbar--elements-spacing; + } } +/* TODO 3.0.0: The lines below need to be refactored / placed in the right places (integrations, dedicated block / page, ...) */ .ibo-datatable-panel > .ibo-panel--body { padding: $ibo-datatable-panel--body--padding; } diff --git a/css/backoffice/pages/_audit.scss b/css/backoffice/pages/_audit.scss index 5961b0451..3dd8f0ecf 100644 --- a/css/backoffice/pages/_audit.scss +++ b/css/backoffice/pages/_audit.scss @@ -44,7 +44,7 @@ $ibo-audit--status--color: ( width: $ibo-audit--audit-rules--row--last-rows--width; } } - .ibo-datatable-toolbar{ + .ibo-datatable--toolbar{ display: none; } tr td:last-of-type:before{ diff --git a/css/backoffice/vendors/_datatables.scss b/css/backoffice/vendors/_datatables.scss index 87a8dcc1f..d6d575646 100644 --- a/css/backoffice/vendors/_datatables.scss +++ b/css/backoffice/vendors/_datatables.scss @@ -3,222 +3,141 @@ * @license http://opensource.org/licenses/AGPL-3.0 */ -$ibo-vendors-datatables--toolbar--elements--padding-top: 0.755em !default; - -$ibo-vendors-datatables--sorting--opacity: 0.3 !default; -$ibo-vendors-datatables--sorting--right: 1em !default; $ibo-vendors-datatables--pagination--color: $ibo-color-grey-800 !default; -$ibo-vendors-datatables--pagination--position-x: 1.21% !default; -$ibo-vendors-datatables--pagination--position-top: 91.58% !default; -$ibo-vendors-datatables--pagination--position-bottom: 4.85% !default; -$ibo-vendors-datatables--pagination--button-margin-x: 0.5em !default; +$ibo-vendors-datatables--pagination-button--min-size: 20px !default; +$ibo-vendors-datatables--pagination-button--padding-x: 5px !default; +$ibo-vendors-datatables--pagination-button--padding-y: 0 !default; +$ibo-vendors-datatables--pagination-button--border-radius: $ibo-border-radius-300 !default; +$ibo-vendors-datatables--pagination-button--background-color--on-hover: $ibo-color-grey-100 !default; +$ibo-vendors-datatables--pagination-button--text-color--is-active: $ibo-color-grey-900 !default; +$ibo-vendors-datatables--pagination-button--background-color--is-active: $ibo-color-grey-200 !default; +$ibo-vendors-datatables--pagination-button--box-shadow--is-active: inset 0px 1px 0px rgba(0, 0, 0, 0.15) !default; +$ibo-vendors-datatables--pagination-button--text-color--is-disabled: $ibo-color-grey-600 !default; +$ibo-vendors-datatables--pagination-button--background-color--is-disabled: transparent !default; -$ibo-vendors-datatables--select-info--padding-left: 2em !default; +$ibo-vendors-datatables--page-length-selector--text-color: $ibo-color-grey-900 !default; +$ibo-vendors-datatables--page-length-selector--background-color: $ibo-color-white-100 !default; +$ibo-vendors-datatables--page-length-selector--border-color: $ibo-color-grey-500 !default; +$ibo-vendors-datatables--page-length-selector--border-radius: $ibo-border-radius-300 !default; +$ibo-vendors-datatables--page-length-selector--border-color--on-focus: $ibo-color-primary-600 !default; -$ibo-vendors-datatables--paginate--padding-top: $ibo-vendors-datatables--toolbar--elements--padding-top !default; -$ibo-vendors-datatables--paginate--padding-left: 2em !default; +$ibo-vendors-datatables--column-sorting-icon--opacity: 0.3 !default; +$ibo-vendors-datatables--column-sorting-icon--opacity--is-sorted: 1 !default; +$ibo-vendors-datatables--column-sorting-icon--right: 1em !default; +$ibo-vendors-datatables--column-sorting-icon--content: "\f0dc" !default; +$ibo-vendors-datatables--column-sorting-icon--content--is-sorted-asc: "\f0d8" !default; +$ibo-vendors-datatables--column-sorting-icon--content--is-sorted-desc: "\f0d7" !default; -$ibo-vendors-datatables--paginate-button--link--color: $ibo-color-grey-800 !default; -$ibo-vendors-datatables--paginate-button--link--hover--color: $ibo-color-blue-grey-200 !default; +$ibo-vendors-datatables--columns-header--margin-bottom: 4px !default; +$ibo-vendors-datatables--columns-header--border-bottom: 1px solid $ibo-color-grey-400 !default; -$ibo-vendors-datatables--paginate-button-active--link--color: $ibo-color-grey-900 !default; -$ibo-vendors-datatables--paginate-button-active--link--background-color: $ibo-color-grey-200 !default; -$ibo-vendors-datatables--paginate-button-active--link--padding-y: 2px !default; -$ibo-vendors-datatables--paginate-button-active--link--padding-x: 6px !default; -$ibo-vendors-datatables--paginate-button-active--link--box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15) !default; -$ibo-vendors-datatables--paginate-button-active--link--border-radius: $ibo-border-radius-300 !default; - -$ibo-vendors-datatables--toolbar--length--padding-right: 0.5em !default; -$ibo-vendors-datatables--toolbar--length--select--height: 18px !default; -$ibo-vendors-datatables--toolbar--length--select--width: unset !default; -$ibo-vendors-datatables--toolbar--length--select--padding-y: 1px !default; -$ibo-vendors-datatables--toolbar--length--select--padding-x: 2px !default; -$ibo-vendors-datatables--toolbar--info--padding-right: 2em !default; -$ibo-vendors-datatables--toolbar--info--padding-left: 0em !default; -$ibo-vendors-datatables--toolbar--info--line-height: $ibo-vendors-datatables--toolbar--length--select--height + $ibo-vendors-datatables--toolbar--length--select--padding-y !default; - -$ibo-vendors-datatables--color: $ibo-color-grey-900 !default; -$ibo-vendors-datatables--background-color: $ibo-color-white-100 !default; -$ibo-vendors-datatables--border-color: $ibo-color-grey-500 !default; -$ibo-vendors-datatables--border-radius: $ibo-border-radius-300 !default; -$ibo-vendors-datatables--focus--border-color: $ibo-color-primary-600 !default; - -.dataTables_scrollHead thead tr th.sorting::after { - position: absolute; - font-family: "Font Awesome 5 Free"; - content: "\f0dc"; - font-weight: 900; - opacity: $ibo-vendors-datatables--sorting--opacity; - right: $ibo-vendors-datatables--sorting--right; -} - -.dataTables_scrollHead thead tr th.sorting_desc:after { - position: absolute; - font-family: "Font Awesome 5 Free"; - content: "\f0d7"; - font-weight: 900; - right: $ibo-vendors-datatables--sorting--right; -} - -.dataTables_scrollHead thead tr th.sorting_asc:after { - position: absolute; - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f0d8"; - right: $ibo-vendors-datatables--sorting--right; -} - -.pagination { - color: $ibo-vendors-datatables--pagination--color; - - left: $ibo-vendors-datatables--pagination--position-x; - right: $ibo-vendors-datatables--pagination--position-x; - top: $ibo-vendors-datatables--pagination--position-top; - bottom: $ibo-vendors-datatables--pagination--position-bottom; - - .paginate_button { - margin-left: $ibo-vendors-datatables--pagination--button-margin-x; - margin-right: $ibo-vendors-datatables--pagination--button-margin-x; - } -} +$ibo-vendors-datatables--row--background-color--is-odd: $ibo-color-white-100 !default; +$ibo-vendors-datatables--row--background-color--is-even: $ibo-color-white-200 !default; .dataTables_paginate { - float: left; - padding-top: $ibo-vendors-datatables--paginate--padding-top; - padding-left: $ibo-vendors-datatables--paginate--padding-left; -} + @extend %ibo-vertically-centered-content; + color: $ibo-vendors-datatables--pagination--color; -.paginate_button { - display: inline-flex; - justify-content: center; - align-items: center; - min-width: 22px; - min-height: 22px; - padding: $ibo-vendors-datatables--paginate-button-active--link--padding-y $ibo-vendors-datatables--paginate-button-active--link--padding-x; - @extend %ibo-font-ral-med-100; -} + /* Important: Those classes are inside the .dataTables_XXX to avoid CSS rules collision with another lib. having ".pagination" classes etc */ + a.paginate_button { + display: inline-flex; + justify-content: center; + align-items: center; + padding: $ibo-vendors-datatables--pagination-button--padding-y $ibo-vendors-datatables--pagination-button--padding-x; + min-width: $ibo-vendors-datatables--pagination-button--min-size; /* "min-width" as we allow the button to get larger (but not higher) when its text content grows */ + height: $ibo-vendors-datatables--pagination-button--min-size; + border-radius: $ibo-vendors-datatables--pagination-button--border-radius; -a.paginate_button { - color: $ibo-vendors-datatables--paginate-button--link--color; + @extend %ibo-font-ral-med-100; + @extend %ibo-hyperlink-inherited-colors; - &:hover { - color: $ibo-vendors-datatables--paginate-button--link--hover--color; - } - - &.disabled { &:hover { + background-color: $ibo-vendors-datatables--pagination-button--background-color--on-hover; + } + + &.disabled { + color: $ibo-vendors-datatables--pagination-button--text-color--is-disabled; + background-color: $ibo-vendors-datatables--pagination-button--background-color--is-disabled; cursor: default; } + + &.previous, + &.next { + @extend %ibo-font-ral-med-200; + } + + &.current { + @extend %ibo-font-ral-sembol-100; + + color: $ibo-vendors-datatables--pagination-button--text-color--is-active; + background-color: $ibo-vendors-datatables--pagination-button--background-color--is-active; + box-shadow: $ibo-vendors-datatables--pagination-button--box-shadow--is-active; + } } - - &.current { - @extend %ibo-font-ral-sembol-100; - - color: $ibo-vendors-datatables--paginate-button-active--link--color; - background-color: $ibo-vendors-datatables--paginate-button-active--link--background-color; - box-shadow: $ibo-vendors-datatables--paginate-button-active--link--box-shadow; - border-radius: $ibo-border-radius-300; - } -} - -.dataTables_info { - @extend %ibo-font-ral-med-100; - color: $ibo-color-grey-700; - - position: relative; - float: right; - padding-top: $ibo-vendors-datatables--toolbar--elements--padding-top; - padding-right: $ibo-vendors-datatables--toolbar--info--padding-right; - padding-left: $ibo-vendors-datatables--toolbar--info--padding-left; - line-height: $ibo-vendors-datatables--toolbar--info--line-height; -} - -.select-info { - padding-left: $ibo-vendors-datatables--select-info--padding-left; } .dataTables_length { - @extend %ibo-font-ral-med-100; - color: $ibo-color-grey-700; - - position: relative; - float: right; - padding-top: $ibo-vendors-datatables--toolbar--elements--padding-top; - padding-right: $ibo-vendors-datatables--toolbar--length--padding-right; - select { - /* - TODO 3.0 refactorise duplicated code - @extend .ibo-input; - remove because of the with:100% of input-select - */ - @extend .ibo-input-select; - @extend %ibo-vertically-centered-content; - background-color: $ibo-vendors-datatables--background-color; - color: $ibo-vendors-datatables--color; - border: 1px solid $ibo-vendors-datatables--border-color; - border-radius: $ibo-vendors-datatables--border-radius; + /* Extend .ibo-input and overload the properties below */ + @extend .ibo-input; - &:focus { - border: 1px solid $ibo-vendors-datatables--border-color; + /* Note: "[aria-controls]" is only there to take over the .ibo-input properties that will be put later in the compiled CSS */ + &[aria-controls] { + display: inline-flex; + width: unset; + min-width: 50px; + height: 20px; + padding: 0 4px; + } + } +} + +.dataTables_scrollHead { + /* Important: Those classes are inside the .dataTables_XXX to avoid CSS rules collision with another lib. having "thead" tags etc */ + thead tr th { + cursor: pointer; + @extend %ibo-font-ral-sembol-100; + + &.sorting::after { + position: absolute; + right: $ibo-vendors-datatables--column-sorting-icon--right; + content: $ibo-vendors-datatables--column-sorting-icon--content; + opacity: $ibo-vendors-datatables--column-sorting-icon--opacity; + @extend %fa-solid-base; + line-height: inherit; /* Overload the one from te %fa-solid-base */ } - height: $ibo-vendors-datatables--toolbar--length--select--height; - width: $ibo-vendors-datatables--toolbar--length--select--width; - padding: $ibo-vendors-datatables--toolbar--length--select--padding-y $ibo-vendors-datatables--toolbar--length--select--padding-x; + &.sorting_asc:after { + content: $ibo-vendors-datatables--column-sorting-icon--content--is-sorted-asc; + opacity: $ibo-vendors-datatables--column-sorting-icon--opacity--is-sorted; + } - @extend %ibo-font-ral-med-100; + &.sorting_desc:after { + content: $ibo-vendors-datatables--column-sorting-icon--content--is-sorted-desc; + opacity: $ibo-vendors-datatables--column-sorting-icon--opacity--is-sorted; + } } } - -.sort_order { - display: inline-flex; - width: 16px; - height: 12px; +.dataTables_scrollHeadInner { + margin-bottom: $ibo-vendors-datatables--columns-header--margin-bottom; + border-bottom: $ibo-vendors-datatables--columns-header--border-bottom; } -.sort_none { - padding-right: 5px; - - &:after { - font-family: "Font Awesome 5 Free"; - font-weight: 600; - text-align: right; - content: '\f0dc'; - color: $ibo-color-blue-grey-500; - float: right; +.dataTable { + th, td { + position: relative; + padding: 10px 12px; + @extend %ibo-font-ral-med-100; /* Necessary to set the font-size as its container can have a different one */ } -} -.sort_asc { - padding-right: 5px; - - &:after { - font-family: "Font Awesome 5 Free"; - font-weight: 600; - text-align: right; - content: '\f0d8'; - color: $ibo-color-blue-grey-500; - float: right; + tr:nth-child(odd) { + background-color: $ibo-vendors-datatables--row--background-color--is-odd; } -} -.sort_desc { - padding-right: 5px; - - &:after { - font-family: "Font Awesome 5 Free"; - font-weight: 600; - text-align: right; - content: '\f0d7'; - color: $ibo-color-blue-grey-500; - float: right; + tr:nth-child(even) { + background-color: $ibo-vendors-datatables--row--background-color--is-even; } -} - -.sort_hidden { - display: none; } \ No newline at end of file diff --git a/dictionaries/ui/components/cs.dictionary.itop.datatable.php b/dictionaries/ui/components/cs.dictionary.itop.datatable.php index a1582a8cd..508a5663e 100644 --- a/dictionaries/ui/components/cs.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/cs.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('CS CZ', 'Czech', 'Čeština', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/da.dictionary.itop.datatable.php b/dictionaries/ui/components/da.dictionary.itop.datatable.php index 3f1232bc3..86c6af0bb 100644 --- a/dictionaries/ui/components/da.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/da.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('DA DA', 'Danish', 'Dansk', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/de.dictionary.itop.datatable.php b/dictionaries/ui/components/de.dictionary.itop.datatable.php index 5dd3bbdd9..ee23e07b5 100644 --- a/dictionaries/ui/components/de.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/de.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('DE DE', 'German', 'Deutsch', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/en.dictionary.itop.datatable.php b/dictionaries/ui/components/en.dictionary.itop.datatable.php index caf970bd5..f8cd9c3d5 100644 --- a/dictionaries/ui/components/en.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/en.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('EN US', 'English', 'English', array( 'UI:Datatables:Language:Processing' => 'Please wait...', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page', 'UI:Datatables:Language:ZeroRecords' => 'No result', - 'UI:Datatables:Language:Info' => '_TOTAL_ items', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)', 'UI:Datatables:Language:InfoEmpty' => 'No information', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table', 'UI:Datatables:Language:DisplayLength:All' => 'All', diff --git a/dictionaries/ui/components/es_cr.dictionary.itop.datatable.php b/dictionaries/ui/components/es_cr.dictionary.itop.datatable.php index a75c9a59c..f2191ac57 100644 --- a/dictionaries/ui/components/es_cr.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/es_cr.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('ES CR', 'Spanish', 'Español, Castellaño', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/fr.dictionary.itop.datatable.php b/dictionaries/ui/components/fr.dictionary.itop.datatable.php index 134007496..3915ae698 100644 --- a/dictionaries/ui/components/fr.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/fr.dictionary.itop.datatable.php @@ -19,9 +19,9 @@ // Display DataTable Dict::Add('FR FR', 'French', 'Français', array( 'UI:Datatables:Language:Processing' => 'Patientez ...', - 'UI:Datatables:Language:LengthMenu' => '_MENU_ parmi ', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ par page', 'UI:Datatables:Language:ZeroRecords' => 'Pas de résultat', - 'UI:Datatables:Language:Info' => '_TOTAL_ résultat(s)', + 'UI:Datatables:Language:Info' => '_TOTAL_ élément(s)', 'UI:Datatables:Language:InfoEmpty' => 'Pas d\'information', 'UI:Datatables:Language:EmptyTable' => 'Pas de résultat', 'UI:Datatables:Language:DisplayLength:All' => 'Tous', diff --git a/dictionaries/ui/components/hu.dictionary.itop.datatable.php b/dictionaries/ui/components/hu.dictionary.itop.datatable.php index 8f9f29b43..0a9783bff 100644 --- a/dictionaries/ui/components/hu.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/hu.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('HU HU', 'Hungarian', 'Magyar', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/it.dictionary.itop.datatable.php b/dictionaries/ui/components/it.dictionary.itop.datatable.php index 9568844c6..3c8a3d77c 100644 --- a/dictionaries/ui/components/it.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/it.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('IT IT', 'Italian', 'Italiano', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/ja.dictionary.itop.datatable.php b/dictionaries/ui/components/ja.dictionary.itop.datatable.php index 51942906a..80b4ff5a2 100644 --- a/dictionaries/ui/components/ja.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/ja.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('JA JP', 'Japanese', '日本語', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/nl.dictionary.itop.datatable.php b/dictionaries/ui/components/nl.dictionary.itop.datatable.php index 18db0a44c..3bdee326f 100644 --- a/dictionaries/ui/components/nl.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/nl.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('NL NL', 'Dutch', 'Nederlands', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/pt_br.dictionary.itop.datatable.php b/dictionaries/ui/components/pt_br.dictionary.itop.datatable.php index 0c91bea14..d7e29e169 100644 --- a/dictionaries/ui/components/pt_br.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/pt_br.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('PT BR', 'Brazilian', 'Brazilian', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/ru.dictionary.itop.datatable.php b/dictionaries/ui/components/ru.dictionary.itop.datatable.php index 075a8cd91..af6f3202a 100644 --- a/dictionaries/ui/components/ru.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/ru.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('RU RU', 'Russian', 'Русский', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/sk.dictionary.itop.datatable.php b/dictionaries/ui/components/sk.dictionary.itop.datatable.php index be564470e..971e3c1c5 100644 --- a/dictionaries/ui/components/sk.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/sk.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('SK SK', 'Slovak', 'Slovenčina', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/tr.dictionary.itop.datatable.php b/dictionaries/ui/components/tr.dictionary.itop.datatable.php index 4719ac844..9057225c4 100644 --- a/dictionaries/ui/components/tr.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/tr.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('TR TR', 'Turkish', 'Türkçe', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/dictionaries/ui/components/zh_cn.dictionary.itop.datatable.php b/dictionaries/ui/components/zh_cn.dictionary.itop.datatable.php index a4652e897..376ed47ba 100644 --- a/dictionaries/ui/components/zh_cn.dictionary.itop.datatable.php +++ b/dictionaries/ui/components/zh_cn.dictionary.itop.datatable.php @@ -20,9 +20,9 @@ // Display DataTable Dict::Add('ZH CN', 'Chinese', '简体中文', array( 'UI:Datatables:Language:Processing' => 'Please wait...~~', - 'UI:Datatables:Language:LengthMenu' => 'Showing _MENU_ out of~~', + 'UI:Datatables:Language:LengthMenu' => '_MENU_ per page~~', 'UI:Datatables:Language:ZeroRecords' => 'No result~~', - 'UI:Datatables:Language:Info' => '_TOTAL_ items~~', + 'UI:Datatables:Language:Info' => '_TOTAL_ item(s)~~', 'UI:Datatables:Language:InfoEmpty' => 'No information~~', 'UI:Datatables:Language:EmptyTable' => 'No data available in this table~~', 'UI:Datatables:Language:DisplayLength:All' => 'All~~', diff --git a/sources/application/UI/Base/Component/DataTable/DataTableUIBlockFactory.php b/sources/application/UI/Base/Component/DataTable/DataTableUIBlockFactory.php index f492fa6e6..682886107 100644 --- a/sources/application/UI/Base/Component/DataTable/DataTableUIBlockFactory.php +++ b/sources/application/UI/Base/Component/DataTable/DataTableUIBlockFactory.php @@ -779,7 +779,7 @@ class DataTableUIBlockFactory extends AbstractUIBlockFactory ], ], "lengthMenu" => Dict::Format('Portal:Datatables:Language:DisplayLength:All'), - "dom" => "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>", + "dom" => "<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left' pl><'ibo-datatable--toolbar-right' i>>t<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left' pl><'ibo-datatable--toolbar-right' i>>", "scrollX" => true, "scrollCollapse" => true, "ordering" => true, diff --git a/templates/base/components/datatable/layout.ready.js.twig b/templates/base/components/datatable/layout.ready.js.twig index b498446df..8387d7c22 100644 --- a/templates/base/components/datatable/layout.ready.js.twig +++ b/templates/base/components/datatable/layout.ready.js.twig @@ -59,10 +59,10 @@ var oTable{{ sListId }} = $('#{{ oUIBlock.GetId() }}').DataTable({ infoFiltered: "({{ 'UI:Datatables:Language:InfoFiltered'|dict_s }})", emptyTable: "{{ 'UI:Datatables:Language:EmptyTable'|dict_s }}", paginate: { - first: "<<", + first: "", previous: "", next: "", - last: ">>" + last: "" }, aria: { sortAscending: ": {{ 'UI:Datatables:Language:Sort:Ascending'|dict_s }}", @@ -73,7 +73,7 @@ var oTable{{ sListId }} = $('#{{ oUIBlock.GetId() }}').DataTable({ scrollX: true, scrollCollapse: true, lengthMenu: [[ {{ iPageSize }}, {{ iPageSize*2 }}, {{ iPageSize*3 }}, {{ iPageSize*4 }}, -1], [ {{ iPageSize }}, {{ iPageSize*2 }}, {{ iPageSize*3 }}, {{ iPageSize*4 }}, "{{ 'UI:Datatables:Language:DisplayLength:All'|dict_s }}"]], - dom: "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>", + dom: "<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left' pl><'ibo-datatable--toolbar-right' i>>t<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left' pl><'ibo-datatable--toolbar-right' i>>", {% if( oUIBlock.GetOptions("sort")[0] is defined ) %} order: [[{{ oUIBlock.GetOptions()["sort"][0] }}, '{{ oUIBlock.GetOptions()["sort"][1] }}']], {% else %} diff --git a/templates/base/components/datatable/static/layout.ready.js.twig b/templates/base/components/datatable/static/layout.ready.js.twig index 4041ace60..691fbde8e 100644 --- a/templates/base/components/datatable/static/layout.ready.js.twig +++ b/templates/base/components/datatable/static/layout.ready.js.twig @@ -18,10 +18,10 @@ $('#{{ oUIBlock.GetId() }}').DataTable({ infoFiltered: "({{ 'UI:Datatables:Language:InfoFiltered'|dict_s }})", emptyTable: "{{ 'UI:Datatables:Language:EmptyTable'|dict_s }}", paginate: { - first: "<<", + first: "", previous: "", next: "", - last: ">>" + last: "" }, aria: { sortAscending: ": {{ 'UI:Datatables:Language:Sort:Ascending'|dict_s }}", @@ -40,7 +40,7 @@ $('#{{ oUIBlock.GetId() }}').DataTable({ {% if oUIBlock.GetData()|length <= iPageSize %} paging: false, {% endif %} - dom: "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>", + dom: "<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left' pl><'ibo-datatable--toolbar-right' i>>t<'ibo-datatable--toolbar'<'ibo-datatable--toolbar-left' pl><'ibo-datatable--toolbar-right' i>>", lengthMenu: [[ {{ iPageSize }}, {{ iPageSize*2 }}, {{ iPageSize*3 }}, {{ iPageSize*4 }}, -1], [ {{ iPageSize }}, {{ iPageSize*2 }}, {{ iPageSize*3 }}, {{ iPageSize*4 }}, "{{ 'UI:Datatables:Language:DisplayLength:All'|dict_s }}"]], columns: [ {% for key, column in oUIBlock.GetColumns() %}