From 167f7844bdf91ee91ce8202edac47f719949d20c Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Wed, 26 Jun 2019 21:01:43 -0700 Subject: [PATCH] Update OOUI to v0.33.0 Release notes: https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/History.md;v0.33.0 Bug: T218753 Bug: T218977 Bug: T224657 Bug: T224702 Bug: T224881 Bug: T225021 Bug: T225571 Bug: T225882 Bug: T226031 Bug: T226045 Bug: T226618 Depends-On: I396faea52625a294991f7a473043cb39ed98ca28 Depends-On: I38aa1ce529bed43175d2ecdcecd1c6a2a0ed603f Change-Id: I396faea52625a294991f7a473043cb39ed98ca20 --- RELEASE-NOTES-1.34 | 2 +- composer.json | 2 +- includes/OutputPage.php | 1 - .../ResourceLoaderOOUIModule.php | 2 +- resources/Resources.php | 5 - resources/lib/foreign-resources.yaml | 4 +- resources/lib/ooui/History.md | 50 ++++ resources/lib/ooui/i18n/sc.json | 20 ++ resources/lib/ooui/oojs-ui-apex.js | 4 +- resources/lib/ooui/oojs-ui-core-apex.css | 61 ++++- .../lib/ooui/oojs-ui-core-wikimediaui.css | 102 +++++++- resources/lib/ooui/oojs-ui-core.js | 225 ++++++++++-------- resources/lib/ooui/oojs-ui-core.js.map.json | 2 +- resources/lib/ooui/oojs-ui-toolbars-apex.css | 4 +- .../lib/ooui/oojs-ui-toolbars-wikimediaui.css | 7 +- resources/lib/ooui/oojs-ui-toolbars.js | 18 +- .../lib/ooui/oojs-ui-toolbars.js.map.json | 2 +- resources/lib/ooui/oojs-ui-widgets-apex.css | 12 +- .../lib/ooui/oojs-ui-widgets-wikimediaui.css | 12 +- resources/lib/ooui/oojs-ui-widgets.js | 4 +- resources/lib/ooui/oojs-ui-wikimediaui.js | 4 +- resources/lib/ooui/oojs-ui-windows-apex.css | 7 +- .../lib/ooui/oojs-ui-windows-wikimediaui.css | 120 +++++----- resources/lib/ooui/oojs-ui-windows.js | 36 +-- .../lib/ooui/oojs-ui-windows.js.map.json | 2 +- .../ooui/themes/apex/icons-editing-core.json | 3 + resources/lib/ooui/themes/apex/textures.json | 14 -- .../wikimediaui/icons-editing-core.json | 4 + .../images/icons/infoFilled-invert.png | Bin 223 -> 216 bytes .../images/icons/infoFilled-invert.svg | 2 +- .../images/icons/infoFilled-progressive.png | Bin 269 -> 257 bytes .../images/icons/infoFilled-progressive.svg | 2 +- .../wikimediaui/images/icons/infoFilled.png | Bin 222 -> 208 bytes .../wikimediaui/images/icons/infoFilled.svg | 2 +- .../images/icons/unLink-destructive.png | Bin 0 -> 420 bytes .../images/icons/unLink-destructive.svg | 1 + .../images/icons/unLink-invert.png | Bin 0 -> 329 bytes .../images/icons/unLink-invert.svg | 1 + .../images/icons/unLink-progressive.png | Bin 0 -> 416 bytes .../images/icons/unLink-progressive.svg | 1 + .../wikimediaui/images/icons/unLink.png | Bin 0 -> 315 bytes .../wikimediaui/images/icons/unLink.svg | 1 + .../wikimediaui/images/textures/pending.gif | Bin 2032 -> 0 bytes .../images/textures/transparency.svg | 1 - .../lib/ooui/themes/wikimediaui/textures.json | 14 -- resources/lib/ooui/wikimedia-ui-base.less | 27 ++- 46 files changed, 515 insertions(+), 266 deletions(-) create mode 100644 resources/lib/ooui/i18n/sc.json delete mode 100644 resources/lib/ooui/themes/apex/textures.json create mode 100644 resources/lib/ooui/themes/wikimediaui/images/icons/unLink-destructive.png create mode 100644 resources/lib/ooui/themes/wikimediaui/images/icons/unLink-destructive.svg create mode 100644 resources/lib/ooui/themes/wikimediaui/images/icons/unLink-invert.png create mode 100644 resources/lib/ooui/themes/wikimediaui/images/icons/unLink-invert.svg create mode 100644 resources/lib/ooui/themes/wikimediaui/images/icons/unLink-progressive.png create mode 100644 resources/lib/ooui/themes/wikimediaui/images/icons/unLink-progressive.svg create mode 100644 resources/lib/ooui/themes/wikimediaui/images/icons/unLink.png create mode 100644 resources/lib/ooui/themes/wikimediaui/images/icons/unLink.svg delete mode 100644 resources/lib/ooui/themes/wikimediaui/images/textures/pending.gif delete mode 100644 resources/lib/ooui/themes/wikimediaui/images/textures/transparency.svg delete mode 100644 resources/lib/ooui/themes/wikimediaui/textures.json diff --git a/RELEASE-NOTES-1.34 b/RELEASE-NOTES-1.34 index 549f7e8228..99c8d4ba57 100644 --- a/RELEASE-NOTES-1.34 +++ b/RELEASE-NOTES-1.34 @@ -74,7 +74,7 @@ For notes on 1.33.x and older releases, see HISTORY. ==== Changed external libraries ==== * Updated Mustache from 1.0.0 to v3.0.1. -* Updated OOUI from v0.31.3 to v0.32.1. +* Updated OOUI from v0.31.3 to v0.33.0. * Updated composer/semver from 1.4.2 to 1.5.0. * Updated composer/spdx-licenses from 1.4.0 to 1.5.1 (dev-only). * Updated mediawiki/codesniffer from 25.0.0 to 26.0.0 (dev-only). diff --git a/composer.json b/composer.json index 59873ef843..428c1a8033 100644 --- a/composer.json +++ b/composer.json @@ -27,7 +27,7 @@ "ext-xml": "*", "guzzlehttp/guzzle": "6.3.3", "liuggio/statsd-php-client": "1.0.18", - "oojs/oojs-ui": "0.32.1", + "oojs/oojs-ui": "0.33.0", "pear/mail": "1.4.1", "pear/mail_mime": "1.10.2", "pear/net_smtp": "1.8.1", diff --git a/includes/OutputPage.php b/includes/OutputPage.php index 4ccb0d4274..6efe2d49e3 100644 --- a/includes/OutputPage.php +++ b/includes/OutputPage.php @@ -4040,7 +4040,6 @@ class OutputPage extends ContextSource { $this->addModuleStyles( [ 'oojs-ui-core.styles', 'oojs-ui.styles.indicators', - 'oojs-ui.styles.textures', 'mediawiki.widgets.styles', 'oojs-ui-core.icons', ] ); diff --git a/includes/resourceloader/ResourceLoaderOOUIModule.php b/includes/resourceloader/ResourceLoaderOOUIModule.php index 0395127c57..899fbbde72 100644 --- a/includes/resourceloader/ResourceLoaderOOUIModule.php +++ b/includes/resourceloader/ResourceLoaderOOUIModule.php @@ -27,7 +27,7 @@ trait ResourceLoaderOOUIModule { protected static $knownScriptsModules = [ 'core' ]; protected static $knownStylesModules = [ 'core', 'widgets', 'toolbars', 'windows' ]; protected static $knownImagesModules = [ - 'indicators', 'textures', + 'indicators', // Extra icons 'icons-accessibility', 'icons-alerts', diff --git a/resources/Resources.php b/resources/Resources.php index 9c26986afe..41c36ad957 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -2902,7 +2902,6 @@ return [ 'oojs-ui-core.styles', 'oojs-ui-core.icons', 'oojs-ui.styles.indicators', - 'oojs-ui.styles.textures', 'mediawiki.language', ], 'messages' => [ @@ -3012,10 +3011,6 @@ return [ 'class' => ResourceLoaderOOUIImageModule::class, 'themeImages' => 'indicators', ], - 'oojs-ui.styles.textures' => [ - 'class' => ResourceLoaderOOUIImageModule::class, - 'themeImages' => 'textures', - ], 'oojs-ui.styles.icons-accessibility' => [ 'class' => ResourceLoaderOOUIImageModule::class, 'themeImages' => 'icons-accessibility', diff --git a/resources/lib/foreign-resources.yaml b/resources/lib/foreign-resources.yaml index d737cbe2ba..3e14b4835f 100644 --- a/resources/lib/foreign-resources.yaml +++ b/resources/lib/foreign-resources.yaml @@ -249,8 +249,8 @@ oojs-router: ooui: type: tar - src: https://registry.npmjs.org/oojs-ui/-/oojs-ui-0.32.1.tgz - integrity: sha384-p2Y1dRD73TIYZFFhvRu1GtOrklANhT/DBJavX9YIN5aystf5hL5KYj4i1QDY/gCW + src: https://registry.npmjs.org/oojs-ui/-/oojs-ui-0.33.0.tgz + integrity: sha384-/oGS1QAz6AStnSlOzdjntrAvhqPkMQMDBCzG403tEo+ufJ6BUTTW8NElUb2RXd5z dest: # Main stuff diff --git a/resources/lib/ooui/History.md b/resources/lib/ooui/History.md index f5e80cccd1..d5b8b5935d 100644 --- a/resources/lib/ooui/History.md +++ b/resources/lib/ooui/History.md @@ -1,4 +1,54 @@ # OOUI Release History +## v0.33.0 / 2019-06-26 +### Breaking changes +* [BREAKING CHANGE] Element: Drop `getJQuery`, unused, useless since approximately 2015 (Ed Sanders) +* [BREAKING CHANGE] Element: Drop support for `$`, deprecated since 2015 (James D. Forrester) +* [BREAKING CHANGE] Make OO.ui.throttle always work asynchronously (David Chan) +* [BREAKING CHANGE] Toolbar: Drop support for unnamed groups, deprecated since v0.27.1 (James D. Forrester) +* [BREAKING CHANGE] core: Drop OO.ui.now(), deprecated since 0.31.1 (James D. Forrester) +* [BREAKING CHANGE] {Icon,Iindicator}Element: Drop get$1Title, deprecated in 0.30.0 (James D. Forrester) +* [BREAKING CHANGE] Drop textures, deprecated since 0.31.1 (James D. Forrester) + +### Features +* Add 'close' action flag and use close icon on mobile (Ed Sanders) +* Add a MessageWidget (Moriel Schottlender) + +### Styles +* Fix positioning of TabSelectWidget gradient (Ed Sanders) +* MessageWidget: Add `box-sizing` rule (Moriel Schottlender) +* ProcessDialog: Increase title size, and align to left on mobile (Volker E.) +* ProcessDialog: Use frameless actions and icons on desktop (Volker E.) +* WikimediaUI theme: Apply primary flag to ButtonWidget (frameless) (Volker E.) +* WikimediaUI theme: Converge appearance of mobile & desktop ProcessDialog (Volker E.) +* WikimediaUI theme: Make ProcessDialog action icon buttons square (Volker E.) +* WikimediaUI theme: Use `bold` for primary tools (Volker E.) +* icons: Create 'unLink' icon (Ed Sanders) +* icons: Use square dot in 'infoFilled' icon (Bartosz Dziewoński) + +### Code +* ActionFieldLayout: Fix `z-index` hack for invalid input element (Bartosz Dziewoński) +* FieldLayout: Use the newly created MessageWidget in notices (Moriel Schottlender) +* Hide tool shortcuts on mobile (Ed Sanders) +* PHP FlaggedElement: Fix `clearFlags()` method (Bartosz Dziewoński) +* ProcessDialog: Keep labels for screen readers on mobile (Volker E.) +* TextInputWidget: Fix Firefox proprietary appearance (Volker E.) +* build: Remove outdated comment (Bartosz Dziewoński) +* build: Update 'WikimediaUI-Base' to latest v0.14.0 and amend variables (Volker E.) +* build: Updating 'mediawiki/mediawiki-codesniffer' to 26.0.0 (libraryupgrader) +* demos: Add matomo/piwik tracking code for page views (Francisco Dans) +* demos: Create Demo.LinkedFieldsetLayout to provide links to demo sections (Ed Sanders) +* demos: Don't add top margin at first child paragraph (Volker E.) +* demos: Don't load Piwik analytics when testing locally (Bartosz Dziewoński) +* demos: Fix Piwik analytics tracking using the wrong URL (Bartosz Dziewoński) +* demos: Fix RTL issues and link/show code positions (Volker E.) +* demos: Fix appearance of TagMultiselect- & NumberInputWidget combo (Volker E.) +* demos: Fix links to sections on mobile (Bartosz Dziewoński) +* demos: Load 'demo.css' early on (Volker E.) +* demos: Style the MessageWidget to fit a smaller width (Moriel Schottlender) +* package-lock.json: npm audit bump (James D. Forrester) +* package.json: Hard-code jsduck fewer times (James D. Forrester) + + ## v0.32.1 / 2019-06-04 ### Features * Add 'helpInline' support to FieldsetLayout (Ed Sanders) diff --git a/resources/lib/ooui/i18n/sc.json b/resources/lib/ooui/i18n/sc.json new file mode 100644 index 0000000000..30221da39a --- /dev/null +++ b/resources/lib/ooui/i18n/sc.json @@ -0,0 +1,20 @@ +{ + "@metadata": { + "authors": [ + "L2212" + ] + }, + "ooui-outline-control-move-down": "Move s'elementu a suta", + "ooui-outline-control-move-up": "Move s'elementu a suta", + "ooui-outline-control-remove": "Boga s'elementu", + "ooui-toolbar-more": "De prus", + "ooui-toolgroup-collapse": "De mancu", + "ooui-item-remove": "Boga", + "ooui-dialog-message-accept": "AB", + "ooui-dialog-message-reject": "Annulla", + "ooui-dialog-process-error": "B'at àpidu carchi problema", + "ooui-dialog-process-retry": "Torra a proare", + "ooui-dialog-process-continue": "Sighi", + "ooui-selectfile-button-select": "Ischerta unu documentu", + "ooui-field-help": "Agiudu" +} diff --git a/resources/lib/ooui/oojs-ui-apex.js b/resources/lib/ooui/oojs-ui-apex.js index 4d24a502fb..52e63df182 100644 --- a/resources/lib/ooui/oojs-ui-apex.js +++ b/resources/lib/ooui/oojs-ui-apex.js @@ -1,12 +1,12 @@ /*! - * OOUI v0.32.1 + * OOUI v0.33.0 * https://www.mediawiki.org/wiki/OOUI * * Copyright 2011–2019 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2019-06-05T16:24:08Z + * Date: 2019-06-27T03:27:26Z */ ( function ( OO ) { diff --git a/resources/lib/ooui/oojs-ui-core-apex.css b/resources/lib/ooui/oojs-ui-core-apex.css index 7cc8f6754e..f3b05d384b 100644 --- a/resources/lib/ooui/oojs-ui-core-apex.css +++ b/resources/lib/ooui/oojs-ui-core-apex.css @@ -1,12 +1,12 @@ /*! - * OOUI v0.32.1 + * OOUI v0.33.0 * https://www.mediawiki.org/wiki/OOUI * * Copyright 2011–2019 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2019-06-05T16:24:16Z + * Date: 2019-06-27T03:27:33Z */ .oo-ui-element-hidden { display: none !important; @@ -541,10 +541,11 @@ margin-left: -1px; } .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:hover, -.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:hover ~ *, .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:focus, +.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget.oo-ui-flaggedElement-invalid > .oo-ui-inputWidget-input, +.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:hover ~ *, .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:focus ~ *, -.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget.oo-ui-flaggedElement-invalid > .oo-ui-inputWidget-input { +.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget.oo-ui-flaggedElement-invalid > .oo-ui-inputWidget-input ~ * { z-index: 1; } .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button > .oo-ui-buttonElement > .oo-ui-buttonElement-button:hover, @@ -766,6 +767,54 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout { font-size: 0.9375em; } +.oo-ui-messageWidget { + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0.3125em 0.78125em; + font-weight: bold; +} +.oo-ui-messageWidget .oo-ui-labelElement-label { + display: block; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block { + border: 1px solid; + padding: 1.5625em 1.875em; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error { + background-color: #ffdcdc; + border-color: #d45353; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning { + background-color: #fff8c6; + border-color: #b85c00; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success { + background-color: #d5fdd6; + border-color: #34782b; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice { + background-color: #fafafa; + border-color: #ccc; +} +.oo-ui-messageWidget.oo-ui-flaggedElement-error { + color: #d45353; +} +.oo-ui-messageWidget.oo-ui-flaggedElement-success:not( .oo-ui-messageWidget-block ) { + color: #34782b; +} +.oo-ui-messageWidget .oo-ui-iconElement-icon { + display: block; + float: left; + margin: 0; +} +.oo-ui-messageWidget .oo-ui-labelElement-label { + margin-top: 0.15625em; + margin-left: 2.5em; + line-height: 1.4; +} + .oo-ui-iconWidget { vertical-align: middle; -webkit-touch-callout: none; @@ -1172,15 +1221,13 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout { } .oo-ui-textInputWidget .oo-ui-inputWidget-input { -webkit-appearance: none; + -moz-appearance: textfield; display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.oo-ui-textInputWidget input { - -moz-appearance: textfield; -} .oo-ui-textInputWidget input::-ms-clear { display: none; } diff --git a/resources/lib/ooui/oojs-ui-core-wikimediaui.css b/resources/lib/ooui/oojs-ui-core-wikimediaui.css index 6f2c914df0..cfe6f8d209 100644 --- a/resources/lib/ooui/oojs-ui-core-wikimediaui.css +++ b/resources/lib/ooui/oojs-ui-core-wikimediaui.css @@ -1,12 +1,12 @@ /*! - * OOUI v0.32.1 + * OOUI v0.33.0 * https://www.mediawiki.org/wiki/OOUI * * Copyright 2011–2019 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2019-06-05T16:24:16Z + * Date: 2019-06-27T03:27:33Z */ .oo-ui-element-hidden { display: none !important; @@ -212,6 +212,52 @@ color: #b32424; box-shadow: none; } +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { + color: #fff; + background-color: #36c; + border-color: #36c; +} +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { + background-color: #447ff5; + border-color: #447ff5; +} +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active:focus, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { + color: #fff; + background-color: #2a4b8d; + border-color: #2a4b8d; + box-shadow: none; +} +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { + border-color: #36c; + box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; +} +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { + color: #fff; + background-color: #d33; + border-color: #d33; +} +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover { + background-color: #ff4242; + border-color: #ff4242; +} +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active:focus, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { + color: #fff; + background-color: #b32424; + border-color: #b32424; + box-shadow: none; +} +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { + border-color: #d33; + box-shadow: inset 0 0 0 1px #d33, inset 0 0 0 2px #fff; +} .oo-ui-buttonElement-frameless.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { opacity: 1; @@ -618,7 +664,7 @@ box-sizing: border-box; max-width: 50em; margin: 0; - padding: 0.28571429em 0.85714286em; + padding: 0.28571429em 0; } .oo-ui-fieldLayout-messages > [class|='oo-ui-fieldLayout-messages'] { color: #000; @@ -675,10 +721,11 @@ margin-left: 0.14285714em; } .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:hover, -.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:hover ~ *, .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:focus, +.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget.oo-ui-flaggedElement-invalid > .oo-ui-inputWidget-input, +.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:hover ~ *, .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:focus ~ *, -.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget.oo-ui-flaggedElement-invalid > .oo-ui-inputWidget-input { +.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget.oo-ui-flaggedElement-invalid > .oo-ui-inputWidget-input ~ * { z-index: 1; } .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button > .oo-ui-buttonElement > .oo-ui-buttonElement-button:hover, @@ -918,6 +965,47 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout { font-size: 0.92857143em; } +.oo-ui-messageWidget { + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0.28571429em 0.85714286em; + font-weight: bold; +} +.oo-ui-messageWidget .oo-ui-labelElement-label { + display: block; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block { + border: 1px solid; + padding: 1.42857143em 1.71428571em; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error { + background-color: #fee7e6; + border-color: #d33; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning { + background-color: #fef6e7; + border-color: #fc3; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success { + background-color: #d5fdf4; + border-color: #14866d; +} +.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice { + background-color: #eaecf0; + border-color: #a2a9b1; +} +.oo-ui-messageWidget.oo-ui-flaggedElement-error { + color: #d33; +} +.oo-ui-messageWidget.oo-ui-flaggedElement-success:not( .oo-ui-messageWidget-block ) { + color: #14866d; +} +.oo-ui-messageWidget .oo-ui-labelElement-label { + margin-left: 2em; +} + .oo-ui-iconWidget { vertical-align: middle; -webkit-touch-callout: none; @@ -1550,15 +1638,13 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout { } .oo-ui-textInputWidget .oo-ui-inputWidget-input { -webkit-appearance: none; + -moz-appearance: textfield; display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.oo-ui-textInputWidget input { - -moz-appearance: textfield; -} .oo-ui-textInputWidget input::-ms-clear { display: none; } diff --git a/resources/lib/ooui/oojs-ui-core.js b/resources/lib/ooui/oojs-ui-core.js index f78f4e7cb1..b7f83a3a63 100644 --- a/resources/lib/ooui/oojs-ui-core.js +++ b/resources/lib/ooui/oojs-ui-core.js @@ -1,12 +1,12 @@ /*! - * OOUI v0.32.1 + * OOUI v0.33.0 * https://www.mediawiki.org/wiki/OOUI * * Copyright 2011–2019 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2019-06-05T16:24:08Z + * Date: 2019-06-27T03:27:26Z */ ( function ( OO ) { @@ -292,7 +292,7 @@ OO.ui.warnDeprecation = function ( message ) { */ OO.ui.throttle = function ( func, wait ) { var context, args, timeout, - previous = 0, + previous = Date.now() - wait, run = function () { timeout = null; previous = Date.now(); @@ -304,33 +304,17 @@ OO.ui.throttle = function ( func, wait ) { // period. If it's less, run the function immediately. If it's more, // set a timeout for the remaining time -- but don't replace an // existing timeout, since that'd indefinitely prolong the wait. - var remaining = wait - ( Date.now() - previous ); + var remaining = Math.max( wait - ( Date.now() - previous ), 0 ); context = this; args = arguments; - if ( remaining <= 0 ) { - // Note: unless wait was ridiculously large, this means we'll - // automatically run the first time the function was called in a - // given period. (If you provide a wait period larger than the - // current Unix timestamp, you *deserve* unexpected behavior.) - clearTimeout( timeout ); - run(); - } else if ( !timeout ) { + if ( !timeout ) { + // If time is up, do setTimeout( run, 0 ) so the function + // always runs asynchronously, just like Promise#then . timeout = setTimeout( run, remaining ); } }; }; -/** - * A (possibly faster) way to get the current timestamp as an integer. - * - * @deprecated Since 0.31.1; use `Date.now()` instead. - * @return {number} Current timestamp, in milliseconds since the Unix epoch - */ -OO.ui.now = function () { - OO.ui.warnDeprecation( 'OO.ui.now() is deprecated, use Date.now() instead' ); - return Date.now(); -}; - /** * Reconstitute a JavaScript object corresponding to a widget created by * the PHP implementation. @@ -613,10 +597,6 @@ OO.ui.Element = function OoUiElement( config ) { config = config || {}; // Properties - this.$ = function () { - OO.ui.warnDeprecation( 'this.$ is deprecated, use global $ instead' ); - return $.apply( this, arguments ); - }; this.elementId = null; this.visible = true; this.data = config.data; @@ -893,29 +873,6 @@ OO.ui.Element.static.gatherPreInfuseState = function () { return {}; }; -/** - * Get a jQuery function within a specific document. - * - * @static - * @param {jQuery|HTMLElement|HTMLDocument|Window} context Context to bind the function to - * @param {jQuery} [$iframe] HTML iframe element that contains the document, omit if document is - * not in an iframe - * @return {Function} Bound jQuery function - */ -OO.ui.Element.static.getJQuery = function ( context, $iframe ) { - function wrapper( selector ) { - return $( selector, wrapper.context ); - } - - wrapper.context = this.getDocument( context ); - - if ( $iframe ) { - wrapper.$iframe = $iframe; - } - - return wrapper; -}; - /** * Get the document of an element. * @@ -3052,16 +3009,6 @@ OO.ui.mixin.IconElement.prototype.getIcon = function () { return this.icon; }; -/** - * Get the icon title. The title text is displayed when a user moves the mouse over the icon. - * - * @return {string} Icon title text - * @deprecated - */ -OO.ui.mixin.IconElement.prototype.getIconTitle = function () { - return this.iconTitle; -}; - /** * IndicatorElement is often mixed into other classes to generate an indicator. * Indicators are small graphics that are generally used in two ways: @@ -3196,18 +3143,6 @@ OO.ui.mixin.IndicatorElement.prototype.getIndicator = function () { return this.indicator; }; -/** - * Get the indicator title. - * - * The title is displayed when a user moves the mouse over the indicator. - * - * @return {string} Indicator title text - * @deprecated - */ -OO.ui.mixin.IndicatorElement.prototype.getIndicatorTitle = function () { - return this.indicatorTitle; -}; - /** * The FlaggedElement class is an attribute mixin, meaning that it is used to add * additional functionality to an element created by another class. The class provides @@ -4274,6 +4209,125 @@ OO.mixinClass( OO.ui.LabelWidget, OO.ui.mixin.TitledElement ); */ OO.ui.LabelWidget.static.tagName = 'label'; +/** + * MessageWidget produces a visual component for sending a notice to the user + * with an icon and distinct design noting its purpose. The MessageWidget changes + * its visual presentation based on the type chosen, which also denotes its UX + * purpose. + * + * @class + * @extends OO.ui.Widget + * @mixins OO.ui.mixin.IconElement + * @mixins OO.ui.mixin.LabelElement + * @mixins OO.ui.mixin.TitledElement + * @mixins OO.ui.mixin.FlaggedElement + * + * @constructor + * @param {Object} [config] Configuration options + * @cfg {string} [type='notice'] The type of the notice widget. This will also + * impact the flags that the widget receives (and hence its CSS design) as well + * as the icon that appears. Available types: + * 'notice', 'error', 'warning', 'success' + * @cfg {boolean} [inline] Set the notice as an inline notice. The default + * is not inline, or 'boxed' style. + */ +OO.ui.MessageWidget = function OoUiMessageWidget( config ) { + // Configuration initialization + config = config || {}; + + // Parent constructor + OO.ui.MessageWidget.parent.call( this, config ); + + // Mixin constructors + OO.ui.mixin.IconElement.call( this, config ); + OO.ui.mixin.LabelElement.call( this, config ); + OO.ui.mixin.TitledElement.call( this, config ); + OO.ui.mixin.FlaggedElement.call( this, config ); + + // Set type + this.setType( config.type ); + this.setInline( config.inline ); + + // Build the widget + this.$element + .append( this.$icon, this.$label ) + .addClass( 'oo-ui-messageWidget' ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.MessageWidget, OO.ui.Widget ); +OO.mixinClass( OO.ui.MessageWidget, OO.ui.mixin.IconElement ); +OO.mixinClass( OO.ui.MessageWidget, OO.ui.mixin.LabelElement ); +OO.mixinClass( OO.ui.MessageWidget, OO.ui.mixin.TitledElement ); +OO.mixinClass( OO.ui.MessageWidget, OO.ui.mixin.FlaggedElement ); + +/* Static Properties */ + +/** + * An object defining the icon name per defined type. + * + * @static + * @property {Object} + */ +OO.ui.MessageWidget.static.iconMap = { + notice: 'infoFilled', + error: 'error', + warning: 'alert', + success: 'check' +}; + +/* Methods */ + +/** + * Set the inline state of the widget. + * + * @param {boolean} inline Widget is inline + */ +OO.ui.MessageWidget.prototype.setInline = function ( inline ) { + inline = !!inline; + + if ( this.inline !== inline ) { + this.inline = inline; + this.$element + .toggleClass( 'oo-ui-messageWidget-block', !this.inline ); + } +}; +/** + * Set the widget type. The given type must belong to the list of + * legal types set by OO.ui.MessageWidget.static.iconMap + * + * @param {string} [type] Given type. Defaults to 'notice' + */ +OO.ui.MessageWidget.prototype.setType = function ( type ) { + // Validate type + if ( Object.keys( this.constructor.static.iconMap ).indexOf( type ) === -1 ) { + type = 'notice'; // Default + } + + if ( this.type !== type ) { + + // Flags + this.clearFlags(); + this.setFlags( type ); + + // Set the icon and its variant + this.setIcon( this.constructor.static.iconMap[ type ] ); + this.$icon.removeClass( 'oo-ui-image-' + this.type ); + this.$icon.addClass( 'oo-ui-image-' + type ); + + if ( type === 'error' ) { + this.$element.attr( 'role', 'alert' ); + this.$element.removeAttr( 'aria-live' ); + } else { + this.$element.removeAttr( 'role' ); + this.$element.attr( 'aria-live', 'polite' ); + } + + this.type = type; + } +}; + /** * PendingElement is a mixin that is used to create elements that notify users that something is * happening and that they should wait before proceeding. The pending state is visually represented @@ -11986,7 +12040,7 @@ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) { this.successMessages = []; this.notices = []; this.$field = this.isFieldInline() ? $( '' ) : $( '
' ); - this.$messages = $( '