Mattflaschen has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/375038 )
Change subject: WLFilters: convert 'edit watchlist' button to new UX
......................................................................
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.less
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
A
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
A
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
A resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
A
resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js
13 files changed, 276 insertions(+), 107 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/38/375038/1
diff --git a/includes/specials/SpecialWatchlist.php
b/includes/specials/SpecialWatchlist.php
index b20b331..131431b 100644
--- a/includes/specials/SpecialWatchlist.php
+++ b/includes/specials/SpecialWatchlist.php
@@ -102,6 +102,10 @@
'wgStructuredChangeFiltersSavedQueriesPreferenceName',
'rcfilters-wl-saved-queries'
);
+ $output->addJsConfigVars(
+ 'wgStructuredChangeFiltersEditWatchlistUrl',
+ SpecialPage::getTitleFor( 'EditWatchlist'
)->getLocalURL()
+ );
}
}
@@ -793,21 +797,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();
} 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..dae2c40 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1469,6 +1469,7 @@
"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",
diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 92c3a89..0dd613c 100644
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1659,6 +1659,7 @@
"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}}.",
diff --git a/resources/Resources.php b/resources/Resources.php
index 89eab94..a1cf4d2 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1796,6 +1796,8 @@
'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',
],
@@ -1823,6 +1825,8 @@
'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' => [
@@ -1889,6 +1893,7 @@
'rcfilters-liveupdates-button-title-on',
'rcfilters-liveupdates-button-title-off',
'rcfilters-watchlist-markSeen-button',
+ 'rcfilters-watchlist-editWatchlist-button',
'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..0819351 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -8,10 +8,10 @@
* @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(),
@@ -26,7 +26,9 @@
.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' );
@@ -59,36 +61,22 @@
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
}
};
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index d5528e1..3a1ab53 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -7,29 +7,6 @@
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: 220px;
margin-top: 1em;
@@ -93,6 +70,12 @@
.animation-delay( 0s );
}
}
+
+ #contentSub,
+ p.watchlistDetails,
+ form#mw-watchlist-resetbutton {
+ display: none;
+ }
}
.mw-rcfilters-staticfilters-selected {
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 87d09e0..df4592c 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
@@ -8,17 +8,6 @@
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/styles/mw.rcfilters.ui.RcTopSectionWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
new file mode 100644
index 0000000..38f6f28
--- /dev/null
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
@@ -0,0 +1,33 @@
+.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;
+ }
+ }
+}
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/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
new file mode 100644
index 0000000..bbe4528
--- /dev/null
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
@@ -0,0 +1,19 @@
+.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
+ }
+}
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 c3af7c5..75b4739 100644
---
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -17,7 +17,7 @@
mw.rcfilters.ui.FilterWrapperWidget = function
MwRcfiltersUiFilterWrapperWidget(
controller, model, savedQueriesModel, changesListModel, config
) {
- var $top, $bottom;
+ var $bottom;
config = config || {};
// Parent
@@ -59,17 +59,8 @@
);
// 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'
)
@@ -78,18 +69,19 @@
this.dateWidget.$element
);
- 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.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 );
@@ -98,7 +90,7 @@
this.$element
.addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
.append(
- $top,
+ this.$top,
this.filterTagWidget.$element,
$bottom
);
@@ -112,15 +104,11 @@
/* 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 ) );
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
new file mode 100644
index 0000000..706c888
--- /dev/null
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
@@ -0,0 +1,74 @@
+( 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 ) );
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js
new file mode 100644
index 0000000..86c206b
--- /dev/null
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js
@@ -0,0 +1,82 @@
+( 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 ) );
--
To view, visit https://gerrit.wikimedia.org/r/375038
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: wmf/1.30.0-wmf.15
Gerrit-Owner: Mattflaschen <mflasc...@wikimedia.org>
Gerrit-Reviewer: Sbisson <sbis...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
