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 <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
