Editor: Menubar.View clean up.

editor/css/main.css

@@ -424,7 +424,7 @@ select {
 
 				#menubar .menu .options .option.toggle-on::before {
 
-					content: '✓';
+					content: '✔';
 					font-size: 12px;
 
 				}

editor/js/Menubar.View.js

@@ -17,9 +17,80 @@ function MenubarView( editor ) {
 	options.setClass( 'options' );
 	container.add( options );
 
+	// Helpers
+
+	const states = {
+
+		gridHelper: true,
+		cameraHelpers: true,
+		lightHelpers: true,
+		skeletonHelpers: true
+
+	};
+
+	// Grid Helper
+
+	let option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Grid Helper' ).onClick( function () {
+
+		states.gridHelper = ! states.gridHelper;
+
+		this.toggleClass( 'toggle-on', states.gridHelper );
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} ).toggleClass( 'toggle-on', states.gridHelper );
+
+	options.add( option );
+
+	// Camera Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Camera Helpers' ).onClick( function () {
+
+		states.cameraHelpers = ! states.cameraHelpers;
+
+		this.toggleClass( 'toggle-on', states.cameraHelpers );
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} ).toggleClass( 'toggle-on', states.cameraHelpers );
+
+	options.add( option );
+
+	// Light Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Light Helpers' ).onClick( function () {
+
+		states.lightHelpers = ! states.lightHelpers;
+
+		this.toggleClass( 'toggle-on', states.lightHelpers );
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} ).toggleClass( 'toggle-on', states.lightHelpers );
+
+	options.add( option );
+
+	// Skeleton Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Skeleton Helpers' ).onClick( function () {
+
+		states.skeletonHelpers = ! states.skeletonHelpers;
+
+		this.toggleClass( 'toggle-on', states.skeletonHelpers );
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} ).toggleClass( 'toggle-on', states.skeletonHelpers );
+
+	options.add( option );
+
+	//
+
+	options.add( new UIHorizontalRule() );
+
 	// Fullscreen
 
-	let option = new UIRow();
+	option = new UIRow();
 	option.setClass( 'option' );
 	option.setTextContent( strings.getKey( 'menubar/view/fullscreen' ) );
 	option.onClick( function () {
@@ -105,98 +176,6 @@ function MenubarView( editor ) {
 
 	//
 
-	options.add( new UIHorizontalRule() );
-
-	// Appearance
-
-	const appearanceStates = {
-
-		gridHelper: true,
-		cameraHelpers: true,
-		lightHelpers: true,
-		skeletonHelpers: true
-
-	};
-
-	const appearanceSubmenuTitle = new UIRow().setTextContent( 'Appearance' ).addClass( 'option' ).addClass( 'submenu-title' );
-	appearanceSubmenuTitle.onMouseOver( function () {
-
-		const { top, right } = appearanceSubmenuTitle.dom.getBoundingClientRect();
-		const { paddingTop } = getComputedStyle( this.dom );
-		appearanceSubmenu.setLeft( right + 'px' );
-		appearanceSubmenu.setTop( top - parseFloat( paddingTop ) + 'px' );
-		appearanceSubmenu.setStyle( 'max-height', [ `calc( 100vh - ${top}px )` ] );
-		appearanceSubmenu.setDisplay( 'block' );
-
-	} );
-	appearanceSubmenuTitle.onMouseOut( function () {
-
-		appearanceSubmenu.setDisplay( 'none' );
-
-	} );
-	options.add( appearanceSubmenuTitle );
-
-	const appearanceSubmenu = new UIPanel().setPosition( 'fixed' ).addClass( 'options' ).setDisplay( 'none' );
-	appearanceSubmenuTitle.add( appearanceSubmenu );
-
-	// Appearance / Grid Helper
-
-	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Grid Helper' ).onClick( function () {
-
-		appearanceStates.gridHelper = ! appearanceStates.gridHelper;
-
-		this.toggleClass( 'toggle-on', appearanceStates.gridHelper );
-
-		signals.showHelpersChanged.dispatch( appearanceStates );
-
-	} ).toggleClass( 'toggle-on', appearanceStates.gridHelper );
-
-	appearanceSubmenu.add( option );
-
-	// Appearance / Camera Helpers
-
-	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Camera Helpers' ).onClick( function () {
-
-		appearanceStates.cameraHelpers = ! appearanceStates.cameraHelpers;
-
-		this.toggleClass( 'toggle-on', appearanceStates.cameraHelpers );
-
-		signals.showHelpersChanged.dispatch( appearanceStates );
-
-	} ).toggleClass( 'toggle-on', appearanceStates.cameraHelpers );
-
-	appearanceSubmenu.add( option );
-
-	// Appearance / Light Helpers
-
-	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Light Helpers' ).onClick( function () {
-
-		appearanceStates.lightHelpers = ! appearanceStates.lightHelpers;
-
-		this.toggleClass( 'toggle-on', appearanceStates.lightHelpers );
-
-		signals.showHelpersChanged.dispatch( appearanceStates );
-
-	} ).toggleClass( 'toggle-on', appearanceStates.lightHelpers );
-
-	appearanceSubmenu.add( option );
-
-	// Appearance / Skeleton Helpers
-
-	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Skeleton Helpers' ).onClick( function () {
-
-		appearanceStates.skeletonHelpers = ! appearanceStates.skeletonHelpers;
-
-		this.toggleClass( 'toggle-on', appearanceStates.skeletonHelpers );
-
-		signals.showHelpersChanged.dispatch( appearanceStates );
-
-	} ).toggleClass( 'toggle-on', appearanceStates.skeletonHelpers );
-
-	appearanceSubmenu.add( option );
-
-	//
-
 	return container;
 
 }