Editor: Added more tabs.

editor/css/dark.css

@@ -182,12 +182,13 @@ input.Number {
 }
 
 	#tabs span {
-		color: #888;
+		color: #555;
 		border-right: 1px solid #222;
 		padding: 10px;
 	}
 
 	#tabs span.selected {
+		color: #888;
 		background-color: #111;
 	}
 

editor/css/light.css

@@ -171,12 +171,13 @@ input.Number {
 }
 
 	#tabs span {
-		color: #888;
+		color: #aaa;
 		border-right: 1px solid #ccc;
 		padding: 10px;
 	}
 
 	#tabs span.selected {
+		color: #888;
 		background-color: #eee;
 	}
 

editor/index.html

@@ -102,8 +102,8 @@
 		<script src="js/Sidebar.js"></script>
 		<script src="js/Sidebar.Project.js"></script>
 		<script src="js/Sidebar.Scene.js"></script>
-		<script src="js/Sidebar.Object3D.js"></script>
-		<script src="js/Sidebar.Animation.js"></script>
+		<script src="js/Sidebar.Properties.js"></script>
+		<script src="js/Sidebar.Object.js"></script>
 		<script src="js/Sidebar.Geometry.js"></script>
 		<script src="js/Sidebar.Geometry.Geometry.js"></script>
 		<script src="js/Sidebar.Geometry.BufferGeometry.js"></script>
@@ -119,6 +119,7 @@
 		<script src="../examples/js/geometries/TeapotBufferGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TeapotBufferGeometry.js"></script>
 		<script src="js/Sidebar.Material.js"></script>
+		<script src="js/Sidebar.Animation.js"></script>
 		<script src="js/Sidebar.Script.js"></script>
 		<script src="js/Sidebar.History.js"></script>
 		<script src="js/Toolbar.js"></script>

editor/js/Sidebar.Geometry.js

@@ -6,21 +6,13 @@ Sidebar.Geometry = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( editor.config.getKey( 'ui/sidebar/geometry/collapsed' ) );
-	container.onCollapsedChange( function ( boolean ) {
-
-		editor.config.setKey( 'ui/sidebar/geometry/collapsed', boolean );
-
-	} );
-	container.setDisplay( 'none' );
-
-	var geometryType = new UI.Text().setTextTransform( 'uppercase' );
-	container.addStatic( geometryType );
+	var container = new UI.Panel();
+	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
 
 	// Actions
 
