Sbisson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/374415 )
Change subject: [WIP] WLFilters: convert 'edit watchlist' button to new UX
......................................................................
[WIP] WLFilters: convert 'edit watchlist' button to new UX
Bug: T172030
Change-Id: Ifcde40c66fbb6543d4f2aebfc8499c03533b8b91
---
M includes/specials/SpecialWatchlist.php
M languages/i18n/en.json
M languages/i18n/qqq.json
M resources/Resources.php
M resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
A
resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.EditWatchlistButtonWidget.js
M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
9 files changed, 132 insertions(+), 47 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/15/374415/1
diff --git a/includes/specials/SpecialWatchlist.php
b/includes/specials/SpecialWatchlist.php
index 862863a..0336e8e 100644
--- a/includes/specials/SpecialWatchlist.php
+++ b/includes/specials/SpecialWatchlist.php
@@ -104,6 +104,10 @@
'wgStructuredChangeFiltersSavedQueriesPreferenceName',
'rcfilters-wl-saved-queries'
);
+ $output->addJsConfigVars(
+ 'wgStructuredChangeFiltersWatchlistItemCount',
+ $this->countItems()
+ );
}
}
@@ -795,21 +799,25 @@
$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() . "\n";
} 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',
diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index a44b3cf..196614a 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1469,6 +1469,8 @@
"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",
+ "rcfilters-watchlist-details": "{{PLURAL:$1|$1 page|$1 pages}} on your
watchlist (plus talk 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",
diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 036a941..294df43 100644
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1659,6 +1659,8 @@
"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.",
+ "rcfilters-watchlist-details" : "Status message on
[[Special:Watchlist]] about how many pages are on the watchlist and how to
identify new changes. Parameters:\n* $1 - number of pages in your watchlist",
"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}}.",
diff --git a/resources/Resources.php b/resources/Resources.php
index 459ad83..ff47fa3 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1802,6 +1802,7 @@
'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.EditWatchlistButtonWidget.js',
'resources/src/mediawiki.rcfilters/mw.rcfilters.HighlightColors.js',
'resources/src/mediawiki.rcfilters/mw.rcfilters.init.js',
],
@@ -1895,6 +1896,8 @@
'rcfilters-liveupdates-button-title-on',
'rcfilters-liveupdates-button-title-off',
'rcfilters-watchlist-markSeen-button',
+ 'rcfilters-watchlist-editWatchlist-button',
+ 'rcfilters-watchlist-details',
'rcfilters-other-review-tools',
'blanknamespace',
'namespaces',
diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index a6bce14..fc0eca3 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -26,7 +26,12 @@
.addClass( 'mw-rcfilters-ui-overlay' ),
filtersWidget = new
mw.rcfilters.ui.FilterWrapperWidget(
controller, filtersModel,
savedQueriesModel, changesListModel, { $overlay: $overlay } ),
+ savedLinksListWidget = new
mw.rcfilters.ui.SavedLinksListWidget(
+ controller, savedQueriesModel, {
$overlay: $overlay }
+ ),
markSeenButton,
+ editWatchlistButton,
+ watchlistDetails,
currentPage = mw.config.get(
'wgCanonicalNamespace' ) +
':' +
mw.config.get(
'wgCanonicalSpecialPageName' );
@@ -83,12 +88,71 @@
toplinksTitle.setIndicator(
'down' );
} )
.appendTo(
'.mw-rcfilters-ui-filterWrapperWidget-top-placeholder' );
+
+ filtersWidget.setTopRows(
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-row' )
+ .append(
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-cell' )
+ .addClass(
'mw-rcfilters-ui-filterWrapperWidget-top-placeholder' )
+ )
+ .append(
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-cell' )
+ .addClass(
'mw-rcfilters-ui-filterWrapperWidget-top-savedLinks' )
+ .append(
!mw.user.isAnon() ? savedLinksListWidget.$element : null )
+ )
+ );
} // end Special:RC
if ( currentPage === 'Special:Watchlist' ) {
+ $( [
+ '#contentSub', // line with username
and edit watchlist links
+ '.watchlistDetails', // "10 pages on
your watchlist..."
+ 'form#mw-watchlist-resetbutton' // mark
all as seen
+ ].join( ',' ) ).detach();
+
+ watchlistDetails = mw.message(
+ 'rcfilters-watchlist-details',
+ mw.config.get(
'wgStructuredChangeFiltersWatchlistItemCount' )
+ ).parse();
+
+ editWatchlistButton = new
mw.rcfilters.ui.EditWatchlistButtonWidget();
markSeenButton = new
mw.rcfilters.ui.MarkSeenButtonWidget( controller, changesListModel );
- $( 'form#mw-watchlist-resetbutton' ).detach();
- filtersWidget.prependToTopRow( markSeenButton );
+
+ filtersWidget.setTopRows( [
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-row' )
+ .append(
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-cell' )
+ .addClass(
'mw-rcfilters-ui-filterWrapperWidget-top-watchlistDetails' )
+ .append(
watchlistDetails )
+ )
+ .append(
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-cell' )
+ .addClass(
'mw-rcfilters-ui-filterWrapperWidget-top-editWatchlistButton' )
+ .append(
editWatchlistButton.$element )
+ ),
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-row' )
+ .addClass(
'mw-rcfilters-ui-row-separator' ),
+ $( '<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-filterWrapperWidget-top-savedLinks' )
+ .append(
!mw.user.isAnon() ? savedLinksListWidget.$element : null )
+ )
+ ] );
} // end Special:WL
}
};
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 a89b69c..4a8cfbf 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
@@ -12,9 +12,17 @@
width: 100%;
}
- &-savedLinks {
+ &-savedLinks,
+ &-editWatchlistButton {
+ float: right;
padding-left: 1em;
- vertical-align: bottom;
+ }
+
+ .mw-rcfilters-ui-row-separator {
+ width: 100%;
+ border-top: solid grey 2px;
+ margin: 0 10px;
+
}
}
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
index 716ed03..2b713e1 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
@@ -1,6 +1,4 @@
.mw-rcfilters-ui-savedLinksListWidget {
- float: right;
-
&-menu {
width: 100%;
}
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.EditWatchlistButtonWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.EditWatchlistButtonWidget.js
new file mode 100644
index 0000000..7453593
--- /dev/null
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.EditWatchlistButtonWidget.js
@@ -0,0 +1,26 @@
+( function ( mw ) {
+ /**
+ * Button to go to Special:EditWatchlist
+ *
+ * @extends OO.ui.ButtonWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration object
+ */
+ mw.rcfilters.ui.EditWatchlistButtonWidget = function
MwRcfiltersUiEditWatchlistButtonWidget( config ) {
+ config = config || {};
+
+ // Parent
+ mw.rcfilters.ui.EditWatchlistButtonWidget.parent.call( this,
$.extend( {
+ label: mw.message(
'rcfilters-watchlist-editWatchlist-button' ).text(),
+ icon: 'edit',
+ href: 'Special:EditWatchlist'
+ }, config ) );
+
+ this.$element.addClass(
'mw-rcfilters-ui-editWatchlistButtonWidget' );
+ };
+
+ /* Initialization */
+
+ OO.inheritClass( mw.rcfilters.ui.EditWatchlistButtonWidget,
OO.ui.ButtonWidget );
+}( mediaWiki ) );
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 b57f5d7..01f2f1c 100644
---
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -59,17 +59,9 @@
);
// 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 );
+ .addClass( 'mw-rcfilters-ui-table' );
$bottom = $( '<div>' )
.addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom'
)
@@ -77,21 +69,6 @@
this.numChangesWidget.$element,
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 );
@@ -113,16 +90,13 @@
/* Methods */
- /**
- * Add a widget at the beginning of the top row
- *
- * @param {OO.ui.Widget} widget Any widget
- */
- mw.rcfilters.ui.FilterWrapperWidget.prototype.prependToTopRow =
function ( widget ) {
- this.$topRow.prepend(
- widget.$element
- .addClass( 'mw-rcfilters-ui-cell' )
- );
+ mw.rcfilters.ui.FilterWrapperWidget.prototype.setTopRows = function (
$topRows ) {
+ var $top = this.$element.find(
'.mw-rcfilters-ui-filterWrapperWidget-top' );
+ if (!Array.isArray( $topRows )) {
+ $topRows = [ $topRows ];
+ }
+ $topRows.forEach( function ( $row ) {
+ $top.append( $row );
+ } );
};
-
}( mediaWiki ) );
--
To view, visit https://gerrit.wikimedia.org/r/374415
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ifcde40c66fbb6543d4f2aebfc8499c03533b8b91
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Sbisson <sbis...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
