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: Simplified layout (thanks to @emackey for teaching me basics of css :P)
Also moved some more ui.js styles to the app's css.

Mr.doob 12 years ago
parent
1b3da84d98
commit
9b1f0fff34
3 changed files with 33 additions and 11 deletions
Unified View Show Diff Stats
  1. 19 4
      editor/index.html
  2. 13 4
      editor/js/UI.js
  3. 1 3
      editor/js/ui/Sidebar.js

+ 19 - 4
editor/index.html
View File 

@@ -3,6 +3,10 @@
 
 	<head>
 
 	<head>
 
 		<title>three.js editor</title>
 
 		<title>three.js editor</title>
 
 		<style>
 
 		<style>
 
+			html, body {
 
+				height: 100%;
 
+			}
 
+
 
 			body {
 
 			body {
 
 				font-family: Arial, sans-serif;
 
 				font-family: Arial, sans-serif;
 
 				font-size: 14px;
 
 				font-size: 14px;
 
@@ -54,6 +58,16 @@
 
 								background-color: #08f;
 
 								background-color: #08f;
 
 							}
 
 							}
 
 
 
+			.sidebar {
 
+				width: 300px;
 
+				background-color: #eee;
 
+				overflow: auto;
 
+			}
 
+
 
+				.sidebar .Panel {
 
+					margin-bottom: 10px;
 
+				}
 
+
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
@@ -125,8 +139,9 @@
 
 
 
 			var viewport = new Viewport( signals );
 
 			var viewport = new Viewport( signals );
 
 			viewport.setTop( '32px' );
 
 			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 );
 
 			document.body.appendChild( viewport.dom );
 
 
 
 			var menubar = new Menubar( signals );
 
 			var menubar = new Menubar( signals );
 
@@ -135,9 +150,9 @@
 
 			document.body.appendChild( menubar.dom );
 
 			document.body.appendChild( menubar.dom );
 
 
 
 			var sidebar = new Sidebar( signals );
 
 			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.setTop( '32px' );
 
-			sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
 
