Editor: trying to restyle menubar.

This is quite tedious. I think we may need to switch to CSS sooner than later.

editor/js/ui/Menubar.Add.js

@@ -1,7 +1,7 @@
 Menubar.Add = function ( signals ) {
 
 	var container = new UI.Panel( 'absolute' );
-	container.setBackgroundColor( '#eee' );
+	container.setBackgroundColor( '#ccc' );
 	container.setWidth( '120px' );
 	container.setPadding( '10px' );
 

editor/js/ui/Menubar.Edit.js

@@ -1,7 +1,7 @@
 Menubar.Edit = function ( signals ) {
 
 	var container = new UI.Panel( 'absolute' );
-	container.setBackgroundColor( '#eee' );
+	container.setBackgroundColor( '#ccc' );
 	container.setWidth( '120px' );
 	container.setPadding( '10px' );
 

editor/js/ui/Menubar.File.js

@@ -1,7 +1,7 @@
 Menubar.File = function ( signals ) {
 
 	var container = new UI.Panel( 'absolute' );
-	container.setBackgroundColor( '#eee' );
+	container.setBackgroundColor( '#ccc' );
 	container.setWidth( '120px' );
 	container.setPadding( '10px' );
 

editor/js/ui/Menubar.Help.js

@@ -1,7 +1,7 @@
 Menubar.Help = function ( signals ) {
 
 	var container = new UI.Panel( 'absolute' );
-	container.setBackgroundColor( '#eee' );
+	container.setBackgroundColor( '#ccc' );
 	container.setWidth( '120px' );
 	container.setPadding( '10px' );
 

editor/js/ui/Menubar.js

@@ -2,13 +2,15 @@ var Menubar = function ( signals ) {
 
 	var container = new UI.Panel( 'absolute' );
 	container.setBackgroundColor( '#eee' );
+	container.setPadding( '0px' ).setMargin( '0px' );
 
 	var options = new UI.Panel();
-	options.setMargin( '8px' );
+	options.setBackgroundColor( '#eee' );
+	options.setPadding( '0px' ).setMargin( '0px' );
 
 	// File
 
-	var optionFile = new UI.Text().setValue( 'File' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionFileClick );
+	var optionFile = new UI.Text().setValue( 'File' ).setDisplay( 'inline-block' ).setColor( '#666' ).setPadding( '8px 15px' ).onMouseOver( onOptionFileClick ).onMouseOver( onFileMouseOver ).onMouseOut( onFileMouseOut );
 	options.add( optionFile );
 
 	var optionFileMenu = new Menubar.File().setTop( '32px' ).setDisplay( 'none' ).onMouseOut( closeAll );
@@ -16,7 +18,7 @@ var Menubar = function ( signals ) {
 
 	// Edit
 
-	var optionEdit = new UI.Text().setValue( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionEditClick );
+	var optionEdit = new UI.Text().setValue( 'Edit' ).setDisplay( 'inline-block' ).setColor( '#666' ).setPadding( '8px 15px' ).onMouseOver( onOptionEditClick ).onMouseOver( onEditMouseOver ).onMouseOut( onEditMouseOut );
 	options.add( optionEdit );
 
 	var optionEditMenu = new Menubar.Edit().setTop( '32px' ).setLeft( '50px' ).setDisplay( 'none' ).onMouseOut( closeAll );
@@ -24,7 +26,7 @@ var Menubar = function ( signals ) {
 
 	// Add
 
-	var optionAdd = new UI.Text().setValue( 'Add' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionAddClick );
+	var optionAdd = new UI.Text().setValue( 'Add' ).setDisplay( 'inline-block' ).setColor( '#666' ).setPadding( '8px 15px' ).onMouseOver( onOptionAddClick ).onMouseOver( onAddMouseOver ).onMouseOut( onAddMouseOut );
 	options.add( optionAdd );
 
 	var optionAddMenu = new Menubar.Add().setTop( '32px' ).setLeft( '90px' ).setDisplay( 'none' ).onMouseOut( closeAll );
@@ -33,7 +35,7 @@ var Menubar = function ( signals ) {
 
 	// Help
 
-	var optionHelp = new UI.Text().setValue( 'Help' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionHelpClick );
+	var optionHelp = new UI.Text().setValue( 'Help' ).setDisplay( 'inline-block' ).setColor( '#666' ).setPadding( '8px 15px' ).onMouseOver( onOptionHelpClick ).onMouseOver( onHelpMouseOver ).onMouseOut( onHelpMouseOut );
 	options.add( optionHelp );
 
 	var optionHelpMenu = new Menubar.Help().setTop( '32px' ).setLeft( '140px' ).setDisplay( 'none' ).onMouseOut( closeAll );
@@ -81,6 +83,68 @@ var Menubar = function ( signals ) {
 
 	}
 
+	function setStyleOver( item ) {
+
+		item.dom.style.background = "#444";
+		item.dom.style.color = "#eee";
+
+	}
+
+	function setStyleOut( item ) {
+
+		item.dom.style.background = "transparent";
+		item.dom.style.color = "#000";
+
+	}
+
+	function onFileMouseOver() {
+
+		setStyleOver( optionFile );
+
+	}
+
+	function onFileMouseOut() {
+
+		setStyleOut( optionFile );
+
+	}
+
+	function onEditMouseOver() {
+
+		setStyleOver( optionEdit );
+
+	}
+
+	function onEditMouseOut() {
+
+		setStyleOut( optionEdit );
+
+	}
+
+	function onAddMouseOver() {
+
+		setStyleOver( optionAdd );
+
+	}
+
+	function onAddMouseOut() {
+
+		setStyleOut( optionAdd );
+
+	}
+
+	function onHelpMouseOver() {
+
+		setStyleOver( optionHelp );
+
+	}
+
+	function onHelpMouseOut() {
+
+		setStyleOut( optionHelp );
+
+	}
+
 	return container;
 
 }