RCFilters: Make top links in RecentChanges expand to full-width

Bug: T174617
Change-Id: Iff4c563b894eaaf713d3818a97928d0342b1ca23

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 38f6f28..9d1cc23 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
@@ -1,6 +1,17 @@
 .mw-rcfilters-ui-rcTopSectionWidget {
        &-topLinks {
-               width: 100%;
+               &-table {
+                       width: 100%;
+               }
+
+               &-top {
+                       display: block;
+                       width: 100%;
+
+                       .mw-recentchanges-toplinks {
+                               margin-bottom: 0.5em;
+                       }
+               }
        }
 
        &-savedLinks {

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
index 0bee2f1..f7081af 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
@@ -2,6 +2,10 @@
        &-table {
                display: table;
                width: 100%;
+
+               &-placeholder {
+                       width: 100%;
+               }
        }
 
        &-row {

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 706c888..f0e1241 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
@@ -12,15 +12,19 @@
        mw.rcfilters.ui.RcTopSectionWidget = function MwRcfiltersUiRcTopSectionWidget(
                savedLinksListWidget, $topLinks, config
        ) {
-               var topLinksCookieName = 'rcfilters-toplinks-collapsed-state',
+               var toplinksTitle,
+                       topLinksCookieName = 'rcfilters-toplinks-collapsed-state',
                        topLinksCookie = mw.cookie.get( topLinksCookieName ),
                        topLinksCookieValue = topLinksCookie || 'collapsed',
-                       toplinksTitle;
+                       widget = this;
+
                config = config || {};
 
                // Parent
                mw.rcfilters.ui.RcTopSectionWidget.parent.call( this, config );
 
+               this.$topLinks = $topLinks;
+
                toplinksTitle = new OO.ui.ButtonWidget( {
                        framed: false,
                        indicator: topLinksCookieValue === 'collapsed' ? 'down' : 'up',
@@ -28,7 +32,7 @@
                        label: $( '<span>' ).append( mw.message( 'rcfilters-other-review-tools' ).parse() ).contents()
                } );
 
-               $topLinks
+               this.$topLinks
                        .addClass( 'mw-rcfilters-ui-ready' )
                        .makeCollapsible( {
                                collapsed: topLinksCookieValue === 'collapsed',
@@ -37,38 +41,70 @@
                        .on( 'beforeExpand.mw-collapsible', function () {
                                mw.cookie.set( topLinksCookieName, 'expanded' );
                                toplinksTitle.setIndicator( 'up' );
+                               widget.switchTopLinks( 'expanded' );
                        } )
                        .on( 'beforeCollapse.mw-collapsible', function () {
                                mw.cookie.set( topLinksCookieName, 'collapsed' );
                                toplinksTitle.setIndicator( 'down' );
+                               widget.switchTopLinks( 'collapsed' );
                        } );
 
-               $topLinks.find( '.mw-recentchanges-toplinks-title' ).replaceWith( toplinksTitle.$element );
+               this.$topLinks.find( '.mw-recentchanges-toplinks-title' ).replaceWith( toplinksTitle.$element );
+
+               // Create two positions for the toplinks to toggle between
+               // in the table (first cell) or up above it
+               this.$top = $( '<div>' )
+                       .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks-top' );
+               this.$tableTopLinks = $( '<div>' )
+                       .addClass( 'mw-rcfilters-ui-cell' )
+                       .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks-table' );
 
+               // Initialize
                this.$element
                        .addClass( 'mw-rcfilters-ui-rcTopSectionWidget' )
-                       .addClass( 'mw-rcfilters-ui-table' )
                        .append(
+                               this.$top,
                                $( '<div>' )
-                                       .addClass( 'mw-rcfilters-ui-row' )
+                                       .addClass( 'mw-rcfilters-ui-table' )
                                        .append(
                                                $( '<div>' )
-                                                       .addClass( 'mw-rcfilters-ui-cell' )
-                                                       .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks' )
-                                                       .append( $topLinks )
-                                       )
-                                       .append(
-                                               !mw.user.isAnon() ?
-                                                       $( '<div>' )
-                                                               .addClass( 'mw-rcfilters-ui-cell' )
-                                                               .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-savedLinks' )
-                                                               .append( savedLinksListWidget.$element ) :
-                                                       null
+                                                       .addClass( 'mw-rcfilters-ui-row' )
+                                                       .append(
+                                                               this.$tableTopLinks,
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-table-placeholder' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell' ),
+                                                               !mw.user.isAnon() ?
+                                                                       $( '<div>' )
+                                                                               .addClass( 'mw-rcfilters-ui-cell' )
+                                                                               .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-savedLinks' )
+                                                                               .append( savedLinksListWidget.$element ) :
+                                                                       null
+                                                       )
                                        )
                        );
+
+               // Initialize top links position
+               widget.switchTopLinks( topLinksCookieValue );
        };
 
        /* Initialization */
 
        OO.inheritClass( mw.rcfilters.ui.RcTopSectionWidget, OO.ui.Widget );
+
+       /**
+        * Switch the top links widget from inside the table (when collapsed)
+        * to the 'top' (when open)
+        *
+        * @param {string} [state] The state of the top links widget: 'expanded' or 'collapsed'
+        */
+       mw.rcfilters.ui.RcTopSectionWidget.prototype.switchTopLinks = function ( state ) {
+               state = state || 'expanded';
+
+               if ( state === 'expanded' ) {
+                       this.$top.append( this.$topLinks );
+               } else {
+                       this.$tableTopLinks.append( this.$topLinks );
+               }
+       };
 }( mediaWiki ) );