diff --git a/editor/css/dark.css b/editor/css/dark.css
index e81d73b31be10878859d8b88451c5ea262babb5d..a64908909f05554d1b9f0c5c7da615ba743a7662 100644
--- a/editor/css/dark.css
+++ b/editor/css/dark.css
@@ -132,9 +132,11 @@ input.Number {
cursor: pointer;
}
- #menubar .Panel {
- color: #888;
- }
+ #menubar .menu .title {
+ color: #888;
+ margin: 0px;
+ padding: 8px;
+ }
#menubar .menu .options {
display: none;
diff --git a/editor/css/light.css b/editor/css/light.css
index f797ad3eb116ef8ca9456b35fa4be9c56adbc69c..a13acf83293b50005c16fcddaf9513aee9591ec1 100644
--- a/editor/css/light.css
+++ b/editor/css/light.css
@@ -106,9 +106,11 @@ input.Number {
cursor: pointer;
}
- #menubar .Panel {
- color: #888;
- }
+ #menubar .menu .title {
+ color: #888;
+ margin: 0px;
+ padding: 8px;
+ }
#menubar .menu .options {
display: none;
diff --git a/editor/index.html b/editor/index.html
index c339f8481ca1d5905656d5f892f3762c92537d8d..6e1f25db36d37f817f6c6dc7080a1078687310c7 100644
--- a/editor/index.html
+++ b/editor/index.html
@@ -44,7 +44,6 @@
-
diff --git a/editor/js/Menubar.Add.js b/editor/js/Menubar.Add.js
index 801faa57e0514bb94f2b582f95b17dc69c8ca595..d417526f1a9fa7e24a99be184027e9817d41745d 100644
--- a/editor/js/Menubar.Add.js
+++ b/editor/js/Menubar.Add.js
@@ -1,11 +1,28 @@
Menubar.Add = function ( editor ) {
+ var container = new UI.Panel();
+ container.setClass( 'menu' );
+
+ var title = new UI.Panel();
+ title.setClass( 'title' );
+ title.setTextContent( 'Add' );
+ container.add( title );
+
+ var options = new UI.Panel();
+ options.setClass( 'options' );
+ container.add( options );
+
+ //
+
var meshCount = 0;
var lightCount = 0;
- // event handlers
+ // Group
- function onGroupOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Group' );
+ option.onClick( function () {
var mesh = new THREE.Group();
mesh.name = 'Group ' + ( ++ meshCount );
@@ -13,9 +30,19 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
- }
+ } );
+ options.add( option );
- function onPlaneOptionClick () {
+ //
+
+ options.add( new UI.HorizontalRule() );
+
+ // Plane
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Plane' );
+ option.onClick( function () {
var width = 200;
var height = 200;
@@ -31,9 +58,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
- };
+ } );
+ options.add( option );
+
+ // Box
- function onBoxOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Box' );
+ option.onClick( function () {
var width = 100;
var height = 100;
@@ -50,9 +83,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
- }
-
- function onCircleOptionClick () {
+ } );
+ options.add( option );
+
+ // Circle
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Circle' );
+ option.onClick( function () {
var radius = 20;
var segments = 8;
@@ -64,9 +103,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
- }
+ } );
+ options.add( option );
- function onCylinderOptionClick () {
+ // Cylinder
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Cylinder' );
+ option.onClick( function () {
var radiusTop = 20;
var radiusBottom = 20;
@@ -82,9 +127,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
- }
+ } );
+ options.add( option );
+
+ // Sphere
- function onSphereOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Sphere' );
+ option.onClick( function () {
var radius = 75;
var widthSegments = 32;
@@ -97,23 +148,35 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
- }
+ } );
+ options.add( option );
- function onIcosahedronOptionClick () {
+ // Icosahedron
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Icosahedron' );
+ option.onClick( function () {
var radius = 75;
var detail = 2;
- var geometry = new THREE.IcosahedronGeometry ( radius, detail );
+ var geometry = new THREE.IcosahedronGeometry( radius, detail );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
mesh.name = 'Icosahedron ' + ( ++ meshCount );
editor.addObject( mesh );
editor.select( mesh );
- }
+ } );
+ options.add( option );
+
+ // Torus
- function onTorusOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Torus' );
+ option.onClick( function () {
var radius = 100;
var tube = 40;
@@ -128,9 +191,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
- }
+ } );
+ options.add( option );
- function onTorusKnotOptionClick () {
+ // TorusKnot
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'TorusKnot' );
+ option.onClick( function () {
var radius = 100;
var tube = 40;
@@ -147,9 +216,19 @@ Menubar.Add = function ( editor ) {
editor.addObject( mesh );
editor.select( mesh );
- }
+ } );
+ options.add( option );
+
+ //
- function onSpriteOptionClick () {
+ options.add( new UI.HorizontalRule() );
+
+ // Sprite
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Sprite' );
+ option.onClick( function () {
var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
sprite.name = 'Sprite ' + ( ++ meshCount );
@@ -157,9 +236,19 @@ Menubar.Add = function ( editor ) {
editor.addObject( sprite );
editor.select( sprite );
- }
+ } );
+ options.add( option );
+
+ //
+
+ options.add( new UI.HorizontalRule() );
- function onPointLightOptionClick () {
+ // PointLight
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'PointLight' );
+ option.onClick( function () {
var color = 0xffffff;
var intensity = 1;
@@ -171,9 +260,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
- }
+ } );
+ options.add( option );
+
+ // SpotLight
- function onSpotLightOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'SpotLight' );
+ option.onClick( function () {
var color = 0xffffff;
var intensity = 1;
@@ -190,9 +285,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
- }
+ } );
+ options.add( option );
- function onDirectionalLightOptionClick () {
+ // DirectionalLight
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'DirectionalLight' );
+ option.onClick( function () {
var color = 0xffffff;
var intensity = 1;
@@ -206,9 +307,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
- }
+ } );
+ options.add( option );
+
+ // HemisphereLight
- function onHemisphereLightOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'HemisphereLight' );
+ option.onClick( function () {
var skyColor = 0x00aaff;
var groundColor = 0xffaa00;
@@ -222,9 +329,15 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
- }
+ } );
+ options.add( option );
- function onAmbientLightOptionClick() {
+ // AmbientLight
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'AmbientLight' );
+ option.onClick( function() {
var color = 0x222222;
@@ -234,39 +347,9 @@ Menubar.Add = function ( editor ) {
editor.addObject( light );
editor.select( light );
- }
-
- // configure menu contents
-
- var createOption = UI.MenubarHelper.createOption;
- var createDivider = UI.MenubarHelper.createDivider;
-
- var menuConfig = [
- createOption( 'Group', onGroupOptionClick ),
- createDivider(),
-
- createOption( 'Plane', onPlaneOptionClick ),
- createOption( 'Box', onBoxOptionClick ),
- createOption( 'Circle', onCircleOptionClick ),
- createOption( 'Cylinder', onCylinderOptionClick ),
- createOption( 'Sphere', onSphereOptionClick ),
- createOption( 'Icosahedron', onIcosahedronOptionClick ),
- createOption( 'Torus', onTorusOptionClick ),
- createOption( 'Torus Knot', onTorusKnotOptionClick ),
- createDivider(),
-
- createOption( 'Sprite', onSpriteOptionClick ),
- createDivider(),
-
- createOption( 'Point light', onPointLightOptionClick ),
- createOption( 'Spot light', onSpotLightOptionClick ),
- createOption( 'Directional light', onDirectionalLightOptionClick ),
- createOption( 'Hemisphere light', onHemisphereLightOptionClick ),
- createOption( 'Ambient light', onAmbientLightOptionClick )
- ];
-
- var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+ } );
+ options.add( option );
- return UI.MenubarHelper.createMenuContainer( 'Add', optionsPanel );
+ return container;
}
diff --git a/editor/js/Menubar.Edit.js b/editor/js/Menubar.Edit.js
index 5dceb47e13d0ae1a0bc1aaffe9e3d9a9ec3f9028..b2f2873f414a51984279e32c7ae705e8e5355b89 100644
--- a/editor/js/Menubar.Edit.js
+++ b/editor/js/Menubar.Edit.js
@@ -1,20 +1,23 @@
Menubar.Edit = function ( editor ) {
- // event handlers
+ var container = new UI.Panel();
+ container.setClass( 'menu' );
- // function onUndoOptionClick () {
+ var title = new UI.Panel();
+ title.setClass( 'title' );
+ title.setTextContent( 'Edit' );
+ container.add( title );
- // console.log( 'UNDO not implemented yet' );
+ var options = new UI.Panel();
+ options.setClass( 'options' );
+ container.add( options );
- // }
+ // Clone
- // function onRedoOptionClick () {
-
- // console.log( 'REDO not implemented yet' );
-
- // }
-
- function onCloneOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Clone' );
+ option.onClick( function () {
var object = editor.selected;
@@ -25,17 +28,33 @@ Menubar.Edit = function ( editor ) {
editor.addObject( object );
editor.select( object );
- }
+ } );
+ options.add( option );
+
+ // Delete
- function onDeleteOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Delete' );
+ option.onClick( function () {
var parent = editor.selected.parent;
editor.removeObject( editor.selected );
editor.select( parent );
- }
+ } );
+ options.add( option );
+
+ //
+
+ options.add( new UI.HorizontalRule() );
+
+ // Convert
- function onConvertOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Convert' );
+ option.onClick( function () {
// convert to BufferGeometry
@@ -53,9 +72,15 @@ Menubar.Edit = function ( editor ) {
}
- }
+ } );
+ options.add( option );
- function onFlattenOptionClick () {
+ // Flatten
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Flatten' );
+ option.onClick( function () {
var object = editor.selected;
@@ -66,7 +91,6 @@ Menubar.Edit = function ( editor ) {
var geometry = object.geometry.clone();
geometry.applyMatrix( object.matrix );
-
object.geometry = geometry;
object.position.set( 0, 0, 0 );
@@ -76,27 +100,9 @@ Menubar.Edit = function ( editor ) {
object.geometry.buffersNeedUpdate = true;
editor.signals.objectChanged.dispatch( object );
- }
-
- // configure menu contents
-
- var createOption = UI.MenubarHelper.createOption;
- var createDivider = UI.MenubarHelper.createDivider;
-
- var menuConfig = [
- // createOption( 'Undo', onUndoOptionClick ),
- // createOption( 'Redo', onRedoOptionClick ),
- // createDivider(),
-
- createOption( 'Clone', onCloneOptionClick ),
- createOption( 'Delete', onDeleteOptionClick ),
- createDivider(),
-
- createOption( 'Convert', onConvertOptionClick ),
- createOption( 'Flatten', onFlattenOptionClick )
- ];
+ } );
+ options.add( option );
- var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+ return container;
- return UI.MenubarHelper.createMenuContainer( 'Edit', optionsPanel );
-}
+};
\ No newline at end of file
diff --git a/editor/js/Menubar.File.js b/editor/js/Menubar.File.js
index faa84a6198da2924a633c17004fa72c76b336104..066cfd2b52166f377bb45d5d734ee4bb52df4529 100644
--- a/editor/js/Menubar.File.js
+++ b/editor/js/Menubar.File.js
@@ -1,97 +1,72 @@
Menubar.File = function ( editor ) {
- // helpers
-
- function exportGeometry ( exporterClass ) {
-
- var object = editor.selected;
- var exporter = new exporterClass();
-
- var output = exporter.parse( object.geometry );
-
- if ( exporter instanceof THREE.BufferGeometryExporter ||
- exporter instanceof THREE.GeometryExporter ) {
-
- output = JSON.stringify( output, null, '\t' );
- output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
-
- }
-
- var blob = new Blob( [ output ], { type: 'text/plain' } );
- var objectURL = URL.createObjectURL( blob );
-
- window.open( objectURL, '_blank' );
- window.focus();
-
- };
-
- function exportObject ( exporterClass ) {
-
- var object = editor.selected;
- var exporter = new exporterClass();
+ var container = new UI.Panel();
+ container.setClass( 'menu' );
- var output = JSON.stringify( exporter.parse( object ), null, '\t' );
- output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+ var title = new UI.Panel();
+ title.setClass( 'title' );
+ title.setTextContent( 'File' );
+ container.add( title );
- var blob = new Blob( [ output ], { type: 'text/plain' } );
- var objectURL = URL.createObjectURL( blob );
+ var options = new UI.Panel();
+ options.setClass( 'options' );
+ container.add( options );
- window.open( objectURL, '_blank' );
- window.focus();
+ // New
- }
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'New' );
+ option.onClick( function () {
- function exportScene ( exporterClass ) {
-
- var exporter = new exporterClass();
+ if ( confirm( 'Are you sure?' ) ) {
- var output = exporter.parse( editor.scene );
+ editor.config.clear();
+ editor.storage.clear( function () {
- if ( exporter instanceof THREE.ObjectExporter ) {
+ location.href = location.pathname;
- output = JSON.stringify( output, null, '\t' );
- output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+ } );
}
- var blob = new Blob( [ output ], { type: 'text/plain' } );
- var objectURL = URL.createObjectURL( blob );
-
- window.open( objectURL, '_blank' );
- window.focus();
+ } );
+ options.add( option );
- }
+ //
- // event handlers
+ options.add( new UI.HorizontalRule() );
- function onNewOptionClick () {
+ // Import
- if ( confirm( 'Are you sure?' ) ) {
-
- editor.config.clear();
- editor.storage.clear( function () {
-
- location.href = location.pathname;
-
- } );
+ var fileInput = document.createElement( 'input' );
+ fileInput.type = 'file';
+ fileInput.addEventListener( 'change', function ( event ) {
- }
+ editor.loader.loadFile( fileInput.files[ 0 ] );
- }
+ } );
- function onImportOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Import' );
+ option.onClick( function () {
fileInput.click();
- }
+ } );
+ options.add( option );
- function onFileInputChange ( event ) {
+ //
- editor.loader.loadFile( fileInput.files[ 0 ] );
+ options.add( new UI.HorizontalRule() );
- }
+ // Export Geometry
- function onExportGeometryOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Export Geometry' );
+ option.onClick( function () {
var object = editor.selected;
@@ -121,9 +96,15 @@ Menubar.File = function ( editor ) {
}
- }
+ } );
+ options.add( option );
+
+ // Export Object
- function onExportObjectOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Export Object' );
+ option.onClick( function () {
if ( editor.selected === null ) {
@@ -134,63 +115,125 @@ Menubar.File = function ( editor ) {
exportObject( THREE.ObjectExporter );
- }
+ } );
+ options.add( option );
+
+ // Export Scene
- function onExportSceneOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Export Scene' );
+ option.onClick( function () {
exportScene( THREE.ObjectExporter );
- }
+ } );
+ options.add( option );
- function onExportOBJOptionClick () {
+ // Export OBJ
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Export OBJ' );
+ option.onClick( function () {
exportGeometry( THREE.OBJExporter );
- }
+ } );
+ options.add( option );
+
+ // Export STL
- function onExportSTLOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Export STL' );
+ option.onClick( function () {
exportScene( THREE.STLExporter );
- }
+ } );
+ options.add( option );
+
+ //
+
+ options.add( new UI.HorizontalRule() );
- function onExportTestOptionClick() {
+ // Test
+
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Test' );
+ option.onClick( function () {
var text = new UI.Text( 'blah' );
editor.showDialog( text );
- }
+ } );
+ options.add( option );
- // create file input element for scene import
- var fileInput = document.createElement( 'input' );
- fileInput.type = 'file';
- fileInput.addEventListener( 'change', onFileInputChange);
+ //
+
+ var exportGeometry = function ( exporterClass ) {
- // configure menu contents
+ var object = editor.selected;
+ var exporter = new exporterClass();
- var createOption = UI.MenubarHelper.createOption;
- var createDivider = UI.MenubarHelper.createDivider;
-
- var menuConfig = [
- createOption( 'New', onNewOptionClick ),
- createDivider(),
-
- createOption( 'Import', onImportOptionClick ),
- createDivider(),
-
- createOption( 'Export Geometry', onExportGeometryOptionClick ),
- createOption( 'Export Object', onExportObjectOptionClick ),
- createOption( 'Export Scene', onExportSceneOptionClick ),
- createOption( 'Export OBJ', onExportOBJOptionClick ),
- createOption( 'Export STL', onExportSTLOptionClick ),
- createDivider(),
-
- createOption( 'Export Test', onExportTestOptionClick )
- ];
+ var output = exporter.parse( object.geometry );
+
+ if ( exporter instanceof THREE.BufferGeometryExporter ||
+ exporter instanceof THREE.GeometryExporter ) {
- var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+ output = JSON.stringify( output, null, '\t' );
+ output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+ }
+
+ var blob = new Blob( [ output ], { type: 'text/plain' } );
+ var objectURL = URL.createObjectURL( blob );
+
+ window.open( objectURL, '_blank' );
+ window.focus();
+
+ };
+
+ var exportObject = function ( exporterClass ) {
+
+ var object = editor.selected;
+ var exporter = new exporterClass();
+
+ var output = JSON.stringify( exporter.parse( object ), null, '\t' );
+ output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+ var blob = new Blob( [ output ], { type: 'text/plain' } );
+ var objectURL = URL.createObjectURL( blob );
+
+ window.open( objectURL, '_blank' );
+ window.focus();
+
+ };
+
+ var exportScene = function ( exporterClass ) {
+
+ var exporter = new exporterClass();
+
+ var output = exporter.parse( editor.scene );
+
+ if ( exporter instanceof THREE.ObjectExporter ) {
+
+ output = JSON.stringify( output, null, '\t' );
+ output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+ }
+
+ var blob = new Blob( [ output ], { type: 'text/plain' } );
+ var objectURL = URL.createObjectURL( blob );
+
+ window.open( objectURL, '_blank' );
+ window.focus();
+
+ };
- return UI.MenubarHelper.createMenuContainer( 'File', optionsPanel );
+ return container;
-}
+};
\ No newline at end of file
diff --git a/editor/js/Menubar.Help.js b/editor/js/Menubar.Help.js
index 1dda2078c3c8f6d679a0e43c259099e36e21b6cc..6b102b20fca0c9c14057306315f3123e00feede2 100644
--- a/editor/js/Menubar.Help.js
+++ b/editor/js/Menubar.Help.js
@@ -1,30 +1,41 @@
Menubar.Help = function ( editor ) {
- // event handlers
+ var container = new UI.Panel();
+ container.setClass( 'menu' );
- function onSourcecodeOptionClick () {
+ var title = new UI.Panel();
+ title.setClass( 'title' );
+ title.setTextContent( 'Help' );
+ container.add( title );
- window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' )
+ var options = new UI.Panel();
+ options.setClass( 'options' );
+ container.add( options );
- }
+ // Source code
- function onAboutOptionClick () {
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Source code' );
+ option.onClick( function () {
- window.open( 'http://threejs.org', '_blank' );
+ window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' )
- }
+ } );
+ options.add( option );
- // configure menu contents
+ // About
- var createOption = UI.MenubarHelper.createOption;
- var createDivider = UI.MenubarHelper.createDivider;
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'About' );
+ option.onClick( function () {
+
+ window.open( 'http://threejs.org', '_blank' );
- var menuConfig = [
- createOption( 'Source code', onSourcecodeOptionClick ),
- createOption( 'About', onAboutOptionClick )
- ];
+ } );
+ options.add( option );
- var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+ return container;
- return UI.MenubarHelper.createMenuContainer( 'Help', optionsPanel );
-}
+};
\ No newline at end of file
diff --git a/editor/js/Menubar.View.js b/editor/js/Menubar.View.js
index 7e3f5df9c32b7921b0980036c9ec532a1c6493ab..3d3f5cdab25884e5aedc8089a7769660e3a5ea35 100644
--- a/editor/js/Menubar.View.js
+++ b/editor/js/Menubar.View.js
@@ -1,37 +1,43 @@
Menubar.View = function ( editor ) {
-
- var menuConfig,
- optionsPanel,
- createOption,
- createDivider;
- function onLightThemeOptionClick () {
+ var container = new UI.Panel();
+ container.setClass( 'menu' );
- editor.setTheme( 'css/light.css' );
- editor.config.setKey( 'theme', 'css/light.css' );
+ var title = new UI.Panel();
+ title.setClass( 'title' );
+ title.setTextContent( 'View' );
+ container.add( title );
- }
+ var options = new UI.Panel();
+ options.setClass( 'options' );
+ container.add( options );
- function onDarkThemeOptionClick () {
+ // Light theme
- editor.setTheme( 'css/dark.css' );
- editor.config.setKey( 'theme', 'css/dark.css' );
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Light theme' );
+ option.onClick( function () {
- }
-
+ editor.setTheme( 'css/light.css' );
+ editor.config.setKey( 'theme', 'css/light.css' );
+
+ } );
+ options.add( option );
- // configure menu contents
+ // Dark theme
- createOption = UI.MenubarHelper.createOption;
- createDivider = UI.MenubarHelper.createDivider;
+ var option = new UI.Panel();
+ option.setClass( 'option' );
+ option.setTextContent( 'Dark theme' );
+ option.onClick( function () {
- menuConfig = [
- createOption( 'Light theme', onLightThemeOptionClick ),
- createOption( 'Dark theme', onDarkThemeOptionClick )
- ];
+ editor.setTheme( 'css/dark.css' );
+ editor.config.setKey( 'theme', 'css/dark.css' );
- optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+ } );
+ options.add( option );
- return UI.MenubarHelper.createMenuContainer( 'View', optionsPanel );
+ return container;
-}
+};
\ No newline at end of file
diff --git a/editor/js/libs/ui.editor.js b/editor/js/libs/ui.editor.js
deleted file mode 100644
index ff1272c45865fe6174c263614042955db88f7301..0000000000000000000000000000000000000000
--- a/editor/js/libs/ui.editor.js
+++ /dev/null
@@ -1,50 +0,0 @@
-UI.MenubarHelper = {
-
- createMenuContainer: function ( name, optionsPanel ) {
-
- var container = new UI.Panel();
- var title = new UI.Panel();
-
- title.setTextContent( name );
- title.setMargin( '0px' );
- title.setPadding( '8px' );
-
- container.setClass( 'menu' );
- container.add( title );
- container.add( optionsPanel );
-
- return container;
-
- },
-
- createOption: function ( name, callbackHandler ) {
-
- var option = new UI.Panel();
- option.setClass( 'option' );
- option.setTextContent( name );
- option.onClick( callbackHandler );
-
- return option;
-
- },
-
- createOptionsPanel: function ( menuConfig ) {
-
- var options = new UI.Panel();
- options.setClass( 'options' );
-
- menuConfig.forEach(function(option) {
- options.add(option);
- });
-
- return options;
-
- },
-
- createDivider: function () {
-
- return new UI.HorizontalRule();
-
- }
-
-};