diff options
| author | Alexander Schmitz <arschmitz@gmail.com> | 2015-08-14 09:49:48 -0400 |
|---|---|---|
| committer | Alexander Schmitz <arschmitz@gmail.com> | 2015-10-08 14:02:47 -0400 |
| commit | 3330634c4e4e6a1a7deff56a2d278ed9d8db0ce9 (patch) | |
| tree | fb24e7f4d2ab8a3fa6f96cd172ce83d882c220b3 | |
| parent | 6c1390dc0d3c4f9f24196adf3aeba5a0566866e7 (diff) | |
| download | jquery-ui-3330634c4e4e6a1a7deff56a2d278ed9d8db0ce9.tar.gz jquery-ui-3330634c4e4e6a1a7deff56a2d278ed9d8db0ce9.zip | |
Controlgroup: fixup for spinner and label
| -rw-r--r-- | demos/controlgroup/default.html | 6 | ||||
| -rw-r--r-- | tests/unit/controlgroup/common.js | 4 | ||||
| -rw-r--r-- | themes/base/controlgroup.css | 6 | ||||
| -rw-r--r-- | ui/widgets/controlgroup.js | 25 |
4 files changed, 29 insertions, 12 deletions
diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html index 49ea28210..ba7802cde 100644 --- a/demos/controlgroup/default.html +++ b/demos/controlgroup/default.html @@ -16,8 +16,8 @@ #car-type-button { width: 120px; } - .ui-controlgroup-horizontal .ui-spinner { - width: 50px; + .ui-controlgroup-horizontal .ui-spinner-input { + width: 20px; } </style> <script src="../../external/requirejs/require.js"></script> @@ -26,6 +26,7 @@ $( ".controlgroup-vertical" ).controlgroup({ "direction": "vertical" }); + $( ".button" ).button(); </script> </head> <body> @@ -33,6 +34,7 @@ <h1>Controlgroup</h1> <fieldset> <legend>Rental Car</legend> + <button class="button">button</button> <div class="controlgroup"> <select id="car-type"> <option>Compact car</option> diff --git a/tests/unit/controlgroup/common.js b/tests/unit/controlgroup/common.js index b403e174c..4dc86afbd 100644 --- a/tests/unit/controlgroup/common.js +++ b/tests/unit/controlgroup/common.js @@ -12,7 +12,9 @@ common.testWidget( "controlgroup", { items: { "button": "input[type=button], input[type=submit], input[type=reset], button, a", "checkboxradio": "input[type='checkbox'], input[type='radio']", - "selectmenu": "select" + "selectmenu": "select", + "spinner": ".ui-spinner-input", + "controlgroupLabel": ".ui-controlgroup-label" }, direction: "horizontal", excludeInvisible: true, diff --git a/themes/base/controlgroup.css b/themes/base/controlgroup.css index 3d57b11f6..311b723cc 100644 --- a/themes/base/controlgroup.css +++ b/themes/base/controlgroup.css @@ -11,6 +11,7 @@ .ui-controlgroup { vertical-align: middle; + display: inline-block; } .ui-controlgroup > .ui-controlgroup-item { float: left; @@ -31,8 +32,9 @@ .ui-controlgroup-vertical .ui-controlgroup-item { box-sizing: border-box; } -.ui-controlgroup-label { - padding: .4em 1em; +.ui-controlgroup .ui-controlgroup-label { + font-size: .83em; + padding: .6em 1em; } .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { border-left: none; diff --git a/ui/widgets/controlgroup.js b/ui/widgets/controlgroup.js index 3887c7abf..4e68ad7a8 100644 --- a/ui/widgets/controlgroup.js +++ b/ui/widgets/controlgroup.js @@ -80,25 +80,25 @@ return $.widget( "ui.controlgroup", { // Make sure the widget actually exists and has a selector set if ( $.fn[ widget ] && selector ) { - // Find instances of this widget inside controlgroup and run method or set options + // Find instances of this widget inside controlgroup and set options widgets = that.element.find( selector )[ widget ]( options ); - // Don't set data or add to the collection if the method is destroy widgets.each( function() { - var element = $( this ); + var element = $( this ), // Set data on the widget element pointing to the this.element of the widget // and telling us what type of widget this is - var widgetElement = - element[ widget ]( "widget" ).data( "ui-controlgroup-data", element.data( "ui-" + - widget.charAt(0).toUpperCase() + widget.slice(1) ) ); + widgetElement = element[ widget ]( "widget" ).data( + "ui-controlgroup-data", + element.data( "ui-" + widget.charAt(0).toUpperCase() + widget.slice(1) ) + ); childWidgets.push( widgetElement[ 0 ] ); } ); } else if ( selector && widget === "controlgroupLabel" ) { labels = that.element.find( selector ); that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" ); - Array.prototype.push.apply( childWidgets, labels ); + Array.prototype.push.apply( childWidgets, labels.get() ); } } ); @@ -116,6 +116,15 @@ return $.widget( "ui.controlgroup", { } ); }, + _updateCornerClass: function( element, position ) { + var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right", + add = + this._buildSimpleOptions( position, this.options.direction, "label" ).classes.label; + + this._removeClass( element, null, remove ); + this._addClass( element, null, add ); + }, + _buildSimpleOptions: function( position, direction, key ) { var result = { classes: {} @@ -217,6 +226,8 @@ return $.widget( "ui.controlgroup", { that.options.direction === "vertical" ) ); + } else { + that._updateCornerClass( children[ value ](), value ); } } ); |