Editor: Increased Sidebar panel width from 300px to 350px.

mrdoob · Feb 20, 2024 · ba3e2fc · ba3e2fc
1 parent 2315ae8
commit ba3e2fc
Show file tree

Hide file tree

Showing 42 changed files with 173 additions and 172 deletions.
diff --git a/editor/css/main.css b/editor/css/main.css
@@ -67,7 +67,7 @@ textarea, input { outline: none; } /* osx */
 	position: relative;
 	display: block;
 	width: 100%;
-	min-width: 260px;
+	min-width: 335px;
 }
 
 .TabbedPanel .Tabs {
@@ -77,7 +77,7 @@ textarea, input { outline: none; } /* osx */
 }
 
 	.TabbedPanel .Tabs .Tab {
-		padding: 10px;
+		padding: 8px 9px;
 		text-transform: uppercase;
 	}
 
@@ -93,7 +93,7 @@ textarea, input { outline: none; } /* osx */
 	background-color: #fff;
 	padding: 0;
 	width: 100%;
-	min-height: 140px;
+	min-height: 180px;
 	font-size: 12px;
 	cursor: default;
 	overflow: auto;
@@ -293,7 +293,7 @@ select {
 #resizer {
 	position: absolute;
 	top: 32px;
-	right: 295px;
+	right: 345px;
 	width: 5px;
 	bottom: 0px;
 	/* background-color: rgba(255,0,0,0.5); */
@@ -304,7 +304,7 @@ select {
 	position: absolute;
 	top: 32px;
 	left: 0;
-	right: 300px;
+	right: 350px;
 	bottom: 0;
 }
 
@@ -317,7 +317,7 @@ select {
 	position: absolute;
 	top: 32px;
 	left: 0;
-	right: 300px;
+	right: 350px;
 	bottom: 0;
 	opacity: 0.9;
 }
@@ -326,7 +326,7 @@ select {
 	position: absolute;
 	top: 32px;
 	left: 0;
-	right: 300px;
+	right: 350px;
 	bottom: 0;
 }
 
@@ -409,7 +409,7 @@ select {
 	right: 0;
 	top: 32px;
 	bottom: 0;
-	width: 300px;
+	width: 350px;
 	background: #eee;
 	overflow: auto;
 }
@@ -431,6 +431,12 @@ select {
 		margin-bottom: 10px;
 	}
 
+	#sidebar .Row .Label {
+
+		width: 120px;
+
+	}
+
 #tabs {
 	background-color: #ddd;
 	border-top: 1px solid #ccc;
@@ -470,7 +476,7 @@ select {
 	background-color: #fff;
 	padding: 0;
 	width: 100%;
-	height: 140px;
+	height: 180px;
 	font-size: 12px;
 	cursor: default;
 	overflow: auto;

diff --git a/editor/js/Sidebar.Animation.js b/editor/js/Sidebar.Animation.js
@@ -89,7 +89,7 @@ function SidebarAnimation( editor ) {
 
 	} );
 
-	mixerTimeScaleRow.add( new UIText( strings.getKey( 'sidebar/animations/timescale' ) ).setWidth( '90px' ) );
+	mixerTimeScaleRow.add( new UIText( strings.getKey( 'sidebar/animations/timescale' ) ).setClass( 'Label' ) );
 	mixerTimeScaleRow.add( mixerTimeScaleNumber );
 
 	container.add( mixerTimeScaleRow );