-	var objectActions = new UI.Select().setPosition('absolute').setRight( '8px' ).setFontSize( '11px' );
+	var objectActions = new UI.Select().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
 	objectActions.setOptions( {
 
 		'Actions': 'Actions',
@@ -87,9 +79,7 @@ Sidebar.Geometry = function ( editor ) {
 		this.setValue( 'Actions' );
 
 	} );
-	container.addStatic( objectActions );
-
-	container.add( new UI.Break() );
+	// container.addStatic( objectActions );
 
 	// uuid
 
@@ -123,6 +113,16 @@ Sidebar.Geometry = function ( editor ) {
 
 	container.add( geometryNameRow );
 
+	// type
+
+	var geometryTypeRow = new UI.Row();
+	var geometryType = new UI.Text();
+
+	geometryTypeRow.add( new UI.Text( 'Type' ).setWidth( '90px' ) );
+	geometryTypeRow.add( geometryType );
+
+	container.add( geometryTypeRow );
+
 	// geometry
 
 	container.add( new Sidebar.Geometry.Geometry( editor ) );

editor/js/Sidebar.Material.js

@@ -7,18 +7,9 @@ Sidebar.Material = function ( editor ) {
 	var signals = editor.signals;
 	var currentObject;
 
-	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( editor.config.getKey( 'ui/sidebar/material/collapsed' ) );
-	container.onCollapsedChange( function ( boolean ) {
-
-		editor.config.setKey( 'ui/sidebar/material/collapsed', boolean );
-
-	} );
-	container.setDisplay( 'none' );
-	container.dom.classList.add( 'Material' );
-
-	container.addStatic( new UI.Text().setValue( 'MATERIAL' ) );
-	container.add( new UI.Break() );
+	var container = new UI.Panel();
+	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
 
 	// uuid
 

editor/js/Sidebar.Object3D.js → editor/js/Sidebar.Object.js

@@ -2,21 +2,13 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Object3D = function ( editor ) {
+Sidebar.Object = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( editor.config.getKey( 'ui/sidebar/object3d/collapsed' ) );
-	container.onCollapsedChange( function ( boolean ) {
-
-		editor.config.setKey( 'ui/sidebar/object3d/collapsed', boolean );
-
-	} );
-	container.setDisplay( 'none' );
-
-	var objectType = new UI.Text().setTextTransform( 'uppercase' );
-	container.addStatic( objectType );
+	var container = new UI.Panel();
+	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
 
 	// Actions
 
@@ -57,9 +49,7 @@ Sidebar.Object3D = function ( editor ) {
 		this.setValue( 'Actions' );
 
 	} );
-	container.addStatic( objectActions );
-
-	container.add( new UI.Break() );
+	// container.addStatic( objectActions );
 
 	// uuid
 
@@ -93,6 +83,17 @@ Sidebar.Object3D = function ( editor ) {
 
 	container.add( objectNameRow );
 
+	// type
+
+	var objectTypeRow = new UI.Row();
+	var objectType = new UI.Text();
+
+	objectTypeRow.add( new UI.Text( 'Type' ).setWidth( '90px' ) );
+	objectTypeRow.add( objectType );
+
+	container.add( objectTypeRow );
+
+
 	/*
 	// parent
 

editor/js/Sidebar.Project.js

@@ -19,6 +19,7 @@ Sidebar.Project = function ( editor ) {
 
 	var container = new UI.Panel();
 	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
 
 	// class
 

editor/js/Sidebar.Properties.js

@@ -0,0 +1,76 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+Sidebar.Properties = function ( editor ) {
+
+	var signals = editor.signals;
+
+	var container = new UI.Span();
+
+	var objectTab = new UI.Text( 'OBJECT' ).onClick( onClick );
+	var geometryTab = new UI.Text( 'GEOMETRY' ).onClick( onClick );
+	var materialTab = new UI.Text( 'MATERIAL' ).onClick( onClick );
+
+	var tabs = new UI.Div();
+	tabs.setId( 'tabs' );
+	tabs.add( objectTab, geometryTab, materialTab );
+	container.add( tabs );
+
+	function onClick( event ) {
+
+		select( event.target.textContent );
+
+	}
+
+	//
+
+	var object = new UI.Span().add(
+		new Sidebar.Object( editor )
+	);
+	container.add( object );
+
+	var geometry = new UI.Span().add(
+		new Sidebar.Geometry( editor )
+	);
+	container.add( geometry );
+
+	var material = new UI.Span().add(
+		new Sidebar.Material( editor )
+	);
+	container.add( material );
+
+	//
+
+	function select( section ) {
+
+		objectTab.setClass( '' );
+		geometryTab.setClass( '' );
+		materialTab.setClass( '' );
+
+		object.setDisplay( 'none' );
+		geometry.setDisplay( 'none' );
+		material.setDisplay( 'none' );
+
+		switch ( section ) {
+			case 'OBJECT':
+				objectTab.setClass( 'selected' );
+				object.setDisplay( '' );
+				break;
+			case 'GEOMETRY':
+				geometryTab.setClass( 'selected' );
+				geometry.setDisplay( '' );
+				break;
+			case 'MATERIAL':
+				materialTab.setClass( 'selected' );
+				material.setDisplay( '' );
+				break;
+		}
+
+	}
+
+	select( 'OBJECT' );
+
+	return container;
+
+};

editor/js/Sidebar.Scene.js

@@ -8,6 +8,7 @@ Sidebar.Scene = function ( editor ) {
 
 	var container = new UI.Panel();
 	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
 
 	var ignoreObjectSelectedSignal = false;
 

editor/js/Sidebar.js

@@ -9,12 +9,12 @@ var Sidebar = function ( editor ) {
 
 	//
 
-	var tabScene = new UI.Text( 'SCENE' ).onClick( onClick );
-	var tabProject = new UI.Text( 'PROJECT' ).onClick( onClick );
+	var sceneTab = new UI.Text( 'SCENE' ).onClick( onClick );
+	var projectTab = new UI.Text( 'PROJECT' ).onClick( onClick );
 
 	var tabs = new UI.Div();
 	tabs.setId( 'tabs' );
-	tabs.add( tabScene, tabProject );
+	tabs.add( sceneTab, projectTab );
 	container.add( tabs );
 
 	function onClick( event ) {
@@ -27,9 +27,7 @@ var Sidebar = function ( editor ) {
 
 	var scene = new UI.Span().add(
 		new Sidebar.Scene( editor ),
-		new Sidebar.Object3D( editor ),
-		new Sidebar.Geometry( editor ),
-		new Sidebar.Material( editor ),
+		new Sidebar.Properties( editor ),
 		new Sidebar.Animation( editor ),
 		new Sidebar.Script( editor )
 	);
@@ -41,20 +39,24 @@ var Sidebar = function ( editor ) {
 	);
 	container.add( project );
 
+	//
+
 	function select( section ) {
 
+		sceneTab.setClass( '' );
+		projectTab.setClass( '' );
+
+		scene.setDisplay( 'none' );
+		project.setDisplay( 'none' );
+
 		switch ( section ) {
 			case 'SCENE':
-				tabScene.setClass( 'selected' );
-				tabProject.setClass( '' );
-				project.setDisplay( 'none' );
+				sceneTab.setClass( 'selected' );
 				scene.setDisplay( '' );
 				break;
 			case 'PROJECT':
-				tabScene.setClass( '' );
-				tabProject.setClass( 'selected' );
+				projectTab.setClass( 'selected' );
 				project.setDisplay( '' );
-				scene.setDisplay( 'none' );
 				break;
 		}