diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 62bbb58..a1628cf 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -968,25 +968,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/modules/system/css/system.module.css b/core/modules/system/css/system.module.css index 0359e4b..b9d9cbd 100644 --- a/core/modules/system/css/system.module.css +++ b/core/modules/system/css/system.module.css @@ -179,6 +179,22 @@ table.sticky-header { } /** + * Markup generated by 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); +} + +/** * Progress behavior. * * @see progress.js diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css index a74bac0..26a5515 100644 --- a/core/modules/system/css/system.theme.css +++ b/core/modules/system/css/system.theme.css @@ -11,16 +11,6 @@ } /** - * Markup generated by tablesort-indicator.html.twig. - */ -th.is-active img { - display: inline; -} -td.is-active { - background-color: #ddd; -} - -/** * Markup generated by item-list.html.twig. */ .item-list .title { diff --git a/core/modules/system/templates/tablesort-indicator.html.twig b/core/modules/system/templates/tablesort-indicator.html.twig index 059805f..234ee54 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/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..7685fbd --- /dev/null +++ b/core/themes/seven/css/components/tablesort-indicator.css @@ -0,0 +1,22 @@ +/** + * @file + * Tablesort indicator styles. + */ + .tablesort { + float: right; /* LTR */ + margin-top: 5px; + width: 10px; + height: 10px; + } +.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 a576e1d..d7e9b25 100644 --- a/core/themes/seven/seven.libraries.yml +++ b/core/themes/seven/seven.libraries.yml @@ -25,6 +25,7 @@ global-styling: css/components/panel.css: {} css/components/skip-link.css: {} css/components/tables.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 6aa8baa..42a9f04 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -110,18 +110,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 %}