Trevor Parscal has uploaded a new change for review. https://gerrit.wikimedia.org/r/108957
Change subject: Update OOjs UI to v0.1.0-pre (8e27f28cf8) ...................................................................... Update OOjs UI to v0.1.0-pre (8e27f28cf8) Change-Id: Ib544f68fe1e20e1fbe9dddc6cc501fdfa3de5852 --- M lib/oojs-ui/oojs-ui.js M lib/oojs-ui/oojs-ui.svg.css 2 files changed, 250 insertions(+), 90 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor refs/changes/57/108957/1 diff --git a/lib/oojs-ui/oojs-ui.js b/lib/oojs-ui/oojs-ui.js index 76aa04c..ec0fb9a 100644 --- a/lib/oojs-ui/oojs-ui.js +++ b/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (11632fcada) + * OOjs UI v0.1.0-pre (8e27f28cf8) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: Fri Jan 17 2014 18:17:27 GMT-0800 (PST) + * Date: Wed Jan 22 2014 12:10:12 GMT-0800 (PST) */ ( function () { @@ -1734,8 +1734,12 @@ * * @constructor * @param {jQuery} $clippable Nodes to clip, assigned to #$clippable + * @param {Object} [config] Configuration options */ -OO.ui.ClippableElement = function OoUiClippableElement( $clippable ) { +OO.ui.ClippableElement = function OoUiClippableElement( $clippable, config ) { + // Configuration initialization + config = config || {}; + // Properties this.$clippable = $clippable; this.clipping = false; @@ -2367,8 +2371,8 @@ OO.ui.Widget.call( this, config ); // Mixin constructors - OO.ui.IconedElement.call( this, this.$( '<span>' ) ); - OO.ui.LabeledElement.call( this, this.$( '<span>' ) ); + OO.ui.IconedElement.call( this, this.$( '<span>' ), config ); + OO.ui.LabeledElement.call( this, this.$( '<span>' ), config ); // Properties this.toolGroup = toolGroup; @@ -2617,20 +2621,20 @@ * * @constructor * @param {OO.Factory} toolFactory Factory for creating tools - * @param {Object} [options] Configuration options + * @param {Object} [config] Configuration options * @cfg {boolean} [actions] Add an actions section opposite to the tools * @cfg {boolean} [shadow] Add a shadow below the toolbar */ -OO.ui.Toolbar = function OoUiToolbar( toolFactory, options ) { +OO.ui.Toolbar = function OoUiToolbar( toolFactory, config ) { // Configuration initialization - options = options || {}; + config = config || {}; // Parent constructor - OO.ui.Element.call( this, options ); + OO.ui.Element.call( this, config ); // Mixin constructors OO.EventEmitter.call( this ); - OO.ui.GroupElement.call( this, this.$( '<div>' ) ); + OO.ui.GroupElement.call( this, this.$( '<div>' ), config ); // Properties this.toolFactory = toolFactory; @@ -2648,12 +2652,12 @@ // Initialization this.$group.addClass( 'oo-ui-toolbar-tools' ); this.$bar.addClass( 'oo-ui-toolbar-bar' ).append( this.$group ); - if ( options.actions ) { + if ( config.actions ) { this.$actions.addClass( 'oo-ui-toolbar-actions' ); this.$bar.append( this.$actions ); } this.$bar.append( '<div style="clear:both"></div>' ); - if ( options.shadow ) { + if ( config.shadow ) { this.$bar.append( '<div class="oo-ui-toolbar-shadow"></div>' ); } this.$element.addClass( 'oo-ui-toolbar' ).append( this.$bar ); @@ -2952,7 +2956,7 @@ OO.ui.Widget.call( this, config ); // Mixin constructors - OO.ui.GroupElement.call( this, this.$( '<div>' ) ); + OO.ui.GroupElement.call( this, this.$( '<div>' ), config ); // Properties this.toolbar = toolbar; @@ -3213,13 +3217,18 @@ /** * Layout made of a fieldset and optional legend. * + * Just add OO.ui.FieldLayout items. + * * @class * @extends OO.ui.Layout * @mixins OO.ui.LabeledElement + * @mixins OO.ui.IconedElement + * @mixins OO.ui.GroupElement * * @constructor * @param {Object} [config] Configuration options * @cfg {string} [icon] Symbolic icon name + * @cfg {OO.ui.FieldLayout} [items] Items to add */ OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) { // Config initialization @@ -3229,18 +3238,16 @@ OO.ui.Layout.call( this, config ); // Mixin constructors + OO.ui.IconedElement.call( this, this.$( '<div>' ), config ); OO.ui.LabeledElement.call( this, this.$( '<legend>' ), config ); + OO.ui.GroupElement.call( this, this.$( '<div>' ), config ); // Initialization - if ( config.icon ) { - this.$element.addClass( 'oo-ui-fieldsetLayout-decorated' ); - this.$label.addClass( 'oo-ui-icon-' + config.icon ); - } - this.$element.addClass( 'oo-ui-fieldsetLayout' ); - if ( config.icon || config.label ) { - this.$element - .addClass( 'oo-ui-fieldsetLayout-labeled' ) - .append( this.$label ); + this.$element + .addClass( 'oo-ui-fieldsetLayout' ) + .append( this.$icon, this.$label, this.$group ); + if ( Array.isArray( config.items ) ) { + this.addItems( config.items ); } }; @@ -3248,11 +3255,125 @@ OO.inheritClass( OO.ui.FieldsetLayout, OO.ui.Layout ); +OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.IconedElement ); OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.LabeledElement ); +OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.GroupElement ); /* Static Properties */ OO.ui.FieldsetLayout.static.tagName = 'fieldset'; +/** + * Layout made of a field and optional label. + * + * @class + * @extends OO.ui.Layout + * @mixins OO.ui.LabeledElement + * + * Available label alignment modes include: + * - 'left': Label is before the field and aligned away from it, best for when the user will be + * scanning for a specific label in a form with many fields + * - 'right': Label is before the field and aligned toward it, best for forms the user is very + * familiar with and will tab through field checking quickly to verify which field they are in + * - 'top': Label is before the field and above it, best for when the use will need to fill out all + * fields from top to bottom in a form with few fields + * - 'inline': Label is after the field and aligned toward it, best for small boolean fields like + * checkboxes or radio buttons + * + * @constructor + * @param {OO.ui.Widget} field Field widget + * @param {Object} [config] Configuration options + * @cfg {string} [align='left'] Alignment mode, either 'left', 'right', 'top' or 'inline' + */ +OO.ui.FieldLayout = function OoUiFieldLayout( field, config ) { + // Config initialization + config = $.extend( { 'align': 'left' }, config ); + + // Parent constructor + OO.ui.Layout.call( this, config ); + + // Mixin constructors + OO.ui.LabeledElement.call( this, this.$( '<label>' ), config ); + + // Properties + this.$field = this.$( '<div>' ); + this.field = field; + this.align = null; + + // Events + this.$label.on( 'click', OO.ui.bind( this.onLabelClick, this ) ); + + // Initialization + this.$element.addClass( 'oo-ui-fieldLayout' ); + this.$field + .addClass( 'oo-ui-fieldLayout-field' ) + .append( this.field.$element ); + this.setAlignment( config.align ); +}; + +/* Inheritance */ + +OO.inheritClass( OO.ui.FieldLayout, OO.ui.Layout ); + +OO.mixinClass( OO.ui.FieldLayout, OO.ui.LabeledElement ); + +/* Methods */ + +/** + * Handles label mouse click events. + * + * @method + * @param {jQuery.Event} e Mouse click event + */ +OO.ui.FieldLayout.prototype.onLabelClick = function () { + var $input; + if ( this.field instanceof OO.ui.InputWidget && !this.field.isDisabled() ) { + $input = this.field.$input; + if ( $input.is( ':checkbox,:radio' ) ) { + this.field.$input.click(); + } else if ( $input.is( ':input' ) ) { + this.field.$input.focus(); + } + } + return false; +}; + +/** + * Get the field. + * + * @returns {OO.ui.Widget} Field widget + */ +OO.ui.FieldLayout.prototype.getField = function () { + return this.field; +}; + +/** + * Set the field alignment mode. + * + * @param {string} value Alignment mode, either 'left', 'right', 'top' or 'inline' + * @chainable + */ +OO.ui.FieldLayout.prototype.setAlignment = function ( value ) { + if ( value !== this.align ) { + // Default to 'left' + if ( [ 'left', 'right', 'top', 'inline' ].indexOf( value ) === -1 ) { + value = 'left'; + } + // Reorder elements + if ( value === 'inline' ) { + this.$element.append( this.$field, this.$label ); + } else { + this.$element.append( this.$label, this.$field ); + } + // Set classes + if ( this.align ) { + this.$element.removeClass( 'oo-ui-fieldLayout-align-' + this.align ); + } + this.align = value; + this.$element.addClass( 'oo-ui-fieldLayout-align-' + this.align ); + } + + return this; +}; /** * Layout made of proportionally sized columns and rows. * @@ -3908,6 +4029,7 @@ * @param {Object} [config] Configuration options * @cfg {boolean} [continuous=false] Show all pages, one after another * @cfg {string} [icon=''] Symbolic icon name + * @cfg {OO.ui.Layout} [items] Layouts to add */ OO.ui.StackLayout = function OoUiStackLayout( config ) { // Config initialization @@ -3927,6 +4049,9 @@ this.$element.addClass( 'oo-ui-stackLayout' ); if ( this.continuous ) { this.$element.addClass( 'oo-ui-stackLayout-continuous' ); + } + if ( Array.isArray( config.items ) ) { + this.addItems( config.items ); } }; @@ -4080,9 +4205,9 @@ // Mixin constructors OO.ui.IconedElement.call( this, this.$( '<span>' ), config ); OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config ); - OO.ui.LabeledElement.call( this, this.$( '<span>' ) ); + OO.ui.LabeledElement.call( this, this.$( '<span>' ), config ); OO.ui.TitledElement.call( this, this.$element, config ); - OO.ui.ClippableElement.call( this, this.$group ); + OO.ui.ClippableElement.call( this, this.$group, config ); // Properties this.active = false; @@ -4343,6 +4468,7 @@ * * @constructor * @param {Object} [config] Configuration options + * @cfg {OO.ui.ButtonWidget} [items] Buttons to add */ OO.ui.ButtonGroupWidget = function OoUiButtonGroupWidget( config ) { // Parent constructor @@ -4353,6 +4479,9 @@ // Initialization this.$element.addClass( 'oo-ui-buttonGroupWidget' ); + if ( Array.isArray( config.items ) ) { + this.addItems( config.items ); + } }; /* Inheritance */ @@ -4643,7 +4772,8 @@ this.$input.prop( 'disabled', this.disabled ); } return this; -};/** +}; +/** * Creates an OO.ui.CheckboxInputWidget object. * * @class @@ -4710,41 +4840,7 @@ } }; /** - * Creates an OO.ui.CheckboxWidget object. - * - * @class - * @extends OO.ui.CheckboxInputWidget - * @mixins OO.ui.LabeledElement - * - * @constructor - * @param {Object} [config] Configuration options - * @cfg {string} [label=''] Label - */ -OO.ui.CheckboxWidget = function OoUiCheckboxWidget( config ) { - // Configuration initialization - config = config || {}; - - // Parent constructor - OO.ui.CheckboxInputWidget.call( this, config ); - - // Mixin constructors - OO.ui.LabeledElement.call( this, this.$( '<span>' ) , config ); - - // Initialization - this.$element - .addClass( 'oo-ui-checkboxWidget' ) - .append( this.$( '<label>' ).append( this.$input, this.$label ) ); -}; - -/* Inheritance */ - -OO.inheritClass( OO.ui.CheckboxWidget, OO.ui.CheckboxInputWidget ); - -OO.mixinClass( OO.ui.CheckboxWidget, OO.ui.LabeledElement ); -/** - * Creates an OO.ui.InputLabelWidget object. - * - * CSS classes will be added to the button for each flag, each prefixed with 'oo-ui-InputLabelWidget-' + * Creates an OO.ui.LabelWidget object. * * @class * @extends OO.ui.Widget @@ -4754,7 +4850,7 @@ * @param {Object} [config] Configuration options * @cfg {OO.ui.InputWidget|null} [input] Related input widget */ -OO.ui.InputLabelWidget = function OoUiInputLabelWidget( config ) { +OO.ui.LabelWidget = function OoUiLabelWidget( config ) { // Config intialization config = $.extend( { 'input': null }, config ); @@ -4771,18 +4867,18 @@ this.$element.on( 'click', OO.ui.bind( this.onClick, this ) ); // Initialization - this.$element.addClass( 'oo-ui-inputLabelWidget' ); + this.$element.addClass( 'oo-ui-labelWidget' ); }; /* Inheritance */ -OO.inheritClass( OO.ui.InputLabelWidget, OO.ui.Widget ); +OO.inheritClass( OO.ui.LabelWidget, OO.ui.Widget ); -OO.mixinClass( OO.ui.InputLabelWidget, OO.ui.LabeledElement ); +OO.mixinClass( OO.ui.LabelWidget, OO.ui.LabeledElement ); /* Static Properties */ -OO.ui.InputLabelWidget.static.tagName = 'label'; +OO.ui.LabelWidget.static.tagName = 'label'; /* Methods */ @@ -4792,9 +4888,15 @@ * @method * @param {jQuery.Event} e Mouse click event */ -OO.ui.InputLabelWidget.prototype.onClick = function () { - if ( !this.disabled && this.input ) { - this.input.$input.focus(); +OO.ui.LabelWidget.prototype.onClick = function () { + var $input; + if ( !this.disabled && this.input instanceof OO.ui.InputWidget && !this.input.isDisabled() ) { + $input = this.input.$input; + if ( $input.is( ':checkbox,:radio' ) ) { + this.input.$input.click(); + } else if ( $input.is( ':input' ) ) { + this.input.$input.focus(); + } } return false; }; @@ -5208,6 +5310,7 @@ * * @constructor * @param {Object} [config] Configuration options + * @cfg {OO.ui.OptionWidget} [items] Options to add */ OO.ui.SelectWidget = function OoUiSelectWidget( config ) { // Config intialization @@ -5235,6 +5338,9 @@ // Initialization this.$element.addClass( 'oo-ui-selectWidget' ); + if ( Array.isArray( config.items ) ) { + this.addItems( config.items ); + } }; /* Inheritance */ @@ -5683,7 +5789,7 @@ OO.ui.SelectWidget.call( this, config ); // Mixin constructors - OO.ui.ClippableElement.call( this, this.$group ); + OO.ui.ClippableElement.call( this, this.$group, config ); // Properties this.newItems = []; diff --git a/lib/oojs-ui/oojs-ui.svg.css b/lib/oojs-ui/oojs-ui.svg.css index 85a325c..89862f7 100644 --- a/lib/oojs-ui/oojs-ui.svg.css +++ b/lib/oojs-ui/oojs-ui.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre-svg (11632fcada) + * OOjs UI v0.1.0-pre-svg (8e27f28cf8) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: Fri Jan 17 2014 18:17:27 GMT-0800 (PST) + * Date: Wed Jan 22 2014 12:10:12 GMT-0800 (PST) */ /*csslint vendor-prefix:false */ @@ -498,6 +498,7 @@ /* OO.ui.FieldsetLayout */ .oo-ui-fieldsetLayout { + position: relative; border: none; margin: 0; padding: 0; @@ -514,12 +515,78 @@ .oo-ui-fieldsetLayout > legend.oo-ui-labeledElement-label { font-size: 1.5em; margin-bottom: 0.5em; + padding-left: 0; } -.oo-ui-fieldsetLayout-decorated > legend.oo-ui-labeledElement-label { +.oo-ui-fieldsetLayout.oo-ui-iconedElement > legend.oo-ui-labeledElement-label { padding-left: 1.75em; - background-position: left center; +} + +.oo-ui-fieldsetLayout.oo-ui-iconedElement > .oo-ui-iconedElement-icon { + display: block; + position: absolute; + left: 0; + top: 0.5em; + width: 2em; + height: 2em; + background-position: center center; background-repeat: no-repeat; +} + +/* OO.ui.FieldLayout */ + +.oo-ui-fieldLayout { + margin-bottom: 1em; +} + +.oo-ui-fieldLayout:last-child { + margin-bottom: 0; +} + +.oo-ui-fieldLayout:before, +.oo-ui-fieldLayout:after { + content: " "; + display: table; +} + +.oo-ui-fieldLayout:after { + clear: both; +} + +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labeledElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label { + display: block; + float: left; + width: 35%; + padding-top: 0.5em; + margin-right: 5%; +} + +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { + display: block; + float: left; + width: 60%; +} + +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label { + text-align: right; +} + +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labeledElement-label { + display: inline-block; + vertical-align: middle; + padding: 0.75em 0.5em 0.5em 0.5em; +} + +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { + display: inline-block; + vertical-align: middle; + padding: 0.5em 0; +} + +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labeledElement-label { + padding: 0.5em 0; } /* OO.ui.BookletLayout */ @@ -995,6 +1062,7 @@ .oo-ui-buttonGroupWidget { display: inline-block; + white-space: nowrap; border-radius: 0.3em; box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1); } @@ -1151,9 +1219,9 @@ cursor: default; } -/* OO.ui.InputLabelWidget */ +/* OO.ui.LabelWidget */ -.oo-ui-inputLabelWidget { +.oo-ui-labelWidget { padding: 0.5em 0; } @@ -1236,21 +1304,6 @@ background-repeat: no-repeat; } -/* OO.ui.CheckboxWidget */ -.oo-ui-checkboxWidget .oo-ui-labeledElement-label { - display: inline-block; - vertical-align: middle; - padding-left: 0.5em; -} - -.oo-ui-checkboxWidget input { - vertical-align: middle; -} - -.oo-ui-checkboxWidget.oo-ui-widget-disabled .oo-ui-labeledElement-label { - opacity: 0.5; -} - /* OO.ui.MenuWidget */ .oo-ui-menuWidget { @@ -1304,6 +1357,7 @@ .oo-ui-buttonSelectWidget { display: inline-block; + white-space: nowrap; border-radius: 0.3em; box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1); } -- To view, visit https://gerrit.wikimedia.org/r/108957 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ib544f68fe1e20e1fbe9dddc6cc501fdfa3de5852 Gerrit-PatchSet: 1 Gerrit-Project: VisualEditor/VisualEditor Gerrit-Branch: master Gerrit-Owner: Trevor Parscal <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
