Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Editor: Cleaned up menubar.

Mr.doob 12 years ago
parent
bec5849df7
commit
209e17378f
9 changed files with 80 additions and 120 deletions
Unified View Show Diff Stats
  1. 34 0
      editor/index.html
  2. 8 0
      editor/js/UI.js
  3. 14 38
      editor/js/ui/Menubar.Add.js
  4. 5 22
      editor/js/ui/Menubar.Edit.js
  5. 13 34
      editor/js/ui/Menubar.File.js
  6. 5 22
      editor/js/ui/Menubar.Help.js
  7. 1 2
      editor/js/ui/Menubar.js
  8. 0 1
      editor/js/ui/Sidebar.js
  9. 0 1
      editor/js/ui/Viewport.js

+ 34 - 0
editor/index.html
View File 

@@ -14,6 +14,40 @@
 
 				border: 0px;
 
 				border: 0px;
 
 				border-top: 1px solid #ccc;
 
 				border-top: 1px solid #ccc;
 
 			}
 
 			}
 
+
 
+			.menubar {
 
+				background-color: #eee;
 
+				padding: 0px;
 
+				margin: 0px;
 
+			}
 
+
 
+				.menubar .menu {
 
+					float: left;
 
+					width: 50px;
 
+					cursor: pointer;
 
+				}
 
+
 
+					.menubar .menu .options {
 
+						background-color: #fff;
 
+						display: none;
 
+					}
 
+
 
+					.menubar .menu:hover .options {
 
+						display: block;
 
+					}
 
+
 
+
 
+					.menubar .menu .options .option {
 
+						color: #666;
 
+						background-color: transparent;
 
+						padding: 5px 10px;
 
+						margin: 0px !important;
 
+					}
 
+
 
+						.menubar .menu .options .option:hover {
 
+							background-color: #eee;
 
+						}
 
+
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 8 - 0
editor/js/UI.js
View File 

