From: James D. Forrester Date: Thu, 13 Feb 2014 21:58:18 +0000 (-0800) Subject: Update OOjs UI to v0.1.0-pre (7788dc6700) X-Git-Tag: 1.31.0-rc.0~16919^2 X-Git-Url: https://git.cyclocoop.org/%242?a=commitdiff_plain;h=b3fd34ee8478ffab9661bd798e39e9afa5eb2967;p=lhc%2Fweb%2Fwiklou.git Update OOjs UI to v0.1.0-pre (7788dc6700) 27832b1 Moved PNG icons to their own variant 06cf9a3 Make disabled state inheritable 4dd81c9 Removed some of the drop-shadows on buttons 88efa8e Localisation updates from https://translatewiki.net. Change-Id: Ie66d907e8edabe722e2c2d2662a902e2aec1e1a7 --- diff --git a/resources/oojs-ui/i18n/km.json b/resources/oojs-ui/i18n/km.json new file mode 100644 index 0000000000..2013ee3de4 --- /dev/null +++ b/resources/oojs-ui/i18n/km.json @@ -0,0 +1,11 @@ +{ + "@metadata": { + "authors": [ + "Sovichet" + ] + }, + "ooui-dialog-action-close": "បិទ", + "ooui-outline-control-move-down": "រុញ​ទៅ​ក្រោម", + "ooui-outline-control-move-up": "រុញ​ទៅ​លើ", + "ooui-toolbar-more": "បន្ថែម" +} \ No newline at end of file diff --git a/resources/oojs-ui/oojs-ui.js b/resources/oojs-ui/oojs-ui.js index a58f65d887..07bb2a84f0 100644 --- a/resources/oojs-ui/oojs-ui.js +++ b/resources/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (a290673bbd) + * OOjs UI v0.1.0-pre (7788dc6700) * 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: Wed Feb 12 2014 13:52:08 GMT-0800 (PST) + * Date: Thu Feb 13 2014 13:56:07 GMT-0800 (PST) */ ( function () { @@ -176,6 +176,7 @@ OO.ui.Element = function OoUiElement( config ) { // Properties this.$ = config.$ || OO.ui.Element.getJQuery( document ); this.$element = this.$( this.$.context.createElement( this.getTagName() ) ); + this.elementGroup = null; // Initialization if ( Array.isArray( config.classes ) ) { @@ -559,6 +560,26 @@ OO.ui.Element.prototype.getClosestScrollableElementContainer = function () { return OO.ui.Element.getClosestScrollableContainer( this.$element[0] ); }; +/** + * Get group element is in. + * + * @returns {OO.ui.GroupElement|null} Group element, null if none + */ +OO.ui.Element.prototype.getElementGroup = function () { + return this.elementGroup; +}; + +/** + * Set group element is in. + * + * @param {OO.ui.GroupElement|null} group Group element, null if none + * @chainable + */ +OO.ui.Element.prototype.setElementGroup = function ( group ) { + this.elementGroup = group; + return this; +}; + /** * Scroll element into view * @@ -1654,11 +1675,12 @@ OO.ui.Widget = function OoUiWidget( config ) { OO.EventEmitter.call( this ); // Properties - this.disabled = config.disabled; + this.disabled = null; + this.wasDisabled = null; // Initialization this.$element.addClass( 'oo-ui-widget' ); - this.setDisabled( this.disabled ); + this.setDisabled( !!config.disabled ); }; /* Inheritance */ @@ -1667,6 +1689,13 @@ OO.inheritClass( OO.ui.Widget, OO.ui.Element ); OO.mixinClass( OO.ui.Widget, OO.EventEmitter ); +/* Events */ + +/** + * @event disable + * @param {boolean} disabled Widget is disabled + */ + /* Methods */ /** @@ -1679,22 +1708,36 @@ OO.ui.Widget.prototype.isDisabled = function () { return this.disabled; }; +/** + * Update the disabled state, in case of changes in parent widget. + * + * @method + * @chainable + */ +OO.ui.Widget.prototype.updateDisabled = function () { + this.setDisabled( this.disabled ); + return this; +}; + /** * Set the disabled state of the widget. * * This should probably change the widgets's appearance and prevent it from being used. * * @method - * @param {boolean} disabled Disable button + * @param {boolean} disabled Disable widget * @chainable */ OO.ui.Widget.prototype.setDisabled = function ( disabled ) { + var isDisabled; + this.disabled = !!disabled; - if ( this.disabled ) { - this.$element.addClass( 'oo-ui-widget-disabled' ); - } else { - this.$element.removeClass( 'oo-ui-widget-disabled' ); + isDisabled = this.isDisabled(); + if ( isDisabled !== this.wasDisabled ) { + this.$element.toggleClass( 'oo-ui-widget-disabled', isDisabled ); + this.emit( 'disable', isDisabled ); } + this.wasDisabled = isDisabled; return this; }; /** @@ -2058,6 +2101,7 @@ OO.ui.GroupElement.prototype.addItems = function ( items, index ) { } item.connect( this, events ); } + item.setElementGroup( this ); $items = $items.add( item.$element ); } @@ -2097,6 +2141,7 @@ OO.ui.GroupElement.prototype.removeItems = function ( items ) { if ( this.aggregate ) { item.disconnect( this ); } + item.setElementGroup( null ); this.items.splice( index, 1 ); item.$element.detach(); this.$items = this.$items.not( item.$element ); @@ -2123,6 +2168,7 @@ OO.ui.GroupElement.prototype.clearItems = function () { item.disconnect( this ); } } + item.setElementGroup( null ); this.items = []; this.$items.detach(); this.$items = this.$( [] ); @@ -4516,6 +4562,97 @@ OO.ui.PopupTool.prototype.onSelect = function () { OO.ui.PopupTool.prototype.onUpdateState = function () { this.setActive( false ); }; +/** + * Group widget. + * + * Use together with OO.ui.ItemWidget to make disabled state inheritable. + * + * @class + * @abstract + * @extends OO.ui.GroupElement + * + * @constructor + * @param {jQuery} $group Container node, assigned to #$group + * @param {Object} [config] Configuration options + */ +OO.ui.GroupWidget = function OoUiGroupWidget( $element, config ) { + // Parent constructor + OO.ui.GroupElement.call( this, $element, config ); +}; + +/* Inheritance */ + +OO.inheritClass( OO.ui.GroupWidget, OO.ui.GroupElement ); + +/* Methods */ + +/** + * Set the disabled state of the widget. + * + * This will also update the disabled state of child widgets. + * + * @method + * @param {boolean} disabled Disable widget + * @chainable + */ +OO.ui.GroupWidget.prototype.setDisabled = function ( disabled ) { + var i, len; + + // Parent method + OO.ui.Widget.prototype.setDisabled.call( this, disabled ); + + // During construction, #setDisabled is called before the OO.ui.GroupElement constructor + if ( this.items ) { + for ( i = 0, len = this.items.length; i < len; i++ ) { + this.items[i].updateDisabled(); + } + } + + return this; +}; +/** + * Item widget. + * + * Use together with OO.ui.GroupWidget to make disabled state inheritable. + * + * @class + * @abstract + * + * @constructor + */ +OO.ui.ItemWidget = function OoUiItemWidget() { + // +}; + +/* Methods */ + +/** + * Check if widget is disabled. + * + * Checks parent if present, making disabled state inheritable. + * + * @returns {boolean} Widget is disabled + */ +OO.ui.ItemWidget.prototype.isDisabled = function () { + return this.disabled || + ( this.elementGroup instanceof OO.ui.Widget && this.elementGroup.isDisabled() ); +}; + +/** + * Set group element is in. + * + * @param {OO.ui.GroupElement|null} group Group element, null if none + * @chainable + */ +OO.ui.ItemWidget.prototype.setElementGroup = function ( group ) { + // Parent method + OO.ui.Element.prototype.setElementGroup.call( this, group ); + + // Initialize item disabled states + this.updateDisabled(); + + return this; +}; /** * Container for multiple related buttons. * @@ -5240,6 +5377,7 @@ OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) { OO.ui.Widget.call( this, config ); // Mixin constructors + OO.ui.ItemWidget.call( this ); OO.ui.IconedElement.call( this, this.$( '' ), config ); OO.ui.LabeledElement.call( this, this.$( '' ), config ); OO.ui.IndicatedElement.call( this, this.$( '' ), config ); @@ -5268,6 +5406,7 @@ OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) { OO.inheritClass( OO.ui.OptionWidget, OO.ui.Widget ); +OO.mixinClass( OO.ui.OptionWidget, OO.ui.ItemWidget ); OO.mixinClass( OO.ui.OptionWidget, OO.ui.IconedElement ); OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabeledElement ); OO.mixinClass( OO.ui.OptionWidget, OO.ui.IndicatedElement ); @@ -5413,7 +5552,7 @@ OO.ui.SelectWidget = function OoUiSelectWidget( config ) { OO.ui.Widget.call( this, config ); // Mixin constructors - OO.ui.GroupElement.call( this, this.$element, config ); + OO.ui.GroupWidget.call( this, this.$element, config ); // Properties this.pressed = false; @@ -5437,8 +5576,11 @@ OO.ui.SelectWidget = function OoUiSelectWidget( config ) { OO.inheritClass( OO.ui.SelectWidget, OO.ui.Widget ); +// Need to mixin base class as well OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupElement ); +OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupWidget ); + /* Events */ /** diff --git a/resources/oojs-ui/oojs-ui.svg.css b/resources/oojs-ui/oojs-ui.svg.css index 185bcf0bcb..be512dd721 100644 --- a/resources/oojs-ui/oojs-ui.svg.css +++ b/resources/oojs-ui/oojs-ui.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre-svg (a290673bbd) + * OOjs UI v0.1.0-pre-svg (7788dc6700) * 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: Wed Feb 12 2014 13:52:08 GMT-0800 (PST) + * Date: Thu Feb 13 2014 13:56:07 GMT-0800 (PST) */ /*csslint vendor-prefix:false */ @@ -236,6 +236,9 @@ a.oo-ui-buttonedElement-button { .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator { margin-right: -0.75em; } +.oo-ui-buttonedElement.oo-ui-widget-disabled .oo-ui-buttonedElement-button { + cursor: default; +} .oo-ui-buttonedElement-frameless { display: inline-block; @@ -281,7 +284,6 @@ a.oo-ui-buttonedElement-button { border-radius: 0.3em; vertical-align: top; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); - box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1); text-align: center; /* Animation */ @@ -995,14 +997,12 @@ a.oo-ui-buttonedElement-button { .oo-ui-buttonGroupWidget { display: inline-block; border-radius: 0.3em; - box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1); } .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { border-radius: 0; margin-bottom: -1px; margin-left: -1px; - box-shadow: none; } .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:first-child .oo-ui-buttonedElement-button { @@ -1175,7 +1175,7 @@ a.oo-ui-buttonedElement-button { display: inline-block; font-size: 1em; font-family: sans-serif; - background-color: #f7f7f7; + background-color: #fff; border: solid 1px #ccc; box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; padding: 0.5em; @@ -1187,10 +1187,10 @@ a.oo-ui-buttonedElement-button { resize: none; /* Animation */ - -webkit-transition: border-color 200ms, box-shadow 200ms, background-color 200ms; - -moz-transition: border-color 200ms, box-shadow 200ms, background-color 200ms; - -o-transition: border-color 200ms, box-shadow 200ms, background-color 200ms; - transition: border-color 200ms, box-shadow 200ms, background-color 200ms; + -webkit-transition: border-color 200ms, box-shadow 200ms; + -moz-transition: border-color 200ms, box-shadow 200ms; + -o-transition: border-color 200ms, box-shadow 200ms; + transition: border-color 200ms, box-shadow 200ms; } .oo-ui-textInputWidget-pending input, @@ -1203,7 +1203,6 @@ a.oo-ui-buttonedElement-button { outline: none; border-color: #a7dcff; box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white; - background-color: #fff; } .oo-ui-textInputWidget input[readonly], @@ -1217,6 +1216,7 @@ a.oo-ui-buttonedElement-button { .oo-ui-widget-disabled.oo-ui-textInputWidget textarea, .oo-ui-widget-disabled.oo-ui-textInputWidget textarea:focus { color: #ccc; + border-color: #ddd; text-shadow: 0 1px 1px #fff; } @@ -1304,13 +1304,11 @@ a.oo-ui-buttonedElement-button { .oo-ui-buttonSelectWidget { display: inline-block; border-radius: 0.3em; - box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1); } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { border-radius: 0; margin-left: -1px; - box-shadow: none; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button { @@ -1479,6 +1477,7 @@ a.oo-ui-buttonedElement-button { .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled { opacity: 0.5; + cursor: default; } .oo-ui-toggleSwitchWidget-grip { @@ -1540,7 +1539,6 @@ a.oo-ui-buttonedElement-button { left: 0; border-radius: 1em; box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); - cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -1614,139 +1612,6 @@ a.oo-ui-buttonedElement-button { } /* Icons */ -.oo-ui-icon-add-item { - /* @embed */ - background-image: url(images/icons/add-item.png); -} - -.oo-ui-icon-advanced { - /* @embed */ - background-image: url(images/icons/advanced.png); -} - -.oo-ui-icon-alert { - /* @embed */ - background-image: url(images/icons/alert.png); -} - -.oo-ui-icon-check { - /* @embed */ - background-image: url(images/icons/check.png); -} - -.oo-ui-icon-clear { - /* @embed */ - background-image: url(images/icons/clear.png); -} - -.oo-ui-icon-close { - /* @embed */ - background-image: url(images/icons/close.png); -} - -.oo-ui-icon-code { - /* @embed */ - background-image: url(images/icons/code.png); -} - -.oo-ui-icon-collapse { - /* @embed */ - background-image: url(images/icons/collapse.png); -} - -.oo-ui-icon-comment { - /* @embed */ - background-image: url(images/icons/comment.png); -} - -.oo-ui-icon-expand { - /* @embed */ - background-image: url(images/icons/expand.png); -} - -.oo-ui-icon-help { - /* @embed */ - background-image: url(images/icons/help.png); -} - -.oo-ui-icon-link { - /* @embed */ - background-image: url(images/icons/link.png); -} - -.oo-ui-icon-menu { - /* @embed */ - background-image: url(images/icons/menu.png); -} - -.oo-ui-icon-next { - /* @embed */ - background-image: url(images/icons/move-ltr.png); -} - -.oo-ui-icon-picture { - /* @embed */ - background-image: url(images/icons/picture.png); -} - -.oo-ui-icon-previous { - /* @embed */ - background-image: url(images/icons/move-rtl.png); -} - -.oo-ui-icon-redo { - /* @embed */ - background-image: url(images/icons/arched-arrow-ltr.png); -} - -.oo-ui-icon-remove { - /* @embed */ - background-image: url(images/icons/remove.png); -} - -.oo-ui-icon-search { - /* @embed */ - background-image: url(images/icons/search.png); -} - -.oo-ui-icon-settings { - /* @embed */ - background-image: url(images/icons/settings.png); -} - -.oo-ui-icon-tag { - /* @embed */ - background-image: url(images/icons/tag.png); -} - -.oo-ui-icon-undo { - /* @embed */ - background-image: url(images/icons/arched-arrow-rtl.png); -} - -.oo-ui-icon-window { - /* @embed */ - background-image: url(images/icons/window.png); -} - -/* Indicators */ - -.oo-ui-indicator-down { - /* @embed */ - background-image: url(images/indicators/down.png); -} - -.oo-ui-indicator-required { - /* @embed */ - background-image: url(images/indicators/required.png); -} - -.oo-ui-indicator-up { - /* @embed */ - background-image: url(images/indicators/up.png); -} -/* Icons */ - .oo-ui-icon-add-item { /* @embed */ background-image: url(images/icons/add-item.svg);