Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/246779
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, 73 insertions(+), 46 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/79/246779/1
diff --git a/handlebars/compiled/flow_block_header.handlebars.php
b/handlebars/compiled/flow_block_header.handlebars.php
index 9291a9a..7e35c91 100644
--- a/handlebars/compiled/flow_block_header.handlebars.php
+++ b/handlebars/compiled/flow_block_header.handlebars.php
@@ -62,10 +62,13 @@
'.$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">
+'.$sp.' '.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').'
+'.$sp.' <ul class="flow-board-header-category-list">
+'.$sp.''.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>
+'.$sp.'';}).' </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..0209fc0 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..8274205 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,14 @@
}
}
+ // 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'
)->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 ee30eea..b501d7e 100644
--- a/modules/flow-initialize.js
+++ b/modules/flow-initialize.js
@@ -558,7 +558,8 @@
// Board description widget
descriptionWidget = new mw.flow.ui.BoardDescriptionWidget(
dmBoard, {
$existing: $( '.flow-ui-boardDescriptionWidget-content'
).contents(),
- $categories: $( '.flow-board-header-category-view-nojs'
).contents()
+ $categories: $( '.flow-board-header-category-view-nojs'
).contents(),
+ specialPageCategoryLink: dataBlob.specialCategoryLink
} );
$( '.flow-ui-boardDescriptionWidget' ).replaceWith(
descriptionWidget.$element );
@@ -566,7 +567,7 @@
// Remove it here
$( '.flow-board-header-category-view-nojs' ).detach();
// HACK: Remove the MW page categories
- $( '.catlinks' ).detach();
+ $( '.catlinks:not(.flow-ui-categoriesWidget)' ).detach();
preloadTopic = OO.getProp( dataBlob, 'blocks', 'topiclist',
'submitted', 'topic' );
preloadContent = OO.getProp( dataBlob, 'blocks', 'topiclist',
'submitted', 'content' );
diff --git a/modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
b/modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
index 3b10728..31ad891 100644
--- a/modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
+++ b/modules/flow/ui/widgets/mw.flow.ui.BoardDescriptionWidget.js
@@ -67,10 +67,10 @@
this.button.toggle( false );
}
- this.categoriesWidget = new mw.flow.ui.CategoriesWidget(
this.board );
- if ( config.$categories ) {
- this.addCategoriesFromDom( config.$categories );
- }
+ this.categoriesWidget = new mw.flow.ui.CategoriesWidget(
this.board, {
+ specialPageCategoryLink: config.specialPageCategoryLink
+ } );
+ this.addCategoriesFromDom( config.$categories );
// Events
this.button.connect( this, { click: 'onEditButtonClick' } );
@@ -262,6 +262,10 @@
mw.flow.ui.BoardDescriptionWidget.prototype.addCategoriesFromDom =
function ( $categoriesWrapper ) {
var categories = {};
+ if ( !$categoriesWrapper.length ) {
+ return;
+ }
+
$categoriesWrapper.find( '.flow-board-header-category-item a'
).each( function () {
categories[ $( this ).text() ] = {
exists: !$( this ).hasClass( 'new' )
diff --git a/modules/flow/ui/widgets/mw.flow.ui.CategoriesWidget.js
b/modules/flow/ui/widgets/mw.flow.ui.CategoriesWidget.js
index ab2ea21..c6b858f 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,26 @@
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' )
+ );
};
/* Initialization */
@@ -92,9 +103,8 @@
* 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(
+ mw.msg( 'pagecategories', this.model.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: newchange
Gerrit-Change-Id: Ie42d32b98ac65ba4a6de9971d26542e9d82addf2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