@@ -4,6 +4,14 @@ UI.Element = function () {};
 
 
 
 UI.Element.prototype = {
 
 UI.Element.prototype = {
 
 
 
+	setClass: function ( name ) {
 
+
 
+		this.dom.className = name;
 
+
 
+		return this;
 
+
 
+	},
 
+
 
 	// styles
 
 	// styles
 
 
 
 	setStyle: function ( style, array ) {
 
 	setStyle: function ( style, array ) {

+ 14 - 38
editor/js/ui/Menubar.Add.js
View File 

@@ -1,34 +1,26 @@
 
 Menubar.Add = function ( signals ) {
 
 Menubar.Add = function ( signals ) {
 
 
 
 	var container = new UI.Panel();
 
 	var container = new UI.Panel();
 
-	container.setFloat( 'left' );
 
-	container.setWidth( '50px' );
 
-	container.setCursor( 'pointer' );
 
-	container.onMouseOver( function () { options.setDisplay( '' ) } );
 
-	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
 
-	container.onClick( function () { options.setDisplay( 'none' ) } );
 
+	container.setClass( 'menu' );
 
 
 
 	var title = new UI.Panel();
 
 	var title = new UI.Panel();
 
 	title.setTextContent( 'Add' ).setColor( '#666' );
 
 	title.setTextContent( 'Add' ).setColor( '#666' );
 
 	title.setMargin( '0px' );
 
 	title.setMargin( '0px' );
 
-	title.setPadding( '8px' )
 
+	title.setPadding( '8px' );
 
 	container.add( title );
 
 	container.add( title );
 
 
 
 	//
 
 	//
 
 
 
 	var options = new UI.Panel();
 
 	var options = new UI.Panel();
 
+	options.setClass( 'options' );
 
 	options.setWidth( '140px' );
 
 	options.setWidth( '140px' );
 
-	options.setBackgroundColor( '#ddd' );
 
-	options.setPadding( '0px' );
 
-	options.setBorderTop( 'solid 1px #ccc' );
 
-	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 );
 
 	container.add( options );
 
 
 
 	// add sphere
 
 	// add sphere
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Sphere' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Sphere' );
 
 	option.onClick( function () {
 
 	option.onClick( function () {
 
 
 
 		var radius = 75;
 
 		var radius = 75;
 
@@ -44,12 +36,11 @@ Menubar.Add = function ( signals ) {
 
 	} );
 
 	} );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// add cube
 
 	// add cube
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Cube' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Cube' );
 
 	option.onClick( function () {
 
 	option.onClick( function () {
 
 
 
 		var width = 100;
 
 		var width = 100;
 
@@ -70,12 +61,11 @@ Menubar.Add = function ( signals ) {
 
 	} );
 
 	} );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// add plane
 
 	// add plane
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Plane' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Plane' );
 
 	option.onClick( function () {
 
 	option.onClick( function () {
 
 
 
 		var width = 200;
 
 		var width = 200;
 
@@ -95,18 +85,15 @@ Menubar.Add = function ( signals ) {
 
 	} );
 
 	} );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// divider
 
 	// divider
 
 
 
-	var option = new UI.Panel();
 
-	option.setBackgroundColor( '#ccc' ).setPadding( '1px 12px' );
 
-	options.add( option );
 
+	options.add( new UI.HorizontalRule() );
 
 
 
 	// add directional light
 
 	// add directional light
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Directional light' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Directional light' );
 
 	option.onClick( function () {
 
 	option.onClick( function () {
 
 
 
 		var color = 0xffffff;
 
 		var color = 0xffffff;
 
@@ -125,12 +112,11 @@ Menubar.Add = function ( signals ) {
 
 	} );
 
 	} );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// add point light
 
 	// add point light
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Point light' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Point light' );
 
 	option.onClick( function () {
 
 	option.onClick( function () {
 
 
 
 		var color = 0xffffff;
 
 		var color = 0xffffff;
 
@@ -145,22 +131,12 @@ Menubar.Add = function ( signals ) {
 
 	} );
 
 	} );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// add spot light
 
 	// add spot light
 
 
 
 	// add hemisphere light
 
 	// add hemisphere light
 
 
 
 	// add ambient light
 
 	// add ambient light
 
 
 
-	//
 
-
 
-	function addHoverStyle( element ) {
 
-
 
-		element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
 
-		element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
 
-
 
-	}
 
 
 
 	function createDummyMaterial() {
 
 	function createDummyMaterial() {

+ 5 - 22
editor/js/ui/Menubar.Edit.js
View File 

@@ -1,48 +1,31 @@
 
 Menubar.Edit = function ( signals ) {
 
 Menubar.Edit = function ( signals ) {
 
 
 
 	var container = new UI.Panel();
 
 	var container = new UI.Panel();
 
-	container.setFloat( 'left' );
 
-	container.setWidth( '50px' );
 
-	container.setCursor( 'pointer' );
 
-	container.onMouseOver( function () { options.setDisplay( '' ) } );
 
-	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
 
-	container.onClick( function () { options.setDisplay( 'none' ) } );
 
+	container.setClass( 'menu' );
 
 
 
 	var title = new UI.Panel();
 
 	var title = new UI.Panel();
 
 	title.setTextContent( 'Edit' ).setColor( '#666' );
 
 	title.setTextContent( 'Edit' ).setColor( '#666' );
 
 	title.setMargin( '0px' );
 
 	title.setMargin( '0px' );
 
-	title.setPadding( '8px' )
 
+	title.setPadding( '8px' );
 
 	container.add( title );
 
 	container.add( title );
 
 
 
 	//
 
 	//
 
 
 
 	var options = new UI.Panel();
 
 	var options = new UI.Panel();
 
+	options.setClass( 'options' );
 
 	options.setWidth( '140px' );
 
 	options.setWidth( '140px' );
 
-	options.setBackgroundColor( '#ddd' );
 
-	options.setPadding( '0px' );
 
-	options.setBorderTop( 'solid 1px #ccc' );
 
-	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 );
 
 	container.add( options );
 
 
 
 	// delete
 
 	// delete
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Delete' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Delete' );
 
 	option.onClick( function () { signals.removeSelectedObject.dispatch(); } );
 
 	option.onClick( function () { signals.removeSelectedObject.dispatch(); } );
 
 	options.add( option );
 
 	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;
 
 	return container;
 
 
 
 }
 
 }

+ 13 - 34
editor/js/ui/Menubar.File.js
View File 

@@ -1,84 +1,63 @@
 
 Menubar.File = function ( signals ) {
 
 Menubar.File = function ( signals ) {
 
 
 
 	var container = new UI.Panel();
 
 	var container = new UI.Panel();
 
-	container.setFloat( 'left' );
 
-	container.setWidth( '50px' );
 
-	container.setCursor( 'pointer' );
 
-	container.onMouseOver( function () { options.setDisplay( '' ) } );
 
-	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
 
-	container.onClick( function () { options.setDisplay( 'none' ) } );
 
+	container.setClass( 'menu' );
 
 
 
 	var title = new UI.Panel();
 
 	var title = new UI.Panel();
 
 	title.setTextContent( 'File' ).setColor( '#666' );
 
 	title.setTextContent( 'File' ).setColor( '#666' );
 
 	title.setMargin( '0px' );
 
 	title.setMargin( '0px' );
 
-	title.setPadding( '8px' )
 
+	title.setPadding( '8px' );
 
 	container.add( title );
 
 	container.add( title );
 
 
 
 	//
 
 	//
 
 
 
 	var options = new UI.Panel();
 
 	var options = new UI.Panel();
 
+	options.setClass( 'options' );
 
 	options.setWidth( '140px' );
 
 	options.setWidth( '140px' );
 
-	options.setBackgroundColor( '#ddd' );
 
-	options.setPadding( '0px' );
 
-	options.setBorderTop( 'solid 1px #ccc' );
 
-	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 );
 
 	container.add( options );
 
 
 
 	// open
 
 	// open
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Open' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Open' );
 
 	option.onClick( function () { alert( 'Open' ) } );
 
 	option.onClick( function () { alert( 'Open' ) } );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// reset scene
 
 	// reset scene
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Reset' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Reset' );
 
 	option.onClick( function () { signals.resetScene.dispatch(); } );
 
 	option.onClick( function () { signals.resetScene.dispatch(); } );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// export geometry
 
 	// export geometry
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Export Geometry' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Export Geometry' );
 
 	option.onClick( function () { signals.exportGeometry.dispatch(); } );
 
 	option.onClick( function () { signals.exportGeometry.dispatch(); } );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// export scene
 
 	// export scene
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Export Scene' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Export Scene' );
 
 	option.onClick( function () { signals.exportScene.dispatch(); } );
 
 	option.onClick( function () { signals.exportScene.dispatch(); } );
 
 	options.add( option );
 
 	options.add( option );
 
 
 
-	addHoverStyle( option );
 
-
 
 	// export OBJ
 
 	// export OBJ
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'Export OBJ' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'Export OBJ' );
 
 	option.onClick( function () { alert( 'Export OBJ' ) } );
 
 	option.onClick( function () { alert( 'Export OBJ' ) } );
 
 	options.add( option );
 
 	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;
 
 	return container;
 
 
 
 }
 
 }

