Merge pull request #19584 from mrdoob/editor

Editor: Improved toolbar.

Merge pull request #19584 from mrdoob/editor
Editor: Improved toolbar.
7a8fff68 · Mr.doob · GitHub · 59d2a74a · 43d4527a · 7a8fff68
8 changed file
--- a/editor/css/main.css
+++ b/editor/css/main.css
@@ -423,27 +423,21 @@ select {

 #toolbar {
 	position: absolute;
-	left: calc(50% - 290px); /* ( ( 100% - 300px ) / 2.0 ) - 140px */
-	bottom: 16px;
-	height: 32px;
+	left: 10px;
+	top: 42px;
+	width: 32px;
 	background: #eee;
-	color: #333;
+	text-align: center;
 }

-	#toolbar * {
-		vertical-align: middle;
+	#toolbar button, #toolbar input {
+		height: 32px;
 	}

-	#toolbar .Panel {
-		padding: 4px;
-		color: #888;
-	}
-
-	#toolbar button {
-		margin-right: 6px;
-		line-height: 14px;
-		height: 24px;
-	}
+		#toolbar button img {
+			width: 16px;
+			opacity: 0.5;
+		}

 .Outliner {
 	color: #444;
@@ -537,11 +531,6 @@ select {
 		bottom: 0;
 	}

-	#toolbar {
-		left: calc(50% - 140px);
-		top: 68px;
-	}
-
 }

 /* DARK MODE */
@@ -631,6 +620,10 @@ select {
 		background-color: #111;
 	}

