From: James D. Forrester Date: Fri, 12 Dec 2014 20:22:29 +0000 (-0800) Subject: Update OOjs UI to v0.5.0 X-Git-Tag: 1.31.0-rc.0~12983^2 X-Git-Url: http://git.cyclocoop.org/%24self?a=commitdiff_plain;h=b08f91855ad410ed5972b7feeead3464655ada43;p=lhc%2Fweb%2Fwiklou.git Update OOjs UI to v0.5.0 Release notes: https://git.wikimedia.org/blob/oojs%2Fui.git/v0.5.0/History.md Change-Id: I8503e846b8d240facb7a579952104285d7f9a7fc --- diff --git a/resources/lib/oojs-ui/i18n/ca.json b/resources/lib/oojs-ui/i18n/ca.json index f1c6ea3865..ce3afa4371 100644 --- a/resources/lib/oojs-ui/i18n/ca.json +++ b/resources/lib/oojs-ui/i18n/ca.json @@ -9,14 +9,20 @@ "SMP", "Vriullop", "Toniher", - "Edustus" + "Edustus", + "Davidpar" ] }, - "ooui-outline-control-move-down": "Baixa element", - "ooui-outline-control-move-up": "Puja element", + "ooui-outline-control-move-down": "Baixa l'element", + "ooui-outline-control-move-up": "Puja l'element", + "ooui-outline-control-remove": "Esborra l'ítem", "ooui-toolbar-more": "Més", "ooui-toolgroup-expand": "Més", "ooui-toolgroup-collapse": "Menys", + "ooui-dialog-message-accept": "D'acord", + "ooui-dialog-message-reject": "Cancel·la", + "ooui-dialog-process-error": "Alguna cosa no ha funcionat", "ooui-dialog-process-dismiss": "Descarta", - "ooui-dialog-process-retry": "Torneu-ho a provar" + "ooui-dialog-process-retry": "Torneu-ho a provar", + "ooui-dialog-process-continue": "Continua" } diff --git a/resources/lib/oojs-ui/i18n/uk.json b/resources/lib/oojs-ui/i18n/uk.json index d6034f0513..f4d4a5c735 100644 --- a/resources/lib/oojs-ui/i18n/uk.json +++ b/resources/lib/oojs-ui/i18n/uk.json @@ -14,13 +14,16 @@ "SteveR", "Tel'et", "Tifinaghes", - "Ата" + "Ата", + "Piramidion" ] }, "ooui-outline-control-move-down": "Перемістити елемент униз", "ooui-outline-control-move-up": "Перемістити елемент вгору", "ooui-outline-control-remove": "Видалити елемент", "ooui-toolbar-more": "Більше", + "ooui-toolgroup-expand": "Більше", + "ooui-toolgroup-collapse": "Менше", "ooui-dialog-message-accept": "Готово", "ooui-dialog-message-reject": "Скасувати", "ooui-dialog-process-error": "Щось пішло не так", diff --git a/resources/lib/oojs-ui/oojs-ui-apex.css b/resources/lib/oojs-ui/oojs-ui-apex.css index 8f048e4090..4c4512b34a 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.4.0 + * OOjs UI v0.5.0 * 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-12-06T00:33:19Z + * Date: 2014-12-12T20:13:21Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -153,7 +153,7 @@ .oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { margin-left: 0.25em; } -.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { +.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #087ecc; } .oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { @@ -194,7 +194,7 @@ outline: none; } .oo-ui-buttonElement-framed > input.oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { +.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { line-height: 1.9em; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, @@ -220,7 +220,7 @@ margin-left: -0.5em; margin-right: 0.3em; } -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { border: solid 1px #a6cee1; background: #cde7f4; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#eaf4fa', endColorstr='#b0d9ee'); @@ -231,13 +231,13 @@ background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); } -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color: #9dc2d4; } -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { border: solid 1px #a6cee1; background: #cde7f4; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa'); @@ -374,60 +374,57 @@ .oo-ui-fieldLayout:after { clear: both; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labelElement-label, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { - display: block; - float: left; -} -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { display: block; float: left; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { text-align: right; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labelElement-label { - display: inline-block; - vertical-align: middle; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body { + display: table; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { - display: inline-block; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { + display: table-cell; vertical-align: middle; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { display: inline-block; } -.oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { - z-index: 1; -} -.oo-ui-fieldLayout .oo-ui-fieldLayout-help { +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help { float: right; } -.oo-ui-fieldLayout .oo-ui-fieldLayout-help-content { +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { + z-index: 1; +} +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help .oo-ui-fieldLayout-help-content { padding: 0.5em 0.75em; line-height: 1.5em; } .oo-ui-fieldLayout:last-child { margin-bottom: 0; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labelElement-label, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding-top: 0.5em; margin-right: 5%; width: 35%; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { width: 60%; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labelElement-label { - padding: 0.75em 0.5em 0.5em 0.5em; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { + padding: 0.5em; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { padding: 0.5em 0; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding: 0.5em 0; } .oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { @@ -1338,9 +1335,6 @@ .oo-ui-popupWidget-head .oo-ui-labelElement-label { margin: 0.75em 1em; } -.oo-ui-popupWidget-body { - box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); -} .oo-ui-popupWidget-body-padded { padding: 0 1em; } @@ -1359,6 +1353,7 @@ } .oo-ui-textInputWidget { position: relative; + vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1652,7 +1647,7 @@ .oo-ui-outlineControlsWidget-items, .oo-ui-outlineControlsWidget-movers { height: 2em; - margin: 0.5em; + margin: 0.5em 0.5em 0.5em 0; padding: 0; } .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon { @@ -1661,9 +1656,6 @@ margin: 0.5em 0 0.5em 0.5em; opacity: 0.2; } -.oo-ui-outlineControlsWidget-items { - margin-left: 0; -} .oo-ui-comboBoxWidget { display: inline-block; position: relative; @@ -1874,13 +1866,13 @@ .oo-ui-messageDialog-actions .oo-ui-actionWidget:active { background-color: rgba(0, 0, 0, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover { background-color: rgba(8, 126, 204, 0.05); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active { background-color: rgba(8, 126, 204, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label { font-weight: bold; } .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover { @@ -2001,16 +1993,16 @@ /* Adjust for border so text aligns with title */ margin: -1px; } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover { background-color: rgba(8, 126, 204, 0.05); } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active { background-color: rgba(8, 126, 204, 0.1); } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label { font-weight: bold; } .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover, diff --git a/resources/lib/oojs-ui/oojs-ui-apex.js b/resources/lib/oojs-ui/oojs-ui-apex.js index f3f635d56a..eefc652c18 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.4.0 + * OOjs UI v0.5.0 * 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-12-06T00:33:09Z + * Date: 2014-12-12T20:13:09Z */ /* Instantiation */ diff --git a/resources/lib/oojs-ui/oojs-ui-apex.svg.css b/resources/lib/oojs-ui/oojs-ui-apex.svg.css index ccbc0b393f..1236d0b39a 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.4.0 + * OOjs UI v0.5.0 * 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-12-06T00:33:19Z + * Date: 2014-12-12T20:13:21Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -153,7 +153,7 @@ .oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { margin-left: 0.25em; } -.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { +.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #087ecc; } .oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { @@ -194,7 +194,7 @@ outline: none; } .oo-ui-buttonElement-framed > input.oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { +.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { line-height: 1.9em; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, @@ -220,7 +220,7 @@ margin-left: -0.5em; margin-right: 0.3em; } -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { border: solid 1px #a6cee1; background: #cde7f4; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#eaf4fa', endColorstr='#b0d9ee'); @@ -231,13 +231,13 @@ background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); } -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color: #9dc2d4; } -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { border: solid 1px #a6cee1; background: #cde7f4; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa'); @@ -374,60 +374,57 @@ .oo-ui-fieldLayout:after { clear: both; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labelElement-label, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { - display: block; - float: left; -} -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { display: block; float: left; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { text-align: right; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labelElement-label { - display: inline-block; - vertical-align: middle; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body { + display: table; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { - display: inline-block; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { + display: table-cell; vertical-align: middle; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { display: inline-block; } -.oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { - z-index: 1; -} -.oo-ui-fieldLayout .oo-ui-fieldLayout-help { +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help { float: right; } -.oo-ui-fieldLayout .oo-ui-fieldLayout-help-content { +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { + z-index: 1; +} +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help .oo-ui-fieldLayout-help-content { padding: 0.5em 0.75em; line-height: 1.5em; } .oo-ui-fieldLayout:last-child { margin-bottom: 0; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labelElement-label, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding-top: 0.5em; margin-right: 5%; width: 35%; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { width: 60%; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labelElement-label { - padding: 0.75em 0.5em 0.5em 0.5em; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { + padding: 0.5em; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { padding: 0.5em 0; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding: 0.5em 0; } .oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { @@ -1338,9 +1335,6 @@ .oo-ui-popupWidget-head .oo-ui-labelElement-label { margin: 0.75em 1em; } -.oo-ui-popupWidget-body { - box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); -} .oo-ui-popupWidget-body-padded { padding: 0 1em; } @@ -1359,6 +1353,7 @@ } .oo-ui-textInputWidget { position: relative; + vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1652,7 +1647,7 @@ .oo-ui-outlineControlsWidget-items, .oo-ui-outlineControlsWidget-movers { height: 2em; - margin: 0.5em; + margin: 0.5em 0.5em 0.5em 0; padding: 0; } .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon { @@ -1661,9 +1656,6 @@ margin: 0.5em 0 0.5em 0.5em; opacity: 0.2; } -.oo-ui-outlineControlsWidget-items { - margin-left: 0; -} .oo-ui-comboBoxWidget { display: inline-block; position: relative; @@ -1874,13 +1866,13 @@ .oo-ui-messageDialog-actions .oo-ui-actionWidget:active { background-color: rgba(0, 0, 0, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover { background-color: rgba(8, 126, 204, 0.05); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active { background-color: rgba(8, 126, 204, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label { font-weight: bold; } .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover { @@ -2001,16 +1993,16 @@ /* Adjust for border so text aligns with title */ margin: -1px; } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover { background-color: rgba(8, 126, 204, 0.05); } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active { background-color: rgba(8, 126, 204, 0.1); } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label { font-weight: bold; } .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover, diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.css index 6fed5402fa..2d1060c012 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.4.0 + * OOjs UI v0.5.0 * 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-12-06T00:33:19Z + * Date: 2014-12-12T20:13:21Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -127,8 +127,8 @@ } .oo-ui-buttonElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator, .oo-ui-buttonElement.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { - width: 2.2em; - height: 2.2em; + width: 1.9em; + height: 1.9em; } .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { @@ -151,16 +151,16 @@ .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #444444; } -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:focus > .oo-ui-labelElement-label { +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus > .oo-ui-labelElement-label { color: #598ad1; } -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #777777; } -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active > .oo-ui-labelElement-label, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #015ccc; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, @@ -189,8 +189,8 @@ } .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { margin: 0.1em 0; - padding: 0.3em 1.2em; - border-radius: 0.3em; + padding: 0.2em 0.8em; + border-radius: 2px; -webkit-transition: background 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; -ms-transition: background 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; @@ -202,8 +202,8 @@ outline: none; } .oo-ui-buttonElement-framed > input.oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { - line-height: 2.2em; +.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { + line-height: 1.9em; } .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { margin-left: -0.5em; @@ -234,52 +234,76 @@ background-color: #d0d0d0; border-color: #d0d0d0; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { + color: #0274ff; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 -0.2em 0 0 #015ccc, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); + border-bottom-color: #015ccc; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button { + color: #00af89; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 -0.2em 0 0 #008c6d, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); + border-bottom-color: #008c6d; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { + color: #d11d13; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 -0.2em 0 0 #a7170f, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); + border-bottom-color: #a7170f; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #0274ff; border-color: #0274ff; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { box-shadow: inset 0 -0.2em 0 0 #015ccc, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #015ccc; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: #015ccc; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #00af89; border-color: #00af89; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { box-shadow: inset 0 -0.2em 0 0 #008c6d, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #008c6d; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: #008c6d; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #d11d13; border-color: #d11d13; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { box-shadow: inset 0 -0.2em 0 0 #a7170f, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #a7170f; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: #a7170f; } .oo-ui-clippableElement-clippable { @@ -358,60 +382,57 @@ .oo-ui-fieldLayout:after { clear: both; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labelElement-label, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { - display: block; - float: left; -} -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { display: block; float: left; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { text-align: right; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labelElement-label { - display: inline-block; - vertical-align: middle; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body { + display: table; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { - display: inline-block; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { + display: table-cell; vertical-align: middle; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { display: inline-block; } -.oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { - z-index: 1; -} -.oo-ui-fieldLayout .oo-ui-fieldLayout-help { +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help { float: right; } -.oo-ui-fieldLayout .oo-ui-fieldLayout-help-content { +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { + z-index: 1; +} +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help .oo-ui-fieldLayout-help-content { padding: 0.5em 0.75em; line-height: 1.5em; } .oo-ui-fieldLayout:last-child { margin-bottom: 0; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labelElement-label, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding-top: 0.5em; margin-right: 5%; width: 35%; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { width: 60%; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labelElement-label { - padding: 0.75em 0.5em 0.5em 0.5em; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { + padding: 0.5em; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { padding: 0.5em 0; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding: 0.5em 0; } .oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { @@ -689,9 +710,13 @@ .oo-ui-listToolGroup .oo-ui-tool-link { padding-right: 0.5em; } -.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled { +.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { background-color: #eeeeee; } +.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled, +.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover { + background-color: #d0d0d0; +} .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title { color: #cccccc; } @@ -756,7 +781,7 @@ background-image: /* @embed */ url(themes/mediawiki/images/icons/check.svg); } .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { - background-color: #e1f3ff; + background-color: #eeeeee; } .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title { color: #cccccc; @@ -808,7 +833,7 @@ pointer-events: none; } .oo-ui-toolbar-bar { - border-bottom: solid 1px #cccccc; + border-bottom: solid 4px rgba(0, 0, 0, 0.15); background: #ffffff; } .oo-ui-toolbar-bar .oo-ui-toolbar-bar { @@ -819,20 +844,20 @@ display: none; } .oo-ui-selectWidget { - border-radius: 0.3em; + border-radius: 2px; } .oo-ui-selectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button { border-radius: 0; margin-left: -1px; } .oo-ui-selectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button { - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; margin-left: 0; } .oo-ui-selectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button { - border-bottom-right-radius: 0.3em; - border-top-right-radius: 0.3em; + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; } .oo-ui-optionWidget { position: relative; @@ -858,7 +883,7 @@ } .oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected, .oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed { - background-color: #a7dcff; + background-color: #d0d0d0; } .oo-ui-optionWidget.oo-ui-widget-disabled { color: #cccccc; @@ -888,20 +913,20 @@ .oo-ui-buttonSelectWidget { display: inline-block; white-space: nowrap; - border-radius: 0.3em; + border-radius: 2px; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button { border-radius: 0; margin-left: -1px; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button { - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; margin-left: 0; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button { - border-bottom-right-radius: 0.3em; - border-top-right-radius: 0.3em; + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; } .oo-ui-radioSelectWidget { padding: 0.75em 0 0.5em 0; @@ -921,11 +946,11 @@ vertical-align: middle; } .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button { - height: 2.2em; + height: 1.9em; } .oo-ui-buttonOptionWidget.oo-ui-iconElement .oo-ui-iconElement-icon, .oo-ui-buttonOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { - height: 2.2em; + height: 1.9em; margin-top: 0; } .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected, @@ -960,8 +985,8 @@ background-position: center center; background-repeat: no-repeat; line-height: 2.5em; - height: 2.2em; - width: 2.2em; + height: 1.9em; + width: 1.9em; } .oo-ui-iconWidget.oo-ui-widget-disabled { opacity: 0.2; @@ -972,8 +997,8 @@ background-position: center center; background-repeat: no-repeat; line-height: 2.5em; - height: 2.2em; - width: 2.2em; + height: 1.9em; + width: 1.9em; } .oo-ui-indicatorWidget.oo-ui-widget-disabled { opacity: 0.2; @@ -985,7 +1010,7 @@ .oo-ui-buttonGroupWidget { display: inline-block; white-space: nowrap; - border-radius: 0.3em; + border-radius: 2px; } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button { border-radius: 0; @@ -993,13 +1018,13 @@ margin-left: -1px; } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button { - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; margin-left: 0; } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button { - border-bottom-right-radius: 0.3em; - border-top-right-radius: 0.3em; + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; } .oo-ui-toggleSwitchWidget { position: relative; @@ -1214,9 +1239,6 @@ .oo-ui-popupWidget-head .oo-ui-labelElement-label { margin: 0.75em 1em; } -.oo-ui-popupWidget-body { - box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); -} .oo-ui-popupWidget-body-padded { padding: 0 1em; } @@ -1235,15 +1257,18 @@ } .oo-ui-checkboxInputWidget { position: relative; - line-height: 1.6em; + line-height: 2em; + white-space: nowrap; } .oo-ui-checkboxInputWidget * { + font: inherit; vertical-align: middle; } .oo-ui-checkboxInputWidget input[type="checkbox"] { opacity: 0; - width: 1.6em; - height: 1.6em; + margin: 0; + width: 2em; + height: 2em; max-width: none; } .oo-ui-checkboxInputWidget input[type="checkbox"] + span { @@ -1252,35 +1277,110 @@ } .oo-ui-checkboxInputWidget input[type="checkbox"] + span::before { content: ""; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; position: absolute; left: 0; - border-radius: 0.3em; - width: 1.6em; - height: 1.6em; - background-color: #ffffff; - border: 1px solid grey; + border-radius: 2px; + width: 2em; + height: 2em; + background-color: white; + border: 1px solid #777777; } .oo-ui-checkboxInputWidget input[type="checkbox"]:checked + span::before { background-image: /* @embed */ url(themes/mediawiki/images/icons/check-constructive.svg); - background-size: 1.6em, 1.6em; + background-size: 2em, 2em; background-repeat: no-repeat; - background-position: center top; + background-position: center center; + background-origin: border-box; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:active + span::before { + background-color: #dddddd; + border-color: #dddddd; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:focus + span::before { + border-width: 2px; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:focus:hover + span::before, +.oo-ui-checkboxInputWidget input[type="checkbox"]:hover + span::before { + border-bottom-width: 3px; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:disabled + span::before { + cursor: default; + background-color: #eeeeee; + border-color: #eeeeee; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:disabled:checked + span::before { + background-image: /* @embed */ url(themes/mediawiki/images/icons/check-invert.svg); } -.oo-ui-checkboxInputWidget input[type="checkbox"]:active + span::after, -.oo-ui-checkboxInputWidget input[type="checkbox"]:focus + span::after { +.oo-ui-radioInputWidget { + position: relative; + line-height: 2em; +} +.oo-ui-radioInputWidget * { + font: inherit; + vertical-align: middle; +} +.oo-ui-radioInputWidget input[type="radio"] { + opacity: 0; + margin: 0; + width: 2em; + height: 2em; + max-width: none; +} +.oo-ui-radioInputWidget input[type="radio"] + span { + cursor: pointer; + margin: 0 0.4em; +} +.oo-ui-radioInputWidget input[type="radio"] + span::before { + transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -moz-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -ms-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -o-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -webkit-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); content: ""; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; position: absolute; - width: 1.6em; - height: 1.5em; - left: 1px; - border-bottom: solid 0.2em #d3d3d3; + left: 0; + border-radius: 100%; + width: 2em; + height: 2em; + background: white; + border: 1px solid #777777; + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-constructive.svg); + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + background-size: 0 0; } -.oo-ui-checkboxInputWidget input[type="checkbox"]:disabled + span::before { +.oo-ui-radioInputWidget input[type="radio"]:checked + span::before { + background-size: 100% 100%; +} +.oo-ui-radioInputWidget input[type="radio"]:active + span::before { + background-color: #dddddd; + border-color: #dddddd; +} +.oo-ui-radioInputWidget input[type="radio"]:focus + span::before { + border-width: 2px; +} +.oo-ui-radioInputWidget input[type="radio"]:focus:hover + span::before, +.oo-ui-radioInputWidget input[type="radio"]:hover + span::before { + border-bottom-width: 3px; +} +.oo-ui-radioInputWidget input[type="radio"]:disabled + span::before { cursor: default; - background-color: lightgrey; + background-color: #eeeeee; + border-color: #eeeeee; +} +.oo-ui-radioInputWidget input[type="radio"]:disabled:checked + span::before { + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-invert.svg); } .oo-ui-textInputWidget { position: relative; + vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1381,7 +1481,7 @@ } .oo-ui-textInputWidget.oo-ui-indicatorElement input, .oo-ui-textInputWidget.oo-ui-indicatorElement textarea { - padding-right: 2.2em; + padding-right: 1.9em; } .oo-ui-textInputWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { width: 1.6em; @@ -1510,6 +1610,52 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; + font-size: 1.1em; + padding: 0.75em; +} +.oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label { + padding-right: 1.5em; +} +.oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { + opacity: 0.5; +} +.oo-ui-outlineOptionWidget-level-0 { + padding-left: 3.5em; +} +.oo-ui-outlineOptionWidget-level-0 .oo-ui-iconElement-icon { + left: 1em; +} +.oo-ui-outlineOptionWidget-level-1 { + padding-left: 5em; +} +.oo-ui-outlineOptionWidget-level-1 .oo-ui-iconElement-icon { + left: 2.5em; +} +.oo-ui-outlineOptionWidget-level-2 { + padding-left: 6.5em; +} +.oo-ui-outlineOptionWidget-level-2 .oo-ui-iconElement-icon { + left: 4em; +} +.oo-ui-selectWidget-depressed .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected { + background-color: #d0d0d0; + text-shadow: 0 1px 1px #ffffff; +} +.oo-ui-outlineOptionWidget.oo-ui-flaggedElement-important { + font-weight: bold; +} +.oo-ui-outlineOptionWidget.oo-ui-flaggedElement-placeholder { + font-style: italic; +} +.oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-iconElement-icon { + opacity: 0.5; +} +.oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-labelElement-label { + color: #777777; +} +.oo-ui-outlineControlsWidget { + height: 3em; + background-color: #ffffff; } .oo-ui-outlineControlsWidget-items, .oo-ui-outlineControlsWidget-movers { @@ -1535,6 +1681,18 @@ .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget { float: right; } +.oo-ui-outlineControlsWidget-items, +.oo-ui-outlineControlsWidget-movers { + height: 2em; + margin: 0.5em 0.5em 0.5em 0; + padding: 0; +} +.oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon { + width: 1.5em; + height: 2em; + margin: 0.5em 0 0.5em 0.5em; + opacity: 0.2; +} .oo-ui-comboBoxWidget { display: inline-block; position: relative; @@ -1550,10 +1708,10 @@ height: 2.35em; } .oo-ui-comboBoxWidget .oo-ui-textInputWidget.oo-ui-indicatorElement { - padding-right: 2.2em; + padding-right: 1.9em; } .oo-ui-comboBoxWidget .oo-ui-textInputWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { - width: 2.2em; + width: 1.9em; background-position: center center; border: solid 1px #cccccc; border-left: none; @@ -1561,6 +1719,9 @@ -moz-box-sizing: border-box; box-sizing: border-box; } +.oo-ui-searchWidget { + border: solid 1px #cccccc; +} .oo-ui-searchWidget-query { position: absolute; top: 0; @@ -1579,15 +1740,16 @@ overflow-y: auto; } .oo-ui-searchWidget-query { - height: 2.4em; - top: 1px; + height: 4em; + padding: 0 1em; + border-bottom: solid 1px #cccccc; } -.oo-ui-searchWidget-query .oo-ui-textInputWidget input { - border-width: 1px 0; +.oo-ui-searchWidget-query .oo-ui-textInputWidget { + margin: 0.75em 0; } .oo-ui-searchWidget-results { - top: 2.2em; - bottom: 0.2em; + top: 4em; + padding: 1em; line-height: 0; } .oo-ui-window { @@ -1741,13 +1903,13 @@ .oo-ui-messageDialog-actions .oo-ui-actionWidget:active { background-color: rgba(0, 0, 0, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover { background-color: rgba(8, 126, 204, 0.05); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active { background-color: rgba(8, 126, 204, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label { font-weight: bold; } .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover { @@ -1868,16 +2030,16 @@ /* Adjust for border so text aligns with title */ margin: -1px; } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover { background-color: rgba(8, 126, 204, 0.05); } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active { background-color: rgba(8, 126, 204, 0.1); } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label { font-weight: bold; } .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover, @@ -2125,6 +2287,17 @@ .oo-ui-image-invert.oo-ui-icon-previous { background-image: /* @embed */ url(themes/mediawiki/images/icons/move-rtl-invert.png); } +.oo-ui-icon-circle { + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle.png); +} +.oo-ui-image-constructive .oo-ui-icon-circle, +.oo-ui-image-constructive.oo-ui-icon-circle { + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-constructive.png); +} +.oo-ui-image-invert .oo-ui-icon-circle, +.oo-ui-image-invert.oo-ui-icon-circle { + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-invert.png); +} .oo-ui-icon-redo { background-image: /* @embed */ url(themes/mediawiki/images/icons/arched-arrow-ltr.png); } diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js index 5bb3691565..b590c97bb9 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.4.0 + * OOjs UI v0.5.0 * 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-12-06T00:33:09Z + * Date: 2014-12-12T20:13:09Z */ /** * @class @@ -33,7 +33,7 @@ OO.ui.MediaWikiTheme.prototype.getElementClasses = function ( element ) { var variant, variants = { invert: false, - primary: false, + progressive: false, constructive: false, destructive: false }, @@ -41,16 +41,10 @@ OO.ui.MediaWikiTheme.prototype.getElementClasses = function ( element ) { classes = OO.ui.MediaWikiTheme.super.prototype.getElementClasses.call( this, element ); if ( element.supports( [ 'isFramed', 'isDisabled', 'hasFlag' ] ) ) { - if ( element.isFramed() && !element.isDisabled() ) { - if ( - element.hasFlag( 'primary' ) || - element.hasFlag( 'constructive' ) || - element.hasFlag( 'destructive' ) - ) { - variants.invert = true; - } + if ( !element.isDisabled() && element.isFramed() && element.hasFlag( 'primary' ) ) { + variants.invert = true; } else { - variants.primary = element.hasFlag( 'primary' ); + variants.progressive = element.hasFlag( 'progressive' ); variants.constructive = element.hasFlag( 'constructive' ); variants.destructive = element.hasFlag( 'destructive' ); } diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css index 2eb47462f1..0713084aa3 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.4.0 + * OOjs UI v0.5.0 * 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-12-06T00:33:19Z + * Date: 2014-12-12T20:13:21Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -127,8 +127,8 @@ } .oo-ui-buttonElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator, .oo-ui-buttonElement.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { - width: 2.2em; - height: 2.2em; + width: 1.9em; + height: 1.9em; } .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { @@ -151,16 +151,16 @@ .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #444444; } -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:focus > .oo-ui-labelElement-label { +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus > .oo-ui-labelElement-label { color: #598ad1; } -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #777777; } -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active > .oo-ui-labelElement-label, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #015ccc; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, @@ -189,8 +189,8 @@ } .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { margin: 0.1em 0; - padding: 0.3em 1.2em; - border-radius: 0.3em; + padding: 0.2em 0.8em; + border-radius: 2px; -webkit-transition: background 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; -ms-transition: background 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; @@ -202,8 +202,8 @@ outline: none; } .oo-ui-buttonElement-framed > input.oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { - line-height: 2.2em; +.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { + line-height: 1.9em; } .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { margin-left: -0.5em; @@ -234,52 +234,76 @@ background-color: #d0d0d0; border-color: #d0d0d0; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { + color: #0274ff; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 -0.2em 0 0 #015ccc, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); + border-bottom-color: #015ccc; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button { + color: #00af89; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 -0.2em 0 0 #008c6d, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); + border-bottom-color: #008c6d; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { + color: #d11d13; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 -0.2em 0 0 #a7170f, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); + border-bottom-color: #a7170f; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #0274ff; border-color: #0274ff; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { box-shadow: inset 0 -0.2em 0 0 #015ccc, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #015ccc; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: #015ccc; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #00af89; border-color: #00af89; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { box-shadow: inset 0 -0.2em 0 0 #008c6d, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #008c6d; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: #008c6d; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #d11d13; border-color: #d11d13; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { box-shadow: inset 0 -0.2em 0 0 #a7170f, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #a7170f; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: #a7170f; } .oo-ui-clippableElement-clippable { @@ -358,60 +382,57 @@ .oo-ui-fieldLayout:after { clear: both; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labelElement-label, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { - display: block; - float: left; -} -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { display: block; float: left; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { text-align: right; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labelElement-label { - display: inline-block; - vertical-align: middle; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body { + display: table; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { - display: inline-block; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { + display: table-cell; vertical-align: middle; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { display: inline-block; } -.oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { - z-index: 1; -} -.oo-ui-fieldLayout .oo-ui-fieldLayout-help { +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help { float: right; } -.oo-ui-fieldLayout .oo-ui-fieldLayout-help-content { +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { + z-index: 1; +} +.oo-ui-fieldLayout > .oo-ui-fieldLayout-help .oo-ui-fieldLayout-help-content { padding: 0.5em 0.75em; line-height: 1.5em; } .oo-ui-fieldLayout:last-child { margin-bottom: 0; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labelElement-label, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding-top: 0.5em; margin-right: 5%; width: 35%; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { width: 60%; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labelElement-label { - padding: 0.75em 0.5em 0.5em 0.5em; +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { + padding: 0.5em; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { padding: 0.5em 0; } -.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label { +.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding: 0.5em 0; } .oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { @@ -689,9 +710,13 @@ .oo-ui-listToolGroup .oo-ui-tool-link { padding-right: 0.5em; } -.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled { +.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { background-color: #eeeeee; } +.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled, +.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover { + background-color: #d0d0d0; +} .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title { color: #cccccc; } @@ -756,7 +781,7 @@ background-image: /* @embed */ url(themes/mediawiki/images/icons/check.svg); } .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { - background-color: #e1f3ff; + background-color: #eeeeee; } .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title { color: #cccccc; @@ -808,7 +833,7 @@ pointer-events: none; } .oo-ui-toolbar-bar { - border-bottom: solid 1px #cccccc; + border-bottom: solid 4px rgba(0, 0, 0, 0.15); background: #ffffff; } .oo-ui-toolbar-bar .oo-ui-toolbar-bar { @@ -819,20 +844,20 @@ display: none; } .oo-ui-selectWidget { - border-radius: 0.3em; + border-radius: 2px; } .oo-ui-selectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button { border-radius: 0; margin-left: -1px; } .oo-ui-selectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button { - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; margin-left: 0; } .oo-ui-selectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button { - border-bottom-right-radius: 0.3em; - border-top-right-radius: 0.3em; + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; } .oo-ui-optionWidget { position: relative; @@ -858,7 +883,7 @@ } .oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected, .oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed { - background-color: #a7dcff; + background-color: #d0d0d0; } .oo-ui-optionWidget.oo-ui-widget-disabled { color: #cccccc; @@ -888,20 +913,20 @@ .oo-ui-buttonSelectWidget { display: inline-block; white-space: nowrap; - border-radius: 0.3em; + border-radius: 2px; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button { border-radius: 0; margin-left: -1px; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button { - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; margin-left: 0; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button { - border-bottom-right-radius: 0.3em; - border-top-right-radius: 0.3em; + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; } .oo-ui-radioSelectWidget { padding: 0.75em 0 0.5em 0; @@ -921,11 +946,11 @@ vertical-align: middle; } .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button { - height: 2.2em; + height: 1.9em; } .oo-ui-buttonOptionWidget.oo-ui-iconElement .oo-ui-iconElement-icon, .oo-ui-buttonOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { - height: 2.2em; + height: 1.9em; margin-top: 0; } .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected, @@ -960,8 +985,8 @@ background-position: center center; background-repeat: no-repeat; line-height: 2.5em; - height: 2.2em; - width: 2.2em; + height: 1.9em; + width: 1.9em; } .oo-ui-iconWidget.oo-ui-widget-disabled { opacity: 0.2; @@ -972,8 +997,8 @@ background-position: center center; background-repeat: no-repeat; line-height: 2.5em; - height: 2.2em; - width: 2.2em; + height: 1.9em; + width: 1.9em; } .oo-ui-indicatorWidget.oo-ui-widget-disabled { opacity: 0.2; @@ -985,7 +1010,7 @@ .oo-ui-buttonGroupWidget { display: inline-block; white-space: nowrap; - border-radius: 0.3em; + border-radius: 2px; } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button { border-radius: 0; @@ -993,13 +1018,13 @@ margin-left: -1px; } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button { - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; margin-left: 0; } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button { - border-bottom-right-radius: 0.3em; - border-top-right-radius: 0.3em; + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; } .oo-ui-toggleSwitchWidget { position: relative; @@ -1214,9 +1239,6 @@ .oo-ui-popupWidget-head .oo-ui-labelElement-label { margin: 0.75em 1em; } -.oo-ui-popupWidget-body { - box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); -} .oo-ui-popupWidget-body-padded { padding: 0 1em; } @@ -1235,15 +1257,18 @@ } .oo-ui-checkboxInputWidget { position: relative; - line-height: 1.6em; + line-height: 2em; + white-space: nowrap; } .oo-ui-checkboxInputWidget * { + font: inherit; vertical-align: middle; } .oo-ui-checkboxInputWidget input[type="checkbox"] { opacity: 0; - width: 1.6em; - height: 1.6em; + margin: 0; + width: 2em; + height: 2em; max-width: none; } .oo-ui-checkboxInputWidget input[type="checkbox"] + span { @@ -1252,35 +1277,110 @@ } .oo-ui-checkboxInputWidget input[type="checkbox"] + span::before { content: ""; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; position: absolute; left: 0; - border-radius: 0.3em; - width: 1.6em; - height: 1.6em; - background-color: #ffffff; - border: 1px solid grey; + border-radius: 2px; + width: 2em; + height: 2em; + background-color: white; + border: 1px solid #777777; } .oo-ui-checkboxInputWidget input[type="checkbox"]:checked + span::before { background-image: /* @embed */ url(themes/mediawiki/images/icons/check-constructive.svg); - background-size: 1.6em, 1.6em; + background-size: 2em, 2em; background-repeat: no-repeat; - background-position: center top; + background-position: center center; + background-origin: border-box; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:active + span::before { + background-color: #dddddd; + border-color: #dddddd; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:focus + span::before { + border-width: 2px; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:focus:hover + span::before, +.oo-ui-checkboxInputWidget input[type="checkbox"]:hover + span::before { + border-bottom-width: 3px; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:disabled + span::before { + cursor: default; + background-color: #eeeeee; + border-color: #eeeeee; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:disabled:checked + span::before { + background-image: /* @embed */ url(themes/mediawiki/images/icons/check-invert.svg); +} +.oo-ui-radioInputWidget { + position: relative; + line-height: 2em; +} +.oo-ui-radioInputWidget * { + font: inherit; + vertical-align: middle; } -.oo-ui-checkboxInputWidget input[type="checkbox"]:active + span::after, -.oo-ui-checkboxInputWidget input[type="checkbox"]:focus + span::after { +.oo-ui-radioInputWidget input[type="radio"] { + opacity: 0; + margin: 0; + width: 2em; + height: 2em; + max-width: none; +} +.oo-ui-radioInputWidget input[type="radio"] + span { + cursor: pointer; + margin: 0 0.4em; +} +.oo-ui-radioInputWidget input[type="radio"] + span::before { + transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -moz-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -ms-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -o-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -webkit-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); content: ""; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; position: absolute; - width: 1.6em; - height: 1.5em; - left: 1px; - border-bottom: solid 0.2em #d3d3d3; + left: 0; + border-radius: 100%; + width: 2em; + height: 2em; + background: white; + border: 1px solid #777777; + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-constructive.svg); + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + background-size: 0 0; } -.oo-ui-checkboxInputWidget input[type="checkbox"]:disabled + span::before { +.oo-ui-radioInputWidget input[type="radio"]:checked + span::before { + background-size: 100% 100%; +} +.oo-ui-radioInputWidget input[type="radio"]:active + span::before { + background-color: #dddddd; + border-color: #dddddd; +} +.oo-ui-radioInputWidget input[type="radio"]:focus + span::before { + border-width: 2px; +} +.oo-ui-radioInputWidget input[type="radio"]:focus:hover + span::before, +.oo-ui-radioInputWidget input[type="radio"]:hover + span::before { + border-bottom-width: 3px; +} +.oo-ui-radioInputWidget input[type="radio"]:disabled + span::before { cursor: default; - background-color: lightgrey; + background-color: #eeeeee; + border-color: #eeeeee; +} +.oo-ui-radioInputWidget input[type="radio"]:disabled:checked + span::before { + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-invert.svg); } .oo-ui-textInputWidget { position: relative; + vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1381,7 +1481,7 @@ } .oo-ui-textInputWidget.oo-ui-indicatorElement input, .oo-ui-textInputWidget.oo-ui-indicatorElement textarea { - padding-right: 2.2em; + padding-right: 1.9em; } .oo-ui-textInputWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { width: 1.6em; @@ -1510,6 +1610,52 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; + font-size: 1.1em; + padding: 0.75em; +} +.oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label { + padding-right: 1.5em; +} +.oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { + opacity: 0.5; +} +.oo-ui-outlineOptionWidget-level-0 { + padding-left: 3.5em; +} +.oo-ui-outlineOptionWidget-level-0 .oo-ui-iconElement-icon { + left: 1em; +} +.oo-ui-outlineOptionWidget-level-1 { + padding-left: 5em; +} +.oo-ui-outlineOptionWidget-level-1 .oo-ui-iconElement-icon { + left: 2.5em; +} +.oo-ui-outlineOptionWidget-level-2 { + padding-left: 6.5em; +} +.oo-ui-outlineOptionWidget-level-2 .oo-ui-iconElement-icon { + left: 4em; +} +.oo-ui-selectWidget-depressed .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected { + background-color: #d0d0d0; + text-shadow: 0 1px 1px #ffffff; +} +.oo-ui-outlineOptionWidget.oo-ui-flaggedElement-important { + font-weight: bold; +} +.oo-ui-outlineOptionWidget.oo-ui-flaggedElement-placeholder { + font-style: italic; +} +.oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-iconElement-icon { + opacity: 0.5; +} +.oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-labelElement-label { + color: #777777; +} +.oo-ui-outlineControlsWidget { + height: 3em; + background-color: #ffffff; } .oo-ui-outlineControlsWidget-items, .oo-ui-outlineControlsWidget-movers { @@ -1535,6 +1681,18 @@ .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget { float: right; } +.oo-ui-outlineControlsWidget-items, +.oo-ui-outlineControlsWidget-movers { + height: 2em; + margin: 0.5em 0.5em 0.5em 0; + padding: 0; +} +.oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon { + width: 1.5em; + height: 2em; + margin: 0.5em 0 0.5em 0.5em; + opacity: 0.2; +} .oo-ui-comboBoxWidget { display: inline-block; position: relative; @@ -1550,10 +1708,10 @@ height: 2.35em; } .oo-ui-comboBoxWidget .oo-ui-textInputWidget.oo-ui-indicatorElement { - padding-right: 2.2em; + padding-right: 1.9em; } .oo-ui-comboBoxWidget .oo-ui-textInputWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { - width: 2.2em; + width: 1.9em; background-position: center center; border: solid 1px #cccccc; border-left: none; @@ -1561,6 +1719,9 @@ -moz-box-sizing: border-box; box-sizing: border-box; } +.oo-ui-searchWidget { + border: solid 1px #cccccc; +} .oo-ui-searchWidget-query { position: absolute; top: 0; @@ -1579,15 +1740,16 @@ overflow-y: auto; } .oo-ui-searchWidget-query { - height: 2.4em; - top: 1px; + height: 4em; + padding: 0 1em; + border-bottom: solid 1px #cccccc; } -.oo-ui-searchWidget-query .oo-ui-textInputWidget input { - border-width: 1px 0; +.oo-ui-searchWidget-query .oo-ui-textInputWidget { + margin: 0.75em 0; } .oo-ui-searchWidget-results { - top: 2.2em; - bottom: 0.2em; + top: 4em; + padding: 1em; line-height: 0; } .oo-ui-window { @@ -1741,13 +1903,13 @@ .oo-ui-messageDialog-actions .oo-ui-actionWidget:active { background-color: rgba(0, 0, 0, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover { background-color: rgba(8, 126, 204, 0.05); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active { background-color: rgba(8, 126, 204, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label { font-weight: bold; } .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover { @@ -1868,16 +2030,16 @@ /* Adjust for border so text aligns with title */ margin: -1px; } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary:hover { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover { background-color: rgba(8, 126, 204, 0.05); } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary:active { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active { background-color: rgba(8, 126, 204, 0.1); } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-primary .oo-ui-labelElement-label { +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label { font-weight: bold; } .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover, @@ -2125,6 +2287,17 @@ .oo-ui-image-invert.oo-ui-icon-previous { background-image: /* @embed */ url(themes/mediawiki/images/icons/move-rtl-invert.svg); } +.oo-ui-icon-circle { + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle.svg); +} +.oo-ui-image-constructive .oo-ui-icon-circle, +.oo-ui-image-constructive.oo-ui-icon-circle { + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-constructive.svg); +} +.oo-ui-image-invert .oo-ui-icon-circle, +.oo-ui-image-invert.oo-ui-icon-circle { + background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-invert.svg); +} .oo-ui-icon-redo { background-image: /* @embed */ url(themes/mediawiki/images/icons/arched-arrow-ltr.svg); } diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index dc92f1f178..7f519a62d9 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.4.0 + * OOjs UI v0.5.0 * 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-12-06T00:33:09Z + * Date: 2014-12-12T20:13:09Z */ ( function ( OO ) { @@ -999,6 +999,38 @@ OO.ui.Element.static.getDimensions = function ( el ) { } }; +/** + * Get scrollable object parent + * + * documentElement can't be used to get or set the scrollTop + * property on Blink. Changing and testing its value lets us + * use 'body' or 'documentElement' based on what is working. + * + * https://code.google.com/p/chromium/issues/detail?id=303131 + * + * @static + * @param {HTMLElement} el Element to find scrollable parent for + * @return {HTMLElement} Scrollable parent + */ +OO.ui.Element.static.getRootScrollableElement = function ( el ) { + var scrollTop, body; + + if ( OO.ui.scrollableElement === undefined ) { + body = el.ownerDocument.body; + scrollTop = body.scrollTop; + body.scrollTop = 1; + + if ( body.scrollTop === 1 ) { + body.scrollTop = scrollTop; + OO.ui.scrollableElement = 'body'; + } else { + OO.ui.scrollableElement = 'documentElement'; + } + } + + return el.ownerDocument[ OO.ui.scrollableElement ]; +}; + /** * Get closest scrollable container. * @@ -1020,7 +1052,7 @@ OO.ui.Element.static.getClosestScrollableContainer = function ( el, dimension ) } while ( $parent.length ) { - if ( $parent[0] === el.ownerDocument.body ) { + if ( $parent[0] === this.getRootScrollableElement( el ) ) { return $parent[0]; } i = props.length; @@ -1059,8 +1091,8 @@ OO.ui.Element.static.scrollIntoView = function ( el, config ) { $win = $( this.getWindow( el ) ); // Compute the distances between the edges of el and the edges of the scroll viewport - if ( $sc.is( 'body' ) ) { - // If the scrollable container is the this is easy + if ( $sc.is( 'html, body' ) ) { + // If the scrollable container is the root, this is easy rel = { top: eld.rect.top, bottom: $win.innerHeight() - eld.rect.bottom, @@ -1195,6 +1227,8 @@ OO.ui.Element.prototype.isElementAttached = function () { * @return {HTMLDocument} Document object */ OO.ui.Element.prototype.getElementDocument = function () { + // Don't use this.$.context because subclasses can rebind this.$ + // Don't cache this in other ways either because subclasses could can change this.$element return OO.ui.Element.static.getDocument( this.$element ); }; @@ -1730,15 +1764,19 @@ OO.ui.Window.prototype.withoutSizeTransitions = function ( callback ) { OO.ui.Window.prototype.getContentHeight = function () { var bodyHeight, win = this, - styleObj = this.$frame[0].style; + bodyStyleObj = this.$body[0].style, + frameStyleObj = this.$frame[0].style; // Temporarily resize the frame so getBodyHeight() can use scrollHeight measurements. // Disable transitions first, otherwise we'll get values from when the window was animating. this.withoutSizeTransitions( function () { - var oldHeight = styleObj.height; - styleObj.height = '1px'; + var oldHeight = frameStyleObj.height, oldPosition = bodyStyleObj.position; + frameStyleObj.height = '1px'; + // Force body to resize to new width + bodyStyleObj.position = 'relative'; bodyHeight = win.getBodyHeight(); - styleObj.height = oldHeight; + frameStyleObj.height = oldHeight; + bodyStyleObj.position = oldPosition; } ); return Math.round( @@ -1897,7 +1935,7 @@ OO.ui.Window.prototype.setManager = function ( manager ) { } else { this.$content = this.$( '
' ); this.$document = $( this.getElementDocument() ); - this.$content.addClass( 'oo-ui-window-content' ); + this.$content.addClass( 'oo-ui-window-content' ).attr( 'tabIndex', 0 ); this.$frame.append( this.$content ); } this.toggle( false ); @@ -2339,7 +2377,8 @@ OO.ui.Dialog.static.escapable = true; OO.ui.Dialog.prototype.onDocumentKeyDown = function ( e ) { if ( e.which === OO.ui.Keys.ESCAPE ) { this.close(); - return false; + e.preventDefault(); + e.stopPropagation(); } }; @@ -3700,7 +3739,7 @@ OO.ui.ButtonElement.prototype.setButtonElement = function ( $button ) { this.$button .removeClass( 'oo-ui-buttonElement-button' ) .removeAttr( 'role accesskey tabindex' ) - .off( this.onMouseDownHandler ); + .off( 'mousedown', this.onMouseDownHandler ); } this.$button = $button @@ -4968,7 +5007,8 @@ OO.ui.PopupElement.prototype.getPopup = function () { * * @constructor * @param {Object} [config] Configuration options - * @cfg {string|string[]} [flags] Styling flags, e.g. 'primary', 'destructive' or 'constructive' + * @cfg {string|string[]} [flags] Flags describing importance and functionality, e.g. 'primary', + * 'safe', 'progressive', 'destructive' or 'constructive' * @cfg {jQuery} [$flagged] Flagged node, assigned to #$flagged, omit to use #$element */ OO.ui.FlaggedElement = function OoUiFlaggedElement( config ) { @@ -5292,9 +5332,9 @@ OO.ui.ClippableElement.prototype.toggleClipping = function ( clipping ) { this.clipping = clipping; if ( clipping ) { this.$clippableContainer = this.$( this.getClosestScrollableElementContainer() ); - // If the clippable container is the body, we have to listen to scroll events and check + // If the clippable container is the root, we have to listen to scroll events and check // jQuery.scrollTop on the window because of browser inconsistencies - this.$clippableScroller = this.$clippableContainer.is( 'body' ) ? + this.$clippableScroller = this.$clippableContainer.is( 'html, body' ) ? this.$( OO.ui.Element.static.getWindow( this.$clippableContainer ) ) : this.$clippableContainer; this.$clippableScroller.on( 'scroll', this.onClippableContainerScrollHandler ); @@ -5386,9 +5426,9 @@ OO.ui.ClippableElement.prototype.clip = function () { return this; } - var buffer = 10, + var buffer = 7, // Chosen by fair dice roll cOffset = this.$clippable.offset(), - $container = this.$clippableContainer.is( 'body' ) ? + $container = this.$clippableContainer.is( 'html, body' ) ? this.$clippableWindow : this.$clippableContainer, ccOffset = $container.offset() || { top: 0, left: 0 }, ccHeight = $container.innerHeight() - buffer, @@ -7200,6 +7240,8 @@ OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () { * @cfg {string} [help] Explanatory text shown as a '?' icon. */ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) { + var hasInputWidget = fieldWidget instanceof OO.ui.InputWidget; + // Configuration initialization config = $.extend( { align: 'left' }, config ); @@ -7214,6 +7256,7 @@ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) { // Properties this.$field = this.$( '
' ); + this.$body = this.$( '<' + ( hasInputWidget ? 'label' : 'div' ) + '>' ); this.align = null; if ( config.help ) { this.popupButtonWidget = new OO.ui.PopupButtonWidget( { @@ -7234,17 +7277,21 @@ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) { } // Events - if ( this.fieldWidget instanceof OO.ui.InputWidget ) { + if ( hasInputWidget ) { this.$label.on( 'click', this.onLabelClick.bind( this ) ); } this.fieldWidget.connect( this, { disable: 'onFieldDisable' } ); // Initialization - this.$element.addClass( 'oo-ui-fieldLayout' ); + this.$element + .addClass( 'oo-ui-fieldLayout' ) + .append( this.$help, this.$body ); + this.$body.addClass( 'oo-ui-fieldLayout-body' ); this.$field .addClass( 'oo-ui-fieldLayout-field' ) .toggleClass( 'oo-ui-fieldLayout-disable', this.fieldWidget.isDisabled() ) .append( this.fieldWidget.$element ); + this.setAlignment( config.align ); }; @@ -7255,17 +7302,6 @@ OO.mixinClass( OO.ui.FieldLayout, OO.ui.LabelElement ); /* Methods */ -/** - * @inheritdoc - */ -OO.ui.FieldLayout.prototype.getTagName = function () { - if ( this.fieldWidget instanceof OO.ui.InputWidget ) { - return 'label'; - } else { - return 'div'; - } -}; - /** * Handle field disable events. * @@ -7309,9 +7345,9 @@ OO.ui.FieldLayout.prototype.setAlignment = function ( value ) { } // Reorder elements if ( value === 'inline' ) { - this.$element.append( this.$field, this.$label, this.$help ); + this.$body.append( this.$field, this.$label ); } else { - this.$element.append( this.$help, this.$label, this.$field ); + this.$body.append( this.$label, this.$field ); } // Set classes. The following classes can be used here: // * oo-ui-fieldLayout-align-left @@ -7547,15 +7583,15 @@ OO.ui.GridLayout.prototype.update = function () { width = this.widths[x]; panel = this.panels[i]; dimensions = { - width: Math.round( width * 100 ) + '%', - height: Math.round( height * 100 ) + '%', - top: Math.round( top * 100 ) + '%' + width: ( width * 100 ) + '%', + height: ( height * 100 ) + '%', + top: ( top * 100 ) + '%' }; // If RTL, reverse: if ( OO.ui.Element.static.getDir( this.$.context ) === 'rtl' ) { - dimensions.right = Math.round( left * 100 ) + '%'; + dimensions.right = ( left * 100 ) + '%'; } else { - dimensions.left = Math.round( left * 100 ) + '%'; + dimensions.left = ( left * 100 ) + '%'; } // HACK: Work around IE bug by setting visibility: hidden; if width or height is zero if ( width === 0 || height === 0 ) { @@ -9933,6 +9969,7 @@ OO.ui.ButtonInputWidget.prototype.onKeyPress = function ( e ) { * * @constructor * @param {Object} [config] Configuration options + * @cfg {boolean} [selected=false] Whether the checkbox is initially selected */ OO.ui.CheckboxInputWidget = function OoUiCheckboxInputWidget( config ) { // Parent constructor @@ -9940,6 +9977,7 @@ OO.ui.CheckboxInputWidget = function OoUiCheckboxInputWidget( config ) { // Initialization this.$element.addClass( 'oo-ui-checkboxInputWidget' ); + this.setSelected( config.selected !== undefined ? config.selected : false ); }; /* Setup */ @@ -9959,39 +9997,41 @@ OO.ui.CheckboxInputWidget.prototype.getInputElement = function () { }; /** - * Get checked state of the checkbox - * - * @return {boolean} If the checkbox is checked + * @inheritdoc */ -OO.ui.CheckboxInputWidget.prototype.getValue = function () { - return this.value; +OO.ui.CheckboxInputWidget.prototype.onEdit = function () { + var widget = this; + if ( !this.isDisabled() ) { + // Allow the stack to clear so the value will be updated + setTimeout( function () { + widget.setSelected( widget.$input.prop( 'checked' ) ); + } ); + } }; /** - * Set checked state of the checkbox + * Set selection state of this checkbox. * - * @param {boolean} value New value + * @param {boolean} state Whether the checkbox is selected + * @chainable */ -OO.ui.CheckboxInputWidget.prototype.setValue = function ( value ) { - value = !!value; - if ( this.value !== value ) { - this.value = value; - this.$input.prop( 'checked', this.value ); - this.emit( 'change', this.value ); +OO.ui.CheckboxInputWidget.prototype.setSelected = function ( state ) { + state = !!state; + if ( this.selected !== state ) { + this.selected = state; + this.$input.prop( 'checked', this.selected ); + this.emit( 'change', this.selected ); } + return this; }; /** - * @inheritdoc + * Check if this checkbox is selected. + * + * @return {boolean} Checkbox is selected */ -OO.ui.CheckboxInputWidget.prototype.onEdit = function () { - var widget = this; - if ( !this.isDisabled() ) { - // Allow the stack to clear so the value will be updated - setTimeout( function () { - widget.setValue( widget.$input.prop( 'checked' ) ); - } ); - } +OO.ui.CheckboxInputWidget.prototype.isSelected = function () { + return this.selected; }; /** @@ -10000,14 +10040,12 @@ OO.ui.CheckboxInputWidget.prototype.onEdit = function () { * Radio buttons only make sense as a set, and you probably want to use the OO.ui.RadioSelectWidget * class instead of using this class directly. * - * This class doesn't make it possible to learn whether the radio button is selected ("pressed"). - * * @class * @extends OO.ui.InputWidget * * @constructor * @param {Object} [config] Configuration options - * @param {boolean} [config.selected=false] Whether the radio button is initially selected + * @cfg {boolean} [selected=false] Whether the radio button is initially selected */ OO.ui.RadioInputWidget = function OoUiRadioInputWidget( config ) { // Parent constructor diff --git a/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-constructive.png b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-constructive.png new file mode 100644 index 0000000000..e10c539817 Binary files /dev/null and b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-constructive.png differ diff --git a/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-constructive.svg b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-constructive.svg new file mode 100644 index 0000000000..88e014b341 --- /dev/null +++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-constructive.svg @@ -0,0 +1 @@ + diff --git a/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-invert.png b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-invert.png new file mode 100644 index 0000000000..82c327a404 Binary files /dev/null and b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-invert.png differ diff --git a/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-invert.svg b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-invert.svg new file mode 100644 index 0000000000..03c308d67d --- /dev/null +++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-invert.svg @@ -0,0 +1 @@ + diff --git a/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle.png b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle.png new file mode 100644 index 0000000000..3bdc8e28fd Binary files /dev/null and b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle.png differ diff --git a/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle.svg b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle.svg new file mode 100644 index 0000000000..a600581625 --- /dev/null +++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/circle.svg @@ -0,0 +1 @@ +