+ 5 - 22
editor/js/ui/Menubar.Help.js
View File 

@@ -1,48 +1,31 @@
 
 Menubar.Help = function ( signals ) {
 
 Menubar.Help = function ( signals ) {
 
 
 
 	var container = new UI.Panel();
 
 	var container = new UI.Panel();
 
-	container.setFloat( 'left' );
 
-	container.setWidth( '50px' );
 
-	container.setCursor( 'pointer' );
 
-	container.onMouseOver( function () { options.setDisplay( '' ) } );
 
-	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
 
-	container.onClick( function () { options.setDisplay( 'none' ) } );
 
+	container.setClass( 'menu' );
 
 
 
 	var title = new UI.Panel();
 
 	var title = new UI.Panel();
 
 	title.setTextContent( 'Help' ).setColor( '#666' );
 
 	title.setTextContent( 'Help' ).setColor( '#666' );
 
 	title.setMargin( '0px' );
 
 	title.setMargin( '0px' );
 
-	title.setPadding( '8px' )
 
+	title.setPadding( '8px' );
 
 	container.add( title );
 
 	container.add( title );
 
 
 
 	//
 
 	//
 
 
 
 	var options = new UI.Panel();
 
 	var options = new UI.Panel();
 
+	options.setClass( 'options' );
 
 	options.setWidth( '140px' );
 
 	options.setWidth( '140px' );
 
-	options.setBackgroundColor( '#ddd' );
 
-	options.setPadding( '0px' );
 
-	options.setBorderTop( 'solid 1px #ccc' );
 
-	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 );
 
 	container.add( options );
 
 
 
 	// about
 
 	// about
 
 
 
 	var option = new UI.Panel();
 
 	var option = new UI.Panel();
 
-	option.setTextContent( 'About' ).setColor( '#666' ).setPadding( '6px 12px' );
 
+	option.setClass( 'option' );
 
+	option.setTextContent( 'About' );
 
 	option.onClick( function () { alert( 'About' ) } );
 
 	option.onClick( function () { alert( 'About' ) } );
 
 	options.add( option );
 
 	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;
 
 	return container;
 
 
 
 }
 
 }

