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

diff --git a/resources/oojs-ui/oojs-ui-apex.css b/resources/oojs-ui/oojs-ui-apex.css
index f86f67c..8e2d79d 100644 (file)
--- 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 524524f..48ace00 100644 (file)
--- 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 23fb48b..9f8c28a 100644 (file)
--- 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;
 }