From 209e17378f5772a2fbf26b88560741f61610ccf4 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Tue, 13 Nov 2012 19:26:52 +0100 Subject: [PATCH] Editor: Cleaned up menubar. --- editor/index.html | 34 +++++++++++++++++++++++ editor/js/UI.js | 8 ++++++ editor/js/ui/Menubar.Add.js | 52 ++++++++++-------------------------- editor/js/ui/Menubar.Edit.js | 27 ++++--------------- editor/js/ui/Menubar.File.js | 47 +++++++++----------------------- editor/js/ui/Menubar.Help.js | 27 ++++--------------- editor/js/ui/Menubar.js | 3 +-- editor/js/ui/Sidebar.js | 1 - editor/js/ui/Viewport.js | 1 - 9 files changed, 80 insertions(+), 120 deletions(-) diff --git a/editor/index.html b/editor/index.html index 4501643035..de77a7a67a 100644 --- a/editor/index.html +++ b/editor/index.html @@ -14,6 +14,40 @@ border: 0px; 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; + } + diff --git a/editor/js/UI.js b/editor/js/UI.js index 23f5a0ce0d..5f2c489aea 100644 --- a/editor/js/UI.js +++ b/editor/js/UI.js @@ -4,6 +4,14 @@ UI.Element = function () {}; UI.Element.prototype = { + setClass: function ( name ) { + + this.dom.className = name; + + return this; + + }, + // styles setStyle: function ( style, array ) { diff --git a/editor/js/ui/Menubar.Add.js b/editor/js/ui/Menubar.Add.js index ceaacd47a1..8d36639965 100644 --- a/editor/js/ui/Menubar.Add.js +++ b/editor/js/ui/Menubar.Add.js @@ -1,34 +1,26 @@ Menubar.Add = function ( signals ) { 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(); title.setTextContent( 'Add' ).setColor( '#666' ); title.setMargin( '0px' ); - title.setPadding( '8px' ) + title.setPadding( '8px' ); container.add( title ); // var options = new UI.Panel(); + options.setClass( 'options' ); 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 ); // add sphere var option = new UI.Panel(); - option.setTextContent( 'Sphere' ).setColor( '#666' ).setPadding( '6px 12px' ); + option.setClass( 'option' ); + option.setTextContent( 'Sphere' ); option.onClick( function () { var radius = 75; @@ -44,12 +36,11 @@ Menubar.Add = function ( signals ) { } ); options.add( option ); - addHoverStyle( option ); - // add cube var option = new UI.Panel(); - option.setTextContent( 'Cube' ).setColor( '#666' ).setPadding( '6px 12px' ); + option.setClass( 'option' ); + option.setTextContent( 'Cube' ); option.onClick( function () { var width = 100; @@ -70,12 +61,11 @@ Menubar.Add = function ( signals ) { } ); options.add( option ); - addHoverStyle( option ); - // add plane var option = new UI.Panel(); - option.setTextContent( 'Plane' ).setColor( '#666' ).setPadding( '6px 12px' ); + option.setClass( 'option' ); + option.setTextContent( 'Plane' ); option.onClick( function () { var width = 200; @@ -95,18 +85,15 @@ Menubar.Add = function ( signals ) { } ); options.add( option ); - addHoverStyle( option ); - // divider - var option = new UI.Panel(); - option.setBackgroundColor( '#ccc' ).setPadding( '1px 12px' ); - options.add( option ); + options.add( new UI.HorizontalRule() ); // add directional light var option = new UI.Panel(); - option.setTextContent( 'Directional light' ).setColor( '#666' ).setPadding( '6px 12px' ); + option.setClass( 'option' ); + option.setTextContent( 'Directional light' ); option.onClick( function () { var color = 0xffffff; @@ -125,12 +112,11 @@ Menubar.Add = function ( signals ) { } ); options.add( option ); - addHoverStyle( option ); - // add point light var option = new UI.Panel(); - option.setTextContent( 'Point light' ).setColor( '#666' ).setPadding( '6px 12px' ); + option.setClass( 'option' ); + option.setTextContent( 'Point light' ); option.onClick( function () { var color = 0xffffff; @@ -145,22 +131,12 @@ Menubar.Add = function ( signals ) { } ); options.add( option ); - addHoverStyle( option ); - // add spot light // add hemisphere 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() { diff --git a/editor/js/ui/Menubar.Edit.js b/editor/js/ui/Menubar.Edit.js index 7a3a6e3ff9..08ae5dd2a5 100644 --- a/editor/js/ui/Menubar.Edit.js +++ b/editor/js/ui/Menubar.Edit.js @@ -1,48 +1,31 @@ Menubar.Edit = function ( signals ) { 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(); title.setTextContent( 'Edit' ).setColor( '#666' ); title.setMargin( '0px' ); - title.setPadding( '8px' ) + title.setPadding( '8px' ); container.add( title ); // var options = new UI.Panel(); + options.setClass( 'options' ); 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 ); // delete 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(); } ); 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; } diff --git a/editor/js/ui/Menubar.File.js b/editor/js/ui/Menubar.File.js index eb62704ee7..4ac39668be 100644 --- a/editor/js/ui/Menubar.File.js +++ b/editor/js/ui/Menubar.File.js @@ -1,84 +1,63 @@ Menubar.File = function ( signals ) { 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(); title.setTextContent( 'File' ).setColor( '#666' ); title.setMargin( '0px' ); - title.setPadding( '8px' ) + title.setPadding( '8px' ); container.add( title ); // var options = new UI.Panel(); + options.setClass( 'options' ); 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 ); // open var option = new UI.Panel(); - option.setTextContent( 'Open' ).setColor( '#666' ).setPadding( '6px 12px' ); + option.setClass( 'option' ); + option.setTextContent( 'Open' ); option.onClick( function () { alert( 'Open' ) } ); options.add( option ); - addHoverStyle( option ); - // reset scene 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(); } ); options.add( option ); - addHoverStyle( option ); - // export geometry 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(); } ); options.add( option ); - addHoverStyle( option ); - // export scene 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(); } ); options.add( option ); - addHoverStyle( option ); - // export OBJ 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' ) } ); 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; } diff --git a/editor/js/ui/Menubar.Help.js b/editor/js/ui/Menubar.Help.js index ade3e9d43d..aec856d60c 100644 --- a/editor/js/ui/Menubar.Help.js +++ b/editor/js/ui/Menubar.Help.js @@ -1,48 +1,31 @@ Menubar.Help = function ( signals ) { 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(); title.setTextContent( 'Help' ).setColor( '#666' ); title.setMargin( '0px' ); - title.setPadding( '8px' ) + title.setPadding( '8px' ); container.add( title ); // var options = new UI.Panel(); + options.setClass( 'options' ); 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 ); // about var option = new UI.Panel(); - option.setTextContent( 'About' ).setColor( '#666' ).setPadding( '6px 12px' ); + option.setClass( 'option' ); + option.setTextContent( 'About' ); 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; } diff --git a/editor/js/ui/Menubar.js b/editor/js/ui/Menubar.js index c298584909..cfd61cce1d 100644 --- a/editor/js/ui/Menubar.js +++ b/editor/js/ui/Menubar.js @@ -1,8 +1,7 @@ var Menubar = function ( signals ) { 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.Edit( signals ) ); diff --git a/editor/js/ui/Sidebar.js b/editor/js/ui/Sidebar.js index 77cb1fb550..ac0c1a4b9d 100644 --- a/editor/js/ui/Sidebar.js +++ b/editor/js/ui/Sidebar.js @@ -3,7 +3,6 @@ var Sidebar = function ( signals ) { var container = new UI.Panel( 'absolute' ); container.setWidth( '300px' ).setHeight( '100%' ); container.setBackgroundColor( '#eee' ); - container.setBorderLeft( 'solid 1px #ccc' ); container.setOverflow( 'auto' ); container.add( new Sidebar.Scene( signals ) ); diff --git a/editor/js/ui/Viewport.js b/editor/js/ui/Viewport.js index b44f92e4c8..f5af59ded8 100644 --- a/editor/js/ui/Viewport.js +++ b/editor/js/ui/Viewport.js @@ -2,7 +2,6 @@ var Viewport = function ( signals ) { var container = new UI.Panel( 'absolute' ); container.setBackgroundColor( '#aaa' ); - container.setBorderTop( 'solid 1px #ccc' ); // settings -- GitLab