+		#toolbar img {
+			filter: invert(1);
+		}
+
 	.Outliner {
 		color: #888;
 		background: #222;

--- a/editor/images/rotate.svg
+++ b/editor/images/rotate.svg
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M256,64c-63.749,0-116.539,27.751-153.514,61.856l1.762-105.739C104.432,9.191,95.716,0.178,84.784,0
+			c-0.112,0-0.224,0-0.336,0C73.673,0,64.845,8.65,64.66,19.464l-2.639,158.351c-0.086,5.364,2.006,10.537,5.806,14.331
+			c3.794,3.794,8.94,5.885,14.331,5.793l154.392-2.639c10.926-0.191,19.635-9.198,19.451-20.13
+			c-0.185-10.814-9.013-19.457-19.787-19.457c-0.112,0-0.224,0-0.343,0l-109.13,1.867c30.515-28.919,75.54-53.991,129.26-53.991
+			c110.113,0,184.082,95.182,184.082,184.082c0,89.217-73.969,184.742-184.082,184.742c-120.109,0-184.082-107.296-184.082-184.742
+			c0-10.933-8.861-19.794-19.794-19.794S32.33,276.737,32.33,287.67C32.33,396.008,122.207,512,256,512
+			s223.67-115.992,223.67-224.336C479.67,179.649,389.793,64,256,64z"/>
+	</g>
+</g>
+</svg>
--- a/editor/images/scale.svg
+++ b/editor/images/scale.svg
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M502.772,13.32c-6.85-6.85-17.943-6.85-24.793,0L324.846,166.453c-6.85,6.844-6.85,17.949,0,24.793
+			c3.425,3.425,7.908,5.138,12.397,5.138c4.483,0,8.972-1.713,12.397-5.138L502.772,38.114
+			C509.622,31.269,509.622,20.164,502.772,13.32z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M502.772,13.32c-3.285-3.291-7.75-5.138-12.397-5.138c-0.041,0-0.088,0-0.129,0L337.114,9.352
+			c-9.691,0.076-17.482,7.984-17.406,17.669c0.076,9.638,7.914,17.4,17.534,17.4c0.035,0,0.082,0,0.129,0l135.335-1.035
+			l-1.035,135.329c-0.07,9.685,7.721,17.593,17.406,17.669c0.041,0,0.082,0,0.129,0c9.62,0,17.458-7.762,17.534-17.4l1.169-153.132
+			C507.944,21.152,506.092,16.64,502.772,13.32z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M502.772,482.069L349.639,328.943c-6.85-6.85-17.943-6.85-24.793,0c-6.85,6.85-6.85,17.949,0,24.793l153.132,153.127
+			c3.425,3.425,7.908,5.138,12.397,5.138c4.483,0,8.972-1.713,12.397-5.138C509.622,500.012,509.622,488.913,502.772,482.069z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M506.74,341.211c-0.07-9.685-7.914-17.283-17.663-17.406c-9.691,0.07-17.482,7.984-17.406,17.663l1.029,135.329
+			l-135.329-1.029c-0.041,0-0.088,0-0.129,0c-9.62,0-17.458,7.768-17.534,17.406c-0.07,9.679,7.721,17.587,17.406,17.663
+			L490.246,512c0.035,0,0.082,0,0.129,0c4.647,0,9.106-1.847,12.397-5.132c3.32-3.326,5.173-7.838,5.138-12.531L506.74,341.211z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M190.662,158.27L37.535,5.138c-6.85-6.844-17.955-6.85-24.799,0c-6.85,6.844-6.85,17.949,0,24.793l153.127,153.132
+			c3.425,3.425,7.914,5.138,12.403,5.138c4.483,0,8.972-1.713,12.397-5.138C197.512,176.219,197.512,165.114,190.662,158.27z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M178.4,1.169L25.267,0c-0.047,0-0.088,0-0.134,0c-4.652,0-9.112,1.847-12.397,5.138c-3.326,3.32-5.173,7.832-5.143,12.531
+			l1.169,153.132c0.076,9.638,7.914,17.4,17.534,17.4c0.047,0,0.094,0,0.14,0c9.685-0.076,17.476-7.984,17.4-17.669L42.802,35.203
+			l135.329,1.034c0.041,0,0.088,0,0.134,0c9.62,0,17.458-7.762,17.534-17.4C195.876,9.153,188.085,1.245,178.4,1.169z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M187.155,328.943c-6.85-6.85-17.955-6.85-24.799,0L9.223,482.069c-6.844,6.844-6.844,17.943,0,24.793
+			c3.425,3.425,7.914,5.138,12.403,5.138c4.483,0,8.972-1.713,12.397-5.137l153.132-153.127
+			C193.999,346.892,194.005,335.793,187.155,328.943z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M174.624,475.763l-135.329,1.029l1.035-135.329c0.076-9.679-7.715-17.587-17.4-17.663c-0.041,0-0.088,0-0.134,0
+			c-9.62,0-17.458,7.768-17.534,17.406L4.092,494.331c-0.035,4.693,1.812,9.205,5.132,12.531c3.291,3.296,7.756,5.138,12.403,5.138
+			c0.041,0,0.088,0,0.134,0l153.132-1.169c9.685-0.07,17.476-7.984,17.4-17.663C192.217,483.478,184.168,475.78,174.624,475.763z"/>
+	</g>
+</g>
+</svg>
--- a/editor/images/translate.svg
+++ b/editor/images/translate.svg
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M47.059,256l61.907-61.369c7.622-7.563,7.68-19.871,0.117-27.499c-7.563-7.628-19.877-7.68-27.499-0.117l-75.828,75.18
+			C2.074,245.844,0,250.815,0,256s2.074,10.156,5.755,13.811l75.828,75.18c3.791,3.753,8.736,5.632,13.688,5.632
+			c5.003,0,10.007-1.918,13.805-5.755c7.563-7.628,7.505-19.936-0.117-27.499L47.059,256z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M344.991,81.583l-75.18-75.828C266.156,2.074,261.185,0,256,0s-10.156,2.074-13.811,5.749l-75.18,75.828
+			c-7.563,7.628-7.505,19.936,0.117,27.499c7.628,7.557,19.942,7.505,27.499-0.117L256,47.059l61.369,61.9
+			c3.804,3.837,8.808,5.755,13.811,5.755c4.945,0,9.896-1.873,13.688-5.632C352.496,101.519,352.548,89.211,344.991,81.583z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M344.874,402.918c-7.635-7.557-19.942-7.505-27.499,0.123l-61.369,61.907l-61.375-61.907
+			c-7.557-7.635-19.871-7.667-27.499-0.123c-7.622,7.563-7.68,19.871-0.117,27.499l75.18,75.828
+			c3.649,3.688,8.62,5.755,13.805,5.755s10.156-2.067,13.818-5.755l75.18-75.828C352.554,422.789,352.502,410.481,344.874,402.918z"
+			/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M506.245,242.189l-75.828-75.18c-7.635-7.563-19.942-7.505-27.499,0.117c-7.557,7.628-7.505,19.936,0.123,27.499
+			L464.948,256l-61.907,61.369c-7.628,7.563-7.68,19.871-0.123,27.499c3.804,3.837,8.808,5.755,13.811,5.755
+			c4.945,0,9.897-1.88,13.688-5.632l75.828-75.18C509.933,266.156,512,261.185,512,256S509.933,245.844,506.245,242.189z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M492.557,236.557H19.443C8.704,236.557,0,245.261,0,256c0,10.739,8.704,19.443,19.443,19.443h473.114
+			c10.739,0,19.443-8.704,19.443-19.443C512,245.261,503.296,236.557,492.557,236.557z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,0c-10.739,0-19.443,8.704-19.443,19.443v473.114c0,10.739,8.704,19.443,19.443,19.443
+			c10.739,0,19.443-8.704,19.443-19.443V19.443C275.443,8.704,266.739,0,256,0z"/>
+	</g>
+</g>
+</svg>
--- a/editor/js/Menubar.Help.js
+++ b/editor/js/Menubar.Help.js
@@ -32,6 +32,18 @@ var MenubarHelp = function ( editor ) {
 	} );
 	options.add( option );

