add mail svg; update form elements; change 'focusInput()' signature

source/Ox.UI/js/Form/Ox.Button.js

@@ -180,6 +180,10 @@ Ox.Button = function(options, self) {
         return that;
     }
 
+    that.value = function() {
+        return self.options.title;
+    };
+
     return that;
 
 };

source/Ox.UI/js/Form/Ox.ButtonGroup.js

@@ -53,6 +53,7 @@ Ox.ButtonGroup = function(options, self) {
                 size: self.options.size,
                 style: self.options.style,
                 title: button.title,
+                tooltip: button.tooltip,
                 type: self.options.type
             })
             .bindEvent('select', function() {
@@ -84,6 +85,12 @@ Ox.ButtonGroup = function(options, self) {
         }        
     };
 
+    that.value = function() {
+        return self.optionGroup.selected().map(function(i) {
+            return self.options.buttons[i].id;
+        });
+    };
+
     return that;
 
 };

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

@@ -828,12 +828,8 @@ Ox.Input = function(options, self) {
         } else if (key == 'disabled') {
             self.$input.attr({disabled: value});
 		} else if (key == 'height') {
-		    that.css({
-		        height: value + 'px'
-		    });
-		    self.$input.css({
-		        height: value + 'px'
-		    });
+		    that.css({height: value + 'px'});
+		    self.$input.css({height: value - 6 + 'px'});
 		} else if (key == 'labelWidth') {
 		    self.$label.options({width: value});
 		    inputWidth = getInputWidth();
@@ -874,15 +870,25 @@ Ox.Input = function(options, self) {
         return that;
     }
 
-    that.focusInput = function(select) {
-        // fixme: don't we have a convention that booleans are false by default?
-        select = Ox.isUndefined(select) ? true : select;
+    /*@
+    focusInput <f> Focus input element
+        (select) -> <o> Input object
+        (start, end) -> <o> Input object
+        select <b|false> If true, select all, otherwise position cursor at the end
+        start <n> Selection start (can be negative)
+        end <n> Selection end (can be negative), or equal to start if omitted
+    @*/
+    that.focusInput = function() {
+        var length = self.$input.val().length,
+            start = Ox.isNumber(arguments[0])
+                ? (arguments[0] < 0 ? length + arguments[0] : arguments[0])
+                : 0,
+            stop = Ox.isNumber(arguments[1])
+                ? (arguments[1] < 0 ? length + arguments[1] : arguments[1])
+                : Ox.isNumber(arguments[0]) ? arguments[0]
+                : arguments[0] ? length : 0;
         self.$input.focus();
-        if (select) {
-            cursor(0, self.$input.val().length);
-        } else {
-            cursor(self.$input.val().length);
-        }
+        cursor(start, stop);
         return that;
     };
 

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

@@ -236,12 +236,12 @@ Ox.Select = function(options, self) {
         () -> <o> returns object of selected items with id, title
     @*/
     that.selected = function() {
-        return /*self.checked*/self.optionGroup.checked().map(function(v) {
+        return self.options.selectable ? self.optionGroup.checked().map(function(v) {
             return {
                 id: self.options.items[v].id,
                 title: self.options.items[v].title
             };
-        });
+        }) : [];
     };
 
     /*@

source/Ox.UI/themes/classic/_index.html

@@ -66,7 +66,7 @@
                     'Upload', 'Download',
                     'Copyright', 'NoCopyright',
                     'Click', 'Delete', 'Edit', 'Find', 'Flag', 'Icon', 'Like',
-                    'Publish', 'Set', 'Star', 'User', 'View', 'Loading'
+                    'Mail', 'Publish', 'Set', 'Star', 'User', 'View', 'Loading'
                 ].forEach(function(symbol) {
                     var $symbol, src = 'svg/symbol' + symbol + '.svg';
                     console.log(symbol)

source/Ox.UI/themes/classic/svg/symbolMail.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <g fill="none" stroke="#404040" stroke-width="24">
+        <rect x="28" y="60" width="200" height="136"/>
+        <path d="M 28,60 l 100,100 l 100,-100"/>
+        <line x1="28" y1="196" x2="92" y2="132" stroke-width="12"/>
+        <line x1="162" y1="132" x2="228" y2="196" stroke-width="12"/>
+    </g>
+</svg>