jenkins-bot has submitted this change and it was merged.
Change subject: Style categories the same in nojs and js Flow
......................................................................
Style categories the same in nojs and js Flow
Rewrite the output of handlebars' categories to be styled the same
as the mediawiki category design, and adjust the JS rendering to
follow the same styling as well.
Added 'specialCategoryLink' property to mw.flow.data to store the
localized link to Special:Categories page, since there doesn't
seem to be a way to get a properly localized version of that page
in JavaScript.
Bug: T115411
Change-Id: Ie42d32b98ac65ba4a6de9971d26542e9d82addf2
---
M handlebars/compiled/flow_block_header.handlebars.php
M handlebars/flow_header_categories.partial.handlebars
M includes/View.php
M modules/flow-initialize.js
M modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
M modules/flow/ui/widgets/mw.flow.ui.CategoriesWidget.js
M modules/flow/ui/widgets/mw.flow.ui.CategoryItemWidget.js
M modules/styles/board/header.less
8 files changed, 75 insertions(+), 43 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/handlebars/compiled/flow_block_header.handlebars.php
b/handlebars/compiled/flow_block_header.handlebars.php
index 9291a9a..334bde9 100644
--- a/handlebars/compiled/flow_block_header.handlebars.php
+++ b/handlebars/compiled/flow_block_header.handlebars.php
@@ -62,10 +62,9 @@
'.$sp.' <span class="mw-ui-icon mw-ui-icon-before
mw-ui-icon-speechBubbles pull-right expand-button"
'.$sp.' title="'.LCRun3::ch($cx, 'l10n',
array(array('flow-board-expand-description'),array()), 'encq').'"></span>
'.$sp.'</a>
-';},'flow_header_categories' => function ($cx, $in, $sp) {return
''.$sp.''.((LCRun3::ifvar($cx, ((isset($cx['sp_vars']['root']['categories']) &&
is_array($cx['sp_vars']['root'])) ? $cx['sp_vars']['root']['categories'] :
null))) ? '<div class="flow-board-header-category-view-nojs">
-'.$sp.' <ul class="flow-board-header-category-list">
-'.$sp.''.LCRun3::sec($cx, ((isset($cx['sp_vars']['root']['categories']) &&
is_array($cx['sp_vars']['root'])) ? $cx['sp_vars']['root']['categories'] :
null), $in, true, function($cx, $in)use($sp){return ' <li
class="flow-board-header-category-item">'.LCRun3::ch($cx, 'html',
array(array($in),array()), 'encq').'</li>
-'.$sp.'';}).' </ul>
+';},'flow_header_categories' => function ($cx, $in, $sp) {return
''.$sp.''.((LCRun3::ifvar($cx,
((isset($cx['sp_vars']['root']['categories']['items']) &&
is_array($cx['sp_vars']['root']['categories'])) ?
$cx['sp_vars']['root']['categories']['items'] : null))) ? '<div id="catlinks"
class="catlinks flow-board-header-category-view-nojs">
+'.$sp.' <div id="mw-normal-catlinks"
class="mw-normal-catlinks">'.LCRun3::ch($cx, 'html',
array(array(((isset($cx['sp_vars']['root']['categories']['link']) &&
is_array($cx['sp_vars']['root']['categories'])) ?
$cx['sp_vars']['root']['categories']['link'] : null)),array()), 'encq').'<ul
class="flow-board-header-category-list">'.LCRun3::sec($cx,
((isset($cx['sp_vars']['root']['categories']['items']) &&
is_array($cx['sp_vars']['root']['categories'])) ?
$cx['sp_vars']['root']['categories']['items'] : null), $in, true, function($cx,
$in)use($sp){return '<li
class="flow-board-header-category-item">'.LCRun3::ch($cx, 'html',
array(array($in),array()), 'encq').'</li>';}).'</ul>
+'.$sp.' </div>
'.$sp.'</div>
'.$sp.'' : '').'';},'flow_header_footer' => function ($cx, $in, $sp) {return
''.$sp.'<div class="flow-board-header-footer">
'.$sp.' <hr />
diff --git a/handlebars/flow_header_categories.partial.handlebars
b/handlebars/flow_header_categories.partial.handlebars
index 0e3798f..9f66373 100644
--- a/handlebars/flow_header_categories.partial.handlebars
+++ b/handlebars/flow_header_categories.partial.handlebars
@@ -1,9 +1,12 @@
-{{#if @root.categories}}
-<div class="flow-board-header-category-view-nojs">
- <ul class="flow-board-header-category-list">
- {{#each @root.categories}}
- <li class="flow-board-header-category-item">{{html this}}</li>
- {{/each}}
- </ul>
+{{#if @root.categories.items}}
+<div id="catlinks" class="catlinks flow-board-header-category-view-nojs">
+ <div id="mw-normal-catlinks" class="mw-normal-catlinks">
+ {{~html @root.categories.link~}}
+ <ul class="flow-board-header-category-list">
+ {{~#each @root.categories.items~}}
+ <li class="flow-board-header-category-item">{{~html
this~}}</li>
+ {{~/each~}}
+ </ul>
+ </div>
</div>
{{/if}}
diff --git a/includes/View.php b/includes/View.php
index 80e7a44..8c8d0ea 100644
--- a/includes/View.php
+++ b/includes/View.php
@@ -169,6 +169,10 @@
$apiResponse = array(
'title' => $title->getPrefixedText(),
'categories' => $categoryObject,
+ // We need to store the link to the Special:Categories
page from the
+ // back end php script, because there is no way in JS
front end to
+ // get the localized link of a special page
+ 'specialCategoryLink' => \SpecialPage::getTitleFor(
'Categories' )->getLocalURL(),
'workflow' => $workflow->isNew() ? '' :
$workflow->getId()->getAlphadecimal(),
'blocks' => array(),
'isWatched' => $user->isWatched( $title ),
@@ -193,7 +197,6 @@
'title'
=> $apiResponse['title'],
'block-action-template' => $block->getTemplate( $action ),
'editToken' => $editToken,
-
'categories' => $linkedCategories
);
if ( $block->getName() == 'topiclist' ) {
$topicListBlock = $block;
@@ -201,6 +204,17 @@
}
}
+ // Add category items to the header if they exist
+ if ( count( $linkedCategories ) > 0 && isset(
$apiResponse['blocks']['header'] ) ) {
+ $apiResponse['blocks']['header']['categories'] = array(
+ 'link' => \Linker::link(
+ \SpecialPage::getTitleFor(
'Categories' ),
+ wfMessage( 'pagecategories'
)->params( count( $linkedCategories ) )->text()
+ ) . wfMessage( 'colon-separator'
)->text(),
+ 'items' => $linkedCategories
+ );
+ }
+
if ( isset( $topicListBlock ) && isset(
$parameters['topiclist'] ) ) {
$apiResponse['toc'] = $topicListBlock->renderTocApi(
$apiResponse['blocks']['topiclist'],
diff --git a/modules/flow-initialize.js b/modules/flow-initialize.js
index b38e801..de8e49b 100644
--- a/modules/flow-initialize.js
+++ b/modules/flow-initialize.js
@@ -548,6 +548,8 @@
// The category widget is inside the board description widget.
// Remove it here
$( '.flow-board-header-category-view-nojs' ).detach();
+ // HACK: Remove the MW page categories
+ $( '.catlinks:not(.flow-ui-categoriesWidget)' ).detach();
// Fall back to mw.flow.data, which was used until September
2015
// NOTICE: This block must be after the initialization of the
ui widgets so
diff --git a/modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
b/modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
index 2dae646..67fa12c 100644
--- a/modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
+++ b/modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
@@ -8,7 +8,9 @@
* @constructor
* @param {mw.flow.dm.Board} boardModel The board model
* @param {Object} [config]
- * @cfg {jQuery} $existing A jQuery object of the existing contents of
the board description
+ * @cfg {jQuery} [$existing] A jQuery object of the existing contents
of the board description
+ * @cfg {string} [specialPageCategoryLink] Link to the localized
Special:Categories page
+ * @cfg {jQuery} [$categories] A jQuery object of the existing board
categories
*/
mw.flow.ui.BoardDescriptionWidget = function
mwFlowUiBoardDescriptionWidget( boardModel, config ) {
var $content = $();
@@ -67,7 +69,9 @@
this.button.toggle( false );
}
- this.categoriesWidget = new mw.flow.ui.CategoriesWidget(
this.board );
+ this.categoriesWidget = new mw.flow.ui.CategoriesWidget(
this.board, {
+ specialPageCategoryLink: config.specialPageCategoryLink
+ } );
if ( config.$categories ) {
this.addCategoriesFromDom( config.$categories );
}
@@ -279,7 +283,7 @@
* nojs rendering of the page without having the widget to ask the API
for the categories
* when it just loads.
*
- * @param {jQuery} $categoriesWrapper Categories div wrapper
+ * @param {jQuery} [$categoriesWrapper] Categories div wrapper
*/
mw.flow.ui.BoardDescriptionWidget.prototype.addCategoriesFromDom =
function ( $categoriesWrapper ) {
var categories = {};
diff --git a/modules/flow/ui/widgets/mw.flow.ui.CategoriesWidget.js
b/modules/flow/ui/widgets/mw.flow.ui.CategoriesWidget.js
index ab2ea21..97b9a67 100644
--- a/modules/flow/ui/widgets/mw.flow.ui.CategoriesWidget.js
+++ b/modules/flow/ui/widgets/mw.flow.ui.CategoriesWidget.js
@@ -12,13 +12,17 @@
*
*/
mw.flow.ui.CategoriesWidget = function mwFlowUiCategoriesWidget( model,
config ) {
+ var $categoryList = $( '<ul>' )
+ .addClass( 'flow-board-header-category-list' ),
+ categoriesTitle = mw.Title.newFromText(
'Special:Categories' );
+
config = config || {};
// Parent constructor
mw.flow.ui.CategoriesWidget.parent.call( this, config );
// Mixin constructor
- OO.ui.mixin.GroupElement.call( this, config );
+ OO.ui.mixin.GroupElement.call( this, $.extend( { $group:
$categoryList }, config ) );
this.model = model;
this.model.connect( this, {
@@ -27,19 +31,28 @@
clearCategories: 'onModelClearCategories'
} );
- this.categoriesLabel = new OO.ui.LabelWidget();
+ this.$categoriesLabel = $( '<a>' )
+ .prop( 'href', config.specialPageCategoryLink ||
categoriesTitle.getUrl() );
this.updateCategoriesLabel();
// Initialize
this.$element
+ // Mimic the same structure as mediawiki category
+ // and the nojs version
+ .addClass( 'catlinks flow-board-header-category-view-js
flow-ui-categoriesWidget' )
+ .prop( 'id', 'catlinks' )
.append(
$( '<div>' )
- .addClass(
'flow-board-header-category-title' )
- .append( this.categoriesLabel.$element
),
- this.$group
- .addClass(
'flow-board-header-category-list' )
- )
- .addClass( 'flow-ui-categoriesWidget
flow-board-header-category-view' );
+ .prop( 'id', 'mw-normal-catlinks' )
+ .append(
+ this.$categoriesLabel,
+ mw.msg( 'colon-separator' ),
+ this.$group
+ )
+ .addClass( 'mw-normal-catlinks
flow-board-header-category-view' )
+ );
+
+ this.toggle( this.model.hasCategories() );
};
/* Initialization */
@@ -62,6 +75,7 @@
this.addItems( widgets );
this.updateCategoriesLabel();
+ this.toggle( this.model.hasCategories() );
};
/**
@@ -79,6 +93,7 @@
this.removeItems( widgets );
this.updateCategoriesLabel();
+ this.toggle( this.model.hasCategories() );
};
/**
@@ -92,9 +107,9 @@
* Update the category label according to the number of available items
*/
mw.flow.ui.CategoriesWidget.prototype.updateCategoriesLabel = function
() {
- this.categoriesLabel.setLabel(
- mw.msg( 'pagecategories', this.model.getItemCount() ) +
- mw.msg( 'colon-separator' )
+ this.$categoriesLabel.text(
+ // FIXME: this.model should be an instance of
dm.Categories, not dm.Board
+ mw.msg( 'pagecategories',
this.model.getCategories().getItemCount() )
);
};
}( jQuery ) );
diff --git a/modules/flow/ui/widgets/mw.flow.ui.CategoryItemWidget.js
b/modules/flow/ui/widgets/mw.flow.ui.CategoryItemWidget.js
index 36ee4bc..cec1eb1 100644
--- a/modules/flow/ui/widgets/mw.flow.ui.CategoryItemWidget.js
+++ b/modules/flow/ui/widgets/mw.flow.ui.CategoryItemWidget.js
@@ -38,6 +38,10 @@
OO.inheritClass( mw.flow.ui.CategoryItemWidget, OO.ui.Widget );
+ /* Static Properties */
+
+ mw.flow.ui.CategoryItemWidget.static.tagName = 'li';
+
/**
* Get the category data
*
diff --git a/modules/styles/board/header.less b/modules/styles/board/header.less
index c621d1b..6fcdb20 100644
--- a/modules/styles/board/header.less
+++ b/modules/styles/board/header.less
@@ -48,23 +48,14 @@
display: none;
}
-.flow-board-header-category-view-nojs,
-.flow-board-header-category-view {
- background: white;
- padding: 0.5em;
-
- .flow-board-header-category-list { //ul
- list-style-type: none;
- list-style-image: none;
-
- .flow-board-header-category-item {
- display: inline-block;
- }
-
- .flow-board-header-category-item +
.flow-board-header-category-item:before {
- content: " | ";
- }
- }
+// We must include a more specific rule for margin and padding
+// on the catlinks ul item, because there is a mw rule to 'correct'
+// ul that live inside .mw-content-ltr/rtl and defines a specific
+// margin value. We have to make this rule more specific so to
+// override that fix in this case.
+.mw-normal-catlinks ul.flow-board-header-category-list {
+ margin: 0;
+ padding: 0;
}
.side-rail-toggle-button {
--
To view, visit https://gerrit.wikimedia.org/r/246779
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie42d32b98ac65ba4a6de9971d26542e9d82addf2
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
Gerrit-Reviewer: Catrope <roan.katt...@gmail.com>
Gerrit-Reviewer: Mooeypoo <mor...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
