diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 454414d373f3a2daf1c47786c9d59f2bf0dfb094..06ba27100373da11b3be47dcfff59620d3071e35 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -959,25 +959,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. * diff --git a/core/misc/arrow-asc.png b/core/misc/arrow-asc.png deleted file mode 100644 index 2edbb17d7768f01251d9862ae4c0d093b2e402fc..0000000000000000000000000000000000000000 --- 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 a3ccabc556ea22d68c9dacb1337a6e7dcf01f72d..0000000000000000000000000000000000000000 --- 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 0000000000000000000000000000000000000000..6cd6a786bbbec522474409f47f7e0d444b0f3b01 --- /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 0000000000000000000000000000000000000000..bf3b80ed01ebb6926d1c2622310ac01b995179d6 --- /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 0000000000000000000000000000000000000000..23f6d9ac1b8bfe487bad1a5384bcdb5593e0a41f --- /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 0000000000000000000000000000000000000000..dc9dd8e9f7d84f6d0cedd1aded9433517d0fb8c1 --- /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 0000000000000000000000000000000000000000..83c77fd7bb690d4758f26d51e8515488634bdeb6 --- /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 0000000000000000000000000000000000000000..7b5502862396b79f082ba98088db6a30e0e4b117 --- /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 0000000000000000000000000000000000000000..5e0e711e52f3a39bbb3d2053a97af1223b3ce5ae --- /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/system.libraries.yml b/core/modules/system/system.libraries.yml index 96b2f28099528c10814c70f49bdb5a11c81f052a..4a3bae6e4ca591109760024548b54f1f2f1c6f0a 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 } css/components/tree-child.module.css: { weight: -10 } admin: diff --git a/core/modules/system/templates/tablesort-indicator.html.twig b/core/modules/system/templates/tablesort-indicator.html.twig index 059805f1d41a285f49e18e803dd267248e9e258d..3601c6d190dec3906507479a38f519935081685d 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 98fe8afd86d1a50e129f7dbdf8c2e3c8a1518dda..3f9a18456feb473e6657464b2dc062dc321ebe52 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 ab90023c9beed3dfaf9455f34b97d001ba6f0b36..3bfa3a6886ff541c29a117ee6e2e475f1ba5847a 100644 --- a/core/themes/bartik/bartik.libraries.yml +++ b/core/themes/bartik/bartik.libraries.yml @@ -41,6 +41,7 @@ global-styling: css/components/site-branding.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 0000000000000000000000000000000000000000..d0ea03b7963d75e0c0cc83ffceb0abe551ace4bd --- /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 2b3f90da95551aa46b105cde725fc8d089f36dd8..0000000000000000000000000000000000000000 --- 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 0000000000000000000000000000000000000000..fa49af700c7b49e70d4502b2564552f6ca8702c8 --- /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 0b814b57f4b056d59c9e088df9cecaf596f4f72e..764403b6400c4c94567ebe8b0a52c0ce49f772ab 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 1a44bc4d695cc74709f9096123d6c7efa92ac3d7..9727e15d08b831b1273502a232a9610b4e8ed482 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -94,18 +94,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. */ 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 b2eadaa4baa9d256fb684b67f573652e002ea6d0..0000000000000000000000000000000000000000 --- 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 %}