Add default panels

src/commands/view/OpenStyleManager.js

@@ -5,16 +5,11 @@ define(['StyleManager'], function(StyleManager) {
 		 * */
 		return {
 
-			run: function(em, sender)
-			{
+			run: function(em, sender) {
 				this.sender	= sender;
 				if(!this.$cn){
 					var config		= em.getConfig(),
-							panels		= em.Panels,
-							pfx				= config.styleManager.stylePrefix || 'sm-';
-
-					config.styleManager.stylePrefix = config.stylePrefix + pfx;
-					config.styleManager.target = em.editor;
+							panels		= em.Panels;
 
 					// Main container
 					this.$cn = $('<div/>');
@@ -32,10 +27,7 @@ define(['StyleManager'], function(StyleManager) {
 						this.$cn2.append(this.$clm);
 					}
 
-					// Style Manager manager container
-					this.sm = new StyleManager(config.styleManager);
-					this.$sm = this.sm.render();
-					this.$cn2.append(this.$sm);
+					this.$cn2.append(em.StyleManager.render());
 
 					// Create header
 					this.$header	= $('<div>', {
@@ -64,8 +56,7 @@ define(['StyleManager'], function(StyleManager) {
 			 * Toggle Style Manager visibility
 			 * @private
 			 */
-			toggleSm: function()
-			{
+			toggleSm: function() {
 					if(!this.sender.get('active'))
 						return;
 					if(this.target.get('selectedComponent')){
@@ -77,8 +68,7 @@ define(['StyleManager'], function(StyleManager) {
 					}
 			},
 
-			stop: function()
-			{
+			stop: function() {
 				// Hide secondary container if exists
 				if(this.$cn2)
 					this.$cn2.hide();

src/editor/main.js

@@ -100,7 +100,7 @@ define(function (require){
 				StyleManager: em.get('StyleManager'),
 
 				/**
-				 * @property {StyleManager}
+				 * @property {Canvas}
 				 */
 				Canvas: em.get('Canvas'),
 

src/editor/model/Editor.js

@@ -12,6 +12,7 @@ define([
         'RichTextEditor',
         'DomComponents',
         'ClassManager',
+        'StyleManager',
         'Panels',
         'Parser',
         'Utils'],
@@ -29,6 +30,7 @@ define([
 			RichTextEditor,
 			DomComponents,
 			ClassManager,
+			StyleManager,
 			Panels,
 			Parser,
 			Utils
@@ -66,6 +68,7 @@ define([
 				this.initCanvas();
 				this.initUndoManager();
 				this.initUtils();
+				this.initStyleManager();
 
 				this.on('change:selectedComponent', this.componentSelected, this);
 			},
@@ -96,6 +99,19 @@ define([
 				this.set('Utils', this.Utils);
 			},
 
+			/**
+			 * Initialize Style Manager
+			 * @private
+			 * */
+			initStyleManager: function(){
+				var cfg = this.config.styleManager,
+				pfx	= cfg.stylePrefix || 'sm-';
+				cfg.pStylePrefix = this.config.stylePrefix;
+				cfg.stylePrefix	= this.config.stylePrefix + pfx;
+				cfg.target = this;
+				this.set('StyleManager', new StyleManager(cfg));
+			},
+
 			/**
 			 * Initialize Css Composer
 			 * @private
@@ -337,7 +353,7 @@ define([
 				cfg.stylePrefix = this.config.stylePrefix + pfx;
 				cfg.em = this;
 				this.pn = new Panels(cfg);
-				this.pn.addPanel({ id: 'views-container'});
+				//this.pn.addPanel({ id: 'views-container'});
 				this.Panels = this.pn;
 				this.set('Panels', this.pn);
 			},

src/panels/config/config.js

@@ -6,7 +6,8 @@ define(function () {
 	var imc = 'image-comp';
 	var swv = 'sw-visibility';
 	var expt = 'export-template';
-
+	var osm = 'open-sm';
+	var ola = 'open-layers';
 	return {
 		stylePrefix: 'pn-',
 
@@ -54,6 +55,20 @@ define(function () {
 				command: expt,
 				attributes: { title: 'View code' },
 			}],
+		},{
+			id: 'views',
+			buttons	: [{
+				id: osm,
+				className: 'fa fa-paint-brush',
+				command: osm,
+				active: true,
+				attributes: { title: 'Open Style Manager' },
+			},{
+				id: ola,
+				className: 'fa fa-bars',
+				command: ola,
+				attributes	: { title: 'Open Layer Manager' },
+			}],
 		}],
 
 		// Editor model

styles/css/main.css

@@ -2593,6 +2593,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .wte-editor {
   font-family: Helvetica, sans-serif;
+  background-color: #444;
   position: relative;
   border: 3px solid #444;
   border-left: none;
@@ -2612,6 +2613,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   z-index: 1;
   /* This simulate body behaviour */ }
   .wte-cv-canvas > div {
+    background-color: #fff;
     position: relative;
     height: 100%;
     overflow: auto;

styles/scss/main.scss

@@ -78,6 +78,7 @@ $imageCompDim:	50px;
 }
 .#{$app-prefix}editor{
 	font-family: $mainFont;
+	background-color: $mainColor;
 	position:relative;
 	border: 3px solid $mainColor;
 	border-left:none;
@@ -97,6 +98,7 @@ $imageCompDim:	50px;
 
   	/* This simulate body behaviour */
   	> div {
+  		background-color: #fff;
   		position: relative;
 	    height: 100%;
 	    overflow: auto;