From: Moriel Schottlender Date: Fri, 28 Jul 2017 07:53:57 +0000 (-0700) Subject: RCFilters: Make 'related links' collapsible X-Git-Tag: 1.31.0-rc.0~2540^2 X-Git-Url: https://git.cyclocoop.org/%242?a=commitdiff_plain;h=b71ad287767c6d39960acbfc8b0dce31267dcc1a;p=lhc%2Fweb%2Fwiklou.git RCFilters: Make 'related links' collapsible Bug: T166919 Change-Id: I89d69c6614f641ac92143f0b1a718145e9cd61bd --- diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php index f0c2bc45a4..f9052ad765 100644 --- a/includes/specials/SpecialRecentchanges.php +++ b/includes/specials/SpecialRecentchanges.php @@ -718,17 +718,35 @@ class SpecialRecentChanges extends ChangesListSpecialPage { $message = $this->msg( 'recentchangestext' )->inContentLanguage(); if ( !$message->isDisabled() ) { - $this->getOutput()->addWikiText( - Html::rawElement( 'div', - [ - 'class' => 'mw-recentchanges-toplinks', - 'lang' => $wgContLang->getHtmlCode(), - 'dir' => $wgContLang->getDir() - ], - "\n" . $message->plain() . "\n" - ), - /* $lineStart */ true, - /* $interface */ false + $content = $message->parse(); + + $langAttributes = [ + 'lang' => $wgContLang->getHtmlCode(), + 'dir' => $wgContLang->getDir(), + ]; + + $topLinksAttributes = [ 'class' => 'mw-recentchanges-toplinks' ]; + + if ( $this->getUser()->getOption( 'rcenhancedfilters' ) ) { + $contentTitle = Html::rawElement( 'div', + [ 'class' => 'mw-recentchanges-toplinks-title' ], + $this->msg( 'rcfilters-other-review-tools' )->parse() + ); + $contentWrapper = Html::rawElement( 'div', + array_merge( [ 'class' => 'mw-collapsible-content' ], $langAttributes ), + $content + ); + $content = $contentTitle . $contentWrapper; + } else { + // Language direction should be on the top div only + // if the title is not there. If it is there, it's + // interface direction, and the language/dir attributes + // should be on the content itself + $topLinksAttributes = array_merge( $topLinksAttributes, $langAttributes ); + } + + $this->getOutput()->addHTML( + Html::rawElement( 'div', $topLinksAttributes, $content ) ); } } diff --git a/languages/i18n/en.json b/languages/i18n/en.json index 2f09573075..b51738ec7e 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -1350,6 +1350,7 @@ "recentchanges-legend-plusminus": "(±123)", "recentchanges-submit": "Show", "rcfilters-legend-heading": "List of abbreviations:", + "rcfilters-other-review-tools": "Other review tools:", "rcfilters-activefilters": "Active filters", "rcfilters-advancedfilters": "Advanced filters", "rcfilters-limit-title": "Changes to show", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index c0d6ad5ba6..66c3c4d3f4 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -1540,6 +1540,7 @@ "recentchanges-legend-plusminus": "{{optional}}\nA plus/minus sign with a number for the legend.", "recentchanges-submit": "Label for submit button in [[Special:RecentChanges]]\n{{Identical|Show}}", "rcfilters-legend-heading": "Used as a heading for legend box on [[Special:RecentChanges]] and [[Special:Watchlist]] when RCFilters are enabled.", + "rcfilters-other-review-tools": "Used as a heading for the community collection of other links on [[Special:RecentChanges]] when RCFilters are enabled.", "rcfilters-activefilters": "Title for the filters selection showing the active filters.", "rcfilters-advancedfilters": "Title for the buttons allowing the user to switch to the various advanced filters views.", "rcfilters-limit-title": "Title for the options to change the number of results shown.", diff --git a/resources/Resources.php b/resources/Resources.php index 64ecc96c77..1db5172c24 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1880,6 +1880,7 @@ return [ 'rcfilters-view-tags-tooltip', 'rcfilters-view-return-to-default-tooltip', 'rcfilters-liveupdates-button', + 'rcfilters-other-review-tools', 'blanknamespace', 'namespaces', 'invert', @@ -1888,6 +1889,7 @@ return [ ], 'dependencies' => [ 'oojs-ui', + 'jquery.makeCollapsible', 'mediawiki.language', 'mediawiki.user', 'mediawiki.rcfilters.filters.dm', diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js index 04a3fdaec7..12a83cda09 100644 --- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js +++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js @@ -8,7 +8,11 @@ * @private */ init: function () { - var filtersModel = new mw.rcfilters.dm.FiltersViewModel(), + var toplinksTitle, + topLinksCookieName = 'rcfilters-toplinks-collapsed-state', + topLinksCookie = mw.cookie.get( topLinksCookieName ), + topLinksCookieValue = topLinksCookie || 'collapsed', + filtersModel = new mw.rcfilters.dm.FiltersViewModel(), changesListModel = new mw.rcfilters.dm.ChangesListViewModel(), savedQueriesModel = new mw.rcfilters.dm.SavedQueriesModel(), controller = new mw.rcfilters.Controller( filtersModel, changesListModel, savedQueriesModel ), @@ -43,6 +47,31 @@ ); controller.replaceUrl(); + + toplinksTitle = new OO.ui.ButtonWidget( { + framed: false, + indicator: topLinksCookieValue === 'collapsed' ? 'down' : 'up', + flags: [ 'progressive' ], + label: $( '' ).append( mw.message( 'rcfilters-other-review-tools' ).parse() ).contents() + } ); + $( '.mw-recentchanges-toplinks-title' ).replaceWith( toplinksTitle.$element ); + // Move the top links to a designated area so it's near the + // 'saved filters' button and make it collapsible + $( '.mw-recentchanges-toplinks' ) + .addClass( 'mw-rcfilters-ui-ready' ) + .makeCollapsible( { + collapsed: topLinksCookieValue === 'collapsed', + $customTogglers: toplinksTitle.$element + } ) + .on( 'beforeExpand.mw-collapsible', function () { + mw.cookie.set( topLinksCookieName, 'expanded' ); + toplinksTitle.setIndicator( 'up' ); + } ) + .on( 'beforeCollapse.mw-collapsible', function () { + mw.cookie.set( topLinksCookieName, 'collapsed' ); + toplinksTitle.setIndicator( 'down' ); + } ) + .appendTo( '.mw-rcfilters-ui-filterWrapperWidget-top-placeholder' ); } }; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less index 9f3b809120..0d12b811f3 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less @@ -9,8 +9,28 @@ } } + .mw-recentchanges-toplinks { + padding: 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; + } + + &:not( .mw-rcfilters-ui-ready ) { + display: none; + } + } + .rcfilters-head { min-height: 310px; + margin-top: 1em; &:not( .mw-rcfilters-ui-ready ) { opacity: 0.5; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less index df4592c2c5..87d09e0dd9 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less @@ -8,6 +8,17 @@ margin-top: 1em; } + &-top { + &-placeholder { + width: 100%; + } + + &-savedLinks { + padding-left: 1em; + vertical-align: bottom; + } + } + &-bottom { margin-top: 1em; diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js index 9b4ce7fa47..a6b363d168 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js @@ -14,7 +14,7 @@ * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups */ mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget( controller, model, savedQueriesModel, config ) { - var $bottom; + var $top, $topRow, $bottom; config = config || {}; // Parent @@ -55,8 +55,24 @@ ); // Initialize - this.$element - .addClass( 'mw-rcfilters-ui-filterWrapperWidget' ); + $topRow = $( '
' ) + .addClass( 'mw-rcfilters-ui-row' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top-placeholder' ) + ); + $top = $( '
' ) + .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top' ) + .addClass( 'mw-rcfilters-ui-table' ) + .append( $topRow ); + + $bottom = $( '
' ) + .addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' ) + .append( + this.numChangesWidget.$element, + this.dateWidget.$element + ); if ( mw.config.get( 'wgStructuredChangeFiltersEnableSaving' ) ) { this.savedLinksListWidget = new mw.rcfilters.ui.SavedLinksListWidget( @@ -65,18 +81,14 @@ { $overlay: this.$overlay } ); - this.$element.append( - this.savedLinksListWidget.$element + $topRow.append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top-savedLinks' ) + .append( this.savedLinksListWidget.$element ) ); } - $bottom = $( '
' ) - .addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' ) - .append( - this.numChangesWidget.$element, - this.dateWidget.$element - ); - if ( mw.config.get( 'wgStructuredChangeFiltersEnableLiveUpdate' ) || // Allow users to enable live update with ?liveupdate=1 @@ -85,10 +97,13 @@ $bottom.append( this.liveUpdateButton.$element ); } - this.$element.append( - this.filterTagWidget.$element, - $bottom - ); + this.$element + .addClass( 'mw-rcfilters-ui-filterWrapperWidget' ) + .append( + $top, + this.filterTagWidget.$element, + $bottom + ); }; /* Initialization */