From 29fb6a9329b3760eb965c1037b9233cae17ea627 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Wed, 26 Mar 2014 17:40:17 -0700 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (e697490c9b) New changes: 2889665 Fixes bug where InlineMenuWidget would "steal" DOM labels on selection 997e1a6 Increase width of toggle switch widget 2240802 Use less variable for travel distance 62efbdf Add disabled styling to InlineMenuWidget 93182d2 Promote zIndex of InlineMenuWidget options list fc7143b Fix padding on icon in TextInputWidget c9b6234 Add display: block; property to labelElement to make the text-overflow: ellipsis work correctly e697490 Don't use transitions for opacity on hover for now Change-Id: I457090c19e5e090185021f0b979277a42fe567de --- resources/oojs-ui/oojs-ui-apex.css | 33 +++++++++++++++++++++++++----- resources/oojs-ui/oojs-ui.js | 13 +++++++++--- resources/oojs-ui/oojs-ui.svg.css | 20 +++++++++--------- 3 files changed, 48 insertions(+), 18 deletions(-) diff --git a/resources/oojs-ui/oojs-ui-apex.css b/resources/oojs-ui/oojs-ui-apex.css index f86f67c5b7..8e2d79d423 100644 --- a/resources/oojs-ui/oojs-ui-apex.css +++ b/resources/oojs-ui/oojs-ui-apex.css @@ -128,11 +128,10 @@ } .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { - -webkit-transition: opacity 200ms; - -moz-transition: opacity 200ms; - -ms-transition: opacity 200ms; - -o-transition: opacity 200ms; - transition: opacity 200ms; + /* Don't animate opacities for now, causes wiggling in Chrome (bug 63020) */ + + /*.oo-ui-transition(opacity 200ms);*/ + } .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:hover > .oo-ui-iconedElement-icon, @@ -459,6 +458,10 @@ background-color: #a7dcff; } +.oo-ui-optionWidget.oo-ui-widget-disabled { + color: #ccc; +} + .oo-ui-menuWidget { margin-top: -1px; background: #fff; @@ -541,6 +544,17 @@ opacity: 0.8; } +.oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-inlineMenuWidget-handle { + color: #ccc; + text-shadow: 0 1px 1px #fff; + background-color: #f3f3f3; + border-color: #ddd; +} + +.oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator { + opacity: 0.2; +} + .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted { background-color: #e1f3ff; } @@ -608,6 +622,15 @@ transition: border-color 200ms, box-shadow 200ms; } +.oo-ui-textInputWidget-decorated input, +.oo-ui-textInputWidget-decorated textarea { + padding-left: 2em; +} + +.oo-ui-textInputWidget-icon { + width: 2em; +} + .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus { border-color: #a7dcff; diff --git a/resources/oojs-ui/oojs-ui.js b/resources/oojs-ui/oojs-ui.js index 524524fb34..48ace0077d 100644 --- a/resources/oojs-ui/oojs-ui.js +++ b/resources/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (1c7875205a) + * OOjs UI v0.1.0-pre (e697490c9b) * 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: Wed Mar 26 2014 09:53:51 GMT-0700 (PDT) + * Date: Wed Mar 26 2014 17:40:12 GMT-0700 (PDT) */ ( function () { @@ -6643,7 +6643,14 @@ OO.ui.InlineMenuWidget.prototype.getMenu = function () { * @param {OO.ui.MenuItemWidget} item Selected menu item */ OO.ui.InlineMenuWidget.prototype.onMenuSelect = function ( item ) { - this.setLabel( item.getLabel() ); + var selectedLabel = item.getLabel(); + + // If the label is a DOM element, clone it, because setLabel will append() it + if ( selectedLabel instanceof jQuery ) { + selectedLabel = selectedLabel.clone(); + } + + this.setLabel( selectedLabel ); }; /** diff --git a/resources/oojs-ui/oojs-ui.svg.css b/resources/oojs-ui/oojs-ui.svg.css index 23fb48b378..9f8c28a664 100644 --- a/resources/oojs-ui/oojs-ui.svg.css +++ b/resources/oojs-ui/oojs-ui.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (1c7875205a) + * OOjs UI v0.1.0-pre (e697490c9b) * 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: Wed Mar 26 2014 09:53:51 GMT-0700 (PDT) + * Date: Wed Mar 26 2014 17:40:12 GMT-0700 (PDT) */ /* Textures */ @@ -712,6 +712,7 @@ } .oo-ui-optionWidget .oo-ui-labeledElement-label { + display: block; overflow: hidden; line-height: 1.5em; text-overflow: ellipsis; @@ -896,9 +897,14 @@ } .oo-ui-inlineMenuWidget .oo-ui-menuWidget { + z-index: 1; width: 100%; } +.oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-inlineMenuWidget-handle { + cursor: default; +} + .oo-ui-menuItemWidget { position: relative; } @@ -1052,16 +1058,10 @@ resize: none; } -.oo-ui-textInputWidget-decorated input, -.oo-ui-textInputWidget-decorated textarea { - padding-left: 2em; -} - .oo-ui-textInputWidget-icon { position: absolute; top: 0; left: 0; - width: 2em; height: 100%; background-position: right center; background-repeat: no-repeat; @@ -1070,7 +1070,7 @@ .oo-ui-toggleSwitchWidget { position: relative; display: inline-block; - width: 3em; + width: 4em; height: 2em; overflow: hidden; vertical-align: middle; @@ -1125,7 +1125,7 @@ } .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { - left: 1.25em; + left: 2.25em; margin-left: -2px; } -- 2.20.1