Editor: Prettified snap to grid UI.

editor/index.html

@@ -56,6 +56,7 @@
 
 			.toolbar {
 				background-color: #999;
+				color: #333;
 			}
 
 			.sidebar {

editor/js/ui/Toolbar.js

@@ -8,12 +8,7 @@ var Toolbar = function ( signals ) {
 	buttons.setPadding( '7px' );
 	container.add( buttons );
 
-	var snap = new UI.Checkbox( true ).onChange( update );
-	buttons.add( snap );
-	buttons.add( new UI.Text( 'snap: ' ) );
-	var snapDist = new UI.Number( 25 ).onChange( update );
-	snapDist.dom.style.width = '42px';
-	buttons.add( snapDist );
+	// axis
 
 	var x = new UI.Checkbox( true ).onChange( update );
 	buttons.add( x );
@@ -27,6 +22,19 @@ var Toolbar = function ( signals ) {
 	buttons.add( z );
 	buttons.add( new UI.Text( 'z ' ) );
 
+	buttons.add( new UI.Text().setWidth( '25px' ) );
+
+	// grid
+
+	var grid = new UI.Number( 25 ).onChange( update );
+	grid.dom.style.width = '42px';
+	buttons.add( new UI.Text( 'Grid: ' ) );
+	buttons.add( grid );
+
+	var snap = new UI.Checkbox( false ).onChange( update );
+	buttons.add( snap );
+	buttons.add( new UI.Text( 'snap' ) );
+
 	function update() {
 
 		var axis = new THREE.Vector3();
@@ -36,7 +44,7 @@ var Toolbar = function ( signals ) {
 
 		signals.modifierAxisChanged.dispatch( axis );
 
-		signals.snapChanged.dispatch( snap.getValue() === true ? snapDist.getValue() : null );
+		signals.snapChanged.dispatch( snap.getValue() === true ? grid.getValue() : null );
 
 	}