add Ox.Editable

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

@@ -457,6 +457,7 @@ textarea.OxSquare {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
 }
+
 /*
 --------------------------------------------------------------------------------
 OxButton
@@ -551,24 +552,6 @@ OxButtonGroup
 }
 /*
 --------------------------------------------------------------------------------
-OxForm
---------------------------------------------------------------------------------
-*/
-.OxFormItem {
-    margin-top: 8px;
-}
-.OxFormItem:first-child {
-    margin-top: 0;
-}
-.OxFormMessage {
-    //width: 100%;
-    height: 10px;
-    margin: 2px 8px 0 0;
-    text-align: right;
-    display: none;
-}
-/*
---------------------------------------------------------------------------------
 OxCheckbox
 --------------------------------------------------------------------------------
 */
@@ -596,6 +579,24 @@ input.OxCheckbox {
 }
 /*
 --------------------------------------------------------------------------------
+OxForm
+--------------------------------------------------------------------------------
+*/
+.OxFormItem {
+    margin-top: 8px;
+}
+.OxFormItem:first-child {
+    margin-top: 0;
+}
+.OxFormMessage {
+    //width: 100%;
+    height: 10px;
+    margin: 2px 8px 0 0;
+    text-align: right;
+    display: none;
+}
+/*
+--------------------------------------------------------------------------------
 OxInput
 --------------------------------------------------------------------------------
 */
@@ -624,6 +625,25 @@ input.OxInput {
     border-style: solid;
     float: left;
 }
+/*
+--------------------------------------------------------------------------------
+OxEditable
+--------------------------------------------------------------------------------
+*/
+.OxEditable > .OxValue {
+    cursor: pointer;
+    padding: 0 0 0 1px;
+}
+.OxEditable div.OxInput {
+    height: 14px;
+    padding: 0 1px 0 0;
+}
+.OxEditable input.OxInput {
+    height: 14px;
+    padding: 0 1px 0 0;
+    border: 0;
+}
+
 /*
 --------------------------------------------------------------------------------
 OxInputGroup

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

@@ -47,6 +47,7 @@ Ox.Input <f:Ox.Element> Input Element
             //trackStep         <n>   number, 0 for 'scroll here', positive for step
             trackValues         <b> boolean
         serialize                   <f> function used to serialize value in submit
+        style                       <s> 'rounded' or 'square'
         textAlign                   <s> 'left', 'center' or 'right'
         type                        <s> 'float', 'int', 'password', 'text', 'textarea'
         value                       <s> string
@@ -76,6 +77,7 @@ Ox.Input = function(options, self) {
                 clear: false,
                 decimals: 0,
 				disabled: false,
+				height: 16,
                 key: '',
                 min: -Infinity,
                 max: Infinity,
@@ -568,13 +570,16 @@ Ox.Input = function(options, self) {
         }
         // fixme: for some reason, if options.type is set, no change event fires
         // as a workaround, blur sends a value. remove later...
-        that.triggerEvent('blur', {
+        !self.cancelled && that.triggerEvent('blur', {
             value: self.options.value
         });
     }
 
     function cancel() {
-        self.$input.blur();
+        self.cancelled = true;
+        self.$input.blur().val(self.originalValue);
+        self.cancelled = false;
+        that.triggerEvent('cancel');
     }
 
     function change() {
@@ -648,6 +653,7 @@ Ox.Input = function(options, self) {
         ) {
             return;
         }
+        self.originalValue = self.options.value;
         that.gainFocus();
         that.is('.OxError') && that.removeClass('OxError');
         self.options.placeholder && setPlaceholder();

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

@@ -183,6 +183,7 @@ Forms
     border-bottom: 1px solid rgb(192, 192, 192);
 }
 
+
 .OxThemeClassic .OxFormMessage {
     color: rgb(192, 64, 64);
 }