+ 1 - 2
editor/js/ui/Menubar.js
View File 

@@ -1,8 +1,7 @@
 
 var Menubar = function ( signals ) {
 
 var Menubar = function ( signals ) {
 
 
 
 	var container = new UI.Panel( 'absolute' );
 
 	var container = new UI.Panel( 'absolute' );
 
-	container.setBackgroundColor( '#eee' );
 
-	container.setPadding( '0px' ).setMargin( '0px' );
 
+	container.setClass( 'menubar' );
 
 
 
 	container.add( new Menubar.File( signals ) );
 
 	container.add( new Menubar.File( signals ) );
 
 	container.add( new Menubar.Edit( signals ) );
 
 	container.add( new Menubar.Edit( signals ) );

+ 0 - 1
editor/js/ui/Sidebar.js
View File 

@@ -3,7 +3,6 @@ var Sidebar = function ( signals ) {
 
 	var container = new UI.Panel( 'absolute' );
 
 	var container = new UI.Panel( 'absolute' );
 
 	container.setWidth( '300px' ).setHeight( '100%' );
 
 	container.setWidth( '300px' ).setHeight( '100%' );
 
 	container.setBackgroundColor( '#eee' );
 
 	container.setBackgroundColor( '#eee' );
 
-	container.setBorderLeft( 'solid 1px #ccc' );
 
 	container.setOverflow( 'auto' );
 
 	container.setOverflow( 'auto' );
 
 
 
 	container.add( new Sidebar.Scene( signals ) );
 
 	container.add( new Sidebar.Scene( signals ) );

+ 0 - 1
editor/js/ui/Viewport.js
View File 

@@ -2,7 +2,6 @@ var Viewport = function ( signals ) {
 
 
 
 	var container = new UI.Panel( 'absolute' );
 
 	var container = new UI.Panel( 'absolute' );
 
 	container.setBackgroundColor( '#aaa' );
 
 	container.setBackgroundColor( '#aaa' );
 
-	container.setBorderTop( 'solid 1px #ccc' );
 
 
 
 	// settings
 
 	// settings