Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

8.0.x
Alex Pott 2015-09-26 12:40:57 +02:00
parent 073a3c6341
commit 8bcdbf2ca6
20 changed files with 87 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
core/includes/theme.inc
View File

@ -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.
*

BIN
core/misc/arrow-asc.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 118 B

BIN
core/misc/arrow-desc.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 118 B

1
core/misc/icons/004875/twistie-down.svg Normal file
View File

@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

1
core/misc/icons/004875/twistie-up.svg Normal file
View File

@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

1
core/misc/icons/008ee6/twistie-down.svg Normal file
View File

@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

1
core/misc/icons/008ee6/twistie-up.svg Normal file
View File

@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

1
core/misc/icons/ffffff/twistie-down.svg Normal file
View File

@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

1
core/misc/icons/ffffff/twistie-up.svg Normal file
View File

@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

19
core/modules/system/css/components/tablesort.module.css Normal file
View File

@ -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);
}

1
core/modules/system/system.libraries.yml
View File

@ -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:

20
core/modules/system/templates/tablesort-indicator.html.twig
View File

@ -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>

2
core/modules/views/src/Tests/Handler/FieldWebTest.php
View File

@ -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));

1
core/themes/bartik/bartik.libraries.yml
View File

@ -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: {}

17
core/themes/bartik/css/components/tablesort-indicator.css Normal file
View File

@ -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);
}

16
core/themes/classy/templates/dataset/tablesort-indicator.html.twig
View File

@ -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' -%}
<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 %}

26
core/themes/seven/css/components/tablesort-indicator.css Normal file
View File

@ -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);
}

1
core/themes/seven/seven.libraries.yml
View File

@ -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: {}

12
core/themes/seven/seven.theme
View File

@ -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.
*/

16
core/themes/seven/templates/tablesort-indicator.html.twig
View File

@ -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' -%}
<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 %}