]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6c1390d)
Controlgroup: fixup for spinner and label
authorAlexander Schmitz <arschmitz@gmail.com>
Fri, 14 Aug 2015 13:49:48 +0000 (09:49 -0400)
committerAlexander Schmitz <arschmitz@gmail.com>
Thu, 8 Oct 2015 18:02:47 +0000 (14:02 -0400)
demos/controlgroup/default.html patch | blob | history
tests/unit/controlgroup/common.js patch | blob | history
themes/base/controlgroup.css patch | blob | history
ui/widgets/controlgroup.js patch | blob | history

diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html
index 49ea28210849854400a9395afe8c977517453119..ba7802cde333a73eb9dbe38b4e3cb5cde9e7626f 100644 (file)
--- 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 b403e174c5069ff83547180b4fe8fea169ed404a..4dc86afbd2b39aacc305daa84c8181a3335e85ab 100644 (file)
--- 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 3d57b11f684e8f919aeb30e23b472ad98d354005..311b723cc8d69cf525baba21ff7b084b28dc8dfd 100644 (file)
--- 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 3887c7abfd898545577e263d453acc69d0b997cf..4e68ad7a8cf4103589433bbb578c40056a804d1c 100644 (file)
--- 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 );
                                }
                        } );
 
The official jQuery user interface library: https://github.com/jquery/jquery-ui