Editor: Moved theme selection to menubar.

editor/index.html

@@ -52,6 +52,7 @@
 		<script src="js/Menubar.File.js"></script>
 		<script src="js/Menubar.Edit.js"></script>
 		<script src="js/Menubar.Add.js"></script>
+		<script src="js/Menubar.View.js"></script>
 		<script src="js/Menubar.Help.js"></script>
 		<script src="js/Sidebar.js"></script>
 		<script src="js/Sidebar.Renderer.js"></script>

editor/js/Menubar.View.js

@@ -0,0 +1,52 @@
+Menubar.View = function ( editor ) {
+
+	var container = new UI.Panel();
+	container.setClass( 'menu' );
+	container.onMouseOver( function () { options.setDisplay( 'block' ) } );
+	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
+	container.onClick( function () { options.setDisplay( 'block' ) } );
+
+	var title = new UI.Panel();
+	title.setTextContent( 'View' );
+	title.setMargin( '0px' );
+	title.setPadding( '8px' );
+	container.add( title );
+
+	//
+
+	var options = new UI.Panel();
+	options.setClass( 'options' );
+	options.setDisplay( 'none' );
+	container.add( options );
+
+	// themes
+
+	var themeLink = document.getElementById( 'theme' );
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Light theme' );
+	option.onClick( function () {
+
+		themeLink.href = 'css/light.css';
+
+	} );
+	options.add( option );
+
+	// about
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Dark theme' );
+	option.onClick( function () {
+
+		themeLink.href = 'css/dark.css';
+
+	} );
+	options.add( option );
+
+	//
+
+	return container;
+
+}

editor/js/Menubar.js

@@ -5,6 +5,7 @@ var Menubar = function ( editor ) {
 	container.add( new Menubar.File( editor ) );
 	container.add( new Menubar.Edit( editor ) );
 	container.add( new Menubar.Add( editor ) );
+	container.add( new Menubar.View( editor ) );
 	container.add( new Menubar.Help( editor ) );
 
 	return container;

editor/js/Sidebar.Renderer.js

@@ -37,29 +37,6 @@ Sidebar.Renderer = function ( editor ) {
 
 	container.add( rendererTypeRow );
 
-	// Quick hack to expose a user control to switch themes - for easy review purposes only
-
-	var themeLink = document.getElementById( 'theme' );
-	var themeRow = new UI.Panel();
-	var originalColor;
-
-	var theme = new UI.Select().setOptions( [ 'Light', 'Dark' ] ).setWidth( '150px ').setColor( '#444' ).setFontSize( '12px ');
-	theme.onChange( function () {
-
-		switch ( this.value ) {
-
-			case '0': themeLink.href = 'css/light.css'; break;
-			case '1': themeLink.href = 'css/dark.css'; break;
-
-		}
-
-	} );
-
-	themeRow.add( new UI.Text('Theme').setWidth('90px') );
-	themeRow.add( theme );
-
-	container.add( themeRow );
-
 	//
 
 	function updateRenderer() {