Editor: added mouseover styling for menubar items.

editor/js/ui/Menubar.Add.js

@@ -19,25 +19,43 @@ Menubar.Add = function ( signals ) {
 	var options = new UI.Panel();
 	options.setWidth( '140px' );
 	options.setBackgroundColor( '#ddd' );
-	options.setPadding( '10px' );
+	options.setPadding( '0px' );
+	options.setStyle( 'box-shadow', [ '0 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2)' ] );
 	options.setDisplay( 'none' );
 	container.add( options );
 
+	//
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Sphere' ).setColor( '#666' );
+	option.setTextContent( 'Sphere' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { alert( 'Sphere' ) } );
 	options.add( option );
 
+	addHoverStyle( option );
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Cube' ).setColor( '#666' );
+	option.setTextContent( 'Cube' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { alert( 'Cube' ) } );
 	options.add( option );
 
+	addHoverStyle( option );
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Plane' ).setColor( '#666' );
+	option.setTextContent( 'Plane' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { alert( 'Plane' ) } );
 	options.add( option );
 
+	addHoverStyle( option );
+
+	//
+
+	function addHoverStyle( element ) {
+
+		element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
+		element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
+
+	}
+
 	return container;
 
 }

editor/js/ui/Menubar.Edit.js

@@ -19,15 +19,29 @@ Menubar.Edit = function ( signals ) {
 	var options = new UI.Panel();
 	options.setWidth( '140px' );
 	options.setBackgroundColor( '#ddd' );
-	options.setPadding( '10px' );
+	options.setPadding( '0px' );
+	options.setStyle( 'box-shadow', [ '0 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2)' ] );
 	options.setDisplay( 'none' );
 	container.add( options );
 
+	//
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Delete' ).setColor( '#666' );
+	option.setTextContent( 'Delete' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { signals.removeSelectedObject.dispatch(); } );
 	options.add( option );
 
+	addHoverStyle( option );
+
+	//
+
+	function addHoverStyle( element ) {
+
+		element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
+		element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
+
+	}
+
 	return container;
 
 }

editor/js/ui/Menubar.File.js

@@ -19,35 +19,57 @@ Menubar.File = function ( signals ) {
 	var options = new UI.Panel();
 	options.setWidth( '140px' );
 	options.setBackgroundColor( '#ddd' );
-	options.setPadding( '10px' );
+	options.setPadding( '0px' );
+	options.setStyle( 'box-shadow', [ '0 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2)' ] );
 	options.setDisplay( 'none' );
 	container.add( options );
 
+	//
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Open' ).setColor( '#666' );
+	option.setTextContent( 'Open' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { alert( 'Open' ) } );
 	options.add( option );
 
+	addHoverStyle( option );
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Reset' ).setColor( '#666' );
+	option.setTextContent( 'Reset' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { signals.resetScene.dispatch(); } );
 	options.add( option );
 
+	addHoverStyle( option );
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Export Geometry' ).setColor( '#666' );
+	option.setTextContent( 'Export Geometry' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { signals.exportGeometry.dispatch(); } );
 	options.add( option );
 
+	addHoverStyle( option );
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Export Scene' ).setColor( '#666' );
+	option.setTextContent( 'Export Scene' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { signals.exportScene.dispatch(); } );
 	options.add( option );
 
+	addHoverStyle( option );
+
 	var option = new UI.Panel();
-	option.setTextContent( 'Export OBJ' ).setColor( '#666' );
+	option.setTextContent( 'Export OBJ' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { alert( 'Export OBJ' ) } );
 	options.add( option );
 
+	addHoverStyle( option );
+
+	//
+
+	function addHoverStyle( element ) {
+
+		element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
+		element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
+
+	}
+
 	return container;
 
 }

editor/js/ui/Menubar.Help.js

@@ -19,15 +19,27 @@ Menubar.Help = function ( signals ) {
 	var options = new UI.Panel();
 	options.setWidth( '140px' );
 	options.setBackgroundColor( '#ddd' );
-	options.setPadding( '10px' );
+	options.setPadding( '0px' );
+	options.setStyle( 'box-shadow', [ '0 3px 7px rgba(0,0,0,0.05), 3px 3px 7px rgba(0,0,0,0.1)' ] );
 	options.setDisplay( 'none' );
 	container.add( options );
 
 	var option = new UI.Panel();
-	option.setTextContent( 'About' ).setColor( '#666' );
+	option.setTextContent( 'About' ).setColor( '#666' ).setPadding( '6px 12px' );
 	option.onClick( function () { alert( 'About' ) } );
 	options.add( option );
 
+	addHoverStyle( option );
+
+	//
+
+	function addHoverStyle( element ) {
+
+		element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
+		element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
+
+	}
+
 	return container;
 
 }