Merge "TableSorter: Avoid FOUC and preserve styling in VisualEditor"
authorjenkins-bot <jenkins-bot@gerrit.wikimedia.org>
Tue, 26 Jan 2016 13:23:45 +0000 (13:23 +0000)
committerGerrit Code Review <gerrit@wikimedia.org>
Tue, 26 Jan 2016 13:23:45 +0000 (13:23 +0000)
resources/src/jquery/jquery.tablesorter.less
resources/src/mediawiki.skinning/content.css
resources/src/mediawiki.skinning/images/sort_both_readonly.png [new file with mode: 0644]
resources/src/mediawiki.skinning/images/sort_both_readonly.svg [new file with mode: 0644]

index f4ef540..85c58d7 100644 (file)
@@ -1,19 +1,20 @@
 @import "mediawiki.mixins";
 
-/* Table Sorting */
+// Table Sorting
 
-table.jquery-tablesorter th.headerSort {
+.client-js table.jquery-tablesorter th.headerSort {
        .background-image-svg( 'images/sort_both.svg', 'images/sort_both.png' );
        cursor: pointer;
+       // Keep synchronized with mediawiki.skinning.content styles
        background-repeat: no-repeat;
        background-position: center right;
        padding-right: 21px;
 }
 
-table.jquery-tablesorter th.headerSortUp {
+.client-js table.jquery-tablesorter th.headerSortUp {
        .background-image-svg( 'images/sort_up.svg', 'images/sort_up.png' );
 }
 
-table.jquery-tablesorter th.headerSortDown {
+.client-js table.jquery-tablesorter th.headerSortDown {
        .background-image-svg( 'images/sort_down.svg', 'images/sort_down.png' );
 }
index c88d00d..a873cdf 100644 (file)
@@ -241,3 +241,16 @@ div.tright {
 div.tleft {
        margin: .5em 1.4em 1.3em 0;
 }
+
+/* Make space for the jquery.tablesorter icon and display a placeholder if JavaScript is loaded, while
+   tablesorter is still loading and setting up the tables for sorting. This avoids a flash of
+   unstyled content during page load (FOUC). The styles can also be used by WYSIWYG editors. */
+.client-js table.sortable th:not(.unsortable) {
+       background-image: url(images/sort_both_readonly.png);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/sort_both_readonly.svg);
+       /* Keep synchronised with jquery.tablesorter styles */
+       background-repeat: no-repeat;
+       background-position: center right;
+       padding-right: 21px;
+}
diff --git a/resources/src/mediawiki.skinning/images/sort_both_readonly.png b/resources/src/mediawiki.skinning/images/sort_both_readonly.png
new file mode 100644 (file)
index 0000000..bdb09e3
Binary files /dev/null and b/resources/src/mediawiki.skinning/images/sort_both_readonly.png differ
diff --git a/resources/src/mediawiki.skinning/images/sort_both_readonly.svg b/resources/src/mediawiki.skinning/images/sort_both_readonly.svg
new file mode 100644 (file)
index 0000000..3b97000
--- /dev/null
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 9" height="9" width="21">
+    <path d="M14.5 5l-4 4-4-4zM14.5 4l-4-4-4 4z" style="fill-opacity: 0.5;"/>
+</svg>