diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 454414d373f..06ba2710037 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 2edbb17d776..00000000000 Binary files a/core/misc/arrow-asc.png and /dev/null differ diff --git a/core/misc/arrow-desc.png b/core/misc/arrow-desc.png deleted file mode 100644 index a3ccabc556e..00000000000 Binary files a/core/misc/arrow-desc.png and /dev/null differ diff --git a/core/misc/icons/004875/twistie-down.svg b/core/misc/icons/004875/twistie-down.svg new file mode 100644 index 00000000000..6cd6a786bbb --- /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 00000000000..bf3b80ed01e --- /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 00000000000..23f6d9ac1b8 --- /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 00000000000..dc9dd8e9f7d --- /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 00000000000..83c77fd7bb6 --- /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 00000000000..7b550286239 --- /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 00000000000..5e0e711e52f --- /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 96b2f280995..4a3bae6e4ca 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 059805f1d41..3601c6d190d 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 98fe8afd86d..3f9a18456fe 100644 --- a/core/modules/views/src/Tests/Handler/FieldWebTest.php +++ b/core/modules/views/src/Tests/Handler/FieldWebTest.php @@ -87,7 +87,7 @@ class FieldWebTest extends HandlerTestBase { $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 ab90023c9be..3bfa3a6886f 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 00000000000..d0ea03b7963 --- /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 2b3f90da955..00000000000 --- 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 00000000000..fa49af700c7 --- /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 0b814b57f4b..764403b6400 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 1a44bc4d695..9727e15d08b 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 b2eadaa4baa..00000000000 --- 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 %}