jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/379447 )
Change subject: RCFilters: Make the interface not jump around while loading ...................................................................... RCFilters: Make the interface not jump around while loading * Move the "show new changes" widget into the .rcfilters-head container ** It doesn't conceptually belong here, but this way the min-height trick can capture it * Increase the min-height to account for "show new changes" and drift * Set a different (higher) min-height on the watchlist * Adjust the loading spinner position to account for "show new changes" having moved * Don't apply a margin-top to the first table in WatchlistTopSectionWidget, only the second one * Make .watchlistDetails float while loading ** This is because it starts outside rcfilters-head but is then moved into it. Floating it makes it not take any space, which makes the min-height math a lot easier (and tolerant to taller .watchlistDetails divs like on enwiki) * Don't remove the margin and padding from the first h4, this causes jumpiness ** This does increase whitespace slightly, if we want to fix that we could set a negative margin-bottom on rcfilters-head instead * Move the margin-left rules making space for the highlights into a mixin, and apply it before initialization instead of after Bug: T176300 Change-Id: I353deab90cd944209d7540559c6b41decad20e7d --- M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js 6 files changed, 34 insertions(+), 21 deletions(-) Approvals: Sbisson: Looks good to me, approved jenkins-bot: Verified diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less index dd4f9d4..80aff74 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less @@ -2,7 +2,8 @@ @import 'mw.rcfilters.mixins'; @rcfilters-spinner-width: 70px; -@rcfilters-head-min-height: 200px; +@rcfilters-head-min-height: 250px; +@rcfilters-wl-head-min-height: 320px; // Corrections for the standard special page .client-js { @@ -10,9 +11,15 @@ border: 0; } + // Reserve space for the UI while it loads .rcfilters-head { min-height: @rcfilters-head-min-height; } + // On the watchlist, reserve a bit more + .mw-special-Watchlist .rcfilters-head { + min-height: @rcfilters-wl-head-min-height; + } + body:not( .mw-rcfilters-ui-initialized ) .rcfilters-head { opacity: 0.5; pointer-events: none; @@ -33,6 +40,12 @@ // since we replace it anyways with a specific // message of our own display: none; + } + + // Reserve space for the highlight circles + ul, + table.mw-enhanced-rc { + .result-circle-margin(); } } @@ -79,13 +92,19 @@ body.mw-rcfilters-ui-loading .rcfilters-spinner { display: block; // When loading new results, display the spinner on top of the results area - margin-top: 4em; + margin-top: 2em; } #contentSub, form#mw-watchlist-resetbutton { display: none; } + + // Make the watchlist-details message display while loading, but make it not take up any + // space. This makes the min-height trick work better. + .watchlistDetails { + float: left; + } } .mw-rcfilters-staticfilters-selected { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less index 6c8ebac..6c44cc4 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less @@ -43,6 +43,11 @@ } } +// A mixin for changes list containers. Applies enough margin-left to fit the 5 highlight circles. +.result-circle-margin() { + margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )'; +} + // A mixin just for changesListWrapperWidget page, to output the scope of the widget // so it is before the rest of the rule; we need the li& to be in // between the wrapper scope and the color-cX class, which doesn't diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less index 5ef60e0..555631b 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less @@ -41,17 +41,6 @@ background-color: #dee0e3; } - h4:first-of-type { - margin-top: 0; - padding-top: 0; - } - - ul { - // Each li's margin-left should be the width of the highlights - // element + the margin - margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )'; - } - &-highlighted { ul { list-style: none; @@ -69,8 +58,6 @@ // Correction for Enhanced RC // This is outside the scope of the 'highlights' wrapper table.mw-enhanced-rc { - margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )'; - td:last-child { width: 100%; } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less index 5e1e118..6fa3aa2 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less @@ -16,7 +16,7 @@ float: right; } - .mw-rcfilters-ui-table { + &-savedLinksTable { margin-top: 1em; } diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js index 279e5be..ea32e36 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js @@ -48,7 +48,7 @@ // We handle our own display/hide of the empty results message .removeClass( 'mw-changeslist-empty' ); - this.setupNewChangesButtonContainer( this.$element ); + this.setupNewChangesButtonContainer(); }; /* Initialization */ @@ -246,10 +246,8 @@ /** * Setup the container for the 'new changes' button. - * - * @param {jQuery} $content */ - mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupNewChangesButtonContainer = function ( $content ) { + mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupNewChangesButtonContainer = function () { this.showNewChangesLink = new OO.ui.ButtonWidget( { framed: false, label: mw.message( 'rcfilters-show-new-changes' ).text(), @@ -258,7 +256,10 @@ this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } ); this.showNewChangesLink.toggle( false ); - $content.before( + // HACK: Add the -newChanges div inside rcfilters-head, rather than right above us + // Visually it's the same place, but by putting it inside rcfilters-head we are + // able to use the min-height rule to prevent the page from jumping when this is added. + this.$element.parent().find( '.rcfilters-head' ).append( $( '<div>' ) .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-newChanges' ) .append( this.showNewChangesLink.$element ) diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js index 7d78565..b9d9bdf 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js @@ -52,6 +52,7 @@ $bottomTable = $( '<div>' ) .addClass( 'mw-rcfilters-ui-table' ) + .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable' ) .append( $( '<div>' ) .addClass( 'mw-rcfilters-ui-row' ) -- To view, visit https://gerrit.wikimedia.org/r/379447 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I353deab90cd944209d7540559c6b41decad20e7d Gerrit-PatchSet: 3 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Catrope <r...@wikimedia.org> Gerrit-Reviewer: Catrope <r...@wikimedia.org> Gerrit-Reviewer: Jack Phoenix <j...@countervandalism.net> Gerrit-Reviewer: Mooeypoo <mor...@gmail.com> Gerrit-Reviewer: Sbisson <sbis...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits