From c864dc39ca1cd9e1a2e097eb654fba674795a9d1 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Tue, 21 Oct 2014 11:34:02 -0700 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (44db8292bf) New changes: bcc2927 Display keyboard shortcuts in right gutter of toolbar menus f73d2b6 Localisation updates from https://translatewiki.net. 42be2b7 Progress bar widget 9833d47 Fix consoles in widgets demo 83645c4 OoUiPHP: Improve theme singleton handling b4f0bc7 Add composer.json, use it for autoloading Change-Id: I8770f4359eb912e01371cd6843da6dd61d832c3a --- resources/lib/oojs-ui/i18n/bcc.json | 9 ++ resources/lib/oojs-ui/i18n/fr.json | 1 + resources/lib/oojs-ui/i18n/ja.json | 2 + resources/lib/oojs-ui/i18n/pt.json | 1 + resources/lib/oojs-ui/i18n/qqq.json | 4 +- resources/lib/oojs-ui/oojs-ui-apex.css | 48 +++++++++-- resources/lib/oojs-ui/oojs-ui-apex.js | 4 +- resources/lib/oojs-ui/oojs-ui-apex.svg.css | 48 +++++++++-- resources/lib/oojs-ui/oojs-ui-mediawiki.css | 41 +++++++-- resources/lib/oojs-ui/oojs-ui-mediawiki.js | 4 +- .../lib/oojs-ui/oojs-ui-mediawiki.svg.css | 41 +++++++-- resources/lib/oojs-ui/oojs-ui.js | 86 ++++++++++++++++--- 12 files changed, 253 insertions(+), 36 deletions(-) create mode 100644 resources/lib/oojs-ui/i18n/bcc.json diff --git a/resources/lib/oojs-ui/i18n/bcc.json b/resources/lib/oojs-ui/i18n/bcc.json new file mode 100644 index 0000000000..a340a881ff --- /dev/null +++ b/resources/lib/oojs-ui/i18n/bcc.json @@ -0,0 +1,9 @@ +{ + "@metadata": { + "authors": [ + "Baloch Afghanistan" + ] + }, + "ooui-dialog-message-accept": "اوکی", + "ooui-dialog-process-retry": "پدا کوشش کورتین" +} diff --git a/resources/lib/oojs-ui/i18n/fr.json b/resources/lib/oojs-ui/i18n/fr.json index 8ff54750f4..def03460a9 100644 --- a/resources/lib/oojs-ui/i18n/fr.json +++ b/resources/lib/oojs-ui/i18n/fr.json @@ -33,6 +33,7 @@ "ooui-outline-control-move-up": "Faire monter l’élément", "ooui-outline-control-remove": "Supprimer l’élément", "ooui-toolbar-more": "Plus", + "ooui-toolgroup-expand": "Plus", "ooui-dialog-message-accept": "OK", "ooui-dialog-message-reject": "Annuler", "ooui-dialog-process-error": "Quelque chose a mal tourné", diff --git a/resources/lib/oojs-ui/i18n/ja.json b/resources/lib/oojs-ui/i18n/ja.json index 2ac8dc194a..64423429c2 100644 --- a/resources/lib/oojs-ui/i18n/ja.json +++ b/resources/lib/oojs-ui/i18n/ja.json @@ -12,6 +12,8 @@ "ooui-outline-control-move-up": "項目を上に移動させる", "ooui-outline-control-remove": "項目を除去", "ooui-toolbar-more": "その他", + "ooui-toolgroup-expand": "続き", + "ooui-toolgroup-collapse": "折り畳む", "ooui-dialog-message-accept": "OK", "ooui-dialog-message-reject": "キャンセル", "ooui-dialog-process-error": "エラーが発生しました…", diff --git a/resources/lib/oojs-ui/i18n/pt.json b/resources/lib/oojs-ui/i18n/pt.json index 5cb3e3d8e5..d02b08be18 100644 --- a/resources/lib/oojs-ui/i18n/pt.json +++ b/resources/lib/oojs-ui/i18n/pt.json @@ -17,6 +17,7 @@ "ooui-outline-control-move-up": "Mover item para cima", "ooui-outline-control-remove": "Remover elemento", "ooui-toolbar-more": "Mais", + "ooui-toolgroup-expand": "Mais", "ooui-dialog-message-accept": "Aceitar", "ooui-dialog-message-reject": "Cancelar", "ooui-dialog-process-error": "Algo correu mal", diff --git a/resources/lib/oojs-ui/i18n/qqq.json b/resources/lib/oojs-ui/i18n/qqq.json index b94207781e..43da56299f 100644 --- a/resources/lib/oojs-ui/i18n/qqq.json +++ b/resources/lib/oojs-ui/i18n/qqq.json @@ -24,8 +24,8 @@ "ooui-outline-control-move-up": "Tool tip for a button that moves items in a list up one place", "ooui-outline-control-remove": "Tool tip for a button that removes items from a list.\n{{Identical|Remove item}}", "ooui-toolbar-more": "Label for the toolbar group that contains a list of all other available tools.\n{{Identical|More}}", - "ooui-toolgroup-expand": "Label for the fake tool that expands the full list of tools in a toolbar group\n{{Identical|More}}", - "ooui-toolgroup-collapse": "Label for the fake tool that collapses the full list of tools in a toolbar group\n{{Identical|Fewer}}", + "ooui-toolgroup-expand": "Label for the fake tool that expands the full list of tools in a toolbar group.\n\nSee also:\n* {{msg-mw|Ooui-toolgroup-collapse}}\n{{Identical|More}}", + "ooui-toolgroup-collapse": "Label for the fake tool that collapses the full list of tools in a toolbar group.\n\nSee also:\n* {{msg-mw|Ooui-toolgroup-expand}}\n{{Identical|Fewer}}", "ooui-dialog-message-accept": "Default label for the accept button of a message dialog\n{{Identical|OK}}", "ooui-dialog-message-reject": "Default label for the reject button of a message dialog\n{{Identical|Cancel}}", "ooui-dialog-process-error": "Title for process dialog error description", diff --git a/resources/lib/oojs-ui/oojs-ui-apex.css b/resources/lib/oojs-ui/oojs-ui-apex.css index 30f4861c94..980fde1ec7 100644 --- a/resources/lib/oojs-ui/oojs-ui-apex.css +++ b/resources/lib/oojs-ui/oojs-ui-apex.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (db065e5a9f) + * OOjs UI v0.1.0-pre (44db8292bf) * 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: 2014-10-20T14:47:55Z + * Date: 2014-10-21T18:33:58Z */ /* @noflip */ .oo-ui-rtl { @@ -581,11 +581,24 @@ vertical-align: middle; } .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title { - display: inline-block; + display: inline-table; vertical-align: middle; + width: 100%; + margin-right: -2.5em; } -.oo-ui-popupToolGroup .oo-ui-tool-accel { - display: none; +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-title-text, +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel { + display: table-cell; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-title-text { + width: 100%; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel { + text-align: right; + padding-right: 2.5em; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel:not(:empty) { + padding-left: 3em; } .oo-ui-popupToolGroup.oo-ui-indicatorElement.oo-ui-iconElement { min-width: 3.5em; @@ -1096,6 +1109,31 @@ left: 0.25em; margin-left: 0; } +.oo-ui-progressBarWidget { + width: 20em; + border: solid 1px #cccccc; + border-radius: 0.25em; +} +.oo-ui-progressBarWidget-bar { + height: 1em; + border-right: solid 1px #cccccc; + -webkit-transition: width 200ms; + -moz-transition: width 200ms; + -ms-transition: width 200ms; + -o-transition: width 200ms; + transition: width 200ms; + background: #eeeeee; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd'); + background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); + background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%); + background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); + background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%); + background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%); + background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%); +} +.oo-ui-progressBarWidget.oo-ui-widget-disabled { + opacity: 0.6; +} .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/apex/images/textures/pending.gif); } diff --git a/resources/lib/oojs-ui/oojs-ui-apex.js b/resources/lib/oojs-ui/oojs-ui-apex.js index 2e4bb784d9..5727e2bbb8 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.1.0-pre (db065e5a9f) + * OOjs UI v0.1.0-pre (44db8292bf) * 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: 2014-10-20T14:47:45Z + * Date: 2014-10-21T18:33:49Z */ /* Instantiation */ diff --git a/resources/lib/oojs-ui/oojs-ui-apex.svg.css b/resources/lib/oojs-ui/oojs-ui-apex.svg.css index b93c30c64d..52e76b3360 100644 --- a/resources/lib/oojs-ui/oojs-ui-apex.svg.css +++ b/resources/lib/oojs-ui/oojs-ui-apex.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (db065e5a9f) + * OOjs UI v0.1.0-pre (44db8292bf) * 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: 2014-10-20T14:47:55Z + * Date: 2014-10-21T18:33:58Z */ /* @noflip */ .oo-ui-rtl { @@ -581,11 +581,24 @@ vertical-align: middle; } .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title { - display: inline-block; + display: inline-table; vertical-align: middle; + width: 100%; + margin-right: -2.5em; } -.oo-ui-popupToolGroup .oo-ui-tool-accel { - display: none; +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-title-text, +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel { + display: table-cell; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-title-text { + width: 100%; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel { + text-align: right; + padding-right: 2.5em; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel:not(:empty) { + padding-left: 3em; } .oo-ui-popupToolGroup.oo-ui-indicatorElement.oo-ui-iconElement { min-width: 3.5em; @@ -1096,6 +1109,31 @@ left: 0.25em; margin-left: 0; } +.oo-ui-progressBarWidget { + width: 20em; + border: solid 1px #cccccc; + border-radius: 0.25em; +} +.oo-ui-progressBarWidget-bar { + height: 1em; + border-right: solid 1px #cccccc; + -webkit-transition: width 200ms; + -moz-transition: width 200ms; + -ms-transition: width 200ms; + -o-transition: width 200ms; + transition: width 200ms; + background: #eeeeee; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd'); + background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); + background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%); + background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); + background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%); + background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%); + background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%); +} +.oo-ui-progressBarWidget.oo-ui-widget-disabled { + opacity: 0.6; +} .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/apex/images/textures/pending.gif); } diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.css index 9f57ea9161..3940c12155 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (db065e5a9f) + * OOjs UI v0.1.0-pre (44db8292bf) * 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: 2014-10-20T14:47:55Z + * Date: 2014-10-21T18:33:58Z */ /* @noflip */ .oo-ui-rtl { @@ -530,11 +530,24 @@ vertical-align: middle; } .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title { - display: inline-block; + display: inline-table; vertical-align: middle; + width: 100%; + margin-right: -2.5em; } -.oo-ui-popupToolGroup .oo-ui-tool-accel { - display: none; +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-title-text, +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel { + display: table-cell; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-title-text { + width: 100%; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel { + text-align: right; + padding-right: 2.5em; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel:not(:empty) { + padding-left: 3em; } .oo-ui-popupToolGroup.oo-ui-indicatorElement.oo-ui-iconElement { min-width: 3.5em; @@ -983,6 +996,24 @@ .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { background-color: #ffffff; } +.oo-ui-progressBarWidget { + width: 20em; + border: solid 1px #cccccc; + border-radius: 0.1em; +} +.oo-ui-progressBarWidget-bar { + height: 1em; + border-right: solid 1px #cccccc; + background: #0274ff; + -webkit-transition: width 200ms; + -moz-transition: width 200ms; + -ms-transition: width 200ms; + -o-transition: width 200ms; + transition: width 200ms; +} +.oo-ui-progressBarWidget.oo-ui-widget-disabled { + opacity: 0.2; +} .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); } diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js index 8da381e02c..f28c24068e 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.1.0-pre (db065e5a9f) + * OOjs UI v0.1.0-pre (44db8292bf) * 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: 2014-10-20T14:47:45Z + * Date: 2014-10-21T18:33:49Z */ /** * @class diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css index 08c2350ae4..2fae450b9e 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (db065e5a9f) + * OOjs UI v0.1.0-pre (44db8292bf) * 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: 2014-10-20T14:47:55Z + * Date: 2014-10-21T18:33:58Z */ /* @noflip */ .oo-ui-rtl { @@ -530,11 +530,24 @@ vertical-align: middle; } .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title { - display: inline-block; + display: inline-table; vertical-align: middle; + width: 100%; + margin-right: -2.5em; } -.oo-ui-popupToolGroup .oo-ui-tool-accel { - display: none; +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-title-text, +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel { + display: table-cell; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-title-text { + width: 100%; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel { + text-align: right; + padding-right: 2.5em; +} +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title .oo-ui-tool-accel:not(:empty) { + padding-left: 3em; } .oo-ui-popupToolGroup.oo-ui-indicatorElement.oo-ui-iconElement { min-width: 3.5em; @@ -983,6 +996,24 @@ .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { background-color: #ffffff; } +.oo-ui-progressBarWidget { + width: 20em; + border: solid 1px #cccccc; + border-radius: 0.1em; +} +.oo-ui-progressBarWidget-bar { + height: 1em; + border-right: solid 1px #cccccc; + background: #0274ff; + -webkit-transition: width 200ms; + -moz-transition: width 200ms; + -ms-transition: width 200ms; + -o-transition: width 200ms; + transition: width 200ms; +} +.oo-ui-progressBarWidget.oo-ui-widget-disabled { + opacity: 0.2; +} .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); } diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index 41ef826b4f..21b7710236 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (db065e5a9f) + * OOjs UI v0.1.0-pre (44db8292bf) * 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: 2014-10-20T14:47:45Z + * Date: 2014-10-21T18:33:49Z */ ( function ( OO ) { @@ -4971,6 +4971,8 @@ OO.ui.Tool = function OoUiTool( toolGroup, config ) { this.toolbar = this.toolGroup.getToolbar(); this.active = false; this.$title = this.$( '' ); + this.$titleText = this.$( '' ); + this.$accel = this.$( '' ); this.$link = this.$( '' ); this.title = null; @@ -4978,7 +4980,11 @@ OO.ui.Tool = function OoUiTool( toolGroup, config ) { this.toolbar.connect( this, { updateState: 'onUpdateState' } ); // Initialization - this.$title.addClass( 'oo-ui-tool-title' ); + this.$titleText.addClass( 'oo-ui-tool-title-text' ); + this.$accel.addClass( 'oo-ui-tool-accel' ); + this.$title + .addClass( 'oo-ui-tool-title' ) + .append( this.$titleText, this.$accel ); this.$link .addClass( 'oo-ui-tool-link' ) .append( this.$icon, this.$title ) @@ -5169,13 +5175,8 @@ OO.ui.Tool.prototype.updateTitle = function () { accel = this.toolbar.getToolAccelerator( this.constructor.static.name ), tooltipParts = []; - this.$title.empty() - .text( this.title ) - .append( - this.$( '' ) - .addClass( 'oo-ui-tool-accel' ) - .text( accel ) - ); + this.$titleText.text( this.title ); + this.$accel.text( accel ); if ( titleTooltips && typeof this.title === 'string' && this.title.length ) { tooltipParts.push( this.title ); @@ -10530,6 +10531,71 @@ OO.ui.PopupWidget.prototype.updateDimensions = function ( transition ) { return this; }; +/** + * Progress bar widget. + * + * @class + * @extends OO.ui.Widget + * + * @constructor + * @param {Object} [config] Configuration options + * @cfg {number} [progress=0] Initial progress + */ +OO.ui.ProgressBarWidget = function OoUiProgressBarWidget( config ) { + // Config intialization + config = config || {}; + + // Parent constructor + OO.ui.ProgressBarWidget.super.call( this, config ); + + // Properties + this.$bar = this.$( '
' ); + this.progress = null; + + // Initialization + this.setProgress( config.progress || 0 ); + this.$bar.addClass( 'oo-ui-progressBarWidget-bar'); + this.$element + .attr( { + role: 'progressbar', + 'aria-valuemin': 0, + 'aria-valuemax': 100 + } ) + .addClass( 'oo-ui-progressBarWidget' ) + .append( this.$bar ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.ProgressBarWidget, OO.ui.Widget ); + +/* Static Properties */ + +OO.ui.ProgressBarWidget.static.tagName = 'div'; + +/* Methods */ + +/** + * Get progress percent + * + * @return {number} Progress percent + */ +OO.ui.ProgressBarWidget.prototype.getProgress = function () { + return this.progress; +}; + +/** + * Set progress percent + * + * @param {number} progress Progress percent + */ +OO.ui.ProgressBarWidget.prototype.setProgress = function ( progress ) { + this.progress = progress; + + this.$bar.css( 'width', this.progress + '%' ); + this.$element.attr( 'aria-valuenow', this.progress ); +}; + /** * Search widget. * -- 2.20.1