diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 329ff58..86bc723 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -962,25 +962,6 @@ function template_preprocess_table(&$variables) { } /** - * Prepares variables for tablesort indicator templates. - * - * Default template: tablesort-indicator.html.twig. - * - * @param array $variables - * An associative array containing: - * - style: Set to either 'asc' or 'desc'. This determines which icon to show. - */ -function template_preprocess_tablesort_indicator(&$variables) { - // Provide the image attributes for an ascending or descending image. - if ($variables['style'] == 'asc') { - $variables['arrow_asc'] = file_create_url('core/misc/arrow-asc.png'); - } - else { - $variables['arrow_desc'] = file_create_url('core/misc/arrow-desc.png'); - } -} - -/** * Prepares variables for item list templates. * * Default template: item-list.html.twig. diff --git a/core/misc/arrow-asc.png b/core/misc/arrow-asc.png deleted file mode 100644 index 2edbb17..0000000 --- a/core/misc/arrow-asc.png +++ /dev/null @@ -1,4 +0,0 @@ -‰PNG - - IHDR H%v?PLTEÿÿÿ···kR%»tRNS@æØfIDATxœc`@õì0È`ào``g``‚ -KzHƒ“ÏIEND®B`‚ \ No newline at end of file diff --git a/core/misc/arrow-desc.png b/core/misc/arrow-desc.png deleted file mode 100644 index a3ccabc..0000000 --- a/core/misc/arrow-desc.png +++ /dev/null @@ -1,5 +0,0 @@ -‰PNG - - IHDR H%v?PLTEÿÿÿ···kR%»tRNS@æØfIDATc`@L L¬ Œü…LL - -Li|q)í©IEND®B`‚ \ No newline at end of file diff --git a/core/misc/icons/004875/twistie-down.svg b/core/misc/icons/004875/twistie-down.svg new file mode 100644 index 0000000..6cd6a78 --- /dev/null +++ b/core/misc/icons/004875/twistie-down.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/004875/twistie-up.svg b/core/misc/icons/004875/twistie-up.svg new file mode 100644 index 0000000..bf3b80e --- /dev/null +++ b/core/misc/icons/004875/twistie-up.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/008ee6/twistie-down.svg b/core/misc/icons/008ee6/twistie-down.svg new file mode 100644 index 0000000..23f6d9a --- /dev/null +++ b/core/misc/icons/008ee6/twistie-down.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/008ee6/twistie-up.svg b/core/misc/icons/008ee6/twistie-up.svg new file mode 100644 index 0000000..dc9dd8e --- /dev/null +++ b/core/misc/icons/008ee6/twistie-up.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/ffffff/twistie-down.svg b/core/misc/icons/ffffff/twistie-down.svg new file mode 100644 index 0000000..83c77fd --- /dev/null +++ b/core/misc/icons/ffffff/twistie-down.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/ffffff/twistie-up.svg b/core/misc/icons/ffffff/twistie-up.svg new file mode 100644 index 0000000..7b55028 --- /dev/null +++ b/core/misc/icons/ffffff/twistie-up.svg @@ -0,0 +1 @@ + diff --git a/core/modules/system/css/components/tablesort.module.css b/core/modules/system/css/components/tablesort.module.css new file mode 100644 index 0000000..5e0e711 --- /dev/null +++ b/core/modules/system/css/components/tablesort.module.css @@ -0,0 +1,19 @@ +/** + * @file + * Table sort indicator. + * + * @see tablesort-indicator.html.twig + */ + +.tablesort { + width: 16px; + height: 16px; + display: inline-block; + background-size: 100%; +} +.tablesort--asc { + background-image: url(../../../../misc/icons/787878/twistie-down.svg); +} +.tablesort--desc { + background-image: url(../../../../misc/icons/787878/twistie-up.svg); +} diff --git a/core/modules/system/css/components/tablesort.theme.css b/core/modules/system/css/components/tablesort.theme.css deleted file mode 100644 index 44e5349..0000000 --- a/core/modules/system/css/components/tablesort.theme.css +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @file - * Table sort indicator. - */ - -th.is-active img { - display: inline; -} -td.is-active { - background-color: #ddd; -} diff --git a/core/modules/system/system.libraries.yml b/core/modules/system/system.libraries.yml index 9493f52..900b8a8 100644 --- a/core/modules/system/system.libraries.yml +++ b/core/modules/system/system.libraries.yml @@ -19,6 +19,7 @@ base: css/components/resize.module.css: { weight: -10 } css/components/sticky-header.module.css: { weight: -10 } css/components/tabledrag.module.css: { weight: -10 } + css/components/tablesort.module.css: { weight: -10 } theme: css/components/action-links.theme.css: { weight: -10 } css/components/breadcrumb.theme.css: { weight: -10 } diff --git a/core/modules/system/templates/tablesort-indicator.html.twig b/core/modules/system/templates/tablesort-indicator.html.twig index 059805f..3601c6d 100644 --- a/core/modules/system/templates/tablesort-indicator.html.twig +++ b/core/modules/system/templates/tablesort-indicator.html.twig @@ -11,8 +11,18 @@ * @ingroup themeable */ #} -{% if style == 'asc' -%} - {{ 'sort ascending'|t }} -{% else -%} - {{ 'sort descending'|t }} -{% endif %} +{% + set classes = [ + 'tablesort', + 'tablesort--' ~ style, + ] +%} + + + diff --git a/core/modules/views/src/Tests/Handler/FieldWebTest.php b/core/modules/views/src/Tests/Handler/FieldWebTest.php index 0435809..f3ca43f 100644 --- a/core/modules/views/src/Tests/Handler/FieldWebTest.php +++ b/core/modules/views/src/Tests/Handler/FieldWebTest.php @@ -87,7 +87,7 @@ public function testClickSorting() { $ids = $this->clickSortLoadIdsFromOutput(); $this->assertEqual($ids, range(1, 5)); - $this->clickLink(t('ID')); + $this->clickLink(t('ID Sort descending')); // Check that the output has the expected order (desc). $ids = $this->clickSortLoadIdsFromOutput(); $this->assertEqual($ids, range(5, 1, -1)); diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml index bb49f7e..8c070b1 100644 --- a/core/themes/bartik/bartik.libraries.yml +++ b/core/themes/bartik/bartik.libraries.yml @@ -39,6 +39,7 @@ global-styling: css/components/sidebar.css: {} css/components/site-footer.css: {} css/components/table.css: {} + css/components/tablesort-indicator.css: {} css/components/tabs.css: {} css/components/toolbar.css: {} css/components/featured-bottom.css: {} diff --git a/core/themes/bartik/css/components/tablesort-indicator.css b/core/themes/bartik/css/components/tablesort-indicator.css new file mode 100644 index 0000000..d0ea03b --- /dev/null +++ b/core/themes/bartik/css/components/tablesort-indicator.css @@ -0,0 +1,17 @@ +/** + * @file + * Tablesort indicator styles. + */ + +.tablesort { + width: 14px; + height: 14px; + vertical-align: top; + margin: 1px 0 0 5px; +} +.tablesort--asc { + background-image: url(../../../../misc/icons/ffffff/twistie-down.svg); +} +.tablesort--desc { + background-image: url(../../../../misc/icons/ffffff/twistie-up.svg); +} diff --git a/core/themes/classy/templates/dataset/tablesort-indicator.html.twig b/core/themes/classy/templates/dataset/tablesort-indicator.html.twig deleted file mode 100644 index 2b3f90d..0000000 --- a/core/themes/classy/templates/dataset/tablesort-indicator.html.twig +++ /dev/null @@ -1,16 +0,0 @@ -{# -/** - * @file - * Theme override for displaying a tablesort indicator. - * - * Available variables: - * - style: Either 'asc' or 'desc', indicating the sorting direction. - * - * @see template_preprocess_tablesort_indicator() - */ -#} -{% if style == 'asc' -%} - {{ 'sort ascending'|t }} -{% else -%} - {{ 'sort descending'|t }} -{% endif %} diff --git a/core/themes/seven/css/components/tablesort-indicator.css b/core/themes/seven/css/components/tablesort-indicator.css new file mode 100644 index 0000000..fa49af7 --- /dev/null +++ b/core/themes/seven/css/components/tablesort-indicator.css @@ -0,0 +1,26 @@ +/** + * @file + * Tablesort indicator styles. + */ + +.tablesort { + float: right; /* LTR */ + margin-top: 5px; + width: 10px; + height: 10px; +} +[dir="rtl"] .tablesort { + float: left; +} +.tablesort--asc { + background-image: url(../../../../misc/icons/004875/twistie-down.svg); +} +a:hover .tablesort--asc { + background-image: url(../../../../misc/icons/008ee6/twistie-down.svg); +} +.tablesort--desc { + background-image: url(../../../../misc/icons/004875/twistie-up.svg); +} +a:hover .tablesort--desc { + background-image: url(../../../../misc/icons/008ee6/twistie-up.svg); +} diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml index 0b814b5..764403b 100644 --- a/core/themes/seven/seven.libraries.yml +++ b/core/themes/seven/seven.libraries.yml @@ -26,6 +26,7 @@ global-styling: css/components/skip-link.css: {} css/components/tables.css: {} css/components/search-admin-settings.css: {} + css/components/tablesort-indicator.css: {} css/components/system-status-report.css: {} css/components/tabs.css: {} css/components/tour.theme.css: {} diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme index 1a44bc4..9727e15 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -95,18 +95,6 @@ function seven_preprocess_admin_block_content(&$variables) { } /** - * Implements hook_preprocess_HOOK() for tablesort indicator templates. - * - * Uses Seven's image versions, so the arrows show up as black and not gray on - * gray. - */ -function seven_preprocess_tablesort_indicator(&$variables) { - $theme_path = drupal_get_path('theme', 'seven'); - $variables['arrow_asc'] = file_create_url($theme_path . '/images/arrow-asc.png'); - $variables['arrow_desc'] = file_create_url($theme_path . '/images/arrow-desc.png'); -} - -/** * Implements hook_preprocess_HOOK() for menu-local-action templates. */ function seven_preprocess_menu_local_action(array &$variables) { diff --git a/core/themes/seven/templates/tablesort-indicator.html.twig b/core/themes/seven/templates/tablesort-indicator.html.twig deleted file mode 100644 index b2eadaa..0000000 --- a/core/themes/seven/templates/tablesort-indicator.html.twig +++ /dev/null @@ -1,16 +0,0 @@ -{# -/** - * @file - * Seven's theme implementation for displaying a tablesort indicator. - * - * Available variables: - * - style: Either 'asc' or 'desc', indicating the sorting direction. - * - arrow_asc: URL to the image for an ascending arrow. - * - arrow_desc: URL to the image for a descending arrow. - */ -#} -{% if style == 'asc' -%} - {{ 'Sort ascending'|t }} -{% else -%} - {{ 'Sort descending'|t }} -{% endif %}