From 9b1f0fff3418569d06e8917acf7d489260571742 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Sat, 22 Dec 2012 19:56:53 +0100 Subject: [PATCH] Editor: Simplified layout (thanks to @emackey for teaching me basics of css :P) Also moved some more ui.js styles to the app's css. --- editor/index.html | 23 +++++++++++++++++++---- editor/js/UI.js | 17 +++++++++++++---- editor/js/ui/Sidebar.js | 4 +--- 3 files changed, 33 insertions(+), 11 deletions(-) diff --git a/editor/index.html b/editor/index.html index 6e8ddded982a5f..1a33e1d9616883 100644 --- a/editor/index.html +++ b/editor/index.html @@ -3,6 +3,10 @@ three.js editor @@ -125,8 +139,9 @@ var viewport = new Viewport( signals ); viewport.setTop( '32px' ); - viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' ); - viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' ); + viewport.setLeft( '0px' ); + viewport.setRight( '300px' ); + viewport.setBottom( '0px' ); document.body.appendChild( viewport.dom ); var menubar = new Menubar( signals ); @@ -135,9 +150,9 @@ document.body.appendChild( menubar.dom ); var sidebar = new Sidebar( signals ); - sidebar.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' ); + sidebar.setRight( '0px' ); sidebar.setTop( '32px' ); - sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' ); + sidebar.setBottom( '0px' ); document.body.appendChild( sidebar.dom ); document.addEventListener( 'drop', function ( event ) { diff --git a/editor/js/UI.js b/editor/js/UI.js index 1104f7aeac2887..ce546f30eb42b9 100644 --- a/editor/js/UI.js +++ b/editor/js/UI.js @@ -77,9 +77,8 @@ UI.Panel = function ( position ) { UI.Element.call( this ); var dom = document.createElement( 'div' ); + dom.className = 'Panel'; dom.style.position = position || 'relative'; - dom.style.marginBottom = '10px'; - dom.style.userSelect = 'none'; dom.style.WebkitUserSelect = 'none'; dom.style.MozUserSelect = 'none'; @@ -111,6 +110,7 @@ UI.Text = function ( position ) { UI.Element.call( this ); var dom = document.createElement( 'span' ); + dom.className = 'Text'; dom.style.position = position || 'relative'; dom.style.cursor = 'default'; @@ -140,6 +140,7 @@ UI.Input = function ( position ) { var scope = this; var dom = document.createElement( 'input' ); + dom.className = 'Input'; dom.style.position = position || 'relative'; dom.style.padding = '2px'; dom.style.marginTop = '-2px'; @@ -194,6 +195,7 @@ UI.Select = function ( position ) { var scope = this; var dom = document.createElement( 'select' ); + dom.className = 'Select'; dom.style.position = position || 'relative'; dom.style.width = '64px'; dom.style.height = '16px'; @@ -276,6 +278,7 @@ UI.FancySelect = function ( position ) { var scope = this; var dom = document.createElement( 'div' ); + dom.className = 'FancySelect'; dom.style.position = position || 'relative'; dom.style.background = '#fff'; dom.style.border = '1px solid #ccc'; @@ -398,8 +401,9 @@ UI.Checkbox = function ( position ) { var scope = this; var dom = document.createElement( 'input' ); - dom.type = 'checkbox'; + dom.className = 'Checkbox'; dom.style.position = position || 'relative'; + dom.type = 'checkbox'; this.dom = dom; @@ -449,13 +453,14 @@ UI.Color = function ( position ) { var scope = this; var dom = document.createElement( 'input' ); - dom.type = 'color'; + dom.className = 'Color'; dom.style.position = position || 'relative'; dom.style.width = '64px'; dom.style.height = '16px'; dom.style.border = '0px'; dom.style.padding = '0px'; dom.style.backgroundColor = 'transparent'; + dom.type = 'color'; this.dom = dom; @@ -519,6 +524,7 @@ UI.Number = function ( position ) { var scope = this; var dom = document.createElement( 'input' ); + dom.className = 'Number'; dom.style.position = position || 'relative'; dom.style.color = '#0080f0'; dom.style.fontSize = '12px'; @@ -679,6 +685,7 @@ UI.Break = function () { UI.Element.call( this ); var dom = document.createElement( 'br' ); + dom.className = 'Break'; this.dom = dom; @@ -696,6 +703,7 @@ UI.HorizontalRule = function ( position ) { UI.Element.call( this ); var dom = document.createElement( 'hr' ); + dom.className = 'HorizontalRule'; dom.style.position = position || 'relative'; this.dom = dom; @@ -716,6 +724,7 @@ UI.Button = function ( position ) { var scope = this; var dom = document.createElement( 'button' ); + dom.className = 'Button'; dom.style.position = position || 'relative'; this.dom = dom; diff --git a/editor/js/ui/Sidebar.js b/editor/js/ui/Sidebar.js index ac0c1a4b9d3c7b..7082a6228efe2b 100644 --- a/editor/js/ui/Sidebar.js +++ b/editor/js/ui/Sidebar.js @@ -1,9 +1,7 @@ var Sidebar = function ( signals ) { var container = new UI.Panel( 'absolute' ); - container.setWidth( '300px' ).setHeight( '100%' ); - container.setBackgroundColor( '#eee' ); - container.setOverflow( 'auto' ); + container.setClass( 'sidebar' ); container.add( new Sidebar.Scene( signals ) ); container.add( new Sidebar.Object3D( signals ) );