diff --git a/editor/js/Sidebar.Geometry.BoxGeometry.js b/editor/js/Sidebar.Geometry.BoxGeometry.js
@@ -18,7 +18,7 @@ function GeometryParametersPanel( editor, object ) {
 	const widthRow = new UIRow();
 	const width = new UINumber( parameters.width ).onChange( update );
 
-	widthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/width' ) ).setWidth( '90px' ) );
+	widthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/width' ) ).setClass( 'Label' ) );
 	widthRow.add( width );
 
 	container.add( widthRow );
@@ -28,7 +28,7 @@ function GeometryParametersPanel( editor, object ) {
 	const heightRow = new UIRow();
 	const height = new UINumber( parameters.height ).onChange( update );
 
-	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/height' ) ).setWidth( '90px' ) );
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/height' ) ).setClass( 'Label' ) );
 	heightRow.add( height );
 
 	container.add( heightRow );
@@ -38,7 +38,7 @@ function GeometryParametersPanel( editor, object ) {
 	const depthRow = new UIRow();
 	const depth = new UINumber( parameters.depth ).onChange( update );
 
-	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depth' ) ).setWidth( '90px' ) );
+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depth' ) ).setClass( 'Label' ) );
 	depthRow.add( depth );
 
 	container.add( depthRow );
@@ -48,7 +48,7 @@ function GeometryParametersPanel( editor, object ) {
 	const widthSegmentsRow = new UIRow();
 	const widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/widthseg' ) ).setWidth( '90px' ) );
+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/widthseg' ) ).setClass( 'Label' ) );
 	widthSegmentsRow.add( widthSegments );
 
 	container.add( widthSegmentsRow );
@@ -58,7 +58,7 @@ function GeometryParametersPanel( editor, object ) {
 	const heightSegmentsRow = new UIRow();
 	const heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
-	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/heightseg' ) ).setWidth( '90px' ) );
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/heightseg' ) ).setClass( 'Label' ) );
 	heightSegmentsRow.add( heightSegments );
 
 	container.add( heightSegmentsRow );
@@ -68,7 +68,7 @@ function GeometryParametersPanel( editor, object ) {
 	const depthSegmentsRow = new UIRow();
 	const depthSegments = new UIInteger( parameters.depthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	depthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depthseg' ) ).setWidth( '90px' ) );
+	depthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depthseg' ) ).setClass( 'Label' ) );
 	depthSegmentsRow.add( depthSegments );
 
 	container.add( depthSegmentsRow );

diff --git a/editor/js/Sidebar.Geometry.BufferGeometry.js b/editor/js/Sidebar.Geometry.BufferGeometry.js
@@ -24,7 +24,7 @@ function SidebarGeometryBufferGeometry( editor ) {
 
 			const attributesRow = new UIRow();
 
-			const textAttributes = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/attributes' ) ).setWidth( '90px' );
+			const textAttributes = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/attributes' ) ).setClass( 'Label' );
 			attributesRow.add( textAttributes );
 
 			const containerAttributes = new UISpan().setDisplay( 'inline-block' ).setVerticalAlign( 'middle' ).setWidth( '160px' );
@@ -65,7 +65,7 @@ function SidebarGeometryBufferGeometry( editor ) {
 
 				const rowMorphAttributes = new UIRow();
 
-				const textMorphAttributes = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/morphAttributes' ) ).setWidth( '90px' );
+				const textMorphAttributes = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/morphAttributes' ) ).setClass( 'Label' );
 				rowMorphAttributes.add( textMorphAttributes );
 
 				const containerMorphAttributes = new UISpan().setDisplay( 'inline-block' ).setVerticalAlign( 'middle' ).setWidth( '160px' );
@@ -87,7 +87,7 @@ function SidebarGeometryBufferGeometry( editor ) {
 
 				const rowMorphRelative = new UIRow();
 
-				const textMorphRelative = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/morphRelative' ) ).setWidth( '90px' );
+				const textMorphRelative = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/morphRelative' ) ).setClass( 'Label' );
 				rowMorphRelative.add( textMorphRelative );
 
 				const checkboxMorphRelative = new UICheckbox().setValue( geometry.morphTargetsRelative ).setDisabled( true );

diff --git a/editor/js/Sidebar.Geometry.CapsuleGeometry.js b/editor/js/Sidebar.Geometry.CapsuleGeometry.js
@@ -18,7 +18,7 @@ function GeometryParametersPanel( editor, object ) {
 	const radiusRow = new UIRow();
 	const radius = new UINumber( parameters.radius ).onChange( update );
 
-	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/radius' ) ).setWidth( '90px' ) );
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/radius' ) ).setClass( 'Label' ) );
 	radiusRow.add( radius );
 
 	container.add( radiusRow );
@@ -28,7 +28,7 @@ function GeometryParametersPanel( editor, object ) {
 	const lengthRow = new UIRow();
 	const length = new UINumber( parameters.length ).onChange( update );
 
-	lengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/length' ) ).setWidth( '90px' ) );
+	lengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/length' ) ).setClass( 'Label' ) );
 	lengthRow.add( length );
 
 	container.add( lengthRow );
@@ -38,7 +38,7 @@ function GeometryParametersPanel( editor, object ) {
 	const capSegmentsRow = new UIRow();
 	const capSegments = new UINumber( parameters.capSegments ).onChange( update );
 
-	capSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/capseg' ) ).setWidth( '90px' ) );
+	capSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/capseg' ) ).setClass( 'Label' ) );
 	capSegmentsRow.add( capSegments );
 
 	container.add( capSegmentsRow );
@@ -48,7 +48,7 @@ function GeometryParametersPanel( editor, object ) {
 	const radialSegmentsRow = new UIRow();
 	const radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
-	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/radialseg' ) ).setWidth( '90px' ) );
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/radialseg' ) ).setClass( 'Label' ) );
 	radialSegmentsRow.add( radialSegments );
 
 	container.add( radialSegmentsRow );

diff --git a/editor/js/Sidebar.Geometry.CircleGeometry.js b/editor/js/Sidebar.Geometry.CircleGeometry.js
@@ -18,7 +18,7 @@ function GeometryParametersPanel( editor, object ) {
 	const radiusRow = new UIRow();
 	const radius = new UINumber( parameters.radius ).onChange( update );
 
-	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/radius' ) ).setWidth( '90px' ) );
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/radius' ) ).setClass( 'Label' ) );
 	radiusRow.add( radius );
 
 	container.add( radiusRow );
@@ -28,7 +28,7 @@ function GeometryParametersPanel( editor, object ) {
 	const segmentsRow = new UIRow();
 	const segments = new UIInteger( parameters.segments ).setRange( 3, Infinity ).onChange( update );
 
-	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/segments' ) ).setWidth( '90px' ) );
+	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/segments' ) ).setClass( 'Label' ) );
 	segmentsRow.add( segments );
 
 	container.add( segmentsRow );
@@ -38,7 +38,7 @@ function GeometryParametersPanel( editor, object ) {
 	const thetaStartRow = new UIRow();
 	const thetaStart = new UINumber( parameters.thetaStart * THREE.MathUtils.RAD2DEG ).setStep( 10 ).onChange( update );
 
-	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/thetastart' ) ).setWidth( '90px' ) );
+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/thetastart' ) ).setClass( 'Label' ) );
 	thetaStartRow.add( thetaStart );
 
 	container.add( thetaStartRow );
@@ -48,7 +48,7 @@ function GeometryParametersPanel( editor, object ) {
 	const thetaLengthRow = new UIRow();
 	const thetaLength = new UINumber( parameters.thetaLength * THREE.MathUtils.RAD2DEG ).setStep( 10 ).onChange( update );
 
-	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/thetalength' ) ).setWidth( '90px' ) );
+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/thetalength' ) ).setClass( 'Label' ) );
 	thetaLengthRow.add( thetaLength );
 
 	container.add( thetaLengthRow );

diff --git a/editor/js/Sidebar.Geometry.CylinderGeometry.js b/editor/js/Sidebar.Geometry.CylinderGeometry.js
@@ -18,7 +18,7 @@ function GeometryParametersPanel( editor, object ) {
 	const radiusTopRow = new UIRow();
 	const radiusTop = new UINumber( parameters.radiusTop ).onChange( update );
 
-	radiusTopRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiustop' ) ).setWidth( '90px' ) );
+	radiusTopRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiustop' ) ).setClass( 'Label' ) );
 	radiusTopRow.add( radiusTop );
 
 	container.add( radiusTopRow );
@@ -28,7 +28,7 @@ function GeometryParametersPanel( editor, object ) {
 	const radiusBottomRow = new UIRow();
 	const radiusBottom = new UINumber( parameters.radiusBottom ).onChange( update );
 
-	radiusBottomRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiusbottom' ) ).setWidth( '90px' ) );
+	radiusBottomRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiusbottom' ) ).setClass( 'Label' ) );
 	radiusBottomRow.add( radiusBottom );
 
 	container.add( radiusBottomRow );
@@ -38,7 +38,7 @@ function GeometryParametersPanel( editor, object ) {
 	const heightRow = new UIRow();
 	const height = new UINumber( parameters.height ).onChange( update );
 
-	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/height' ) ).setWidth( '90px' ) );
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/height' ) ).setClass( 'Label' ) );
 	heightRow.add( height );
 
 	container.add( heightRow );
@@ -48,7 +48,7 @@ function GeometryParametersPanel( editor, object ) {
 	const radialSegmentsRow = new UIRow();
 	const radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
-	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radialsegments' ) ).setWidth( '90px' ) );
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radialsegments' ) ).setClass( 'Label' ) );
 	radialSegmentsRow.add( radialSegments );
 
 	container.add( radialSegmentsRow );
@@ -58,7 +58,7 @@ function GeometryParametersPanel( editor, object ) {
 	const heightSegmentsRow = new UIRow();
 	const heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
-	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/heightsegments' ) ).setWidth( '90px' ) );
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/heightsegments' ) ).setClass( 'Label' ) );
 	heightSegmentsRow.add( heightSegments );
 
 	container.add( heightSegmentsRow );
@@ -68,7 +68,7 @@ function GeometryParametersPanel( editor, object ) {
 	const openEndedRow = new UIRow();
 	const openEnded = new UICheckbox( parameters.openEnded ).onChange( update );
 
-	openEndedRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/openended' ) ).setWidth( '90px' ) );
+	openEndedRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/openended' ) ).setClass( 'Label' ) );
 	openEndedRow.add( openEnded );
 
 	container.add( openEndedRow );

diff --git a/editor/js/Sidebar.Geometry.DodecahedronGeometry.js b/editor/js/Sidebar.Geometry.DodecahedronGeometry.js
@@ -18,7 +18,7 @@ function GeometryParametersPanel( editor, object ) {
 	const radiusRow = new UIRow();
 	const radius = new UINumber( parameters.radius ).onChange( update );
 
-	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/radius' ) ).setWidth( '90px' ) );
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/radius' ) ).setClass( 'Label' ) );
 	radiusRow.add( radius );
 
 	container.add( radiusRow );
@@ -28,7 +28,7 @@ function GeometryParametersPanel( editor, object ) {
 	const detailRow = new UIRow();
 	const detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
-	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/detail' ) ).setWidth( '90px' ) );
+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/detail' ) ).setClass( 'Label' ) );
 	detailRow.add( detail );
 
 	container.add( detailRow );