jenkins-bot has submitted this change and it was merged. Change subject: Invert dependencies for OutlineItemWidget and PageLayout ......................................................................
Invert dependencies for OutlineItemWidget and PageLayout Problem: * Properties for OutlineItemWidget were being set at instantiation in the page and then copied over though getters, making it a one-way trip and a lot of messy maintenance when adding new features * BookletOutlineItemWidget was superfluous since it only copied page properties and didn't even keep a reference to the page * OutlineItemWidget movability property was not settable * OutlineItemWidget was not flaggable, so additional styling was difficult or impossible Solution: * Add missing movability setter to OutlineItemWidget * Mix FlaggableWidget into OutlineItemWidget * Remove BookletOutlineItemWidget * Add some basic flag styles to OutlineItemWidget * Remove OutlineItemWidget property shuffling in PageLayout * Add methods to set, get and clear an OutlineItemWidget to PageLayout * Adjust BookletLayout to set and clear OutlineItemWidget on PageLayout * Fix bug in FlaggableElement which caused setting with object not to work Change-Id: I58a279dd949a867a4698a791103d5a6f2bd4b67f --- M build/modules.json M src/elements/OO.ui.FlaggableElement.js M src/layouts/OO.ui.BookletLayout.js M src/layouts/OO.ui.PageLayout.js M src/styles/OO.ui.Widget.css D src/widgets/OO.ui.BookletOutlineItemWidget.js M src/widgets/OO.ui.OptionWidget.js M src/widgets/OO.ui.OutlineItemWidget.js 8 files changed, 56 insertions(+), 93 deletions(-) Approvals: Catrope: Looks good to me, approved jenkins-bot: Verified diff --git a/build/modules.json b/build/modules.json index fd6f84d..0cae465 100644 --- a/build/modules.json +++ b/build/modules.json @@ -51,7 +51,6 @@ "src/widgets/OO.ui.OutlineWidget.js", "src/widgets/OO.ui.OutlineControlsWidget.js", "src/widgets/OO.ui.OutlineItemWidget.js", - "src/widgets/OO.ui.BookletOutlineItemWidget.js", "src/widgets/OO.ui.ButtonOptionWidget.js", "src/widgets/OO.ui.ButtonSelectWidget.js", "src/widgets/OO.ui.PopupWidget.js", diff --git a/src/elements/OO.ui.FlaggableElement.js b/src/elements/OO.ui.FlaggableElement.js index ee8fe58..8adb731 100644 --- a/src/elements/OO.ui.FlaggableElement.js +++ b/src/elements/OO.ui.FlaggableElement.js @@ -63,7 +63,7 @@ } } else if ( OO.isPlainObject( flags ) ) { for ( flag in flags ) { - if ( flags[flags] ) { + if ( flags[flag] ) { // Set this.flags[flag] = true; this.$element.addClass( classPrefix + flag ); diff --git a/src/layouts/OO.ui.BookletLayout.js b/src/layouts/OO.ui.BookletLayout.js index 75e36e8..2421502 100644 --- a/src/layouts/OO.ui.BookletLayout.js +++ b/src/layouts/OO.ui.BookletLayout.js @@ -220,7 +220,7 @@ * @chainable */ OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) { - var i, len, name, page, + var i, len, name, page, item, items = [], remove = []; @@ -233,7 +233,9 @@ } this.pages[page.getName()] = page; if ( this.outlined ) { - items.push( new OO.ui.BookletOutlineItemWidget( name, page, { '$': this.$ } ) ); + item = new OO.ui.OutlineItemWidget( name, page, { '$': this.$ } ); + page.setOutlineItem( item ); + items.push( item ); } } if ( remove.length ) { @@ -267,6 +269,7 @@ delete this.pages[name]; if ( this.outlined ) { items.push( this.outlineWidget.getItemFromData( name ) ); + page.setOutlineItem( null ); } } if ( this.outlined && items.length ) { @@ -287,12 +290,16 @@ * @chainable */ OO.ui.BookletLayout.prototype.clearPages = function () { - var pages = this.stackLayout.getItems(); + var i, len, + pages = this.stackLayout.getItems(); this.pages = {}; this.currentPageName = null; if ( this.outlined ) { this.outlineWidget.clearItems(); + for ( i = 0, len = pages.length; i < len; i++ ) { + pages[i].setOutlineItem( null ); + } } this.stackLayout.clearItems(); diff --git a/src/layouts/OO.ui.PageLayout.js b/src/layouts/OO.ui.PageLayout.js index 9fa9d16..23f3d6a 100644 --- a/src/layouts/OO.ui.PageLayout.js +++ b/src/layouts/OO.ui.PageLayout.js @@ -7,12 +7,7 @@ * @constructor * @param {string} name Unique symbolic name of page * @param {Object} [config] Configuration options - * @param {string} [icon=''] Symbolic name of icon to display in outline - * @param {string} [indicator=''] Symbolic name of indicator to display in outline - * @param {string} [indicatorTitle=''] Description of indicator meaning to display in outline - * @param {string} [label=''] Label to display in outline - * @param {number} [level=0] Indentation level of item in outline - * @param {boolean} [movable=false] Page should be movable using outline controls + * @param {string} [outlineItem] Outline item widget */ OO.ui.PageLayout = function OoUiPageLayout( name, config ) { // Configuration initialization @@ -23,12 +18,7 @@ // Properties this.name = name; - this.icon = config.icon || ''; - this.indicator = config.indicator || ''; - this.indicatorTitle = OO.ui.resolveMsg( config.indicatorTitle ) || ''; - this.label = OO.ui.resolveMsg( config.label ) || ''; - this.level = config.level || 0; - this.movable = !!config.movable; + this.outlineItem = config.outlineItem || null; // Initialization this.$element.addClass( 'oo-ui-pageLayout' ); @@ -50,55 +40,21 @@ }; /** - * Get page icon. + * Get outline item. * - * @returns {string} Symbolic name of icon + * @returns {OO.ui.OutlineItemWidget|null} Outline item widget */ -OO.ui.PageLayout.prototype.getIcon = function () { - return this.icon; +OO.ui.PageLayout.prototype.getOutlineItem = function () { + return this.outlineItem; }; /** - * Get page indicator. + * Get outline item. * - * @returns {string} Symbolic name of indicator + * @param {OO.ui.OutlineItemWidget|null} outlineItem Outline item widget, null to clear + * @chainable */ -OO.ui.PageLayout.prototype.getIndicator = function () { - return this.indicator; -}; - -/** - * Get page indicator label. - * - * @returns {string} Description of indicator meaning - */ -OO.ui.PageLayout.prototype.getIndicatorTitle = function () { - return this.indicatorTitle; -}; - -/** - * Get page label. - * - * @returns {string} Label text - */ -OO.ui.PageLayout.prototype.getLabel = function () { - return this.label; -}; - -/** - * Get outline item indentation level. - * - * @returns {number} Indentation level - */ -OO.ui.PageLayout.prototype.getLevel = function () { - return this.level; -}; - -/** - * Check if page is movable using outline controls. - * - * @returns {boolean} Page is movable - */ -OO.ui.PageLayout.prototype.isMovable = function () { - return this.movable; +OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) { + this.outlineItem = outlineItem; + return this; }; diff --git a/src/styles/OO.ui.Widget.css b/src/styles/OO.ui.Widget.css index 2a2e543..bf09b4b 100644 --- a/src/styles/OO.ui.Widget.css +++ b/src/styles/OO.ui.Widget.css @@ -137,6 +137,22 @@ left: 4em; } +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-important { + font-weight: bold; +} + +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder { + font-style: italic; +} + +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-iconedElement-icon, +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-indicatedElement-indicator { + opacity: 0.5; +} +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label { + color: #698AA0; +} + /* OO.ui.OutlineControlsWidget */ .oo-ui-outlineControlsWidget { diff --git a/src/widgets/OO.ui.BookletOutlineItemWidget.js b/src/widgets/OO.ui.BookletOutlineItemWidget.js deleted file mode 100644 index f449b85..0000000 --- a/src/widgets/OO.ui.BookletOutlineItemWidget.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Creates an OO.ui.BookletOutlineItemWidget object. - * - * @class - * @extends OO.ui.OutlineItemWidget - * - * @constructor - * @param {Mixed} data Item data - * @param {Object} [config] Configuration options - */ -OO.ui.BookletOutlineItemWidget = function OoUiBookletOutlineItemWidget( data, page, config ) { - // Configuration intialization - config = $.extend( { - 'label': page.getLabel() || data, - 'level': page.getLevel(), - 'icon': page.getIcon(), - 'indicator': page.getIndicator(), - 'indicatorTitle': page.getIndicatorTitle(), - 'movable': page.isMovable() - }, config ); - - // Parent constructor - OO.ui.OutlineItemWidget.call( this, data, config ); - - // Initialization - this.$element.addClass( 'oo-ui-bookletOutlineItemWidget' ); -}; - -/* Inheritance */ - -OO.inheritClass( OO.ui.BookletOutlineItemWidget, OO.ui.OutlineItemWidget ); diff --git a/src/widgets/OO.ui.OptionWidget.js b/src/widgets/OO.ui.OptionWidget.js index 4c404df..b0a49e8 100644 --- a/src/widgets/OO.ui.OptionWidget.js +++ b/src/widgets/OO.ui.OptionWidget.js @@ -7,6 +7,7 @@ * @mixins OO.ui.IconedElement * @mixins OO.ui.LabeledElement * @mixins OO.ui.IndicatedElement + * @mixins OO.ui.FlaggableElement * * @constructor * @param {Mixed} data Option data @@ -27,6 +28,7 @@ OO.ui.IconedElement.call( this, this.$( '<span>' ), config ); OO.ui.LabeledElement.call( this, this.$( '<span>' ), config ); OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config ); + OO.ui.FlaggableElement.call( this, config ); // Properties this.data = data; @@ -56,6 +58,7 @@ OO.mixinClass( OO.ui.OptionWidget, OO.ui.IconedElement ); OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabeledElement ); OO.mixinClass( OO.ui.OptionWidget, OO.ui.IndicatedElement ); +OO.mixinClass( OO.ui.OptionWidget, OO.ui.FlaggableElement ); /* Static Properties */ diff --git a/src/widgets/OO.ui.OutlineItemWidget.js b/src/widgets/OO.ui.OutlineItemWidget.js index 637c21f..48f9c39 100644 --- a/src/widgets/OO.ui.OutlineItemWidget.js +++ b/src/widgets/OO.ui.OutlineItemWidget.js @@ -45,7 +45,7 @@ /** * Check if item is movable. * - * Moveablilty is used by outline controls. + * Movablilty is used by outline controls. * * @returns {boolean} Item is movable */ @@ -63,6 +63,19 @@ }; /** + * Set movability. + * + * Movablilty is used by outline controls. + * + * @param {boolean} movable Item is movable + * @chainable + */ +OO.ui.OutlineItemWidget.prototype.setMovable = function ( movable ) { + this.movable = !!movable; + return this; +}; + +/** * Set indentation level. * * @method -- To view, visit https://gerrit.wikimedia.org/r/112142 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I58a279dd949a867a4698a791103d5a6f2bd4b67f Gerrit-PatchSet: 4 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Trevor Parscal <tpars...@wikimedia.org> Gerrit-Reviewer: Catrope <roan.katt...@gmail.com> Gerrit-Reviewer: Esanders <esand...@wikimedia.org> Gerrit-Reviewer: Krinkle <krinklem...@gmail.com> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits