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 <esand...@wikimedia.org> Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Edokter <er...@darcoury.nl> Gerrit-Reviewer: Esanders <esand...@wikimedia.org> Gerrit-Reviewer: Jack Phoenix <j...@countervandalism.net> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Ori.livneh <o...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits