From a0c00f005388c87461cb8f398accbe3967791df5 Mon Sep 17 00:00:00 2001 From: Roan Kattouw Date: Wed, 20 Sep 2017 17:11:22 -0700 Subject: [PATCH] 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 --- .../styles/mw.rcfilters.less | 23 +++++++++++++++++-- .../styles/mw.rcfilters.mixins.less | 5 ++++ ...rcfilters.ui.ChangesListWrapperWidget.less | 13 ----------- ...cfilters.ui.WatchlistTopSectionWidget.less | 2 +- ...w.rcfilters.ui.ChangesListWrapperWidget.js | 11 +++++---- ....rcfilters.ui.WatchlistTopSectionWidget.js | 1 + 6 files changed, 34 insertions(+), 21 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less index dd4f9d45d5..80aff74a4f 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; @@ -34,6 +41,12 @@ // message of our own display: none; } + + // Reserve space for the highlight circles + ul, + table.mw-enhanced-rc { + .result-circle-margin(); + } } body.mw-rcfilters-ui-loading .mw-changeslist { @@ -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 6c8ebac658..6c44cc435b 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 5ef60e09d9..555631be14 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 5e1e11845d..6fa3aa2dec 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 279e5be0e3..ea32e3643e 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( $( '
' ) .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 7d78565c5a..b9d9bdfd94 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 = $( '
' ) .addClass( 'mw-rcfilters-ui-table' ) + .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable' ) .append( $( '
' ) .addClass( 'mw-rcfilters-ui-row' ) -- 2.20.1