Editor: Added settings tab. Moved theme code.

editor/index.html

@@ -95,13 +95,13 @@
 		<script src="js/Menubar.Edit.js"></script>
 		<script src="js/Menubar.Add.js"></script>
 		<script src="js/Menubar.Play.js"></script>
-		<script src="js/Menubar.View.js"></script>
 		<script src="js/Menubar.Examples.js"></script>
 		<script src="js/Menubar.Help.js"></script>
 		<script src="js/Menubar.Status.js"></script>
 		<script src="js/Sidebar.js"></script>
-		<script src="js/Sidebar.Project.js"></script>
 		<script src="js/Sidebar.Scene.js"></script>
+		<script src="js/Sidebar.Project.js"></script>
+		<script src="js/Sidebar.Settings.js"></script>
 		<script src="js/Sidebar.Properties.js"></script>
 		<script src="js/Sidebar.Object.js"></script>
 		<script src="js/Sidebar.Geometry.js"></script>

editor/js/Menubar.View.js

-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
-Menubar.View = function ( editor ) {
-
-	var container = new UI.Panel();
-	container.setClass( 'menu' );
-
-	var title = new UI.Panel();
-	title.setClass( 'title' );
-	title.setTextContent( 'View' );
-	container.add( title );
-
-	var options = new UI.Panel();
-	options.setClass( 'options' );
-	container.add( options );
-
-	// Light theme
-
-	var option = new UI.Row();
-	option.setClass( 'option' );
-	option.setTextContent( 'Light theme' );
-	option.onClick( function () {
-
-		editor.setTheme( 'css/light.css' );
-		editor.config.setKey( 'theme', 'css/light.css' );
-
-	} );
-	options.add( option );
-
-	// Dark theme
-
-	var option = new UI.Row();
-	option.setClass( 'option' );
-	option.setTextContent( 'Dark theme' );
-	option.onClick( function () {
-
-		editor.setTheme( 'css/dark.css' );
-		editor.config.setKey( 'theme', 'css/dark.css' );
-
-	} );
-	options.add( option );
-
-	//
-
-	options.add( new UI.HorizontalRule() );
-
-	// fullscreen
-
-	var option = new UI.Row();
-	option.setClass( 'option' );
-	option.setTextContent( 'Fullscreen' );
-	option.onClick( function () {
-
-		var element = document.body;
-
-		if ( element.requestFullscreen ) {
-
-			element.requestFullscreen();
-
-		} else if ( element.mozRequestFullScreen ) {
-
-			element.mozRequestFullScreen();
-
-		} else if ( element.webkitRequestFullscreen ) {
-
-			element.webkitRequestFullscreen();
-
-		} else if ( element.msRequestFullscreen ) {
-
-			element.msRequestFullscreen();
-
-		}
-
-	} );
-	options.add( option );
-
-	return container;
-
-};

editor/js/Menubar.js

@@ -12,7 +12,6 @@ var Menubar = function ( editor ) {
 	container.add( new Menubar.Add( editor ) );
 	container.add( new Menubar.Play( editor ) );
 	container.add( new Menubar.Examples( editor ) );
-	container.add( new Menubar.View( editor ) );
 	container.add( new Menubar.Help( editor ) );
 
 	container.add( new Menubar.Status( editor ) );

editor/js/Sidebar.Settings.js

+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+Sidebar.Settings = function ( editor ) {
+
+	var config = editor.config;
+	var signals = editor.signals;
+
+	var container = new UI.Panel();
+	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
+
+	// class
+
+	var options = {
+		'css/light.css': 'light',
+		'css/dark.css': 'dark'
+	};
+
+	var themeRow = new UI.Row();
+	var theme = new UI.Select().setWidth( '150px' );
+	theme.setOptions( options );
+
+	if ( config.getKey( 'theme' ) !== undefined ) {
+
+		theme.setValue( config.getKey( 'theme' ) );
+
+	}
+
+	theme.onChange( function () {
+
+		var value = this.getValue();
+
+		editor.setTheme( value );
+		editor.config.setKey( 'theme', value );
+
+	} );
+
+	themeRow.add( new UI.Text( 'Theme' ).setWidth( '90px' ) );
+	themeRow.add( theme );
+
+	container.add( themeRow );
+
+	return container;
+
+};

editor/js/Sidebar.js

@@ -11,10 +11,11 @@ var Sidebar = function ( editor ) {
 
 	var sceneTab = new UI.Text( 'SCENE' ).onClick( onClick );
 	var projectTab = new UI.Text( 'PROJECT' ).onClick( onClick );
+	var settingsTab = new UI.Text( 'SETTINGS' ).onClick( onClick );
 
 	var tabs = new UI.Div();
 	tabs.setId( 'tabs' );
-	tabs.add( sceneTab, projectTab );
+	tabs.add( sceneTab, projectTab, settingsTab );
 	container.add( tabs );
 
 	function onClick( event ) {
@@ -39,15 +40,22 @@ var Sidebar = function ( editor ) {
 	);
 	container.add( project );
 
+	var settings = new UI.Span().add(
+		new Sidebar.Settings( editor )
+	);
+	container.add( settings );
+
 	//
 
 	function select( section ) {
 
 		sceneTab.setClass( '' );
 		projectTab.setClass( '' );
+		settingsTab.setClass( '' );
 
 		scene.setDisplay( 'none' );
 		project.setDisplay( 'none' );
+		settings.setDisplay( 'none' );
 
 		switch ( section ) {
 			case 'SCENE':
@@ -58,6 +66,10 @@ var Sidebar = function ( editor ) {
 				projectTab.setClass( 'selected' );
 				project.setDisplay( '' );
 				break;
+			case 'SETTINGS':
+				settingsTab.setClass( 'selected' );
+				settings.setDisplay( '' );
+				break;
 		}
 
 	}