From 8cce680a4e0227a49e0305a6e9a48dc9ca0a63f5 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Wed, 16 Jul 2014 15:59:49 -0700 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (97dbb50137) New changes: 54460ce Prevent disabled tools from stealing focus 436ac66 MenuWidget: Add option to specify an extra widget for mouse events e67bb70 Localisation updates from https://translatewiki.net. a2ba412 Mellow out the shadows being applied to dialog content 085d3a5 Split toolbar demo in two and add action button demo, with labels dfd5100 Allow FieldLayouts to have help text 5f30488 Localisation updates from https://translatewiki.net. d544ffe Remove useless documentation, add more useful documentation e93e7cd Get OOUI working with mobile again eb6c68b demos: Add LTR/RTL switcher to icons demo 4b874d4 Use SVG check icon Change-Id: I03517e3aa026d9bc109dd252e489cdda1c478026 --- resources/lib/oojs-ui/i18n/ar.json | 7 +- resources/lib/oojs-ui/i18n/cs.json | 10 +- resources/lib/oojs-ui/i18n/et.json | 10 +- resources/lib/oojs-ui/i18n/it.json | 10 +- resources/lib/oojs-ui/i18n/lv.json | 8 +- resources/lib/oojs-ui/i18n/pl.json | 1 + resources/lib/oojs-ui/i18n/sr-ec.json | 10 +- resources/lib/oojs-ui/i18n/sv.json | 10 +- resources/lib/oojs-ui/i18n/vi.json | 10 +- resources/lib/oojs-ui/oojs-ui-agora.css | 336 +++++++++++++++++++++--- resources/lib/oojs-ui/oojs-ui-apex.css | 144 ++-------- resources/lib/oojs-ui/oojs-ui.js | 156 +++++++---- resources/lib/oojs-ui/oojs-ui.svg.css | 123 ++++++++- 13 files changed, 581 insertions(+), 254 deletions(-) diff --git a/resources/lib/oojs-ui/i18n/ar.json b/resources/lib/oojs-ui/i18n/ar.json index 34f8972ecf..eb13f5985b 100644 --- a/resources/lib/oojs-ui/i18n/ar.json +++ b/resources/lib/oojs-ui/i18n/ar.json @@ -8,11 +8,12 @@ "Mido", "OsamaK", "زكريا", - "مشعل الحربي" + "مشعل الحربي", + "ترجمان05" ] }, - "ooui-dialog-action-close": "أغلق", "ooui-outline-control-move-down": "انقل العنصر للأسفل", "ooui-outline-control-move-up": "انقل العنصر للأعلى", - "ooui-toolbar-more": "مزيد" + "ooui-toolbar-more": "مزيد", + "ooui-dialog-process-retry": "حاول مرة أخرى" } diff --git a/resources/lib/oojs-ui/i18n/cs.json b/resources/lib/oojs-ui/i18n/cs.json index ca6d5b45f3..a75cf0ba91 100644 --- a/resources/lib/oojs-ui/i18n/cs.json +++ b/resources/lib/oojs-ui/i18n/cs.json @@ -13,13 +13,13 @@ "ශ්වෙත" ] }, - "ooui-dialog-action-close": "Zavřít", "ooui-outline-control-move-down": "Přesunout položku dolů", "ooui-outline-control-move-up": "Přesunout položku nahoru", "ooui-outline-control-remove": "Odstranit položku", "ooui-toolbar-more": "Další", - "ooui-dialog-confirm-title": "Potvrzení", - "ooui-dialog-confirm-default-prompt": "Opravdu?", - "ooui-dialog-confirm-default-ok": "OK", - "ooui-dialog-confirm-default-cancel": "Storno" + "ooui-dialog-message-accept": "OK", + "ooui-dialog-message-reject": "Storno", + "ooui-dialog-process-error": "Něco se pokazilo", + "ooui-dialog-process-dismiss": "Zavřít", + "ooui-dialog-process-retry": "Zkusit znovu" } diff --git a/resources/lib/oojs-ui/i18n/et.json b/resources/lib/oojs-ui/i18n/et.json index 164685c9de..ac3af74e0c 100644 --- a/resources/lib/oojs-ui/i18n/et.json +++ b/resources/lib/oojs-ui/i18n/et.json @@ -5,13 +5,13 @@ "Pikne" ] }, - "ooui-dialog-action-close": "Sule", "ooui-outline-control-move-down": "Liiguta üksust allapoole", "ooui-outline-control-move-up": "Liiguta üksust ülespoole", "ooui-outline-control-remove": "Eemalda üksus", "ooui-toolbar-more": "Veel", - "ooui-dialog-confirm-title": "Kinnitus", - "ooui-dialog-confirm-default-prompt": "Kas oled kindel?", - "ooui-dialog-confirm-default-ok": "Sobib", - "ooui-dialog-confirm-default-cancel": "Loobu" + "ooui-dialog-message-accept": "Sobib", + "ooui-dialog-message-reject": "Loobu", + "ooui-dialog-process-error": "Midagi läks valesti", + "ooui-dialog-process-dismiss": "Hülga", + "ooui-dialog-process-retry": "Proovi uuesti" } diff --git a/resources/lib/oojs-ui/i18n/it.json b/resources/lib/oojs-ui/i18n/it.json index 162fa8c317..3d4e049090 100644 --- a/resources/lib/oojs-ui/i18n/it.json +++ b/resources/lib/oojs-ui/i18n/it.json @@ -15,13 +15,13 @@ "Ontsed" ] }, - "ooui-dialog-action-close": "Chiudi", "ooui-outline-control-move-down": "Sposta in basso", "ooui-outline-control-move-up": "Sposta in alto", "ooui-outline-control-remove": "Rimuovi elemento", "ooui-toolbar-more": "Altro", - "ooui-dialog-confirm-title": "Conferma", - "ooui-dialog-confirm-default-prompt": "Sei sicuro?", - "ooui-dialog-confirm-default-ok": "OK", - "ooui-dialog-confirm-default-cancel": "Annulla" + "ooui-dialog-message-accept": "OK", + "ooui-dialog-message-reject": "Annulla", + "ooui-dialog-process-error": "Qualcosa è andato storto", + "ooui-dialog-process-dismiss": "Nascondi", + "ooui-dialog-process-retry": "Riprova" } diff --git a/resources/lib/oojs-ui/i18n/lv.json b/resources/lib/oojs-ui/i18n/lv.json index 7ad74dccd6..32fc9fe5b7 100644 --- a/resources/lib/oojs-ui/i18n/lv.json +++ b/resources/lib/oojs-ui/i18n/lv.json @@ -8,12 +8,10 @@ "PeterisP" ] }, - "ooui-dialog-action-close": "Aizvērt", "ooui-outline-control-move-down": "Pārvietot vienumu uz leju", "ooui-outline-control-move-up": "Pārvietot vienumu uz augšu", "ooui-toolbar-more": "Vairāk", - "ooui-dialog-confirm-title": "Apstiprināt", - "ooui-dialog-confirm-default-prompt": "Vai esat pārliecināts?", - "ooui-dialog-confirm-default-ok": "Labi", - "ooui-dialog-confirm-default-cancel": "Atcelt" + "ooui-dialog-message-accept": "Labi", + "ooui-dialog-message-reject": "Atcelt", + "ooui-dialog-process-retry": "Mēģināt vēlreiz" } diff --git a/resources/lib/oojs-ui/i18n/pl.json b/resources/lib/oojs-ui/i18n/pl.json index 2431096939..7978673bb7 100644 --- a/resources/lib/oojs-ui/i18n/pl.json +++ b/resources/lib/oojs-ui/i18n/pl.json @@ -26,5 +26,6 @@ "ooui-dialog-message-accept": "OK", "ooui-dialog-message-reject": "Anuluj", "ooui-dialog-process-error": "Coś poszło nie tak", + "ooui-dialog-process-dismiss": "Ukryj", "ooui-dialog-process-retry": "Spróbuj ponownie" } diff --git a/resources/lib/oojs-ui/i18n/sr-ec.json b/resources/lib/oojs-ui/i18n/sr-ec.json index 308ed848ae..d6533569bd 100644 --- a/resources/lib/oojs-ui/i18n/sr-ec.json +++ b/resources/lib/oojs-ui/i18n/sr-ec.json @@ -6,13 +6,13 @@ "Милан Јелисавчић" ] }, - "ooui-dialog-action-close": "Затвори", "ooui-outline-control-move-down": "Премести ставку на доле", "ooui-outline-control-move-up": "Премести ставку на горе", "ooui-outline-control-remove": "Уклони ставку", "ooui-toolbar-more": "Више", - "ooui-dialog-confirm-title": "Потврди", - "ooui-dialog-confirm-default-prompt": "Јесте ли сигурни?", - "ooui-dialog-confirm-default-ok": "У реду", - "ooui-dialog-confirm-default-cancel": "Откажи" + "ooui-dialog-message-accept": "У реду", + "ooui-dialog-message-reject": "Откажи", + "ooui-dialog-process-error": "Нешто је пошло наопако", + "ooui-dialog-process-dismiss": "Одбаци", + "ooui-dialog-process-retry": "Покушај поново" } diff --git a/resources/lib/oojs-ui/i18n/sv.json b/resources/lib/oojs-ui/i18n/sv.json index fbd03de3c6..40305d0ab1 100644 --- a/resources/lib/oojs-ui/i18n/sv.json +++ b/resources/lib/oojs-ui/i18n/sv.json @@ -14,13 +14,13 @@ "Lokal Profil" ] }, - "ooui-dialog-action-close": "Stäng", "ooui-outline-control-move-down": "Flytta ned objekt", "ooui-outline-control-move-up": "Flytta upp objekt", "ooui-outline-control-remove": "Ta bort objekt", "ooui-toolbar-more": "Mer", - "ooui-dialog-confirm-title": "Bekräfta", - "ooui-dialog-confirm-default-prompt": "Är du säker?", - "ooui-dialog-confirm-default-ok": "OK", - "ooui-dialog-confirm-default-cancel": "Avbryt" + "ooui-dialog-message-accept": "OK", + "ooui-dialog-message-reject": "Avbryt", + "ooui-dialog-process-error": "Något gick fel", + "ooui-dialog-process-dismiss": "Stäng", + "ooui-dialog-process-retry": "Försök igen" } diff --git a/resources/lib/oojs-ui/i18n/vi.json b/resources/lib/oojs-ui/i18n/vi.json index 9cc4543532..205cbe8907 100644 --- a/resources/lib/oojs-ui/i18n/vi.json +++ b/resources/lib/oojs-ui/i18n/vi.json @@ -6,13 +6,13 @@ "Minh Nguyen" ] }, - "ooui-dialog-action-close": "Đóng", "ooui-outline-control-move-down": "Chuyển mục xuống", "ooui-outline-control-move-up": "Chuyển mục lên", "ooui-outline-control-remove": "Xóa khoản", "ooui-toolbar-more": "Thêm", - "ooui-dialog-confirm-title": "Xác nhận", - "ooui-dialog-confirm-default-prompt": "Bạn có chắc chắn?", - "ooui-dialog-confirm-default-ok": "OK", - "ooui-dialog-confirm-default-cancel": "Hủy bỏ" + "ooui-dialog-message-accept": "OK", + "ooui-dialog-message-reject": "Hủy bỏ", + "ooui-dialog-process-error": "Đã bị trục trặc", + "ooui-dialog-process-dismiss": "Bỏ qua", + "ooui-dialog-process-retry": "Thử lại" } diff --git a/resources/lib/oojs-ui/oojs-ui-agora.css b/resources/lib/oojs-ui/oojs-ui-agora.css index 5b35674e70..0dfa042a89 100644 --- a/resources/lib/oojs-ui/oojs-ui-agora.css +++ b/resources/lib/oojs-ui/oojs-ui-agora.css @@ -1,56 +1,173 @@ /*! - * OOjs UI v0.1.0-pre (d2451ac748) + * OOjs UI v0.1.0-pre (97dbb50137) * 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-07-14T16:49:51Z + * Date: 2014-07-16T22:59:48Z */ -.oo-ui-dialog-content .oo-ui-window-closeButton { +.oo-ui-dialog-content > .oo-ui-window-head, +.oo-ui-dialog-content > .oo-ui-window-body, +.oo-ui-dialog-content > .oo-ui-window-foot { position: absolute; - top: 0; + right: 0; left: 0; + overflow: hidden; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.oo-ui-dialog-content .oo-ui-window-icon { - margin-left: 3.35em; +.oo-ui-dialog-content > .oo-ui-window-head { + top: 0; + z-index: 1; } -.oo-ui-dialog-content .oo-ui-window-body { - position: absolute; - top: 3.35em; - right: 0; +.oo-ui-dialog-content > .oo-ui-window-body { + top: 0; bottom: 0; - left: 0; - overflow-y: auto; + z-index: 2; } -.oo-ui-dialog-content .oo-ui-window-foot { - position: absolute; - top: 0; - right: 0; - height: 3.35em; +.oo-ui-dialog-content > .oo-ui-window-foot { + bottom: 0; + z-index: 1; } -.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-button { - height: 100%; +.oo-ui-dialog-content > .oo-ui-window-overlay { + z-index: 3; } -.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-button .oo-ui-labeledElement-label { - display: inline-block; - width: 0; - text-indent: -9999px; +.oo-ui-windowManager-modal > .oo-ui-dialog { + background-color: rgba(255, 255, 255, 0.5); + opacity: 0; + -webkit-transition: opacity 250ms ease-in-out; + -moz-transition: opacity 250ms ease-in-out; + -ms-transition: opacity 250ms ease-in-out; + -o-transition: opacity 250ms ease-in-out; + transition: opacity 250ms ease-in-out; } -.oo-ui-dialog-medium .oo-ui-window-frame { - top: 0; - bottom: 0; - background-color: white; +.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { + top: 1em; + bottom: 1em; + background-color: #fff; + -webkit-transform: translate3d(0, -200%, 0); + -moz-transform: translate3d(0, -200%, 0); + -ms-transform: translate3d(0, -200%, 0); + -o-transform: translate3d(0, -200%, 0); + transform: translate3d(0, -200%, 0); + -webkit-transition: transform 250ms ease-in-out; + -moz-transition: transform 250ms ease-in-out; + -ms-transition: transform 250ms ease-in-out; + -o-transition: transform 250ms ease-in-out; + transition: transform 250ms ease-in-out; +} + +.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready { + opacity: 1; +} + +.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame { + border: solid 1px #ccc; + border-radius: 0.5em; + box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3); +} + +.oo-ui-messageDialog-title, +.oo-ui-messageDialog-message { + display: block; + padding-top: 0.5em; + text-align: center; +} + +.oo-ui-messageDialog-title { + font-size: 1.5em; + line-height: 1em; + color: #000; +} + +.oo-ui-messageDialog-message { + font-size: 0.9em; + line-height: 1.25em; + color: #666; +} + +.oo-ui-messageDialog-message-verbose { + font-size: 1.1em; + line-height: 1.5em; + text-align: left; +} + +.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { + border-right: solid 1px #e5e5e5; +} + +.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child { + border-right-width: 0; +} + +.oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget { + border-bottom: solid 1px #e5e5e5; +} + +.oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget:last-child { + border-bottom-width: 0; +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labeledElement-label { + padding: 0 2em; + line-height: 3.4em; + text-align: center; +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget:active { + background-color: rgba(0, 0, 0, 0.1); } -.oo-ui-window-head { +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover { + background-color: rgba(8, 126, 204, 0.05); +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active { + background-color: rgba(8, 126, 204, 0.1); +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label { + font-weight: bold; +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover { + background-color: rgba(118, 171, 54, 0.05); +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active { + background-color: rgba(118, 171, 54, 0.1); +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover { + background-color: rgba(212, 83, 83, 0.05); +} + +.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active { + background-color: rgba(212, 83, 83, 0.1); +} + +.oo-ui-processDialog-content .oo-ui-window-head { height: 3.35em; border-bottom: 1px solid #dddddd; -webkit-box-sizing: border-box; @@ -58,19 +175,162 @@ box-sizing: border-box; } -.oo-ui-window-body { - padding: 2em 3.35em; +.oo-ui-processDialog-content .oo-ui-window-body { + top: 3.35em; + padding: 2em 0; } -.oo-ui-window-icon { - width: 3.35em; +.oo-ui-processDialog-navigation { + position: relative; height: 3.35em; - background-size: 2em auto; - border-left: 1px solid #dddddd; + padding: 0 1em; +} + +.oo-ui-processDialog-location { + height: 3.35em; + padding: 0.25em 0; + text-align: center; + cursor: default; +} + +.oo-ui-processDialog-title { + font-weight: bold; + line-height: 1.85em; +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonedElement-button, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonedElement-button, +.oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonedElement-button { + min-width: 1.85em; + min-height: 1.85em; + padding-top: 0.75em; + padding-bottom: 0.75em; +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-labeledElement-label, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-labeledElement-label, +.oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-labeledElement-label { + padding: 0 1em; + line-height: 1.85em; +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-iconedElement-icon, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-iconedElement-icon, +.oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-iconedElement-icon { + position: absolute; + margin-top: -0.125em; +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, +.oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { + padding: 0; + vertical-align: middle; +} + +.oo-ui-processDialog-actions-safe.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, +.oo-ui-processDialog-actions-primary.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { + margin: 0.75em; +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget:hover, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget:active, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget:active { + background-color: rgba(0, 0, 0, 0.1); +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover { + background-color: rgba(8, 126, 204, 0.05); +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active { + background-color: rgba(8, 126, 204, 0.1); +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label { + font-weight: bold; } -.oo-ui-window-title { - line-height: 3.35em; +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover { + background-color: rgba(118, 171, 54, 0.05); +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active { + background-color: rgba(118, 171, 54, 0.1); +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover { + background-color: rgba(212, 83, 83, 0.05); +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active { + background-color: rgba(212, 83, 83, 0.1); +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { + left: 0.5em; +} + +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-labeledElement-label { + padding-left: 2.25em; +} + +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { + right: 0.5em; +} + +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-labeledElement-label { + padding-right: 2.25em; +} + +.oo-ui-processDialog-actions-other:not(:empty) { + padding: 0.75em; +} + +.oo-ui-processDialog-actions-other:not(:empty) .oo-ui-actionWidget { + margin: 0 0.75em 0 0; + border: solid 1px #ccc; + border-radius: 0.25em; +} + +.oo-ui-processDialog > .oo-ui-window-frame { + min-height: 5em; +} + +.oo-ui-processDialog-errors { + padding: 3em 3em 1.5em 3em; + text-align: center; + background-color: rgba(255, 255, 255, 0.9); +} + +.oo-ui-processDialog-errors .oo-ui-buttonWidget { + margin: 2em 1em 2em 1em; +} + +.oo-ui-processDialog-errors-title { + margin-bottom: 2em; + font-size: 1.5em; + color: #000; +} + +.oo-ui-processDialog-error { + padding: 1em; + margin: 1em; + text-align: left; + background-color: #fff7f7; + border: solid 1px #ff9e9e; + border-radius: 0.25em; } .oo-ui-buttonedElement.oo-ui-indicatedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator, @@ -122,6 +382,10 @@ padding: 0; } +.oo-ui-lookupWidget-menu { + background-color: #fff; +} + .oo-ui-menuItemWidget.oo-ui-optionWidget-selected { color: #ffffff; background: #347bff; diff --git a/resources/lib/oojs-ui/oojs-ui-apex.css b/resources/lib/oojs-ui/oojs-ui-apex.css index aeba58250e..7bc9be84c4 100644 --- a/resources/lib/oojs-ui/oojs-ui-apex.css +++ b/resources/lib/oojs-ui/oojs-ui-apex.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (d2451ac748) + * OOjs UI v0.1.0-pre (97dbb50137) * 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-07-14T16:49:51Z + * Date: 2014-07-16T22:59:48Z */ .oo-ui-dialog-content > .oo-ui-window-head, .oo-ui-dialog-content > .oo-ui-window-body, @@ -93,12 +93,6 @@ color: #000; } -.oo-ui-window > .oo-ui-window-frame { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - .oo-ui-window-content { background: transparent; } @@ -110,7 +104,6 @@ } .oo-ui-windowManager-modal > .oo-ui-dialog { - background-color: #fff; background-color: rgba(255, 255, 255, 0.5); opacity: 0; -webkit-transition: opacity 250ms ease-in-out; @@ -124,14 +117,11 @@ top: 1em; bottom: 1em; background-color: #fff; - border: solid 1px #ccc; - border-radius: 0.5em; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); - box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3); -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; @@ -151,34 +141,33 @@ transform: scale(1); } -.oo-ui-windowManager-fullscreen > .oo-ui-dialog > .oo-ui-window-frame { - top: 0; - bottom: 0; - width: 100%; - height: 100%; - border: none; - border-radius: 0; - box-shadow: none; +.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame { + border: solid 1px #ccc; + border-radius: 0.5em; + box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3); } -.oo-ui-messageDialog-text.oo-ui-panelLayout { - bottom: auto; +.oo-ui-messageDialog-content .oo-ui-window-body { + box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.33); } -.oo-ui-messageDialog-title { +.oo-ui-messageDialog-title, +.oo-ui-messageDialog-message { display: block; - padding-top: 0; + padding-top: 0.5em; + text-align: center; +} + +.oo-ui-messageDialog-title { font-size: 1.5em; + line-height: 1em; color: #000; - text-align: center; } .oo-ui-messageDialog-message { - display: block; font-size: 0.9em; line-height: 1.25em; color: #666; - text-align: center; } .oo-ui-messageDialog-message-verbose { @@ -187,24 +176,7 @@ text-align: left; } -.oo-ui-messageDialog-content > .oo-ui-window-body { - bottom: 3.4em; - box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); -} - -.oo-ui-messageDialog-content > .oo-ui-window-foot { - min-height: 3.4em; -} - -.oo-ui-messageDialog-actions-horizontal { - display: table; - width: 100%; - table-layout: fixed; -} - .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { - display: table-cell; - width: 1%; border-right: solid 1px #e5e5e5; } @@ -212,14 +184,7 @@ border-right-width: 0; } -.oo-ui-messageDialog-actions-vertical { - display: block; -} - .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget { - display: block; - overflow: hidden; - text-overflow: ellipsis; border-bottom: solid 1px #e5e5e5; } @@ -227,10 +192,9 @@ border-bottom-width: 0; } -.oo-ui-messageDialog-actions .oo-ui-actionWidget { - position: relative; - height: 3.4em; - padding: 0; +.oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labeledElement-label { + padding: 0 2em; + line-height: 3.4em; text-align: center; } @@ -270,65 +234,33 @@ background-color: rgba(212, 83, 83, 0.1); } -.oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonedElement-button { - display: block; -} - -.oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labeledElement-label { - position: relative; - top: auto; - bottom: auto; - display: inline; - padding: 0 2em; - line-height: 3.4em; - white-space: nowrap; -} - -.oo-ui-processDialog-content > .oo-ui-window-head { +.oo-ui-processDialog-content .oo-ui-window-head { height: 3.4em; } -.oo-ui-processDialog-content > .oo-ui-window-body { +.oo-ui-processDialog-content .oo-ui-window-body { top: 3.4em; - box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); + box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.33); } .oo-ui-processDialog-navigation { position: relative; height: 3.4em; padding: 0 1em; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-touch-callout: none; } .oo-ui-processDialog-location { height: 1.9em; padding: 0.75em 0; - overflow: hidden; text-align: center; - text-overflow: ellipsis; - white-space: nowrap; cursor: default; } -.oo-ui-processDialog-location .oo-ui-labelWidget { - display: inline; -} - .oo-ui-processDialog-title { font-weight: bold; line-height: 1.9em; } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget, -.oo-ui-processDialog-actions-other .oo-ui-actionWidget { - white-space: nowrap; -} - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonedElement-button { @@ -359,13 +291,6 @@ vertical-align: middle; } -.oo-ui-processDialog-actions-safe, -.oo-ui-processDialog-actions-primary { - position: absolute; - top: 0; - bottom: 0; -} - .oo-ui-processDialog-actions-safe.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { margin: 0.75em; @@ -416,10 +341,6 @@ background-color: rgba(212, 83, 83, 0.1); } -.oo-ui-processDialog-actions-safe { - left: 0; -} - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { left: 0.5em; } @@ -428,10 +349,6 @@ padding-left: 2.25em; } -.oo-ui-processDialog-actions-primary { - right: 0; -} - .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { right: 0.5em; } @@ -453,16 +370,7 @@ } .oo-ui-processDialog-errors { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 2; - display: none; padding: 3em 3em 1.5em 3em; - overflow-x: hidden; - overflow-y: auto; text-align: center; background-color: rgba(255, 255, 255, 0.9); } @@ -697,14 +605,6 @@ font-size: 1.5em; } -.oo-ui-panelLayout { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - .oo-ui-panelLayout-padded { padding: 1.25em; } diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index 68d4be641c..389fb9f7be 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (d2451ac748) + * OOjs UI v0.1.0-pre (97dbb50137) * 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-07-14T16:49:51Z + * Date: 2014-07-16T22:59:48Z */ ( function ( OO ) { @@ -2345,7 +2345,7 @@ OO.ui.WindowManager = function OoUiWindowManager( config ) { // Properties this.factory = config.factory; - this.modal = config.modal === undefined ? true : !!config.modal; + this.modal = config.modal === undefined || !!config.modal; this.windows = {}; this.opening = null; this.opened = null; @@ -2909,14 +2909,13 @@ OO.ui.WindowManager.prototype.updateWindowSize = function ( win ) { } this.$element.toggleClass( 'oo-ui-windowManager-fullscreen', size === 'full' ); + this.$element.toggleClass( 'oo-ui-windowManager-floating', size !== 'full' ); win.setDimensions( sizes[size] ); return this; }; /** - * Process error. - * * @abstract * @class * @@ -2931,7 +2930,7 @@ OO.ui.Error = function OoUiElement( message, config ) { // Properties this.message = message instanceof jQuery ? message : String( message ); - this.recoverable = config.recoverable === undefined ? true : !!config.recoverable; + this.recoverable = config.recoverable === undefined || !!config.recoverable; }; /* Setup */ @@ -3283,6 +3282,9 @@ OO.ui.ToolGroupFactory.static.getDefaultClasses = function () { /** * Element with a button. * + * Buttons are used for controls which can be clicked. They can be configured to use tab indexing + * and access keys for accessibility purposes. + * * @abstract * @class * @@ -3902,6 +3904,11 @@ OO.ui.GroupElement.prototype.clearItems = function () { /** * Element containing an icon. * + * Icons are graphics, about the size of normal text. They can be used to aid the user in locating + * a control or convey information in a more space efficient way. Icons should rarely be used + * without labels; such as in a toolbar where space is at a premium or within a context where the + * meaning is very clear to the user. + * * @abstract * @class * @@ -3990,6 +3997,11 @@ OO.ui.IconedElement.prototype.getIcon = function () { /** * Element containing an indicator. * + * Indicators are graphics, smaller than normal text. They can be used to describe unique status or + * behavior. Indicators should only be used in exceptional cases; such as a button that opens a menu + * instead of performing an action directly, or an item in a list which has errors that need to be + * resolved. + * * @abstract * @class * @@ -4201,7 +4213,7 @@ OO.ui.LabeledElement.prototype.fitLabel = function () { }; /** - * Popuppable element. + * Element containing an OO.ui.PopupWidget object. * * @abstract * @class @@ -4237,6 +4249,9 @@ OO.ui.PopuppableElement.prototype.getPopup = function () { /** * Element with a title. * + * Titles are rendered by the browser and are made visible when hovering the element. Titles are + * not visible on touch devices. + * * @abstract * @class * @@ -4907,9 +4922,9 @@ OO.ui.ToolGroup.prototype.onMouseDown = function ( e ) { this.getElementDocument().addEventListener( 'mouseup', this.onCapturedMouseUpHandler, true ); - return false; } } + return false; }; /** @@ -5236,7 +5251,7 @@ OO.ui.MessageDialog.prototype.initialize = function () { '$': this.$, 'scrollable': true, 'classes': [ 'oo-ui-messageDialog-container' ] } ); this.text = new OO.ui.PanelLayout( { - '$': this.$, 'padded': true, 'classes': [ 'oo-ui-messageDialog-text' ] + '$': this.$, 'padded': true, 'expanded': false, 'classes': [ 'oo-ui-messageDialog-text' ] } ); this.message = new OO.ui.LabelWidget( { '$': this.$, 'classes': [ 'oo-ui-messageDialog-message' ] @@ -5545,7 +5560,7 @@ OO.ui.BookletLayout = function OoUiBookletLayout( config ) { this.pages = {}; this.ignoreFocus = false; this.stackLayout = new OO.ui.StackLayout( { '$': this.$, 'continuous': !!config.continuous } ); - this.autoFocus = config.autoFocus === undefined ? true : !!config.autoFocus; + this.autoFocus = config.autoFocus === undefined || !!config.autoFocus; this.outlineVisible = false; this.outlined = !!config.outlined; if ( this.outlined ) { @@ -5961,8 +5976,10 @@ OO.ui.BookletLayout.prototype.updateOutlineWidget = function () { * @param {OO.ui.Widget} field Field widget * @param {Object} [config] Configuration options * @cfg {string} [align='left'] Alignment mode, either 'left', 'right', 'top' or 'inline' + * @cfg {string} [help] Explanatory text shown as a '?' icon. */ OO.ui.FieldLayout = function OoUiFieldLayout( field, config ) { + var popupButtonWidget; // Config initialization config = $.extend( { 'align': 'left' }, config ); @@ -5970,7 +5987,22 @@ OO.ui.FieldLayout = function OoUiFieldLayout( field, config ) { OO.ui.FieldLayout.super.call( this, config ); // Mixin constructors + this.$help = this.$( '
' ); OO.ui.LabeledElement.call( this, this.$( '