summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-09-26 12:40:57 +0200
committerAlex Pott2015-09-26 12:40:57 +0200
commit8bcdbf2ca6e31107bc4ac04ea50497497c320ec9 (patch)
treec08e1ae5b6779e5cb3bb7193ebb3abff18f5d6bb
parent073a3c63418785f1f426a4f9f9553f972e983e19 (diff)
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
-rw-r--r--core/includes/theme.inc19
-rw-r--r--core/misc/arrow-asc.pngbin118 -> 0 bytes
-rw-r--r--core/misc/arrow-desc.pngbin118 -> 0 bytes
-rw-r--r--core/misc/icons/004875/twistie-down.svg1
-rw-r--r--core/misc/icons/004875/twistie-up.svg1
-rw-r--r--core/misc/icons/008ee6/twistie-down.svg1
-rw-r--r--core/misc/icons/008ee6/twistie-up.svg1
-rw-r--r--core/misc/icons/ffffff/twistie-down.svg1
-rw-r--r--core/misc/icons/ffffff/twistie-up.svg1
-rw-r--r--core/modules/system/css/components/tablesort.module.css19
-rw-r--r--core/modules/system/system.libraries.yml1
-rw-r--r--core/modules/system/templates/tablesort-indicator.html.twig20
-rw-r--r--core/modules/views/src/Tests/Handler/FieldWebTest.php2
-rw-r--r--core/themes/bartik/bartik.libraries.yml1
-rw-r--r--core/themes/bartik/css/components/tablesort-indicator.css17
-rw-r--r--core/themes/classy/templates/dataset/tablesort-indicator.html.twig16
-rw-r--r--core/themes/seven/css/components/tablesort-indicator.css26
-rw-r--r--core/themes/seven/seven.libraries.yml1
-rw-r--r--core/themes/seven/seven.theme12
-rw-r--r--core/themes/seven/templates/tablesort-indicator.html.twig16
20 files changed, 87 insertions, 69 deletions
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 454414d..06ba271 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -960,25 +960,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
Binary files differ
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
Binary files differ
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 @@
+<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>
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 @@
+<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>
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 @@
+<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>
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 @@
+<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>
diff --git a/core/misc/icons/ffffff/twistie-down.svg b/core/misc/icons/ffffff/twistie-down.svg
new file mode 100644
index 0000000..83c77fd
--- /dev/null
+++ b/core/misc/icons/ffffff/twistie-down.svg
@@ -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>
diff --git a/core/misc/icons/ffffff/twistie-up.svg b/core/misc/icons/ffffff/twistie-up.svg
new file mode 100644
index 0000000..7b55028
--- /dev/null
+++ b/core/misc/icons/ffffff/twistie-up.svg
@@ -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>
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 0000000..5e0e711
--- /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 96b2f28..4a3bae6 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 059805f..3601c6d 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' -%}
- <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>
diff --git a/core/modules/views/src/Tests/Handler/FieldWebTest.php b/core/modules/views/src/Tests/Handler/FieldWebTest.php
index 98fe8af..3f9a184 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 ab90023..3bfa3a6 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 0000000..d0ea03b
--- /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 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' -%}
- <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 %}
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..fa49af7
--- /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 0b814b5..764403b 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 1a44bc4..9727e15 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -95,18 +95,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' -%}
- <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 %}