From ef96f1fabe63a3607ad4d7074d5b43b90ac7194e Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Tue, 22 May 2012 22:07:33 +0200
Subject: [PATCH] GUI: Renamed Panel to SideBar. Plus some modularisation.

---
 gui/index.html                                | 13 ++--
 gui/js/ui/MenuBar.js                          | 14 +++++
 gui/js/ui/{Panel.js => SideBar.Properties.js} | 62 ++++++-------------
 gui/js/ui/SideBar.js                          | 12 ++++
 4 files changed, 53 insertions(+), 48 deletions(-)
 create mode 100644 gui/js/ui/MenuBar.js
 rename gui/js/ui/{Panel.js => SideBar.Properties.js} (56%)
 create mode 100644 gui/js/ui/SideBar.js

diff --git a/gui/index.html b/gui/index.html
index 4a9b90fcc5..f82cb81db0 100644
--- a/gui/index.html
+++ b/gui/index.html
@@ -25,7 +25,8 @@
 
 		<script type="text/javascript" src="js/UI.js"></script>
 		<script type="text/javascript" src="js/ui/Viewport.js"></script>
-		<script type="text/javascript" src="js/ui/Panel.js"></script>
+		<script type="text/javascript" src="js/ui/SideBar.js"></script>
+		<script type="text/javascript" src="js/ui/SideBar.Properties.js"></script>
 		<script type="text/javascript" src="js/ui/MenuBar.js"></script>
 
 		<script>
@@ -49,11 +50,11 @@
 			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
 			document.body.appendChild( viewport.dom );
 
-			var panel = new Panel( signals );
-			panel.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
-			panel.setTop( '32px' );
-			panel.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
-			document.body.appendChild( panel.dom );
+			var sidebar = new SideBar( signals );
+			sidebar.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
+			sidebar.setTop( '32px' );
+			sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
+			document.body.appendChild( sidebar.dom );
 
 			var menubar = new MenuBar( signals );
 			menubar.setWidth( '100%' );
diff --git a/gui/js/ui/MenuBar.js b/gui/js/ui/MenuBar.js
new file mode 100644
index 0000000000..ad40dcbf75
--- /dev/null
+++ b/gui/js/ui/MenuBar.js
@@ -0,0 +1,14 @@
+var MenuBar = function ( signals ) {
+
+	var container = new UI.Panel( 'absolute' );
+	container.setBackgroundColor( '#eee' );
+
+	var options = new UI.Panel();
+	options.setMargin( '8px' );
+	options.add( new UI.Text().setText( 'File' ).setColor( '#666' ).setMarginRight( '10px' ) );
+	options.add( new UI.Text().setText( 'About' ).setColor( '#666' ).setMarginRight( '10px' ) );
+	container.add( options );
+
+	return container;
+
+}
diff --git a/gui/js/ui/Panel.js b/gui/js/ui/SideBar.Properties.js
similarity index 56%
rename from gui/js/ui/Panel.js
rename to gui/js/ui/SideBar.Properties.js
index 7a4e3dc301..6c4d83213e 100644
--- a/gui/js/ui/Panel.js
+++ b/gui/js/ui/SideBar.Properties.js
@@ -1,80 +1,58 @@
-var Panel = function ( signals ) {
-
-	var container = new UI.Panel( 'absolute' );
-	container.setWidth( '300px' ).setHeight( '100%' );
-	container.setBackgroundColor( '#eee' );
+var Properties = function ( signals ) {
 
 	var selected = null;
 
-	// Properties
-
-	var properties = new UI.Panel();
-	properties.setPadding( '8px' );
-	properties.setBorderTop( '1px solid #ccc' );
+	var container = new UI.Panel();
+	container.setPadding( '8px' );
+	container.setBorderTop( '1px solid #ccc' );
 
-	properties.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) );
 
-	properties.add( new UI.Break() );
-	properties.add( new UI.Break() );
+	container.add( new UI.Break() );
+	container.add( new UI.Break() );
 
-	properties.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
 
 	var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
 	var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
 	var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
 
-	properties.add( positionX, positionY, positionZ );
+	container.add( positionX, positionY, positionZ );
 
-	properties.add( new UI.HorizontalRule() );
+	container.add( new UI.HorizontalRule() );
 
-	properties.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
 
 	var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
 	var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
 	var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
 
-	properties.add( rotationX, rotationY, rotationZ );
+	container.add( rotationX, rotationY, rotationZ );
 
-	properties.add( new UI.HorizontalRule() );
+	container.add( new UI.HorizontalRule() );
 
-	properties.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
 
 	var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).onChanged( update );
 	var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).onChanged( update );
 	var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).onChanged( update );
 
-	properties.add( scaleX, scaleY, scaleZ );
+	container.add( scaleX, scaleY, scaleZ );
 
-	properties.add( new UI.Break() );
-	properties.add( new UI.Break() );
-
-	container.add( properties );
+	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
 
 
 	// Geometry
 
-	var properties = new UI.Panel();
-	properties.setMargin( '8px' );
-
-	properties.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
-
-	properties.add( new UI.Break() );
-	properties.add( new UI.Break() );
-
-	container.add( properties );
+	container.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
 
+	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
 
 	// Material
 
-	var properties = new UI.Panel();
-	properties.setMargin( '8px' );
-
-	properties.add( new UI.Text().setText( 'MATERIAL' ).setColor( '#666' ) );
-
-	properties.add( new UI.Break() );
-	properties.add( new UI.Break() );
+	container.add( new UI.Text().setText( 'MATERIAL' ).setColor( '#666' ) );
 
-	container.add( properties );
+	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
 
 
 	// Events
diff --git a/gui/js/ui/SideBar.js b/gui/js/ui/SideBar.js
new file mode 100644
index 0000000000..8b2fd1f5a6
--- /dev/null
+++ b/gui/js/ui/SideBar.js
@@ -0,0 +1,12 @@
+var SideBar = function ( signals ) {
+
+	var container = new UI.Panel( 'absolute' );
+	container.setWidth( '300px' ).setHeight( '100%' );
+	container.setBackgroundColor( '#eee' );
+
+	var properties = new Properties( signals );
+	container.add( properties );
+
+	return container;
+
+}
-- 
GitLab