Browse Source

Editor: Prettified outliner.

Mr.doob 11 years ago
parent
commit
e4a1d42ed3
5 changed files with 62 additions and 21 deletions
  1. 0 8
      editor/css/dark.css
  2. 2 9
      editor/css/light.css
  3. 50 0
      editor/css/types.css
  4. 1 0
      editor/index.html
  5. 9 4
      editor/js/Sidebar.Scene.js

+ 0 - 8
editor/css/dark.css

@@ -172,14 +172,6 @@ input.Number {
 
 	}
 
-	#sidebar #outliner .type {
-		padding: 2px 4px;
-		font-size: 10px;
-		background: #474747;
-		border-radius: 2px 2px;
-		color: #aaa;
-	}
-
 #toolbar {
 	position: absolute;
 	left: 0px;

+ 2 - 9
editor/css/light.css

@@ -19,7 +19,6 @@ button {
 }
 
 .Panel {
-
 	-moz-user-select: none;
 	-webkit-user-select: none;
 	-ms-user-select: none;
@@ -40,11 +39,12 @@ button {
 
 	.FancySelect .option {
 		padding: 4px;
+		color: #666;
 		white-space: nowrap;
 	}
 
 	.FancySelect .option.active {
-		background-color: #F0F0F0;
+		background-color: #f8f8f8;
 	}
 
 input.Number {
@@ -139,13 +139,6 @@ input.Number {
 		font-size: 12px;
 	}
 
-	#sidebar #outliner .type {
-		padding: 2px 4px;
-		font-size: 10px;
-		background: #eee;
-		color: #aaa;
-	}
-
 #toolbar {
 	position: absolute;
 	left: 0px;

+ 50 - 0
editor/css/types.css

@@ -0,0 +1,50 @@
+.type {
+	position:relative;
+	top:-2px;
+	padding: 0px 2px;
+	color: #ddd;
+}
+.type:after {
+	content: '■';
+}
+
+.Scene {
+	color: #ccccff;
+}
+
+.Object3D {
+	color: #aaaaee;
+}
+
+.Mesh {
+	color: #8888ee;
+}
+
+/* */
+
+.PointLight {
+	color: #dddd00;
+}
+
+/* */
+
+.Geometry {
+	color: #88ff88;
+}
+
+.CubeGeometry {
+	color: #bbeebb;
+}
+.TorusGeometry {
+	color: #aaeeaa;	
+}
+
+/* */
+
+.Material {
+	color: #ff8888;
+}
+
+.MeshPhongMaterial {
+	color: #ffaa88;
+}

+ 1 - 0
editor/index.html

@@ -6,6 +6,7 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 	</head>
 	<body>
+		<link href="css/types.css" rel="stylesheet" />
 		<link id="theme" href="css/light.css" rel="stylesheet" />
 
 		<script src="../build/three.min.js"></script>

+ 9 - 4
editor/js/Sidebar.Scene.js

@@ -121,26 +121,31 @@ Sidebar.Scene = function ( editor ) {
 	signals.sceneGraphChanged.add( function () {
 
 		var scene = editor.scene;
+		var sceneType = editor.getObjectType( scene );
 
 		var options = {};
 
-		options[ scene.id ] = '<span class="type">' + editor.getObjectType( scene ).replace( /[a-z]/g, '' ) + '</span> ' + scene.name;
+		options[ scene.id ] = '<span class="type ' + sceneType + '"></span> ' + scene.name;
 
 		( function addObjects( objects, pad ) {
 
 			for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 				var object = objects[ i ];
+				var objectType = editor.getObjectType( object );
 
-				var option = pad + '<span class="type">' + editor.getObjectType( object ).replace( /[a-z]/g, '' ) + '</span> ' + object.name;
+				var option = pad + '<span class="type ' + objectType + '"></span> ' + object.name;
 
 				if ( object instanceof THREE.Mesh ) {
 
 					var geometry = object.geometry;
 					var material = object.material;
 
-					option += ' — <span class="type">' + editor.getGeometryType( geometry ).replace( /[a-z]/g, '' ) + '</span> ' + geometry.name + ', ';
-					option += ' <span class="type">' + editor.getMaterialType( material ).replace( /[a-z]/g, '' ) + '</span> ' + material.name;
+					var geometryType = editor.getGeometryType( geometry );
+					var materialType = editor.getMaterialType( material );
+
+					option += ' <span class="type ' + geometryType + '"></span> ' + geometry.name;
+					option += ' <span class="type ' + materialType + '"></span> ' + material.name;
 
 				}