Browse Source

Editor: Restored viewport dimension and moved more properties to the stylesheet.

Mr.doob 12 years ago
parent
commit
a4bb909bfa

+ 4 - 17
editor/index.html

@@ -77,29 +77,16 @@
 
 
 			var editor = new Editor();
 			var editor = new Editor();
 
 
-			var viewport = new Viewport( editor );
-			viewport.setTop( '0' );
-			viewport.setLeft( '0' );
-			viewport.setRight( '0' );
-			viewport.setBottom( '0' );
+			var viewport = new Viewport( editor ).setId( 'viewport' );
 			document.body.appendChild( viewport.dom );
 			document.body.appendChild( viewport.dom );
 
 
-			var toolbar = new Toolbar( editor );
-			toolbar.setBottom( '0px' );
-			toolbar.setLeft( '0px' );
-			toolbar.setRight( '300px' );
-			toolbar.setHeight( '32px' );
+			var toolbar = new Toolbar( editor ).setId( 'toolbar' )
 			document.body.appendChild( toolbar.dom );
 			document.body.appendChild( toolbar.dom );
 
 
-			var menubar = new Menubar( editor );
-			menubar.setWidth( '100%' );
-			menubar.setHeight( '32px' );
+			var menubar = new Menubar( editor ).setId( 'menubar' );
 			document.body.appendChild( menubar.dom );
 			document.body.appendChild( menubar.dom );
 
 
-			var sidebar = new Sidebar( editor );
-			sidebar.setRight( '0px' );
-			sidebar.setTop( '32px' );
-			sidebar.setBottom( '0px' );
+			var sidebar = new Sidebar( editor ).setId( 'sidebar' );
 			document.body.appendChild( sidebar.dom );
 			document.body.appendChild( sidebar.dom );
 
 
 			//
 			//

+ 1 - 1
editor/js/Menubar.js

@@ -1,6 +1,6 @@
 var Menubar = function ( editor ) {
 var Menubar = function ( editor ) {
 
 
-	var container = new UI.Panel().setId( 'menubar' );
+	var container = new UI.Panel();
 
 
 	container.add( new Menubar.File( editor ) );
 	container.add( new Menubar.File( editor ) );
 	container.add( new Menubar.Edit( editor ) );
 	container.add( new Menubar.Edit( editor ) );

+ 1 - 1
editor/js/Sidebar.js

@@ -1,6 +1,6 @@
 var Sidebar = function ( editor ) {
 var Sidebar = function ( editor ) {
 
 
-	var container = new UI.Panel().setId( 'sidebar' );
+	var container = new UI.Panel();
 
 
 	container.add( new Sidebar.Renderer( editor ) );
 	container.add( new Sidebar.Renderer( editor ) );
 	container.add( new Sidebar.Scene( editor ) );
 	container.add( new Sidebar.Scene( editor ) );

+ 1 - 1
editor/js/Toolbar.js

@@ -2,7 +2,7 @@ var Toolbar = function ( editor ) {
 
 
 	var signals = editor.signals;
 	var signals = editor.signals;
 
 
-	var container = new UI.Panel().setId( 'toolbar' );
+	var container = new UI.Panel();
 
 
 	var buttons = new UI.Panel();
 	var buttons = new UI.Panel();
 	container.add( buttons );
 	container.add( buttons );

+ 16 - 0
editor/themes/darkgray/style.css

@@ -82,8 +82,17 @@ input.Number {
 	cursor: col-resize;
 	cursor: col-resize;
 }
 }
 
 
+#viewport {
+	top: 32px;
+	left: 0px;
+	right: 300px;
+	bottom: 32px;
+}
+
 #menubar {
 #menubar {
 	position: absolute;
 	position: absolute;
+	width: 100%;
+	height: 32px;
 	background: url(trans.png);
 	background: url(trans.png);
 	padding: 0px;
 	padding: 0px;
 	margin: 0px;
 	margin: 0px;
@@ -125,6 +134,9 @@ input.Number {
 
 
 #sidebar {
 #sidebar {
 	position: absolute;
 	position: absolute;
+	right: 0px;
+	top: 32px;
+	bottom: 0px;
 	width: 300px;
 	width: 300px;
 	background: url(trans.png);
 	background: url(trans.png);
 	overflow: auto;
 	overflow: auto;
@@ -170,6 +182,10 @@ input.Number {
 
 
 #toolbar {
 #toolbar {
 	position: absolute;
 	position: absolute;
+	left: 0px;
+	right: 300px;
+	bottom: 0px;
+	height: 32px;
 	background: url(trans.png);
 	background: url(trans.png);
 	color: #333;
 	color: #333;
 }
 }

+ 16 - 0
editor/themes/default/style.css

@@ -56,8 +56,17 @@ input.Number {
 	cursor: col-resize;
 	cursor: col-resize;
 }
 }
 
 
+#viewport {
+	top: 32px;
+	left: 0px;
+	right: 300px;
+	bottom: 32px;
+}
+
 #menubar {
 #menubar {
 	position: absolute;
 	position: absolute;
+	width: 100%;
+	height: 32px;
 	background: #eee;
 	background: #eee;
 	padding: 0px;
 	padding: 0px;
 	margin: 0px;
 	margin: 0px;
@@ -98,6 +107,9 @@ input.Number {
 
 
 #sidebar {
 #sidebar {
 	position: absolute;
 	position: absolute;
+	right: 0px;
+	top: 32px;
+	bottom: 0px;
 	width: 300px;
 	width: 300px;
 	background: #eee;
 	background: #eee;
 	overflow: auto;
 	overflow: auto;
@@ -142,6 +154,10 @@ input.Number {
 
 
 #toolbar {
 #toolbar {
 	position: absolute;
 	position: absolute;
+	left: 0px;
+	right: 300px;
+	bottom: 0px;
+	height: 32px;
 	background: #eee;
 	background: #eee;
 	color: #333;
 	color: #333;
 }
 }