Editor: UI improvements.

editor/css/dark.css

@@ -1,45 +1,53 @@
-.Outliner {
-	color: #868686;
-	background: #222;
-	padding: 0;
-	width: 100%;
-	height: 140px;
-	font-size: 12px;
-	cursor: default;
-	overflow: auto;
+button {
+	color: #aaa;
+	background-color: #222;
+	border: 0px;
+	padding: 5px 8px;
+	text-transform: uppercase;
+	cursor: pointer;
 	outline: none;
 }
 
-	.Outliner .option {
-		padding: 4px;
-		white-space: nowrap;
+	button:hover {
+		color: #ccc;
+		background-color: #444;
 	}
 
-	.Outliner .option:hover {
-		background-color: rgba(21,60,94,0.5);
+	button.selected {
+		color: #fff;
+		background-color: #08f;
 	}
 
-
-	.Outliner .option.active {
-		background-color: rgba(21,60,94,1);
-	}
-
-.Panel.Collapsible.collapsed .Static .Button {
-	border-left-color: #444;
-}
-
-.Panel.Collapsible:not(.collapsed) .Static .Button {
-	border-top-color: #444;
+input, textarea {
+	background-color: #222;
+	border: 1px solid transparent;
+	color: #888;
 }
 
 input.Number {
-	color: #2A75B7!important;
+	color: #08f!important;
 	font-size: 12px;
 	border: 0px;
 	padding: 2px;
 	cursor: col-resize;
 }
 
+select {
+	color: #aaa;
+	background-color: #222;
+	border: 0px;
+	text-transform: uppercase;
+	cursor: pointer;
+	outline: none;
+}
+
+	select:hover {
+		color: #ccc;
+		background-color: #444;
+	}
+
+/* UI */
+
 #viewport {
 	position: absolute;
 	top: 32px;
@@ -154,14 +162,6 @@ input.Number {
 		vertical-align: middle;
 	}
 
-	#sidebar input,
-	#sidebar textarea,
-	#sidebar select {
-		background: #222;
-		border: 1px solid transparent;
-		color: #888;
-	}
-
 	#sidebar .Panel {
 		color: #888;
 		padding: 10px;
@@ -219,3 +219,37 @@ input.Number {
 	#toolbar button {
 		margin-right: 6px;
 	}
+
+.Outliner {
+	color: #888;
+	background: #222;
+	padding: 0;
+	width: 100%;
+	height: 140px;
+	font-size: 12px;
+	cursor: default;
+	overflow: auto;
+	outline: none;
+}
+
+	.Outliner .option {
+		padding: 4px;
+		white-space: nowrap;
+	}
+
+	.Outliner .option:hover {
+		background-color: rgba(21,60,94,0.5);
+	}
+
+
+	.Outliner .option.active {
+		background-color: rgba(21,60,94,1);
+	}
+
+.Panel.Collapsible.collapsed .Static .Button {
+	border-left-color: #444;
+}
+
+.Panel.Collapsible:not(.collapsed) .Static .Button {
+	border-top-color: #444;
+}

editor/css/light.css

@@ -1,37 +1,49 @@
-.Outliner {
-	color: #444;
-	background: #fff;
-	padding: 0;
-	width: 100%;
-	height: 140px;
-	font-size: 12px;
-	cursor: default;
-	overflow: auto;
+button {
+	color: #555;
+	background-color: #ddd;
+	border: 0px;
+	padding: 5px 8px;
+	text-transform: uppercase;
+	cursor: pointer;
 	outline: none;
 }
 
-	.Outliner .option {
-		padding: 4px;
-		color: #666;
-		white-space: nowrap;
+	button:hover {
+		background-color: #fff;
 	}
 
-	.Outliner .option:hover {
-		background-color: rgba(0,0,0,0.02);
+	button.selected {
+		background-color: #fff;
 	}
 
-	.Outliner .option.active {
-		background-color: rgba(0,0,0,0.04);
-	}
+input, textarea {
+	border: 1px solid transparent;
+	color: #444;
+}
 
 input.Number {
-	color: #0080f0!important;
+	color: #08f!important;
 	font-size: 12px;
 	border: 0px;
 	padding: 2px;
 	cursor: col-resize;
 }
 
+select {
+	color: #666;
+	background-color: #ddd;
+	border: 0px;
+	text-transform: uppercase;
+	cursor: pointer;
+	outline: none;
+}
+
+	select:hover {
+		background-color: #fff;
+	}
+
+/* UI */
+
 #viewport {
 	position: absolute;
 	top: 32px;
@@ -147,13 +159,6 @@ input.Number {
 		vertical-align: middle;
 	}
 
-	#sidebar input,
-	#sidebar textarea,
-	#sidebar select {
-		border: 1px solid transparent;
-		color: #444;
-	}
-
 	#sidebar .Panel {
 		color: #888;
 		padding: 10px;
@@ -207,3 +212,29 @@ input.Number {
 	#toolbar button {
 		margin-right: 6px;
 	}
+
+.Outliner {
+	color: #444;
+	background-color: #fff;
+	padding: 0;
+	width: 100%;
+	height: 140px;
+	font-size: 12px;
+	cursor: default;
+	overflow: auto;
+	outline: none !important;
+}
+
+	.Outliner .option {
+		padding: 4px;
+		color: #666;
+		white-space: nowrap;
+	}
+
+	.Outliner .option:hover {
+		background-color: rgba(0,0,0,0.02);
+	}
+
+	.Outliner .option.active {
+		background-color: rgba(0,0,0,0.04);
+	}

editor/js/Config.js

@@ -18,8 +18,7 @@ var Config = function ( name ) {
 
 		'settings/history': false,
 
-		'ui/sidebar/animation/collapsed': true,
-		'ui/sidebar/script/collapsed': true
+		'ui/sidebar/animation/collapsed': true
 	};
 
 	if ( window.localStorage[ name ] === undefined ) {

editor/js/Sidebar.Geometry.js

@@ -96,8 +96,8 @@ Sidebar.Geometry = function ( editor ) {
 	// uuid
 
 	var geometryUUIDRow = new UI.Row();
-	var geometryUUID = new UI.Input().setWidth( '115px' ).setFontSize( '12px' ).setDisabled( true );
-	var geometryUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
+	var geometryUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
+	var geometryUUIDRenew = new UI.Button( 'New' ).setMarginLeft( '7px' ).onClick( function () {
 
 		geometryUUID.setValue( THREE.Math.generateUUID() );
 

editor/js/Sidebar.Material.js

@@ -25,13 +25,13 @@ Sidebar.Material = function ( editor ) {
 
 	} ) );
 
-	managerRow.add( new UI.Button( 'Copy' ).onClick( function () {
+	managerRow.add( new UI.Button( 'Copy' ).setMarginLeft( '4px' ).onClick( function () {
 
 		copiedMaterial = currentObject.material;
 
 	} ) );
 
-	managerRow.add( new UI.Button( 'Paste' ).onClick( function () {
+	managerRow.add( new UI.Button( 'Paste' ).setMarginLeft( '4px' ).onClick( function () {
 
 		if ( copiedMaterial === undefined ) return;
 
@@ -71,8 +71,8 @@ Sidebar.Material = function ( editor ) {
 	// uuid
 
 	var materialUUIDRow = new UI.Row();
-	var materialUUID = new UI.Input().setWidth( '115px' ).setFontSize( '12px' ).setDisabled( true );
-	var materialUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
+	var materialUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
+	var materialUUIDRenew = new UI.Button( 'New' ).setMarginLeft( '7px' ).onClick( function () {
 
 		materialUUID.setValue( THREE.Math.generateUUID() );
 		update();

editor/js/Sidebar.Object.js

@@ -65,8 +65,8 @@ Sidebar.Object = function ( editor ) {
 	// uuid
 
 	var objectUUIDRow = new UI.Row();
-	var objectUUID = new UI.Input().setWidth( '115px' ).setFontSize( '12px' ).setDisabled( true );
-	var objectUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
+	var objectUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
+	var objectUUIDRenew = new UI.Button( 'New' ).setMarginLeft( '7px' ).onClick( function () {
 
 		objectUUID.setValue( THREE.Math.generateUUID() );
 

editor/js/Sidebar.Script.js

@@ -6,16 +6,11 @@ Sidebar.Script = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( editor.config.getKey( 'ui/sidebar/script/collapsed' ) );
-	container.onCollapsedChange( function ( boolean ) {
-
-		editor.config.setKey( 'ui/sidebar/script/collapsed', boolean );
-
-	} );
+	var container = new UI.Panel();
 	container.setDisplay( 'none' );
 
-	container.addStatic( new UI.Text( 'Script' ).setTextTransform( 'uppercase' ) );
+	container.add( new UI.Text( 'Script' ).setTextTransform( 'uppercase' ) );
+	container.add( new UI.Break() );
 	container.add( new UI.Break() );
 
 	//
@@ -43,6 +38,7 @@ Sidebar.Script = function ( editor ) {
 	function update() {
 
 		scriptsContainer.clear();
+		scriptsContainer.setDisplay( 'none' );
 
 		var object = editor.selected;
 
@@ -56,6 +52,8 @@ Sidebar.Script = function ( editor ) {
 
 		if ( scripts !== undefined ) {
 
+			scriptsContainer.setDisplay( 'block' );
+
 			for ( var i = 0; i < scripts.length; i ++ ) {
 
 				( function ( object, script ) {

editor/js/Toolbar.js

@@ -14,27 +14,50 @@ var Toolbar = function ( editor ) {
 
 	// translate / rotate / scale
 
-	var translate = new UI.Button( 'translate ( w )' ).onClick( function () {
+	var translate = new UI.Button( 'translate' );
+	translate.dom.title = 'W';
+	translate.dom.className = 'Button selected';
+	translate.onClick( function () {
 
 		signals.transformModeChanged.dispatch( 'translate' );
 
 	} );
 	buttons.add( translate );
 
-	var rotate = new UI.Button( 'rotate ( e )' ).onClick( function () {
+	var rotate = new UI.Button( 'rotate' );
+	rotate.dom.title = 'E';
+	rotate.onClick( function () {
 
 		signals.transformModeChanged.dispatch( 'rotate' );
 
 	} );
 	buttons.add( rotate );
 
-	var scale = new UI.Button( 'scale ( r )' ).onClick( function () {
+	var scale = new UI.Button( 'scale' );
+	scale.dom.title = 'R';
+	scale.onClick( function () {
 
 		signals.transformModeChanged.dispatch( 'scale' );
 
 	} );
 	buttons.add( scale );
 
+	signals.transformModeChanged.add( function ( mode ) {
+
+		translate.dom.classList.remove( 'selected' );
+		rotate.dom.classList.remove( 'selected' );
+		scale.dom.classList.remove( 'selected' );
+
+		switch ( mode ) {
+
+			case 'translate': translate.dom.classList.add( 'selected' ); break;
+			case 'rotate': rotate.dom.classList.add( 'selected' ); break;
+			case 'scale': scale.dom.classList.add( 'selected' ); break;
+
+		}
+
+	} );
+
 	// grid
 
 	var grid = new UI.Number( 25 ).setWidth( '40px' ).onChange( update );