Commit 8bcdbf2c authored by alexpott's avatar alexpott

Issue #2405057 by nlisgo, Manjit.Singh, ctraltdel, madhavvyas, avitslv,...

Issue #2405057 by nlisgo, Manjit.Singh, ctraltdel, madhavvyas, avitslv, LewisNyman, emma.maria, joelpittet, dernetzjaeger, wmortada, karolus, cilefen, Noe_, davidhernandez, idebr: Replace arrow-asc and arrow-desc images with Libricons and implement using CSS
parent 073a3c63
......@@ -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.
*
......
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#004875" d="M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#004875" d="M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#008ee6" d="M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#008ee6" d="M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#FFFFFF" d="M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#FFFFFF" d="M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z"/></svg>
/**
* @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);
}
......@@ -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:
......
......@@ -11,8 +11,18 @@
* @ingroup themeable
*/
#}
{% if style == 'asc' -%}
<img src="{{ arrow_asc }}" width="13" height="13" alt="{{ 'sort ascending'|t }}" title="{{ 'sort ascending'|t }}" />
{% else -%}
<img src="{{ arrow_desc }}" width="13" height="13" alt="{{ 'sort descending'|t }}" title="{{ 'sort descending'|t }}" />
{% endif %}
{%
set classes = [
'tablesort',
'tablesort--' ~ style,
]
%}
<span{{ attributes.addClass(classes) }}>
<span class="visually-hidden">
{% if style == 'asc' -%}
{{ 'Sort ascending'|t }}
{% else -%}
{{ 'Sort descending'|t }}
{% endif %}
</span>
</span>
......@@ -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));
......
......@@ -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: {}
......
/**
* @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);
}
{#
/**
* @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' -%}
<img src="{{ arrow_asc }}" width="13" height="13" alt="{{ 'sort ascending'|t }}" title="{{ 'sort ascending'|t }}" />
{% else -%}
<img src="{{ arrow_desc }}" width="13" height="13" alt="{{ 'sort descending'|t }}" title="{{ 'sort descending'|t }}" />
{% endif %}
/**
* @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);
}
......@@ -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: {}
......
......@@ -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.
*/
......
{#
/**
* @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' -%}
<img src="{{ arrow_asc }}" width="9" height="5" alt="{{ 'Sort ascending'|t }}" title="{{ 'Sort ascending'|t }}" />
{% else -%}
<img src="{{ arrow_desc }}" width="9" height="5" alt="{{ 'Sort descending'|t }}" title="{{ 'Sort descending'|t }}" />
{% endif %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment