adding manual input for gradient number value

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -237,7 +237,7 @@
     .gradient-step {
         display: grid;
         grid-template-rows: 100%;
-        grid-template-columns: 30px 30px 40px auto 20px 30px;
+        grid-template-columns: 20px 30px 40px auto 20px 30px;
         padding-top: 5px;
         padding-left: 5px;
         padding-bottom: 5px;
@@ -267,7 +267,8 @@
             display: grid;
             justify-content: stretch;
             align-content: center;
-            margin-right: 5px;
+            margin-right: -5px;
+            padding-left: 12px;
 
             input {
                 width: 90%;
@@ -331,6 +332,28 @@
                 width: 110px;
             }
         }
+
+        .short {
+            grid-column: 2;
+            
+            display: flex;
+            align-items: center;
+            
+            input {
+                width: 27px;
+
+            }
+            
+            input::-webkit-outer-spin-button,
+            input::-webkit-inner-spin-button {
+              -webkit-appearance: none;
+              margin: 0;
+            }
+
+            input[type=number] {
+                -moz-appearance: textfield;
+            }
+        }
     }
 
     .vector3Line {

nodeEditor/src/diagram/properties/gradientStepComponent.tsx

@@ -3,6 +3,7 @@ import { GlobalState } from '../../globalState';
 import { Color3 } from 'babylonjs/Maths/math.color';
 import { GradientBlockColorStep } from 'babylonjs/Materials/Node/Blocks/gradientBlock';
 import { ColorPickerLineComponent } from '../../sharedComponents/colorPickerComponent';
+import { FloatLineComponent } from '../../sharedComponents/floatLineComponent';
 
 const deleteButton = require('../../../imgs/delete.svg');
 const copyIcon: string = require('../../sharedComponents/copy.svg');
@@ -46,6 +47,8 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
 
     render() {
         let step = this.props.step;
+        
+
         return (
             <div className="gradient-step">
                 <div className="step">
@@ -59,7 +62,15 @@ export class GradientStepComponent extends React.Component<IGradientStepComponen
                     />  
                 </div>
                 <div className="step-value">
-                    {step.step.toFixed(2)}
+                    <FloatLineComponent globalState={this.props.globalState} smallUI={true} label="" target={step} propertyName="step"
+                    min={0} max={1}
+                    onEnter={ evt => { 
+                            this.props.onUpdateStep();
+                            this.props.onCheckForReOrder();
+                            this.forceUpdate();
+                        }
+                    } 
+                    ></FloatLineComponent>
                 </div>
                 <div className="step-slider">
                     <input className="range" type="range" step={0.01} min={0} max={1.0} value={step.step}

nodeEditor/src/sharedComponents/floatLineComponent.tsx

@@ -15,15 +15,20 @@ interface IFloatLineComponentProps {
     step?: string,
     digits?: number;
     globalState: GlobalState
+    min?: number
+    max?: number
+    smallUI?: boolean;
+    onEnter?: (newValue:number) => void;
 }
 
 export class FloatLineComponent extends React.Component<IFloatLineComponentProps, { value: string }> {
     private _localChange = false;
     private _store: number;
+    private _smallUI: boolean;
 
     constructor(props: IFloatLineComponentProps) {
         super(props);
-
+        this._smallUI = props.smallUI ? props.smallUI : false;
         let currentValue = this.props.target[this.props.propertyName];
         this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 2)) : "0" };
         this._store = currentValue;
@@ -77,13 +82,18 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
             valueAsNumber = parseFloat(valueString);
         }
 
-
         this._localChange = true;
         this.setState({ value: valueString});
 
         if (isNaN(valueAsNumber)) {
             return;
         }
+        if(this.props.max != undefined && (valueAsNumber > this.props.max)) {
+            valueAsNumber = this.props.max;
+        }
+        if(this.props.min != undefined && (valueAsNumber < this.props.min)) {
+            valueAsNumber = this.props.min;
+        }
 
         this.props.target[this.props.propertyName] = valueAsNumber;
         this.raiseOnPropertyChanged(valueAsNumber, this._store);
@@ -92,6 +102,8 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
     }
 
     render() {
+        let className = this._smallUI ? "short": "value";
+
         return (
             <div>
                 {
@@ -99,10 +111,21 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
                         <div className="label">
                             {this.props.label}
                         </div>
-                        <div className="value">
-                            <input type="number" step={this.props.step || "0.01"} className="numeric-input" 
+                        <div className={className}>
+                            <input type="number" step={this.props.step || "0.01"} className="numeric-input"
                             onBlur={evt => {
                                 this.props.globalState.blockKeyboardEvents = false;
+                                if(this.props.onEnter) {
+                                    this.props.onEnter(this._store);
+                                }
+                            }}
+                            onKeyDown={evt => {
+                                if (evt.keyCode !== 13) {
+                                    return;
+                                }
+                                if(this.props.onEnter) {
+                                    this.props.onEnter(this._store);
+                                }
                             }}
                             onFocus={() => this.props.globalState.blockKeyboardEvents = true}
                             value={this.state.value} onChange={evt => this.updateValue(evt.target.value)} />