+			sidebar.setBottom( '0px' );
 
 			document.body.appendChild( sidebar.dom );
 
 			document.body.appendChild( sidebar.dom );
 
 
 
 			document.addEventListener( 'drop', function ( event ) {
 
 			document.addEventListener( 'drop', function ( event ) {

+ 13 - 4
editor/js/UI.js
View File 

@@ -77,9 +77,8 @@ UI.Panel = function ( position ) {
 
 	UI.Element.call( this );
 
 	UI.Element.call( this );
 
 
 
 	var dom = document.createElement( 'div' );
 
 	var dom = document.createElement( 'div' );
 
+	dom.className = 'Panel';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
-	dom.style.marginBottom = '10px';
 
-
 
 	dom.style.userSelect = 'none';
 
 	dom.style.userSelect = 'none';
 
 	dom.style.WebkitUserSelect = 'none';
 
 	dom.style.WebkitUserSelect = 'none';
 
 	dom.style.MozUserSelect = 'none';
 
 	dom.style.MozUserSelect = 'none';
 
@@ -111,6 +110,7 @@ UI.Text = function ( position ) {
 
 	UI.Element.call( this );
 
 	UI.Element.call( this );
 
 
 
 	var dom = document.createElement( 'span' );
 
 	var dom = document.createElement( 'span' );
 
+	dom.className = 'Text';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.cursor = 'default';
 
 	dom.style.cursor = 'default';
 
 
 
@@ -140,6 +140,7 @@ UI.Input = function ( position ) {
 
 	var scope = this;
 
 	var scope = this;
 
 
 
 	var dom = document.createElement( 'input' );
 
 	var dom = document.createElement( 'input' );
 
+	dom.className = 'Input';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.padding = '2px';
 
 	dom.style.padding = '2px';
 
 	dom.style.marginTop = '-2px';
 
 	dom.style.marginTop = '-2px';
 
@@ -194,6 +195,7 @@ UI.Select = function ( position ) {
 
 	var scope = this;
 
 	var scope = this;
 
 
 
 	var dom = document.createElement( 'select' );
 
 	var dom = document.createElement( 'select' );
 
+	dom.className = 'Select';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.width = '64px';
 
 	dom.style.width = '64px';
 
 	dom.style.height = '16px';
 
 	dom.style.height = '16px';
 
@@ -276,6 +278,7 @@ UI.FancySelect = function ( position ) {
 
 	var scope = this;
 
 	var scope = this;
 
 
 
 	var dom = document.createElement( 'div' );
 
 	var dom = document.createElement( 'div' );
 
+	dom.className = 'FancySelect';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.background = '#fff';
 
 	dom.style.background = '#fff';
 
 	dom.style.border = '1px solid #ccc';
 
 	dom.style.border = '1px solid #ccc';
 
@@ -398,8 +401,9 @@ UI.Checkbox = function ( position ) {
 
 	var scope = this;
 
 	var scope = this;
 
 
 
 	var dom = document.createElement( 'input' );
 
 	var dom = document.createElement( 'input' );
 
-	dom.type = 'checkbox';
 
+	dom.className = 'Checkbox';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
+	dom.type = 'checkbox';
 
 
 
 	this.dom = dom;
 
 	this.dom = dom;
 
 
 
@@ -449,13 +453,14 @@ UI.Color = function ( position ) {
 
 	var scope = this;
 
 	var scope = this;
 
 
 
 	var dom = document.createElement( 'input' );
 
 	var dom = document.createElement( 'input' );
 
-	dom.type = 'color';
 
+	dom.className = 'Color';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.width = '64px';
 
 	dom.style.width = '64px';
 
 	dom.style.height = '16px';
 
 	dom.style.height = '16px';
 
 	dom.style.border = '0px';
 
 	dom.style.border = '0px';
 
 	dom.style.padding = '0px';
 
 	dom.style.padding = '0px';
 
 	dom.style.backgroundColor = 'transparent';
 
 	dom.style.backgroundColor = 'transparent';
 
+	dom.type = 'color';
 
 
 
 	this.dom = dom;
 
 	this.dom = dom;
 
 
 
@@ -519,6 +524,7 @@ UI.Number = function ( position ) {
 
 	var scope = this;
 
 	var scope = this;
 
 
 
 	var dom = document.createElement( 'input' );
 
 	var dom = document.createElement( 'input' );
 
+	dom.className = 'Number';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.color = '#0080f0';
 
 	dom.style.color = '#0080f0';
 
 	dom.style.fontSize = '12px';
 
 	dom.style.fontSize = '12px';
 
@@ -679,6 +685,7 @@ UI.Break = function () {
 
 	UI.Element.call( this );
 
 	UI.Element.call( this );
 
 
 
 	var dom = document.createElement( 'br' );
 
 	var dom = document.createElement( 'br' );
 
+	dom.className = 'Break';
 
 
 
 	this.dom = dom;
 
 	this.dom = dom;
 
 
 
@@ -696,6 +703,7 @@ UI.HorizontalRule = function ( position ) {
 
 	UI.Element.call( this );
 
 	UI.Element.call( this );
 
 
 
 	var dom = document.createElement( 'hr' );
 
 	var dom = document.createElement( 'hr' );
 
+	dom.className = 'HorizontalRule';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
 
 
 	this.dom = dom;
 
 	this.dom = dom;
 
@@ -716,6 +724,7 @@ UI.Button = function ( position ) {
 
 	var scope = this;
 
 	var scope = this;
 
 
 
 	var dom = document.createElement( 'button' );
 
 	var dom = document.createElement( 'button' );
 
+	dom.className = 'Button';
 
 	dom.style.position = position || 'relative';
 
 	dom.style.position = position || 'relative';
 
 
 
 	this.dom = dom;
 
 	this.dom = dom;

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

@@ -1,9 +1,7 @@
 
 var Sidebar = function ( signals ) {
 
 var Sidebar = function ( signals ) {
 
 
 
 	var container = new UI.Panel( 'absolute' );
 
 	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.Scene( signals ) );
 
 	container.add( new Sidebar.Object3D( signals ) );
 
 	container.add( new Sidebar.Object3D( signals ) );