fix css for selects with labels, allow for checkboxes with labels

source/Ox.UI/css/Ox.UI.css

@@ -851,14 +851,9 @@ OxSelect
     border-style: solid;
     border-radius: 8px;
 }
-.OxSelect.OxSelected,
+.OxSelect.OxSelected {
-.OxSelect.OxSelected > .OxLabel {
     border-radius: 8px 8px 0 0;
 }
-.OxSelect > .OxLabel {
-    float: left;
-    margin: -1px;
-}
 .OxSelect > .OxTitle {
     float: left;
     height: 14px;
@@ -871,30 +866,27 @@ OxSelect
     white-space: nowrap;
     //margin-right: -16px;
 }
-.OxSelect.OxOverlapLeft > .OxTitle {
-    //padding-left: 20px;
-    //padding-right: 8px;
-    //margin-left: -32px;
-}
-.OxSelect.OxOverlapRight > .OxTitle {
-    //padding-left: 8px;
-    //padding-right: 20px;
-    //margin-right: -32px;
-}
 .OxSelect > .OxButton {
     float: right;
     margin: -1px;
 }
-.OxSelect.OxOverlapLeft > .OxButton {
+.OxLabelSelect > .OxLabel {
-    //padding-left: 15px;
+    float: left;
-    //padding-right: 1px;
+    margin: -1px;
-    //margin-left: -16px;
 }
-.OxSelect.OxOverlapRight > .OxButton {
+.OxLabelSelect > .OxTitle {
-    //padding-left: 1px;
+    border-left-width: 1px;
-    //padding-right: 15px;
+    border-left-style: solid;
-    //margin-right: -16px;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
 }
+.OxLabelSelect.OxSelected {
+    border-bottom-left-radius: 8px;
+}
+.OxLabelSelect.OxSelected > .OxTitle {
+    border-bottom-left-radius: 0;
+}
+
 /*
 
 */

source/Ox.UI/js/Form/Ox.Checkbox.js

@@ -5,11 +5,13 @@ Ox.Checkbox <f:Ox.Element> Checkbox Element
     (options) ->       <f> Checkbox Element
     (options, self) -> <f> Checkbox Element
     options <o> Options object
-        disabled <b> if true, checkbox is disabled
-        id <s> element id
-        group <b> if true, checkbox is part of a group
         checked <b> if true, checkbox is checked
-        title <s> text on label
+        disabled <b> if true, checkbox is disabled
+        group <b> if true, checkbox is part of a group
+        id <s> element id
+        label <s> Label (on the left side)
+        labelWidth <n|64> Label width
+        title <s> Title (on the right side)
         width <n> width in px
     self <o>    Shared private variable
     change <!> triggered when checked property changes, passes {checked, id, title}
@@ -20,10 +22,12 @@ Ox.Checkbox = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
             .defaults({
-                disabled: false,
-                id: '',
-                group: false,
                 checked: false,
+                disabled: false,
+                group: false,
+                id: '',
+                label: '',
+                labelWidth: 64,
                 overlap: 'none',
                 title: '',
                 width: 'auto'
@@ -41,20 +45,31 @@ Ox.Checkbox = function(options, self) {
         self.options.width != 'auto' && that.css({
             width: self.options.width + 'px'
         });
+        Ox.print(self.options.width - 16, self.options.label * (self.options.labelWidth - 16))
         self.$title = Ox.Label({
                 disabled: self.options.disabled,
                 id: self.options.id + 'Label',
                 overlap: 'left',
                 title: self.options.title,
                 width: self.options.width - 16
+                    - !!self.options.label * self.options.labelWidth
             })
-            .css({
+            .css({float: 'right'})
-                float: 'right'
-            })
             .click(clickTitle)
             .appendTo(that);
     }
 
+    if (self.options.label) {
+        self.$label = Ox.Label({
+                overlap: 'right',
+                textAlign: 'right',
+                title: self.options.label,
+                width: self.options.labelWidth
+            })
+            .css({float: 'left'})
+            .appendTo(that);
+    }
+
     self.$button = Ox.Button({
             disabled: self.options.disabled,
             id: self.options.id + 'Button',

source/Ox.UI/js/Form/Ox.Input.js

@@ -24,6 +24,8 @@ Ox.Input <f:Ox.Element> Input Element
         height                      <n> px (for type='textarea' and type='range' with orientation='horizontal')
         id                          <s> element id
         key                         <s> to be passed to autocomplete and autovalidate functions
+        label                       <s|''> Label
+        labelWidth                  <n|64> Label width
         max                         <n> max value if type is 'int' or 'float'
         min                         <n> min value if type is 'int' or 'float'
         name                        <s> will be displayed by autovalidate function ('invalid ' + name)
@@ -31,7 +33,7 @@ Ox.Input <f:Ox.Element> Input Element
         picker                  <o> picker object
         rangeOptions          <o> range options
             arrows              <b>boolean, if true, display arrows
-            //arrowStep         <n>  number, step when clicking arrows
+            //arrowStep         <n> number, step when clicking arrows
             //arrowSymbols      <a> array of two strings
             max                 <n> number, maximum value
             min                 <n> number, minimum value

source/Ox.UI/js/Form/Ox.Select.js

@@ -8,6 +8,8 @@ Ox.Select <f:Ox.Element> Select Object
     options <o> Options object
         id <s> element id
         items <a|[]> items
+        label <s|''> Label
+        labelWidth <n|64> Label width
         max <n|1> minimum number of selected items
         min <n|1> maximum number of selected items
         overlap <s|'none'> can be none, left or right
@@ -32,6 +34,8 @@ Ox.Select = function(options, self) {
             .defaults({
                 id: '',
                 items: [],
+                label: '',
+                labelWidth: 64,
                 max: 1,
                 min: 1,
                 overlap: 'none', // can be none, left or right
@@ -46,9 +50,10 @@ Ox.Select = function(options, self) {
             // or allow for extra action items below options
             .options(options)
             .addClass(
-                'OxSelect Ox' + Ox.toTitleCase(self.options.size) +
+                'OxSelect Ox' + Ox.toTitleCase(self.options.size) + (
-                (self.options.overlap == 'none' ? '' : ' OxOverlap' +
+                    self.options.overlap == 'none'
-                Ox.toTitleCase(self.options.overlap))
+                    ? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
+                ) + (self.options.label ? ' OxLabelSelect' : '')
             )
             .css(self.options.width == 'auto' ? {} : {
                 width: self.options.width - 2 + 'px'

source/Ox.UI/themes/classic/css/classic.css

@@ -297,6 +297,19 @@ Forms
     background: rgb(240, 240, 240);
 }
 
+.OxThemeClassic .OxLabelSelect > .OxTitle {
+    border-color: rgb(176, 176, 176);
+    background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
+    background: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
+    background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
+}
+.OxThemeClassic .OxLabelSelect.OxSelected > .OxTitle {
+    background: -moz-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
+    background: -o-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
+    background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
+}
+
+
 /*
 ================================================================================
 Images

source/Ox.UI/themes/modern/css/modern.css

@@ -193,6 +193,7 @@ Forms
 .OxThemeModern .OxSelect > .OxTitle {
     color: rgb(192, 192, 192);
 }
+
 .OxThemeModern .OxInputLabel {
     color: rgb(192, 192, 192);
 }
@@ -280,6 +281,21 @@ Forms
     background: rgb(16, 16, 16);
 }
 
+
+.OxThemeModern .OxLabelSelect > .OxTitle {
+    border-color: rgb(48, 48, 48);
+    background: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
+    background: -o-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
+    background: -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
+}
+.OxThemeModern .OxLabelSelect.OxSelected > .OxTitle {
+    background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
+    background: -o-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
+    background: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
+}
+
+
+
 /*
 ================================================================================
 Images