VolkerE has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/350354 )
Change subject: Update OOjs UI to v0.21.2 ...................................................................... Update OOjs UI to v0.21.2 Release notes: https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/History.md;v0.21.2 Change-Id: Id7cae80a4f3d84ea5d50003f2409537b307c0c58 --- M composer.json M resources/lib/oojs-ui/i18n/sr-ec.json M resources/lib/oojs-ui/oojs-ui-apex.js M resources/lib/oojs-ui/oojs-ui-core-apex.css M resources/lib/oojs-ui/oojs-ui-core-mediawiki.css M resources/lib/oojs-ui/oojs-ui-core.js M resources/lib/oojs-ui/oojs-ui-mediawiki.js M resources/lib/oojs-ui/oojs-ui-toolbars-apex.css M resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css M resources/lib/oojs-ui/oojs-ui-toolbars.js M resources/lib/oojs-ui/oojs-ui-widgets-apex.css M resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css M resources/lib/oojs-ui/oojs-ui-widgets.js M resources/lib/oojs-ui/oojs-ui-windows-apex.css M resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css M resources/lib/oojs-ui/oojs-ui-windows.js 16 files changed, 257 insertions(+), 185 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/54/350354/1 diff --git a/composer.json b/composer.json index be8ce15..ed42b60 100644 --- a/composer.json +++ b/composer.json @@ -25,7 +25,7 @@ "ext-xml": "*", "liuggio/statsd-php-client": "1.0.18", "mediawiki/at-ease": "1.1.0", - "oojs/oojs-ui": "0.21.1", + "oojs/oojs-ui": "0.21.2", "oyejorge/less.php": "1.7.0.14", "php": ">=5.5.9", "psr/log": "1.0.2", diff --git a/resources/lib/oojs-ui/i18n/sr-ec.json b/resources/lib/oojs-ui/i18n/sr-ec.json index 9d3b926..87b7c2b 100644 --- a/resources/lib/oojs-ui/i18n/sr-ec.json +++ b/resources/lib/oojs-ui/i18n/sr-ec.json @@ -4,11 +4,12 @@ "Milicevic01", "Nikola Smolenski", "Милан Јелисавчић", - "Zoranzoki21" + "Zoranzoki21", + "Obsuser" ] }, - "ooui-outline-control-move-down": "Премести ставку на доле", - "ooui-outline-control-move-up": "Премести ставку на горе", + "ooui-outline-control-move-down": "Премести ставку надоле", + "ooui-outline-control-move-up": "Премести ставку нагоре", "ooui-outline-control-remove": "Уклони ставку", "ooui-toolbar-more": "Више", "ooui-toolgroup-expand": "Више", diff --git a/resources/lib/oojs-ui/oojs-ui-apex.js b/resources/lib/oojs-ui/oojs-ui-apex.js index ef48f5b..bb0f603 100644 --- a/resources/lib/oojs-ui/oojs-ui-apex.js +++ b/resources/lib/oojs-ui/oojs-ui-apex.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:49Z + * Date: 2017-04-26T01:05:10Z */ ( function ( OO ) { diff --git a/resources/lib/oojs-ui/oojs-ui-core-apex.css b/resources/lib/oojs-ui/oojs-ui-core-apex.css index 29b0874..cecff46 100644 --- a/resources/lib/oojs-ui/oojs-ui-core-apex.css +++ b/resources/lib/oojs-ui/oojs-ui-core-apex.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:54Z + * Date: 2017-04-26T01:05:15Z */ .oo-ui-element-hidden { display: none !important; @@ -1332,6 +1332,9 @@ margin-right: 0; } .oo-ui-progressBarWidget { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; max-width: 50em; background-color: #fff; border: 1px solid #ccc; diff --git a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css index a994e00..393ff59 100644 --- a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css +++ b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:54Z + * Date: 2017-04-26T01:05:15Z */ .oo-ui-element-hidden { display: none !important; @@ -209,11 +209,13 @@ opacity: 0.51; } .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { - min-height: 2.5em; border-radius: 2px; - padding: 0.625em 0.9375em 0.546875em; + padding-left: 0.9375em; + padding-right: 0.9375em; } .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button { + padding-top: 2.34375em; + padding-bottom: 0; padding-left: 2.03125em; } .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { @@ -228,7 +230,9 @@ left: 0.46875em; } .oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button { + padding-top: 2.34375em; padding-right: 2.03125em; + padding-bottom: 0; } .oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { right: 1.015625em; @@ -236,6 +240,10 @@ .oo-ui-buttonElement-framed.oo-ui-indicatorElement.oo-ui-labelElement > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-indicatorElement.oo-ui-iconElement > .oo-ui-buttonElement-button { padding-right: 2.5em; +} +.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button { + padding-top: 0.625em; + padding-bottom: 0.546875em; } .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button { background-color: #c8ccd1; @@ -318,7 +326,7 @@ outline: 0; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { - color: #d33; + color: #d73333; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover { background-color: #fff; @@ -1536,7 +1544,7 @@ .oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator { opacity: 0.51; } -.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-labelElement-label { +.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label { color: #72777d; text-shadow: 0 1px 1px #fff; } @@ -1546,6 +1554,8 @@ } .oo-ui-textInputWidget.oo-ui-iconElement .oo-ui-iconElement-icon { left: 0.46875em; +} +.oo-ui-textInputWidget.oo-ui-iconElement textarea + .oo-ui-iconElement-icon { max-height: 2.5em; } .oo-ui-textInputWidget.oo-ui-indicatorElement input, @@ -1836,6 +1846,9 @@ margin-right: 0; } .oo-ui-progressBarWidget { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; max-width: 50em; background-color: #fff; border: 1px solid #a2a9b1; diff --git a/resources/lib/oojs-ui/oojs-ui-core.js b/resources/lib/oojs-ui/oojs-ui-core.js index c00d9a7..cab24e4 100644 --- a/resources/lib/oojs-ui/oojs-ui-core.js +++ b/resources/lib/oojs-ui/oojs-ui-core.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:49Z + * Date: 2017-04-26T01:05:10Z */ ( function ( OO ) { @@ -584,6 +584,7 @@ // Properties this.$ = $; + this.elementId = null; this.visible = true; this.data = config.data; this.$element = config.$element || @@ -595,7 +596,7 @@ this.$element.addClass( config.classes.join( ' ' ) ); } if ( config.id ) { - this.$element.attr( 'id', config.id ); + this.setElementId( config.id ); } if ( config.text ) { this.$element.text( config.text ); @@ -1373,6 +1374,31 @@ OO.ui.Element.prototype.setData = function ( data ) { this.data = data; return this; +}; + +/** + * Set the element has an 'id' attribute. + * + * @param {string} id + * @chainable + */ +OO.ui.Element.prototype.setElementId = function ( id ) { + this.elementId = id; + this.$element.attr( 'id', id ); + return this; +}; + +/** + * Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, + * and return its value. + * + * @return {string} + */ +OO.ui.Element.prototype.getElementId = function () { + if ( this.elementId === null ) { + this.setElementId( OO.ui.generateElementId() ); + } + return this.elementId; }; /** @@ -5320,6 +5346,7 @@ * @cfg {jQuery} [$overlay] Render the popup into a separate layer. This configuration is useful in cases where * the expanded popup is larger than its containing `<div>`. The specified overlay layer is usually on top of the * containing `<div>` and has a larger area. By default, the popup uses relative positioning. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. */ OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) { // Parent constructor @@ -5764,6 +5791,7 @@ this.$element .addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' ) .attr( 'role', 'listbox' ); + this.setFocusOwner( this.$element ); if ( Array.isArray( config.items ) ) { this.addItems( config.items ); } @@ -5856,7 +5884,7 @@ } if ( event.target !== this.$element[ 0 ] ) { - this.$element.focus(); + this.$focusOwner.focus(); } }; @@ -6270,6 +6298,11 @@ } } if ( changed ) { + if ( item ) { + this.$focusOwner.attr( 'aria-activedescendant', item.getElementId() ); + } else { + this.$focusOwner.removeAttr( 'aria-activedescendant' ); + } this.emit( 'highlight', item ); } @@ -6368,6 +6401,13 @@ } } if ( changed ) { + if ( item && !item.constructor.static.highlightable ) { + if ( item ) { + this.$focusOwner.attr( 'aria-activedescendant', item.getElementId() ); + } else { + this.$focusOwner.removeAttr( 'aria-activedescendant' ); + } + } this.emit( 'select', item ); } @@ -6545,6 +6585,18 @@ }; /** + * Set the DOM element which has focus while the user is interacting with this SelectWidget. + * + * Currently this is just used to set `aria-activedescendant` on it. + * + * @protected + * @param {jQuery} $focusOwner + */ +OO.ui.SelectWidget.prototype.setFocusOwner = function ( $focusOwner ) { + this.$focusOwner = $focusOwner; +}; + +/** * DecoratedOptionWidgets are {@link OO.ui.OptionWidget options} that can be configured * with an {@link OO.ui.mixin.IconElement icon} and/or {@link OO.ui.mixin.IndicatorElement indicator}. * This class is used with OO.ui.SelectWidget to create a selection of mutually exclusive @@ -6618,9 +6670,7 @@ OO.ui.MenuOptionWidget.parent.call( this, config ); // Initialization - this.$element - .attr( 'role', 'menuitem' ) - .addClass( 'oo-ui-menuOptionWidget' ); + this.$element.addClass( 'oo-ui-menuOptionWidget' ); }; /* Setup */ @@ -6765,9 +6815,10 @@ this.highlightOnFilter = !!config.highlightOnFilter; // Initialization - this.$element - .addClass( 'oo-ui-menuSelectWidget' ) - .attr( 'role', 'menu' ); + this.$element.addClass( 'oo-ui-menuSelectWidget' ); + if ( config.widget ) { + this.setFocusOwner( config.widget.$tabIndexed ); + } // Initially hidden - using #toggle may cause errors if subclasses override toggle with methods // that reference properties not initialized at that time of parent class construction @@ -7023,6 +7074,7 @@ this.toggleClipping( true ); if ( this.getSelectedItem() ) { + this.$focusOwner.attr( 'aria-activedescendant', this.getSelectedItem().getElementId() ); this.getSelectedItem().scrollElementIntoView( { duration: 0 } ); } @@ -7031,6 +7083,7 @@ this.getElementDocument().addEventListener( 'mousedown', this.onDocumentMouseDownHandler, true ); } } else { + this.$focusOwner.removeAttr( 'aria-activedescendant' ); this.unbindKeyDownListener(); this.unbindKeyPressListener(); this.getElementDocument().removeEventListener( 'mousedown', this.onDocumentMouseDownHandler, true ); @@ -7095,6 +7148,7 @@ * @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful in cases where * the expanded menu is larger than its containing `<div>`. The specified overlay layer is usually on top of the * containing `<div>` and has a larger area. By default, the menu uses relative positioning. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. */ OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) { // Configuration initialization @@ -7136,6 +7190,11 @@ // Initialization this.$handle .addClass( 'oo-ui-dropdownWidget-handle' ) + .attr( { + role: 'combobox', + 'aria-owns': this.menu.getElementId(), + 'aria-autocomplete': 'list' + } ) .append( this.$icon, this.$label, this.$indicator ); this.$element .addClass( 'oo-ui-dropdownWidget' ) @@ -10291,6 +10350,7 @@ * @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful in cases where * the expanded menu is larger than its containing `<div>`. The specified overlay layer is usually on top of the * containing `<div>` and has a larger area. By default, the menu uses relative positioning. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. */ OO.ui.ComboBoxInputWidget = function OoUiComboBoxInputWidget( config ) { // Configuration initialization @@ -10343,6 +10403,7 @@ // Initialization this.$input.attr( { role: 'combobox', + 'aria-owns': this.menu.getElementId(), 'aria-autocomplete': 'list' } ); // Do not override options set via config.menu.items @@ -10521,6 +10582,7 @@ * in the upper-right corner of the rendered field; clicking it will display the text in a popup. * For important messages, you are advised to use `notices`, as they are always shown. * @cfg {jQuery} [$overlay] Passed to OO.ui.PopupButtonWidget for help popup, if `help` is given. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. * * @throws {Error} An error is thrown if no widget is specified */ @@ -10885,6 +10947,7 @@ * in the upper-right corner of the rendered field; clicking it will display the text in a popup. * For important messages, you are advised to use `notices`, as they are always shown. * @cfg {jQuery} [$overlay] Passed to OO.ui.PopupButtonWidget for help popup, if `help` is given. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. */ OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) { // Configuration initialization diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js index 60c67b6..726248c 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.js +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:49Z + * Date: 2017-04-26T01:05:10Z */ ( function ( OO ) { diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css b/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css index 53c5bf3..0bc7c94 100644 --- a/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css +++ b/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:54Z + * Date: 2017-04-26T01:05:15Z */ .oo-ui-popupTool .oo-ui-popupWidget-popup, .oo-ui-popupTool .oo-ui-popupWidget-anchor { diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css index a82a8b2..f046fa5 100644 --- a/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css +++ b/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:54Z + * Date: 2017-04-26T01:05:15Z */ .oo-ui-tool.oo-ui-widget-enabled { -webkit-transition: background-color 100ms; diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars.js b/resources/lib/oojs-ui/oojs-ui-toolbars.js index 9ef478b..97c99ef 100644 --- a/resources/lib/oojs-ui/oojs-ui-toolbars.js +++ b/resources/lib/oojs-ui/oojs-ui-toolbars.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:49Z + * Date: 2017-04-26T01:05:10Z */ ( function ( OO ) { diff --git a/resources/lib/oojs-ui/oojs-ui-widgets-apex.css b/resources/lib/oojs-ui/oojs-ui-widgets-apex.css index dc149fb..77b6b81 100644 --- a/resources/lib/oojs-ui/oojs-ui-widgets-apex.css +++ b/resources/lib/oojs-ui/oojs-ui-widgets-apex.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:54Z + * Date: 2017-04-26T01:05:15Z */ .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ).oo-ui-widget { cursor: move; @@ -663,22 +663,21 @@ } .oo-ui-tabOptionWidget { display: inline-block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; vertical-align: bottom; - padding: 0.5em 1em; margin: 0.5em 0 0 0.75em; - border: 1px solid transparent; - border-bottom: 0; + border-color: transparent; + border-style: solid; + border-width: 1px 1px 0 1px; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; + padding: 0.5em 1em; } -.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label { - padding-right: 1.5em; -} -.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { - opacity: 0.5; -} -.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-pressed { - background-color: transparent; +.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { + background-color: #fff; + border-color: #ddd; } .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { background-color: rgba(255, 255, 255, 0.2); @@ -688,11 +687,8 @@ background-color: #fff; border-color: #ddd; } -.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, -.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, -.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover { +.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover { background-color: #fff; - border-color: #ddd; } .oo-ui-tagMultiselectWidget { display: inline-block; @@ -1059,11 +1055,8 @@ max-width: 50em; } .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget, -.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget { +.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input { display: table-cell; - height: 100%; -} -.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input { height: 100%; } .oo-ui-numberInputWidget-field { @@ -1084,6 +1077,6 @@ border-bottom-left-radius: 0; border-left-width: 0; } -.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input { +.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input { border-radius: 0; } diff --git a/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css index 9b06573..d83f97f 100644 --- a/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css +++ b/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:54Z + * Date: 2017-04-26T01:05:15Z */ .oo-ui-draggableElement { padding: 1.0546875em 0.9375em 0.9375em; @@ -769,18 +769,30 @@ } .oo-ui-tabOptionWidget { display: inline-block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; vertical-align: bottom; color: #222; - margin: 0.5em 0 0 0.75em; - border: 1px solid transparent; - border-bottom: 0; + margin: 0.46875em 0 0 0.46875em; + border-color: transparent; + border-style: solid; + border-width: 1px 1px 0 1px; border-top-left-radius: 2px; border-top-right-radius: 2px; - padding: 0.35em 1em; + padding: 0.625em 1.015625em 0.546875em; font-weight: bold; + line-height: 1; -webkit-transition: background-color 100ms, color 100ms; -moz-transition: background-color 100ms, color 100ms; transition: background-color 100ms, color 100ms; +} +.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { + background-color: #fff; + color: #000; +} +.oo-ui-tabOptionWidget .oo-ui-labelElement-label { + line-height: 1.172em; } .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { background-color: rgba(255, 255, 255, 0.3); @@ -788,17 +800,8 @@ .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active { background-color: rgba(255, 255, 255, 0.8); } -.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label { - padding-right: 1.5em; -} -.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { - opacity: 0.5; -} -.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, -.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, -.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover { +.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover { background-color: #fff; - color: #000; } .oo-ui-tagMultiselectWidget { display: inline-block; @@ -918,7 +921,7 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle .oo-ui-tagItemWidget.oo-ui-widget-enabled { +.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled { background-color: #fff; } .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input { @@ -961,16 +964,6 @@ overflow: hidden; cursor: text; } -.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid { - border-color: #d33; -} -.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid:hover { - border-color: #d33; -} -.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid:focus { - border-color: #d33; - box-shadow: inset 0 0 0 1px #d33; -} .oo-ui-tagItemWidget.oo-ui-widget-enabled { background-color: #f8f9fa; color: #222; @@ -988,6 +981,16 @@ border-color: #36c; box-shadow: inset 0 0 0 1px #36c; outline: 0; +} +.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid { + border-color: #d33; +} +.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover { + border-color: #d33; +} +.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus { + border-color: #d33; + box-shadow: inset 0 0 0 1px #d33; } .oo-ui-tagItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement { display: block; @@ -1234,16 +1237,17 @@ overflow-y: auto; } .oo-ui-searchWidget-query { - height: 4em; - padding: 0 1em; - border-bottom: 1px solid #a2a9b1; + height: 4.375em; + padding: 0 1.25em; + border-bottom: 1px solid #c8ccd1; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); } .oo-ui-searchWidget-query .oo-ui-textInputWidget { - margin: 0.75em 0; + margin: 0.9375em 0; } .oo-ui-searchWidget-results { - top: 4em; - padding: 1em; + top: 4.375em; + padding: 1.25em; line-height: 0; } .oo-ui-numberInputWidget { @@ -1252,11 +1256,8 @@ max-width: 50em; } .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget, -.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget { +.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input { display: table-cell; - height: 100%; -} -.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input { height: 100%; } .oo-ui-numberInputWidget-field { @@ -1274,7 +1275,7 @@ padding-left: 0; padding-right: 0; } -.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input { +.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input { border-radius: 0; } .oo-ui-numberInputWidget-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { diff --git a/resources/lib/oojs-ui/oojs-ui-widgets.js b/resources/lib/oojs-ui/oojs-ui-widgets.js index a2e6e34..58ff9e5 100644 --- a/resources/lib/oojs-ui/oojs-ui-widgets.js +++ b/resources/lib/oojs-ui/oojs-ui-widgets.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:49Z + * Date: 2017-04-26T01:05:10Z */ ( function ( OO ) { @@ -628,7 +628,8 @@ * * @constructor * @param {Object} [config] Configuration options - * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning + * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. * @cfg {jQuery} [$container=this.$element] The container element. The lookup menu is rendered beneath the specified element. * @cfg {boolean} [allowSuggestionsWhenEmpty=false] Request and display a lookup menu when the text input is empty. * By default, the lookup menu is not generated and displayed until the user begins to type. @@ -669,6 +670,11 @@ } ); // Initialization + this.$input.attr( { + role: 'combobox', + 'aria-owns': this.lookupMenu.getElementId(), + 'aria-autocomplete': 'list' + } ); this.$element.addClass( 'oo-ui-lookupElement' ); this.lookupMenu.$element.addClass( 'oo-ui-lookupElement-menu' ); this.$overlay.append( this.lookupMenu.$element ); @@ -3701,6 +3707,7 @@ * its containing `<div>`. The specified overlay layer is usually on top of * the containing `<div>` and has a larger area. By default, the menu uses * relative positioning. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. */ OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config ) { var $tabFocus; @@ -3795,6 +3802,7 @@ this.$input.prop( 'disabled', this.isDisabled() ); this.$input.attr( { role: 'combobox', + 'aria-owns': this.menu.getElementId(), 'aria-autocomplete': 'list' } ); } @@ -5512,7 +5520,8 @@ * @mixins OO.ui.mixin.PopupElement * * @param {Object} config Configuration object - * @cfg {jQuery} [$overlay] An overlay for the popup + * @cfg {jQuery} [$overlay] An overlay for the popup. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. * @cfg {Object} [popup] Configuration options for the popup * @cfg {OO.ui.InputWidget} [popupInput] An input widget inside the popup that will be * focused when the popup is opened and will be used as replacement for the @@ -5566,6 +5575,7 @@ } // Events + this.on( 'resize', this.popup.updateDimensions.bind( this.popup ) ); this.popup.connect( this, { toggle: 'onPopupToggle' } ); this.$tabIndexed .on( 'focus', this.focus.bind( this ) ); @@ -5675,7 +5685,8 @@ * @constructor * @param {Object} [config] Configuration object * @cfg {Object} [menu] Configuration object for the menu widget - * @cfg {jQuery} [$overlay] An overlay for the menu + * @cfg {jQuery} [$overlay] An overlay for the menu. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. * @cfg {Object[]} [options=[]] Array of menu options in the format `{ data: …, label: … }` */ OO.ui.MenuTagMultiselectWidget = function OoUiMenuTagMultiselectWidget( config ) { @@ -6546,14 +6557,13 @@ * $( 'body' ).append( numberInput.$element ); * * @class - * @extends OO.ui.Widget + * @extends OO.ui.TextInputWidget * * @constructor * @param {Object} [config] Configuration options - * @cfg {Object} [input] Configuration options to pass to the {@link OO.ui.TextInputWidget text input widget}. * @cfg {Object} [minusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget decrementing button widget}. * @cfg {Object} [plusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget incrementing button widget}. - * @cfg {boolean} [isInteger=false] Whether the field accepts only integer values. + * @cfg {boolean} [allowInteger=false] Whether the field accepts only integer values. * @cfg {number} [min=-Infinity] Minimum allowed value * @cfg {number} [max=Infinity] Maximum allowed value * @cfg {number} [step=1] Delta when using the buttons or up/down arrow keys @@ -6561,6 +6571,9 @@ * @cfg {boolean} [showButtons=true] Whether to show the plus and minus buttons. */ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) { + var $field = $( '<div>' ) + .addClass( 'oo-ui-numberInputWidget-field' ); + // Configuration initialization config = $.extend( { isInteger: false, @@ -6571,17 +6584,15 @@ showButtons: true }, config ); - // Parent constructor - OO.ui.NumberInputWidget.parent.call( this, config ); + // For backward compatibility + $.extend( config, config.input ); + this.input = this; - // Properties - this.input = new OO.ui.TextInputWidget( $.extend( - { - disabled: this.isDisabled(), - type: 'number' - }, - config.input - ) ); + // Parent constructor + OO.ui.NumberInputWidget.parent.call( this, $.extend( config, { + type: 'number' + } ) ); + if ( config.showButtons ) { this.minusButton = new OO.ui.ButtonWidget( $.extend( { @@ -6604,11 +6615,7 @@ } // Events - this.input.connect( this, { - change: this.emit.bind( this, 'change' ), - enter: this.emit.bind( this, 'enter' ) - } ); - this.input.$input.on( { + this.$input.on( { keydown: this.onKeyDown.bind( this ), 'wheel mousewheel DOMMouseScroll': this.onWheel.bind( this ) } ); @@ -6621,40 +6628,31 @@ } ); } - // Initialization - this.setIsInteger( !!config.isInteger ); - this.setRange( config.min, config.max ); - this.setStep( config.step, config.pageStep ); - - this.$field = $( '<div>' ).addClass( 'oo-ui-numberInputWidget-field' ) - .append( this.input.$element ); - this.$element.addClass( 'oo-ui-numberInputWidget' ).append( this.$field ); + // Build the field + $field.append( this.$input ); if ( config.showButtons ) { - this.$field + $field .prepend( this.minusButton.$element ) .append( this.plusButton.$element ); - this.$element.addClass( 'oo-ui-numberInputWidget-buttoned' ); } - this.input.setValidation( this.validateNumber.bind( this ) ); + + // Initialization + this.setAllowInteger( config.isInteger || config.allowInteger ); + this.setRange( config.min, config.max ); + this.setStep( config.step, config.pageStep ); + // Set the validation method after we set isInteger and range + // so that it doesn't immediately call setValidityFlag + this.setValidation( this.validateNumber.bind( this ) ); + + this.$element + .addClass( 'oo-ui-numberInputWidget' ) + .toggleClass( 'oo-ui-numberInputWidget-buttoned', config.showButtons ) + .append( $field ); }; /* Setup */ -OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.Widget ); - -/* Events */ - -/** - * A `change` event is emitted when the value of the input changes. - * - * @event change - */ - -/** - * An `enter` event is emitted when the user presses 'enter' inside the text box. - * - * @event enter - */ +OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.TextInputWidget ); /* Methods */ @@ -6663,19 +6661,23 @@ * * @param {boolean} flag */ -OO.ui.NumberInputWidget.prototype.setIsInteger = function ( flag ) { +OO.ui.NumberInputWidget.prototype.setAllowInteger = function ( flag ) { this.isInteger = !!flag; - this.input.setValidityFlag(); + this.setValidityFlag(); }; +// Backward compatibility +OO.ui.NumberInputWidget.prototype.setIsInteger = OO.ui.NumberInputWidget.prototype.setAllowInteger; /** * Get whether only integers are allowed * * @return {boolean} Flag value */ -OO.ui.NumberInputWidget.prototype.getIsInteger = function () { +OO.ui.NumberInputWidget.prototype.getAllowInteger = function () { return this.isInteger; }; +// Backward compatibility +OO.ui.NumberInputWidget.prototype.getIsInteger = OO.ui.NumberInputWidget.prototype.getAllowInteger; /** * Set the range of allowed values @@ -6689,7 +6691,7 @@ } this.min = min; this.max = max; - this.input.setValidityFlag(); + this.setValidityFlag(); }; /** @@ -6730,30 +6732,12 @@ }; /** - * Get the current value of the widget - * - * @return {string} - */ -OO.ui.NumberInputWidget.prototype.getValue = function () { - return this.input.getValue(); -}; - -/** * Get the current value of the widget as a number * * @return {number} May be NaN, or an invalid number */ OO.ui.NumberInputWidget.prototype.getNumericValue = function () { - return +this.input.getValue(); -}; - -/** - * Set the value of the widget - * - * @param {string} value Invalid values are allowed - */ -OO.ui.NumberInputWidget.prototype.setValue = function ( value ) { - this.input.setValue( value ); + return +this.getValue(); }; /** @@ -6783,7 +6767,6 @@ this.setValue( n ); } }; - /** * Validate input * @@ -6793,6 +6776,10 @@ */ OO.ui.NumberInputWidget.prototype.validateNumber = function ( value ) { var n = +value; + if ( value === '' ) { + return !this.isRequired(); + } + if ( isNaN( n ) || !isFinite( n ) ) { return false; } @@ -6827,7 +6814,7 @@ OO.ui.NumberInputWidget.prototype.onWheel = function ( event ) { var delta = 0; - if ( !this.isDisabled() && this.input.$input.is( ':focus' ) ) { + if ( !this.isDisabled() && this.$input.is( ':focus' ) ) { // Standard 'wheel' event if ( event.originalEvent.deltaMode !== undefined ) { this.sawWheelEvent = true; @@ -6892,9 +6879,6 @@ // Parent method OO.ui.NumberInputWidget.parent.prototype.setDisabled.call( this, disabled ); - if ( this.input ) { - this.input.setDisabled( this.isDisabled() ); - } if ( this.minusButton ) { this.minusButton.setDisabled( this.isDisabled() ); } diff --git a/resources/lib/oojs-ui/oojs-ui-windows-apex.css b/resources/lib/oojs-ui/oojs-ui-windows-apex.css index c9c4c1b..422dbd2 100644 --- a/resources/lib/oojs-ui/oojs-ui-windows-apex.css +++ b/resources/lib/oojs-ui/oojs-ui-windows-apex.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:54Z + * Date: 2017-04-26T01:05:15Z */ .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/apex/images/textures/pending.gif); @@ -213,7 +213,7 @@ left: 0; right: 0; bottom: 0; - z-index: 2; + z-index: 4; overflow-x: hidden; overflow-y: auto; } diff --git a/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css index f6828e2..8a69c0f 100644 --- a/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css +++ b/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:54Z + * Date: 2017-04-26T01:05:15Z */ .oo-ui-window { background: transparent; @@ -212,7 +212,7 @@ left: 0; right: 0; bottom: 0; - z-index: 2; + z-index: 4; overflow-x: hidden; overflow-y: auto; } diff --git a/resources/lib/oojs-ui/oojs-ui-windows.js b/resources/lib/oojs-ui/oojs-ui-windows.js index c955919..5a06841 100644 --- a/resources/lib/oojs-ui/oojs-ui-windows.js +++ b/resources/lib/oojs-ui/oojs-ui-windows.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.21.1 + * OOjs UI v0.21.2 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2017 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2017-04-18T23:32:49Z + * Date: 2017-04-26T01:05:10Z */ ( function ( OO ) { @@ -1636,6 +1636,26 @@ this.manager = null; this.size = config.size || this.constructor.static.size; this.$frame = $( '<div>' ); + /** + * Overlay element to use for the `$overlay` configuration option of widgets that support it. + * Things put inside of it are overlaid on top of the window and are not bound to its dimensions. + * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>. + * + * MyDialog.prototype.initialize = function () { + * ... + * var popupButton = new OO.ui.PopupButtonWidget( { + * $overlay: this.$overlay, + * label: 'Popup button', + * popup: { + * $content: $( '<p>Popup contents.</p><p>Popup contents.</p><p>Popup contents.</p>' ), + * padded: true + * } + * } ); + * ... + * }; + * + * @property {jQuery} + */ this.$overlay = $( '<div>' ); this.$content = $( '<div>' ); @@ -2492,21 +2512,15 @@ * @inheritdoc */ OO.ui.Dialog.prototype.initialize = function () { - var titleId; - // Parent method OO.ui.Dialog.parent.prototype.initialize.call( this ); - titleId = OO.ui.generateElementId(); - // Properties - this.title = new OO.ui.LabelWidget( { - id: titleId - } ); + this.title = new OO.ui.LabelWidget(); // Initialization this.$content.addClass( 'oo-ui-dialog-content' ); - this.$element.attr( 'aria-labelledby', titleId ); + this.$element.attr( 'aria-labelledby', this.title.getElementId() ); this.setPendingElement( this.$head ); }; -- To view, visit https://gerrit.wikimedia.org/r/350354 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Id7cae80a4f3d84ea5d50003f2409537b307c0c58 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: VolkerE <volke...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits