Editor: Improved Background UI.

mrdoob · Jun 20, 2020 · 18439fe · 18439fe
1 parent 1af3252
commit 18439fe
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 36 deletions.
diff --git a/editor/css/main.css b/editor/css/main.css
@@ -26,6 +26,13 @@ input {
 	vertical-align: middle;
 }
 
+	input[type="color"]::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+	input[type="color"]::-webkit-color-swatch {
+		border: none;
+	}
+
 textarea {
 	tab-size: 4;
 	white-space: pre;

diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js
@@ -173,7 +173,7 @@ function SidebarScene( editor ) {
 		'None': 'None',
 		'Color': 'Color',
 		'Texture': 'Texture',
-		'Equirectangular': 'Equirectangular'
+		'Equirectangular': 'Equirect'
 
 	} ).setWidth( '150px' );
 	backgroundType.onChange( function () {
@@ -187,49 +187,29 @@ function SidebarScene( editor ) {
 	backgroundRow.add( new UIText( strings.getKey( 'sidebar/scene/background' ) ).setWidth( '90px' ) );
 	backgroundRow.add( backgroundType );
 
-	container.add( backgroundRow );
-
-	//
-
-	var colorRow = new UIRow();
-	colorRow.setMarginLeft( '90px' );
-
-	var backgroundColor = new UIColor().setValue( '#000000' ).onChange( onBackgroundChanged );
-	colorRow.add( backgroundColor );
-
-	container.add( colorRow );
-
-	//
-
-	var textureRow = new UIRow();
-	textureRow.setDisplay( 'none' );
-	textureRow.setMarginLeft( '90px' );
+	var backgroundColor = new UIColor().setValue( '#000000' ).setMarginLeft( '8px' ).onChange( onBackgroundChanged );
+	backgroundRow.add( backgroundColor );
 
-	var backgroundTexture = new UITexture().onChange( onBackgroundChanged );
-	textureRow.add( backgroundTexture );
+	var backgroundTexture = new UITexture().setMarginLeft( '8px' ).onChange( onBackgroundChanged );
+	backgroundTexture.setDisplay( 'none' );
+	backgroundRow.add( backgroundTexture );
 
-	container.add( textureRow );
-
-	//
+	var backgroundEquirectangularTexture = new UITexture().setMarginLeft( '8px' ).onChange( onBackgroundChanged );
+	backgroundEquirectangularTexture.setDisplay( 'none' );
+	backgroundRow.add( backgroundEquirectangularTexture );
 
-	var equirectangularRow = new UIRow();
-	equirectangularRow.setDisplay( 'none' );
-	equirectangularRow.setMarginLeft( '90px' );
-
-	var backgroundEquirectangularTexture = new UITexture().onChange( onBackgroundChanged );
-	equirectangularRow.add( backgroundEquirectangularTexture );
-
-	container.add( equirectangularRow );
+	container.add( backgroundRow );
 
 	//
 
 	function refreshBackgroundUI() {
 
 		var type = backgroundType.getValue();
 
-		colorRow.setDisplay( type === 'Color' ? '' : 'none' );
-		textureRow.setDisplay( type === 'Texture' ? '' : 'none' );
-		equirectangularRow.setDisplay( type === 'Equirectangular' ? '' : 'none' );
+		backgroundType.setWidth( type === 'None' ? '150px' : '110px' );
+		backgroundColor.setDisplay( type === 'Color' ? '' : 'none' );
+		backgroundTexture.setDisplay( type === 'Texture' ? '' : 'none' );
+		backgroundEquirectangularTexture.setDisplay( type === 'Equirectangular' ? '' : 'none' );
 
 	}
 

diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js
@@ -491,8 +491,8 @@ function UIColor() {
 
 	var dom = document.createElement( 'input' );
 	dom.className = 'Color';
-	dom.style.width = '64px';
-	dom.style.height = '17px';
+	dom.style.width = '32px';
+	dom.style.height = '16px';
 	dom.style.border = '0px';
 	dom.style.padding = '2px';
 	dom.style.backgroundColor = 'transparent';