Editor: Refactored Settings

Author: mrdoob

editor/js/Sidebar.Project.js

@@ -10,11 +10,10 @@ function SidebarProject( editor ) {
 
 	var container = new UISpan();
 
-	var projectsettings = new UIPanel();
-	projectsettings.setBorderTop( '0' );
-	projectsettings.setPaddingTop( '20px' );
-
-	container.add( projectsettings );
+	var settings = new UIPanel();
+	settings.setBorderTop( '0' );
+	settings.setPaddingTop( '20px' );
+	container.add( settings );
 
 	// Title
 
@@ -28,7 +27,7 @@ function SidebarProject( editor ) {
 	titleRow.add( new UIText( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
 	titleRow.add( title );
 
-	projectsettings.add( titleRow );
+	settings.add( titleRow );
 
 	// Editable
 
@@ -42,7 +41,7 @@ function SidebarProject( editor ) {
 	editableRow.add( new UIText( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
 	editableRow.add( editable );
 
-	projectsettings.add( editableRow );
+	settings.add( editableRow );
 
 	// WebVR
 
@@ -56,7 +55,7 @@ function SidebarProject( editor ) {
 	vrRow.add( new UIText( strings.getKey( 'sidebar/project/vr' ) ).setWidth( '90px' ) );
 	vrRow.add( vr );
 
-	projectsettings.add( vrRow );
+	settings.add( vrRow );
 
 	//
 

editor/js/Sidebar.Settings.Viewport.js

@@ -1,4 +1,4 @@
-import { UIDiv, UIText, UIRow } from './libs/ui.js';
+import { UIPanel, UIText, UIRow } from './libs/ui.js';
 import { UIBoolean } from './libs/ui.three.js';
 
 
@@ -7,7 +7,11 @@ function SidebarSettingsViewport( editor ) {
 	var signals = editor.signals;
 	var strings = editor.strings;
 
-	var container = new UIDiv();
+	var container = new UIPanel();
+
+	var headerRow = new UIRow();
+	headerRow.add( new UIText( strings.getKey( 'sidebar/settings/viewport' ).toUpperCase() ) );
+	container.add( headerRow );
 
 	// grid
 

editor/js/Sidebar.Settings.js

@@ -1,17 +1,20 @@
-import { UIPanel, UIRow, UISelect, UIText, UIInteger } from './libs/ui.js';
+import { UIPanel, UIRow, UISelect, UISpan, UIText, UIInteger } from './libs/ui.js';
 
 import { SidebarSettingsViewport } from './Sidebar.Settings.Viewport.js';
 import { SidebarSettingsShortcuts } from './Sidebar.Settings.Shortcuts.js';
+import { SidebarSettingsHistory } from './Sidebar.Settings.History.js';
 
 function SidebarSettings( editor ) {
 
 	var config = editor.config;
 	var strings = editor.strings;
 
-	var container = new UIPanel();
-	container.setBorderTop( '0' );
-	container.setPaddingTop( '20px' );
-	container.setPaddingBottom( '20px' );
+	var container = new UISpan();
+
+	var settings = new UIPanel();
+	settings.setBorderTop( '0' );
+	settings.setPaddingTop( '20px' );
+	container.add( settings );
 
 	// language
 
@@ -42,7 +45,7 @@ function SidebarSettings( editor ) {
 	languageRow.add( new UIText( strings.getKey( 'sidebar/settings/language' ) ).setWidth( '90px' ) );
 	languageRow.add( language );
 
-	container.add( languageRow );
+	settings.add( languageRow );
 
 	// export precision
 
@@ -60,11 +63,13 @@ function SidebarSettings( editor ) {
 	exportPrecisionRow.add( new UIText( strings.getKey( 'sidebar/settings/exportPrecision' ) ).setWidth( '90px' ) );
 	exportPrecisionRow.add( exportPrecision );
 
-	container.add( exportPrecisionRow );
+	settings.add( exportPrecisionRow );
 
 	//
 
 	container.add( new SidebarSettingsViewport( editor ) );
+	container.add( new SidebarSettingsShortcuts( editor ) );
+	container.add( new SidebarSettingsHistory( editor ) );
 
 	return container;
 

editor/js/Sidebar.js

@@ -6,8 +6,6 @@ import { SidebarScript } from './Sidebar.Script.js';
 import { SidebarAnimation } from './Sidebar.Animation.js';
 import { SidebarProject } from './Sidebar.Project.js';
 import { SidebarSettings } from './Sidebar.Settings.js';
-import { SidebarSettingsShortcuts } from './Sidebar.Settings.Shortcuts.js';
-import { SidebarSettingsHistory } from './Sidebar.Settings.History.js';
 
 function Sidebar( editor ) {
 
@@ -22,14 +20,8 @@ function Sidebar( editor ) {
 		new SidebarAnimation( editor ),
 		new SidebarScript( editor )
 	);
-
 	var project = new SidebarProject( editor );
-
-	var settings = new UISpan().add(
-		new SidebarSettings( editor ),
-		new SidebarSettingsShortcuts( editor ),
-		new SidebarSettingsHistory( editor )
-	);
+	var settings = new SidebarSettings( editor );
 
 	container.addTab( 'scene', strings.getKey( 'sidebar/scene' ), scene );
 	container.addTab( 'project', strings.getKey( 'sidebar/project' ), project );

editor/js/Strings.js

@@ -311,6 +311,7 @@ function Strings( config ) {
 			'sidebar/settings/shortcuts/undo': 'Undo',
 			'sidebar/settings/shortcuts/focus': 'Focus',
 
+			'sidebar/settings/viewport': 'Viewport',
 			'sidebar/settings/viewport/grid': 'Grid',
 			'sidebar/settings/viewport/helpers': 'Helpers',
 
@@ -636,6 +637,7 @@ function Strings( config ) {
 			'sidebar/settings/shortcuts/undo': 'Annuler',
 			'sidebar/settings/shortcuts/focus': 'Focus',
 
+			'sidebar/settings/viewport': 'Viewport',
 			'sidebar/settings/viewport/grid': 'Grille',
 			'sidebar/settings/viewport/helpers': 'Helpers',
 
@@ -945,6 +947,7 @@ function Strings( config ) {
 			'sidebar/settings/shortcuts/undo': '撤销',
 			'sidebar/settings/shortcuts/focus': '聚焦',
 
+			'sidebar/settings/viewport': 'Viewport',
 			'sidebar/settings/viewport/grid': '网格',
 			'sidebar/settings/viewport/helpers': '辅助',