Editor: Improve UI layout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: mrdoob

editor/css/main.css

@@ -103,7 +103,7 @@ hr {
 
 	.TabbedPanel .Panels {
 		position: absolute;
-		top: 40px;
+		top: 36px;
 		display: block;
 		width: 100%;
 	}
@@ -303,7 +303,8 @@ hr {
 .Select {
 	color: #666;
 	background-color: #ddd;
-	border: 0px;
+	border: 3px solid #ddd;
+	border-radius: 4px;
 	text-transform: uppercase;
 	cursor: pointer;
 	outline: none;
@@ -318,7 +319,7 @@ hr {
 #resizer {
 	position: absolute;
 	z-index: 2; /* Above #sidebar */
-	top: 32px;
+	top: 36px;
 	right: 350px;
 	width: 5px;
 	bottom: 0px;
@@ -339,7 +340,7 @@ hr {
 
 #viewport {
 	position: absolute;
-	top: 32px;
+	top: 36px;
 	left: 0;
 	right: 350px;
 	bottom: 0;
@@ -352,7 +353,7 @@ hr {
 
 #script {
 	position: absolute;
-	top: 32px;
+	top: 36px;
 	left: 0;
 	right: 350px;
 	bottom: 0;
@@ -361,7 +362,7 @@ hr {
 
 #player {
 	position: absolute;
-	top: 32px;
+	top: 36px;
 	left: 0;
 	right: 350px;
 	bottom: 0;
@@ -370,7 +371,7 @@ hr {
 #menubar {
 	position: absolute;
 	width: 100%;
-	height: 32px;
+	height: 36px;
 	background: #eee;
 	padding: 0;
 	margin: 0;
@@ -395,7 +396,7 @@ hr {
 			display: inline-block;
 			color: #888;
 			margin: 0;
-			padding: 8px;
+			padding: 10px;
 			line-height: 16px;
 		}
 
@@ -406,6 +407,7 @@ hr {
 			border: 1px solid #ccc;
 			border-radius: 4px;
 			font-size: 9px;
+			line-height: normal;
 			padding: 2px 4px;
 			right: 10px;
 			pointer-events: none;
@@ -435,6 +437,7 @@ hr {
 				color: #666;
 				background-color: transparent;
 				padding: 5px 10px;
+				line-height: 25px;
 				margin: 0 !important;
 			}
 
@@ -472,6 +475,7 @@ hr {
 			color: #bbb;
 			background-color: transparent;
 			padding: 5px 10px;
+			line-height: 25px;
 			margin: 0 !important;
 			cursor: not-allowed;
 		}
@@ -481,7 +485,7 @@ hr {
 #sidebar {
 	position: absolute;
 	right: 0;
-	top: 32px;
+	top: 36px;
 	bottom: 0;
 	width: 350px;
 	background: #eee;
@@ -530,15 +534,26 @@ hr {
 
 #toolbar {
 	position: absolute;
-	left: 10px;
-	top: 42px;
-	width: 32px;
+	left: calc(50% - 175px);
+	transform: translateX(-50%);
+	bottom: 20px;
+	height: 32px;
 	background: #eee;
 	text-align: center;
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	border-radius: 6px;
+	border: 3px solid #eee;
+	overflow: hidden;
 }
 
 	#toolbar .Button, #toolbar .Input {
 		height: 32px;
+		border-radius: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 		#toolbar .Button img {
@@ -617,22 +632,22 @@ hr {
 	#viewport {
 		left: 0;
 		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
+		top: 36px;
+		height: calc(100% - 356px);
 	}
 
 	#script {
 		left: 0;
 		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
+		top: 36px;
+		height: calc(100% - 356px);
 	}
 
 	#player {
 		left: 0;
 		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
+		top: 36px;
+		height: calc(100% - 356px);
 	}
 
 	#sidebar {
@@ -642,6 +657,12 @@ hr {
 		bottom: 0;
 	}
 
+	#toolbar {
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 330px;
+	}
+
 }
 
 /* DARK MODE */
@@ -672,6 +693,7 @@ hr {
 	.Select {
 		color: #aaa;
 		background-color: #222;
+		border-color: #222;
 	}
 
 		.Select:hover {
@@ -734,6 +756,7 @@ hr {
 
 	#toolbar {
 		background-color: #111;
+		border-color: #111;
 	}
 
 		#toolbar img {

editor/js/Toolbar.js

@@ -1,4 +1,4 @@
-import { UIPanel, UIButton, UICheckbox } from './libs/ui.js';
+import { UIPanel, UIButton } from './libs/ui.js';
 
 function Toolbar( editor ) {
 
@@ -50,15 +50,6 @@ function Toolbar( editor ) {
 	} );
 	container.add( scale );
 
-	const local = new UICheckbox( false );
-	local.dom.title = strings.getKey( 'toolbar/local' );
-	local.onChange( function () {
-
-		signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );
-
-	} );
-	container.add( local );
-
 	//
 
 	signals.transformModeChanged.add( function ( mode ) {

editor/js/Viewport.Controls.js

@@ -8,12 +8,10 @@ function ViewportControls( editor ) {
 	container.setPosition( 'absolute' );
 	container.setRight( '10px' );
 	container.setTop( '10px' );
-	container.setColor( '#ffffff' );
 
 	// camera
 
 	const cameraSelect = new UISelect();
-	cameraSelect.setMarginLeft( '10px' );
 	cameraSelect.setMarginRight( '10px' );
 	cameraSelect.onChange( function () {
 

editor/js/Viewport.Info.js

@@ -9,7 +9,7 @@ function ViewportInfo( editor ) {
 	container.setId( 'info' );
 	container.setPosition( 'absolute' );
 	container.setLeft( '10px' );
-	container.setBottom( '20px' );
+	container.setBottom( '50px' );
 	container.setFontSize( '12px' );
 	container.setColor( '#fff' );
 	container.setTextTransform( 'lowercase' );
@@ -133,7 +133,7 @@ function ViewportInfo( editor ) {
 		samplesText.setHidden( ! isRealisticShading );
 		samplesUnitText.setHidden( ! isRealisticShading );
 
-		container.setBottom( isRealisticShading ? '32px' : '20px' );
+		container.setBottom( isRealisticShading ? '62px' : '50px' );
 
 	} );
 

editor/js/Viewport.ViewHelper.js

@@ -8,11 +8,13 @@ class ViewHelper extends ViewHelperBase {
 
 		super( editorCamera, container.dom );
 
+		this.location.top = 30;
+
 		const panel = new UIPanel();
 		panel.setId( 'viewHelper' );
 		panel.setPosition( 'absolute' );
 		panel.setRight( '0px' );
-		panel.setBottom( '0px' );
+		panel.setTop( '30px' );
 		panel.setHeight( '128px' );
 		panel.setWidth( '128px' );