jenkins-bot has submitted this change and it was merged.
Change subject: TableSorter: Avoid FOUC and preserve styling in VisualEditor
......................................................................
TableSorter: Avoid FOUC and preserve styling in VisualEditor
Always make space for the icon and display a placeholder
if JavaScript is loaded, even if we haven't set up table
sorting for a given table yet.
The table will not be sortable in VE mode but for layout
preview we should show some disabled sort icons.
Bug: T95189
Change-Id: Ieb21cf79ae68e388e824923cb6e2d7d552a4afc6
---
M resources/src/jquery/jquery.tablesorter.less
M resources/src/mediawiki.skinning/content.css
A resources/src/mediawiki.skinning/images/sort_both_readonly.png
A resources/src/mediawiki.skinning/images/sort_both_readonly.svg
4 files changed, 22 insertions(+), 4 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, but someone else must approve
Esanders: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/src/jquery/jquery.tablesorter.less
b/resources/src/jquery/jquery.tablesorter.less
index f4ef540..85c58d7 100644
--- a/resources/src/jquery/jquery.tablesorter.less
+++ b/resources/src/jquery/jquery.tablesorter.less
@@ -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' );
}
diff --git a/resources/src/mediawiki.skinning/content.css
b/resources/src/mediawiki.skinning/content.css
index c88d00d..a873cdf 100644
--- a/resources/src/mediawiki.skinning/content.css
+++ b/resources/src/mediawiki.skinning/content.css
@@ -241,3 +241,16 @@
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
index 0000000..bdb09e3
--- /dev/null
+++ b/resources/src/mediawiki.skinning/images/sort_both_readonly.png
Binary files 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
index 0000000..3b97000
--- /dev/null
+++ b/resources/src/mediawiki.skinning/images/sort_both_readonly.svg
@@ -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>
--
To view, visit https://gerrit.wikimedia.org/r/266260
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ieb21cf79ae68e388e824923cb6e2d7d552a4afc6
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Edokter <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Ori.livneh <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
