Editor: Added UI.Input. Some layout tweaks.

editor/js/UI.js

@@ -265,6 +265,57 @@ UI.Text.prototype.setValue = function ( value ) {
 
 };
 
+
+// Input
+
+UI.Input = function ( position ) {
+
+	UI.Element.call( this );
+
+	var scope = this;
+
+	this.dom = document.createElement( 'input' );
+	this.dom.style.position = position || 'relative';
+	this.dom.style.marginTop = '-2px';
+	this.dom.style.marginLeft = '-2px';
+
+	this.onChangeCallback = null;
+
+	this.dom.addEventListener( 'change', function ( event ) {
+
+		if ( scope.onChangeCallback ) scope.onChangeCallback();
+
+	}, false );
+
+	return this;
+
+};
+
+UI.Input.prototype = Object.create( UI.Element.prototype );
+
+UI.Input.prototype.getValue = function () {
+
+	return this.dom.value;
+
+};
+
+UI.Input.prototype.setValue = function ( value ) {
+
+	this.dom.value = value;
+
+	return this;
+
+};
+
+UI.Input.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};
+
+
 // Select
 
 UI.Select = function ( position ) {
@@ -345,6 +396,7 @@ UI.Select.prototype.onChange = function ( callback ) {
 
 };
 
+
 // Checkbox
 
 UI.Checkbox = function ( position ) {
@@ -393,6 +445,7 @@ UI.Checkbox.prototype.onChange = function ( callback ) {
 
 };
 
+
 // Color
 
 UI.Color = function ( position ) {
@@ -643,6 +696,7 @@ UI.HorizontalRule = function ( position ) {
 
 UI.HorizontalRule.prototype = Object.create( UI.Element.prototype );
 
+
 // Button
 
 UI.Button = function ( position ) {

editor/js/ui/Sidebar.Outliner.js

@@ -13,7 +13,7 @@ Sidebar.Outliner = function ( signals ) {
 	var selected = null;
 
 	var container = new UI.Panel();
-	container.setPadding( '8px' );
+	container.setPadding( '10px' );
 	container.setBorderTop( '1px solid #ccc' );
 
 	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );

editor/js/ui/Sidebar.Properties.Geometry.js

@@ -23,7 +23,9 @@ Sidebar.Properties.Geometry = function ( signals ) {
 	};
 
 	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
 	container.setDisplay( 'none' );
+	container.setPadding( '10px' );
 
 	container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
 	container.add( new UI.Button( 'absolute' ).setRight( '0px' ).setLabel( 'Export' ).onClick( exportGeometry ) );
@@ -32,7 +34,7 @@ Sidebar.Properties.Geometry = function ( signals ) {
 	// name
 
 	var geometryNameRow = new UI.Panel();
-	var geometryName = new UI.Text( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
+	var geometryName = new UI.Input( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
 
 	geometryNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
 	geometryNameRow.add( geometryName );
@@ -69,7 +71,6 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 	container.add( geometryFacesRow );
 
-	container.add( new UI.Break() );
 
 	//
 

editor/js/ui/Sidebar.Properties.Material.js

@@ -18,7 +18,9 @@ Sidebar.Properties.Material = function ( signals ) {
 	};
 
 	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
 	container.setDisplay( 'none' );
+	container.setPadding( '10px' );
 
 	container.add( new UI.Text().setValue( 'MATERIAL' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
@@ -26,7 +28,7 @@ Sidebar.Properties.Material = function ( signals ) {
 	// name
 
 	var materialNameRow = new UI.Panel();
-	var materialName = new UI.Text( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
+	var materialName = new UI.Input( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
 
 	materialNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
 	materialNameRow.add( materialName );
@@ -208,7 +210,6 @@ Sidebar.Properties.Material = function ( signals ) {
 	container.add( materialWireframeRow );
 
 
-
 	//
 
 	var selected = null;

editor/js/ui/Sidebar.Properties.Object3D.js

@@ -11,7 +11,9 @@ Sidebar.Properties.Object3D = function ( signals ) {
 	};
 
 	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
 	container.setDisplay( 'none' );
+	container.setPadding( '10px' );
 
 	var objectType = new UI.Text().setColor( '#666' );
 	container.add( objectType );
@@ -20,7 +22,7 @@ Sidebar.Properties.Object3D = function ( signals ) {
 	// name
 
 	var objectNameRow = new UI.Panel();
-	var objectName = new UI.Text( 'absolute' ).setLeft( '100px' ).setColor( '#444' );
+	var objectName = new UI.Input( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
 
 	objectNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
 	objectNameRow.add( objectName );
@@ -105,8 +107,6 @@ Sidebar.Properties.Object3D = function ( signals ) {
 	container.add( objectFarRow );
 
 
-	container.add( new UI.Break() );
-
 	//
 
 	var selected = null;

editor/js/ui/Sidebar.Properties.js

@@ -1,8 +1,6 @@
 Sidebar.Properties = function ( signals ) {
 
 	var container = new UI.Panel();
-	container.setPadding( '8px' );
-	container.setBorderTop( '1px solid #ccc' );
 
 	container.add( new Sidebar.Properties.Object3D( signals ) );
 	container.add( new Sidebar.Properties.Geometry( signals ) );