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.
volos · Dec 22, 2012 · 9b1f0ff · 9b1f0ff
1 parent 1b3da84
commit 9b1f0ff
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/editor/index.html b/editor/index.html
@@ -3,6 +3,10 @@
 	<head>
 		<title>three.js editor</title>
 		<style>
+			html, body {
+				height: 100%;
+			}
+
 			body {
 				font-family: Arial, sans-serif;
 				font-size: 14px;
@@ -54,6 +58,16 @@
 								background-color: #08f;
 							}
 
+			.sidebar {
+				width: 300px;
+				background-color: #eee;
+				overflow: auto;
+			}
+
+				.sidebar .Panel {
+					margin-bottom: 10px;
+				}
+
 		</style>
 	</head>
 	<body>
@@ -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
@@ -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
@@ -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 ) );