瀏覽代碼

Editor: Added tabs.

Mr.doob 9 年之前
父節點
當前提交
cc416fe209
共有 6 個文件被更改,包括 106 次插入34 次删除
  1. 18 5
      editor/css/dark.css
  2. 16 1
      editor/css/light.css
  3. 2 10
      editor/js/Sidebar.Project.js
  4. 2 10
      editor/js/Sidebar.Scene.js
  5. 54 8
      editor/js/Sidebar.js
  6. 14 0
      editor/js/libs/ui.js

+ 18 - 5
editor/css/dark.css

@@ -110,7 +110,7 @@ input.Number {
 		}
 
 			#menubar .menu .options hr {
-				border-color: #333;
+				border-color: #222;
 			}
 
 			#menubar .menu .options .option {
@@ -166,16 +166,29 @@ input.Number {
 		margin-bottom: 0;
 	}
 
-	#sidebar > .Panel {
+	#sidebar .Panel.Material canvas {
+		border: solid 1px #5A5A5A;
+	}
+
+	#sidebar > .Panel, #sidebar > span > .Panel {
 		color: #888;
 		padding: 10px;
-		border-top: 1px solid #333;
+		border-top: 1px solid #222;
 	}
 
-	#sidebar .Panel.Material canvas {
+#tabs {
+	background-color: #1b1b1b;
+	border-top: 1px solid #222;
+}
 
-		border: solid 1px #5A5A5A;
+	#tabs span {
+		color: #888;
+		border-right: 1px solid #222;
+		padding: 10px;
+	}
 
+	#tabs span.selected {
+		background-color: #111;
 	}
 
 #toolbar {

+ 16 - 1
editor/css/light.css

@@ -159,12 +159,27 @@ input.Number {
 		margin-bottom: 0;
 	}
 
-	#sidebar > .Panel {
+	#sidebar > .Panel, #sidebar > span > .Panel {
 		color: #888;
 		padding: 10px;
 		border-top: 1px solid #ccc;
 	}
 
+#tabs {
+	background-color: #ddd;
+	border-top: 1px solid #ccc;
+}
+
+	#tabs span {
+		color: #888;
+		border-right: 1px solid #ccc;
+		padding: 10px;
+	}
+
+	#tabs span.selected {
+		background-color: #eee;
+	}
+
 #toolbar {
 	position: absolute;
 	left: 0;

+ 2 - 10
editor/js/Sidebar.Project.js

@@ -17,16 +17,8 @@ Sidebar.Project = function ( editor ) {
 
 	};
 
-	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( config.getKey( 'ui/sidebar/project/collapsed' ) );
-	container.onCollapsedChange( function ( boolean ) {
-
-		config.setKey( 'ui/sidebar/project/collapsed', boolean );
-
-	} );
-
-	container.addStatic( new UI.Text( 'PROJECT' ) );
-	container.add( new UI.Break() );
+	var container = new UI.Panel();
+	container.setBorderTop( '0' );
 
 	// class
 

+ 2 - 10
editor/js/Sidebar.Scene.js

@@ -6,16 +6,8 @@ Sidebar.Scene = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( editor.config.getKey( 'ui/sidebar/scene/collapsed' ) );
-	container.onCollapsedChange( function ( boolean ) {
-
-		editor.config.setKey( 'ui/sidebar/scene/collapsed', boolean );
-
-	} );
-
-	container.addStatic( new UI.Text( 'SCENE' ) );
-	container.add( new UI.Break() );
+	var container = new UI.Panel();
+	container.setBorderTop( '0' );
 
 	var ignoreObjectSelectedSignal = false;
 

+ 54 - 8
editor/js/Sidebar.js

@@ -7,14 +7,60 @@ var Sidebar = function ( editor ) {
 	var container = new UI.Panel();
 	container.setId( 'sidebar' );
 
-	container.add( new Sidebar.History( editor ) );
-	container.add( new Sidebar.Project( editor ) );
-	container.add( new Sidebar.Scene( editor ) );
-	container.add( new Sidebar.Object3D( editor ) );
-	container.add( new Sidebar.Geometry( editor ) );
-	container.add( new Sidebar.Material( editor ) );
-	container.add( new Sidebar.Animation( editor ) );
-	container.add( new Sidebar.Script( editor ) );
+	//
+
+	var tabScene = new UI.Text( 'SCENE' ).onClick( onClick );
+	var tabProject = new UI.Text( 'PROJECT' ).onClick( onClick );
+
+	var tabs = new UI.Div();
+	tabs.setId( 'tabs' );
+	tabs.add( tabScene, tabProject );
+	container.add( tabs );
+
+	function onClick( event ) {
+
+		select( event.target.textContent );
+
+	}
+
+	//
+
+	var scene = new UI.Span().add(
+		new Sidebar.Scene( editor ),
+		new Sidebar.Object3D( editor ),
+		new Sidebar.Geometry( editor ),
+		new Sidebar.Material( editor ),
+		new Sidebar.Animation( editor ),
+		new Sidebar.Script( editor )
+	);
+	container.add( scene );
+
+	var project = new UI.Span().add(
+		new Sidebar.Project( editor ),
+		new Sidebar.History( editor )
+	);
+	container.add( project );
+
+	function select( section ) {
+
+		switch ( section ) {
+			case 'SCENE':
+				tabScene.setClass( 'selected' );
+				tabProject.setClass( '' );
+				project.setDisplay( 'none' );
+				scene.setDisplay( '' );
+				break;
+			case 'PROJECT':
+				tabScene.setClass( '' );
+				tabProject.setClass( 'selected' );
+				project.setDisplay( '' );
+				scene.setDisplay( 'none' );
+				break;
+		}
+
+	}
+
+	select( 'SCENE' );
 
 	return container;
 

+ 14 - 0
editor/js/libs/ui.js

@@ -165,6 +165,20 @@ UI.Span = function () {
 UI.Span.prototype = Object.create( UI.Element.prototype );
 UI.Span.prototype.constructor = UI.Span;
 
+// Div
+
+UI.Div = function () {
+
+	UI.Element.call( this );
+
+	this.dom = document.createElement( 'div' );
+
+	return this;
+
+};
+
+UI.Div.prototype = Object.create( UI.Element.prototype );
+UI.Div.prototype.constructor = UI.Div;
 
 // Panel