RCFilters: Fix RC jumpiness due to expanded/collapsed community links

Bug: T177117
Change-Id: Ie0761613ff8c731226e26a78afa500aef9619d01

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index 6ce1968..f4135a4 100644 (file)
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -621,18 +621,21 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
                                // Check whether the widget is already collapsed or expanded
                                $collapsedState = $this->getRequest()->getCookie( 'rcfilters-toplinks-collapsed-state' );
                                // Note that an empty/unset cookie means collapsed, so check for !== 'expanded'
-                               $collapsedClass = $collapsedState !== 'expanded' ? 'mw-rcfilters-toplinks-collapsed' : '';
+                               $topLinksAttributes[ 'class' ] .= $collapsedState !== 'expanded' ?
+                                       ' mw-recentchanges-toplinks-collapsed' : '';
+
+                               $this->getOutput()->enableOOUI();
+                               $contentTitle = new OOUI\ButtonWidget( [
+                                       'classes' => [ 'mw-recentchanges-toplinks-title' ],
+                                       'label' => new OOUI\HtmlSnippet( $this->msg( 'rcfilters-other-review-tools' )->parse() ),
+                                       'framed' => false,
+                                       'indicator' => $collapsedState !== 'expanded' ? 'down' : 'up',
+                                       'flags' => [ 'progressive' ],
+                               ] );
 
-                               $contentTitle = Html::rawElement( 'div',
-                                       [ 'class' => 'mw-recentchanges-toplinks-title ' . $collapsedClass ],
-                                       $this->msg( 'rcfilters-other-review-tools' )->parse()
-                               );
                                $contentWrapper = Html::rawElement( 'div',
                                        array_merge(
-                                               [
-                                               'class' => 'mw-recentchanges-toplinks-content mw-collapsible-content ' .
-                                                       $collapsedClass
-                                               ],
+                                               [ 'class' => 'mw-recentchanges-toplinks-content mw-collapsible-content' ],
                                                $langAttributes
                                        ),
                                        $content

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index ba7a70e..7410f98 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -21,14 +21,24 @@
                min-height: @rcfilters-wl-head-min-height;
        }
 
-       body:not( .mw-rcfilters-ui-initialized ) {
-               .mw-recentchanges-toplinks-content.mw-rcfilters-toplinks-collapsed {
-                       display: none;
+       .mw-recentchanges-toplinks {
+               margin-bottom: 0.5em;
+
+               &:not( .mw-recentchanges-toplinks-collapsed ) {
+                       // Same as the legend
+                       border: 1px solid #ddd;
                }
+       }
 
-               .mw-recentchanges-toplinks-title.mw-rcfilters-toplinks-collapsed {
-                       // Hide, but keep the placement so we don't jump
-                       visibility: hidden;
+       body:not( .mw-rcfilters-ui-initialized ) {
+               .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
+                       // Similar to the watchlist-details hack, we are going to make this float left
+                       // while loading to prevent jumpiness in the min-height calculation
+                       float: left;
+
+                       .mw-recentchanges-toplinks-content {
+                               display: none;
+                       }
                }
 
                .rcfilters-head {

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
index aca3ea6..6f3cdfe 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
@@ -7,10 +7,6 @@
                &-top {
                        display: block;
                        width: 100%;
-
-                       .mw-recentchanges-toplinks {
-                               margin-bottom: 0.5em;
-                       }
                }
        }
 
@@ -20,25 +16,8 @@
        }
 
        .mw-recentchanges-toplinks {
-               padding: 0 0.5em;
-
                .oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
                        padding: 0 2.5em 0 0.5em;
                }
-
-               &-title,
-               .mw-collapsible-text {
-                       // Same as the legend
-                       font-size: 0.85em;
-               }
-
-               &:not( .mw-collapsed ) {
-                       // Same as the legend
-                       border: 1px solid #ddd;
-               }
-
-               body:not( .mw-rcfilters-ui-initialized ) & {
-                       display: none;
-               }
        }
 }

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
index 95a4e59..ca76046 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
@@ -62,7 +62,6 @@
                this.$element
                        .addClass( 'mw-rcfilters-ui-rcTopSectionWidget' )
                        .append(
-                               this.$top,
                                $( '<div>' )
                                        .addClass( 'mw-rcfilters-ui-table' )
                                        .append(
@@ -83,6 +82,9 @@
                                        )
                        );
 
+               // Hack: For jumpiness reasons, this should be a sibling of -head
+               $( '.rcfilters-head' ).before( this.$top );
+
                // Initialize top links position
                widget.switchTopLinks( topLinksCookieValue );
        };