+	// Icon
+
+	var option = new UIRow();
+	option.setClass( 'option' );
+	option.setTextContent( strings.getKey( 'menubar/help/icons' ) );
+	option.onClick( function () {
+
+		window.open( 'https://www.flaticon.com/packs/interface-44', '_blank' );
+
+	} );
+	options.add( option );
+
 	// About

 	var option = new UIRow();

--- a/editor/js/Strings.js
+++ b/editor/js/Strings.js
@@ -76,6 +76,7 @@ var Strings = function ( config ) {

 			'menubar/help': 'Help',
 			'menubar/help/source_code': 'Source Code',
+			'menubar/help/icons': 'Icon Pack',
 			'menubar/help/about': 'About',

 			'sidebar/scene': 'Scene',
@@ -390,6 +391,7 @@ var Strings = function ( config ) {

 			'menubar/help': 'Aide',
 			'menubar/help/source_code': 'Code Source',
+			'menubar/help/icons': 'Icon Pack',
 			'menubar/help/about': 'A propos',

 			'sidebar/scene': 'Scène',
@@ -704,6 +706,7 @@ var Strings = function ( config ) {

 			'menubar/help': '帮助',
 			'menubar/help/source_code': '源码',
+			'menubar/help/icons': 'Icon Pack',
 			'menubar/help/about': '关于',

 			'sidebar/scene': '场景',

--- a/editor/js/Toolbar.js
+++ b/editor/js/Toolbar.js
@@ -2,8 +2,7 @@
 * @author mrdoob / http://mrdoob.com/
 */

-import { UIPanel, UIButton } from './libs/ui.js';
-import { UIBoolean } from './libs/ui.three.js';
+import { UIPanel, UIButton, UICheckbox } from './libs/ui.js';

 var Toolbar = function ( editor ) {

@@ -12,54 +11,60 @@ var Toolbar = function ( editor ) {

 	var container = new UIPanel();
 	container.setId( 'toolbar' );
-	container.setDisplay( 'none' );
-
-	var buttons = new UIPanel();
-	container.add( buttons );

 	// translate / rotate / scale

-	var translate = new UIButton( strings.getKey( 'toolbar/translate' ) );
+	var translateIcon = document.createElement( 'img' );
+	translateIcon.title = strings.getKey( 'toolbar/translate' );
+	translateIcon.src = 'images/translate.svg';
+
+	var translate = new UIButton();
 	translate.dom.className = 'Button selected';
+	translate.dom.appendChild( translateIcon );
 	translate.onClick( function () {

 		signals.transformModeChanged.dispatch( 'translate' );

 	} );
-	buttons.add( translate );
+	container.add( translate );

-	var rotate = new UIButton( strings.getKey( 'toolbar/rotate' ) );
+	var rotateIcon = document.createElement( 'img' );
+	rotateIcon.title = strings.getKey( 'toolbar/rotate' );
+	rotateIcon.src = 'images/rotate.svg';
+
+	var rotate = new UIButton();
+	rotate.dom.appendChild( rotateIcon );
 	rotate.onClick( function () {

 		signals.transformModeChanged.dispatch( 'rotate' );

 	} );
-	buttons.add( rotate );
+	container.add( rotate );
+
+	var scaleIcon = document.createElement( 'img' );
+	scaleIcon.title = strings.getKey( 'toolbar/scale' );
+	scaleIcon.src = 'images/scale.svg';

-	var scale = new UIButton( strings.getKey( 'toolbar/scale' ) );
+	var scale = new UIButton();
+	scale.dom.appendChild( scaleIcon );
 	scale.onClick( function () {

 		signals.transformModeChanged.dispatch( 'scale' );

 	} );
-	buttons.add( scale );
+	container.add( scale );

-	var local = new UIBoolean( false, strings.getKey( 'toolbar/local' ) );
+	var local = new UICheckbox( false );
+	local.dom.title = strings.getKey( 'toolbar/local' );
 	local.onChange( function () {

 		signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );

 	} );
-	buttons.add( local );
+	container.add( local );

 	//

-	signals.objectSelected.add( function ( object ) {
-
-		container.setDisplay( object === null ? 'none' : '' );
-
-	} );
-
 	signals.transformModeChanged.add( function ( mode ) {

 		translate.dom.classList.remove( 'selected' );

--- a/editor/sw.js
+++ b/editor/sw.js
@@ -56,6 +56,9 @@ const assets = [

 	'./manifest.json',
 	'./images/icon.png',
+	'./images/rotate.svg',
+	'./images/scale.svg',
+	'./images/translate.svg',

 	'./js/libs/codemirror/codemirror.css',
 	'./js/libs/codemirror/theme/monokai.css',