From 056cfae3131ab3beee4310b809aa3422aa1cf052 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Wed, 30 Jul 2014 12:38:46 -0700 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (3d8475c0b3) New changes: feba6af Remove unused CSS classes 58af913 Remove direction style attribute 7463080 Restyle agora theme for mobile after window refactor 5708bdf Make scrolling in PanelLayout smoother on iOS 96b89c2 demos: Add right-aligned menu in toolbar demo Change-Id: If38bbe6a7bc6c1452d2c56397344a3b75f5e46d5 --- resources/lib/oojs-ui/oojs-ui-agora.css | 100 +++++++++--------------- resources/lib/oojs-ui/oojs-ui-apex.css | 4 +- resources/lib/oojs-ui/oojs-ui.js | 14 +++- resources/lib/oojs-ui/oojs-ui.svg.css | 16 +--- 4 files changed, 54 insertions(+), 80 deletions(-) diff --git a/resources/lib/oojs-ui/oojs-ui-agora.css b/resources/lib/oojs-ui/oojs-ui-agora.css index 060961800f..cb0a653d35 100644 --- a/resources/lib/oojs-ui/oojs-ui-agora.css +++ b/resources/lib/oojs-ui/oojs-ui-agora.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (e9cf571db2) + * OOjs UI v0.1.0-pre (3d8475c0b3) * 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-28T21:48:00Z + * Date: 2014-07-30T19:38:45Z */ .oo-ui-dialog-content > .oo-ui-window-head, .oo-ui-dialog-content > .oo-ui-window-body, @@ -203,15 +203,18 @@ .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; + padding: 0.35em 0.75em; + border: 1px solid #dddddd; + border-radius: 4px; } .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; + font-weight: bold; line-height: 1.85em; + color: #777777; } .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-iconedElement-icon, @@ -221,81 +224,39 @@ margin-top: -0.125em; } -.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonedElement-framed, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed, -.oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonedElement-framed { - margin: 0.75em 0 0.75em 0.75em; - border: solid 1px #ccc; - border-radius: 0.25em; -} - .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-buttonedElement-framed, -.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed { - margin: 0.75em; +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-buttonedElement-button, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-buttonedElement-button, +.oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-buttonedElement-button { + border: 1px solid transparent; } -.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 { - /* Adjust for border so text aligns with title */ - - margin: -1px; +.oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-labeledElement-label, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-labeledElement-label, +.oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-labeledElement-label { + color: #d11d13; } -.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-buttonedElement-button, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonedElement-button { + padding: 0.75em 0.35em; + border: none; + border-radius: 0; } -.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-buttonedElement-button, +.oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button { + background-color: #347bff; } .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-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); + color: #ffffff; } .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { @@ -314,6 +275,11 @@ padding-right: 2.25em; } +.oo-ui-processDialog-actions-other { + position: absolute; + bottom: 1em; +} + .oo-ui-processDialog > .oo-ui-window-frame { min-height: 5em; } @@ -354,6 +320,10 @@ padding: 0 0 1em; } +.oo-ui-panelLayout { + padding: 1em 3.35em; +} + .oo-ui-optionWidget { padding: 0.8em 1em 0.8em 3.35em; font-weight: bold; @@ -401,6 +371,10 @@ background: #347bff; } +.oo-ui-menuItemWidget .oo-ui-iconedElement-icon { + background-size: 24px auto; +} + .oo-ui-menuSectionItemWidget { font-weight: normal; color: #777777; diff --git a/resources/lib/oojs-ui/oojs-ui-apex.css b/resources/lib/oojs-ui/oojs-ui-apex.css index 6325afa1d7..c65845e13c 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 (e9cf571db2) + * OOjs UI v0.1.0-pre (3d8475c0b3) * 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-28T21:48:00Z + * Date: 2014-07-30T19:38:45Z */ .oo-ui-dialog-content > .oo-ui-window-head, .oo-ui-dialog-content > .oo-ui-window-body, diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index 1c2dfc963f..baf8c91552 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 (e9cf571db2) + * OOjs UI v0.1.0-pre (3d8475c0b3) * 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-28T21:48:00Z + * Date: 2014-07-30T19:38:45Z */ ( function ( OO ) { @@ -1292,10 +1292,13 @@ OO.ui.Frame.prototype.load = function () { // Initialize contents doc.open(); + // The following classes can be used here: + // oo-ui-ltr + // oo-ui-rtl doc.write( '' + '' + - '' + + '' + '' + '' ); @@ -6095,6 +6098,11 @@ OO.ui.FieldLayout.prototype.setAlignment = function ( value ) { this.$element.removeClass( 'oo-ui-fieldLayout-align-' + this.align ); } this.align = value; + // The following classes can be used here: + // oo-ui-fieldLayout-align-left + // oo-ui-fieldLayout-align-right + // oo-ui-fieldLayout-align-top + // oo-ui-fieldLayout-align-inline this.$element.addClass( 'oo-ui-fieldLayout-align-' + this.align ); } diff --git a/resources/lib/oojs-ui/oojs-ui.svg.css b/resources/lib/oojs-ui/oojs-ui.svg.css index bea01e2641..529c32ab83 100644 --- a/resources/lib/oojs-ui/oojs-ui.svg.css +++ b/resources/lib/oojs-ui/oojs-ui.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (e9cf571db2) + * OOjs UI v0.1.0-pre (3d8475c0b3) * 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-28T21:48:00Z + * Date: 2014-07-30T19:38:45Z */ /* Textures */ @@ -37,10 +37,9 @@ margin: 0; } -.oo-ui-frame-body { +.oo-ui-frame-content { padding: 0; margin: 0; - background: none; } .oo-ui-frame-content:focus { @@ -55,10 +54,6 @@ line-height: 1em; } -.oo-ui-toolbar-bottom .oo-ui-toolbar-bar { - position: absolute; -} - .oo-ui-toolbar-actions { float: right; } @@ -430,10 +425,6 @@ margin-top: 2em; } -.oo-ui-fieldsetLayout-labeled { - margin-top: -0.75em; -} - .oo-ui-fieldsetLayout > .oo-ui-labeledElement-label { padding: 0.25em 0; margin-bottom: 0.5em; @@ -474,6 +465,7 @@ .oo-ui-panelLayout-scrollable { overflow-y: auto; + -webkit-overflow-scrolling: touch; } .oo-ui-panelLayout-expanded { -- 2.20.1