Added input fields for transform controls

editor/js/Sidebar.Controls.js

@@ -8,22 +8,44 @@ Sidebar.Controls = function ( editor ) {
 	var signals = editor.signals;
 
 	var container = new UI.Panel();
-	container.setBorderTop( '0' );
-	container.setPaddingTop( '20px' );
-
 	container.add( new UI.Text( 'CONTROLS' ) );
 
+	// Use this to add a line break above the panel
+	container.add( new UI.Break(), new UI.Break() );
+
 	var controlNames = [
 		'translate',
 		'rotate',
 		'scale'
 	];
 
-	// Create rows here
+	for ( var i = 0; i < controlNames.length; i++ ) {
+
+		let name = controlNames[ i ];
+		let configName = 'controls/' + name;
+		let controlRow = new UI.Row();
+
+		let controlInput = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
+
+			config.setKey( configName, controlInput.getValue()[ 0 ] );
+
+		} );
+		controlInput.dom.addEventListener( 'focus', function () {
+
+			controlInput.dom.select();
+
+		} );
+
+		if( config.getKey( configName ) !== undefined ) {
 
-	if ( config.getKey( 'controls/translate' ) !== undefined ) {
+			controlInput.setValue( config.getKey( configName ) );
 
+		}
 
+		controlInput.dom.maxLength = 1;
+		controlRow.add( new UI.Text( name.charAt( 0 ).toUpperCase() + name.slice( 1 ) ).setWidth( '90px' ) );
+		controlRow.add( controlInput );
+		container.add( controlRow );
 
 	}