'wgStructuredChangeFiltersSavedQueriesPreferenceName',
'rcfilters-wl-saved-queries'
);
+ $output->addJsConfigVars(
+ 'wgStructuredChangeFiltersEditWatchlistUrl',
+ SpecialPage::getTitleFor( 'EditWatchlist' )->getLocalURL()
+ );
}
}
$showUpdatedMarker = $this->getConfig()->get( 'ShowUpdatedMarker' );
// Show watchlist header
- $form .= "<p>";
+ $watchlistHeader = '';
if ( $numItems == 0 ) {
- $form .= $this->msg( 'nowatchlist' )->parse() . "\n";
+ $watchlistHeader = $this->msg( 'nowatchlist' )->parse();
} else {
- $form .= $this->msg( 'watchlist-details' )->numParams( $numItems )->parse() . "\n";
+ $watchlistHeader .= $this->msg( 'watchlist-details' )->numParams( $numItems )->parse() . "\n";
if ( $this->getConfig()->get( 'EnotifWatchlist' )
&& $user->getOption( 'enotifwatchlistpages' )
) {
- $form .= $this->msg( 'wlheader-enotif' )->parse() . "\n";
+ $watchlistHeader .= $this->msg( 'wlheader-enotif' )->parse() . "\n";
}
if ( $showUpdatedMarker ) {
- $form .= $this->msg( 'wlheader-showupdated' )->parse() . "\n";
+ $watchlistHeader .= $this->msg( 'wlheader-showupdated' )->parse() . "\n";
}
}
- $form .= "</p>";
+ $form .= Html::rawElement(
+ 'p',
+ [ 'class' => 'watchlistDetails' ],
+ $watchlistHeader
+ );
if ( $numItems > 0 && $showUpdatedMarker ) {
$form .= Xml::openElement( 'form', [ 'method' => 'post',
"rcfilters-liveupdates-button-title-on": "Turn off live updates",
"rcfilters-liveupdates-button-title-off": "Display new changes as they happen",
"rcfilters-watchlist-markSeen-button": "Mark all changes as seen",
+ "rcfilters-watchlist-editWatchlist-button": "Edit your list of watched pages",
"rcnotefrom": "Below {{PLURAL:$5|is the change|are the changes}} since <strong>$3, $4</strong> (up to <strong>$1</strong> shown).",
"rclistfromreset": "Reset date selection",
"rclistfrom": "Show new changes starting from $2, $3",
"rcfilters-liveupdates-button-title-on": "Title for the button to enable or disable live updates on [[Special:RecentChanges]] when the feature is ON.",
"rcfilters-liveupdates-button-title-off": "Title for the button to enable or disable live updates on [[Special:RecentChanges]] when the feature is OFF.",
"rcfilters-watchlist-markSeen-button": "Label for the button to mark all changes as seen on [[Special:Watchlist]] when using the structured filters interface.",
+ "rcfilters-watchlist-editWatchlist-button": "Label for the button to edit the watched pages on [[Special:Watchlist]] when using the structured filters interface.",
"rcnotefrom": "This message is displayed at [[Special:RecentChanges]] when viewing recentchanges from some specific time.\n\nThe corresponding message is {{msg-mw|Rclistfrom}}.\n\nParameters:\n* $1 - the maximum number of changes that are displayed\n* $2 - (Optional) a date and time\n* $3 - a date\n* $4 - a time\n* $5 - Number of changes are displayed, for use with PLURAL",
"rclistfromreset": "Used on [[Special:RecentChanges]] to reset a selection of a certain date range.",
"rclistfrom": "Used on [[Special:RecentChanges]]. Parameters:\n* $1 - (Currently not use) date and time. The date and the time adds to the rclistfrom description.\n* $2 - time. The time adds to the rclistfrom link description (with split of date and time).\n* $3 - date. The date adds to the rclistfrom link description (with split of date and time).\n\nThe corresponding message is {{msg-mw|Rcnotefrom}}.",
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.HighlightColorPickerWidget.js',
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.LiveUpdateButtonWidget.js',
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MarkSeenButtonWidget.js',
+ 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js',
+ 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js',
'resources/src/mediawiki.rcfilters/mw.rcfilters.HighlightColors.js',
'resources/src/mediawiki.rcfilters/mw.rcfilters.init.js',
],
'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less',
'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less',
'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less',
+ 'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less',
+ 'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less',
],
'skinStyles' => [
'monobook' => [
'rcfilters-liveupdates-button-title-on',
'rcfilters-liveupdates-button-title-off',
'rcfilters-watchlist-markSeen-button',
+ 'rcfilters-watchlist-editWatchlist-button',
'rcfilters-other-review-tools',
'blanknamespace',
'namespaces',
* @private
*/
init: function () {
- var toplinksTitle,
- topLinksCookieName = 'rcfilters-toplinks-collapsed-state',
- topLinksCookie = mw.cookie.get( topLinksCookieName ),
- topLinksCookieValue = topLinksCookie || 'collapsed',
+ var $topLinks,
+ rcTopSection,
+ $watchlistDetails,
+ wlTopSection,
savedQueriesPreferenceName = mw.config.get( 'wgStructuredChangeFiltersSavedQueriesPreferenceName' ),
filtersModel = new mw.rcfilters.dm.FiltersViewModel(),
changesListModel = new mw.rcfilters.dm.ChangesListViewModel(),
.addClass( 'mw-rcfilters-ui-overlay' ),
filtersWidget = new mw.rcfilters.ui.FilterWrapperWidget(
controller, filtersModel, savedQueriesModel, changesListModel, { $overlay: $overlay } ),
- markSeenButton,
+ savedLinksListWidget = new mw.rcfilters.ui.SavedLinksListWidget(
+ controller, savedQueriesModel, { $overlay: $overlay }
+ ),
currentPage = mw.config.get( 'wgCanonicalNamespace' ) +
':' +
mw.config.get( 'wgCanonicalSpecialPageName' );
controller.replaceUrl();
if ( currentPage === 'Special:Recentchanges' ) {
- toplinksTitle = new OO.ui.ButtonWidget( {
- framed: false,
- indicator: topLinksCookieValue === 'collapsed' ? 'down' : 'up',
- flags: [ 'progressive' ],
- label: $( '<span>' ).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' );
+ $topLinks = $( '.mw-recentchanges-toplinks' ).detach();
+
+ rcTopSection = new mw.rcfilters.ui.RcTopSectionWidget(
+ savedLinksListWidget, $topLinks
+ );
+ filtersWidget.setTopSection( rcTopSection.$element );
} // end Special:RC
if ( currentPage === 'Special:Watchlist' ) {
- markSeenButton = new mw.rcfilters.ui.MarkSeenButtonWidget( controller, changesListModel );
- $( 'form#mw-watchlist-resetbutton' ).detach();
- filtersWidget.prependToTopRow( markSeenButton );
+ $( '#contentSub, form#mw-watchlist-resetbutton' ).detach();
+ $watchlistDetails = $( '.watchlistDetails' ).detach().contents();
+
+ wlTopSection = new mw.rcfilters.ui.WatchlistTopSectionWidget(
+ controller, changesListModel, savedLinksListWidget, $watchlistDetails
+ );
+ filtersWidget.setTopSection( wlTopSection.$element );
} // end Special:WL
}
};
border: 0;
}
- .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;
- }
-
- &:not( .mw-rcfilters-ui-ready ) {
- display: none;
- }
- }
-
.rcfilters-head {
min-height: 200px;
.animation-delay( 0s );
}
}
+
+ #contentSub,
+ p.watchlistDetails,
+ form#mw-watchlist-resetbutton {
+ display: none;
+ }
}
.mw-rcfilters-staticfilters-selected {
margin-top: 1em;
}
- &-top {
- &-placeholder {
- width: 100%;
- }
-
- &-savedLinks {
- padding-left: 1em;
- vertical-align: bottom;
- }
- }
-
&-bottom {
margin-top: 1em;
--- /dev/null
+.mw-rcfilters-ui-rcTopSectionWidget {
+ &-topLinks {
+ width: 100%;
+ }
+
+ &-savedLinks {
+ vertical-align: bottom;
+ padding-left: 1em;
+ }
+
+ .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;
+ }
+
+ &:not( .mw-rcfilters-ui-ready ) {
+ display: none;
+ }
+ }
+}
.mw-rcfilters-ui-savedLinksListWidget {
- float: right;
-
&-menu {
width: 100%;
}
--- /dev/null
+.mw-rcfilters-ui-watchlistTopSectionWidget {
+ &-editWatchlistButton {
+ float: right;
+ margin-left: 3em;
+ }
+
+ &-savedLinks {
+ float: right;
+ }
+
+ .mw-rcfilters-ui-table {
+ margin-top: 1em;
+ }
+
+ &-separator {
+ margin-top: 1em;
+ border-top: 2px solid #eaecf0; // Base80 AAA
+ }
+}
mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget(
controller, model, savedQueriesModel, changesListModel, config
) {
- var $top, $bottom;
+ var $bottom;
config = config || {};
// Parent
);
// Initialize
- this.$topRow = $( '<div>' )
- .addClass( 'mw-rcfilters-ui-row' )
- .append(
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-cell' )
- .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top-placeholder' )
- );
- $top = $( '<div>' )
- .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top' )
- .addClass( 'mw-rcfilters-ui-table' )
- .append( this.$topRow );
+ this.$top = $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top' );
$bottom = $( '<div>' )
.addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' )
this.dateWidget.$element
);
- if ( !mw.user.isAnon() ) {
- this.savedLinksListWidget = new mw.rcfilters.ui.SavedLinksListWidget(
- this.controller,
- this.queriesModel,
- { $overlay: this.$overlay }
- );
-
- this.$topRow.append(
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-cell' )
- .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top-savedLinks' )
- .append( this.savedLinksListWidget.$element )
- );
- }
-
if ( mw.rcfilters.featureFlags.liveUpdate ) {
$bottom.append( this.liveUpdateButton.$element );
}
this.$element
.addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
.append(
- $top,
+ this.$top,
this.filterTagWidget.$element,
$bottom
);
/* Methods */
/**
- * Add a widget at the beginning of the top row
+ * Set the content of the top section
*
- * @param {OO.ui.Widget} widget Any widget
+ * @param {jQuery} $topSectionElement
*/
- mw.rcfilters.ui.FilterWrapperWidget.prototype.prependToTopRow = function ( widget ) {
- this.$topRow.prepend(
- widget.$element
- .addClass( 'mw-rcfilters-ui-cell' )
- );
+ mw.rcfilters.ui.FilterWrapperWidget.prototype.setTopSection = function ( $topSectionElement ) {
+ this.$top.append( $topSectionElement );
};
-
}( mediaWiki ) );
--- /dev/null
+( function ( mw ) {
+ /**
+ * Top section (between page title and filters) on Special:Recentchanges
+ *
+ * @extends OO.ui.Widget
+ *
+ * @constructor
+ * @param {mw.rcfilters.ui.SavedLinksListWidget} savedLinksListWidget
+ * @param {jQuery} $topLinks Content of the community-defined links
+ * @param {Object} [config] Configuration object
+ */
+ mw.rcfilters.ui.RcTopSectionWidget = function MwRcfiltersUiRcTopSectionWidget(
+ savedLinksListWidget, $topLinks, config
+ ) {
+ var topLinksCookieName = 'rcfilters-toplinks-collapsed-state',
+ topLinksCookie = mw.cookie.get( topLinksCookieName ),
+ topLinksCookieValue = topLinksCookie || 'collapsed',
+ toplinksTitle;
+ config = config || {};
+
+ // Parent
+ mw.rcfilters.ui.RcTopSectionWidget.parent.call( this, config );
+
+ toplinksTitle = new OO.ui.ButtonWidget( {
+ framed: false,
+ indicator: topLinksCookieValue === 'collapsed' ? 'down' : 'up',
+ flags: [ 'progressive' ],
+ label: $( '<span>' ).append( mw.message( 'rcfilters-other-review-tools' ).parse() ).contents()
+ } );
+
+ $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' );
+ } );
+
+ $topLinks.find( '.mw-recentchanges-toplinks-title' ).replaceWith( toplinksTitle.$element );
+
+ this.$element
+ .addClass( 'mw-rcfilters-ui-rcTopSectionWidget' )
+ .addClass( 'mw-rcfilters-ui-table' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-row' )
+ .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
+ )
+ );
+ };
+
+ /* Initialization */
+
+ OO.inheritClass( mw.rcfilters.ui.RcTopSectionWidget, OO.ui.Widget );
+}( mediaWiki ) );
--- /dev/null
+( function ( mw ) {
+ /**
+ * Top section (between page title and filters) on Special:Watchlist
+ *
+ * @extends OO.ui.Widget
+ *
+ * @constructor
+ * @param {mw.rcfilters.Controller} controller
+ * @param {mw.rcfilters.dm.ChangesListViewModel} changesListModel
+ * @param {mw.rcfilters.ui.SavedLinksListWidget} savedLinksListWidget
+ * @param {jQuery} $watchlistDetails Content of the 'details' section that includes watched pages count
+ * @param {Object} [config] Configuration object
+ */
+ mw.rcfilters.ui.WatchlistTopSectionWidget = function MwRcfiltersUiWatchlistTopSectionWidget(
+ controller, changesListModel, savedLinksListWidget, $watchlistDetails, config
+ ) {
+ var editWatchlistButton,
+ markSeenButton,
+ $topTable,
+ $bottomTable,
+ $separator;
+ config = config || {};
+
+ // Parent
+ mw.rcfilters.ui.WatchlistTopSectionWidget.parent.call( this, config );
+
+ editWatchlistButton = new OO.ui.ButtonWidget( {
+ label: mw.msg( 'rcfilters-watchlist-editWatchlist-button' ),
+ icon: 'edit',
+ href: mw.config.get( 'wgStructuredChangeFiltersEditWatchlistUrl' )
+ } );
+ markSeenButton = new mw.rcfilters.ui.MarkSeenButtonWidget( controller, changesListModel );
+
+ $topTable = $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-table' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-row' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-watchlistDetails' )
+ .append( $watchlistDetails )
+ )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton' )
+ .append( editWatchlistButton.$element )
+ )
+ );
+
+ $bottomTable = $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-table' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-row' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .append( markSeenButton.$element )
+ )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-savedLinks' )
+ .append( savedLinksListWidget.$element )
+ )
+ );
+
+ $separator = $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-separator' );
+
+ this.$element
+ .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget' )
+ .append( $topTable, $separator, $bottomTable );
+ };
+
+ /* Initialization */
+
+ OO.inheritClass( mw.rcfilters.ui.WatchlistTopSectionWidget, OO.ui.Widget );
+}( mediaWiki ) );
dépôts / lhc / web / wiklou.git / commitdiff