Update OpenTraitManager command

src/commands/view/OpenStyleManager.js

@@ -10,7 +10,6 @@ define(['StyleManager'], function(StyleManager) {
 				if(!this.$cn){
 					var config		= em.getConfig(),
 							panels		= em.Panels;
-
 					// Main container
 					this.$cn = $('<div/>');
 					// Secondary container
@@ -30,11 +29,11 @@ define(['StyleManager'], function(StyleManager) {
 						this.$cn2.append(clm.render([]));
 
 					this.$cn2.append(em.StyleManager.render());
-
+					var smConfig = em.StyleManager.getConfig();
 					// Create header
 					this.$header	= $('<div>', {
-						class	: config.styleManager.stylePrefix + 'header',
-						text 	: config.styleManager.textNoElement,
+						class: smConfig.stylePrefix + 'header',
+						text: smConfig.textNoElement,
 					});
 					//this.$cn = this.$cn.add(this.$header);
 					this.$cn.append(this.$header);
@@ -80,4 +79,4 @@ define(['StyleManager'], function(StyleManager) {
 					this.$header.hide();
 			}
 		};
-	});
+	});

src/commands/view/OpenTraitManager.js

@@ -8,7 +8,10 @@ define(function() {
 				var tm = editor.TraitManager;
 				if(!this.obj){
           var tmView = tm.getTraitsViewer();
-					this.obj = $('<div/>').get(0);
+					var confTm = tm.getConfig();
+					this.obj = $('<div/>')
+					.append('<div class="'+pfx+'traits-label">' + confTm.labelContainer + '</div>')
+					.get(0);
 					this.obj.appendChild(tmView.render().el);
 					var panels = editor.Panels;
 					if(!panels.getPanel('views-container'))

src/style_manager/main.js

@@ -65,6 +65,15 @@ define(function(require) {
        */
       name: 'StyleManager',
 
+			/**
+			 * Get configuration object
+			 * @return {Object}
+			 * @private
+			 */
+			getConfig: function(){
+        return c;
+      },
+
       /**
        * Initialize module. Automatically called with a new instance of the editor
        * @param {Object} config Configurations
@@ -226,4 +235,4 @@ define(function(require) {
 
 		};
 	};
-});
+});

src/trait_manager/config/config.js

@@ -1,5 +1,6 @@
 define(function () {
 	return {
 		stylePrefix: 'trt-',
+		labelContainer: 'Component settings',
 	};
 });

src/trait_manager/main.js

@@ -18,6 +18,15 @@ define(function(require) {
        */
       name: 'TraitManager',
 
+			/**
+			 * Get configuration object
+			 * @return {Object}
+			 * @private
+			 */
+			getConfig: function(){
+        return c;
+      },
+
       /**
        * Initialize module. Automatically called with a new instance of the editor
        * @param {Object} config Configurations

styles/css/main.css

@@ -2718,6 +2718,14 @@ div.gjs-select {
   outline: none; }
 
 /*************  TRAITS  ****************/
+.gjs-traits-label {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  font-size: 13px;
+  font-weight: lighter;
+  margin-bottom: 5px;
+  padding: 10px;
+  text-align: left; }
+
 .gjs-trt-trait {
   display: flex;
   justify-content: space-between;

styles/scss/main.scss

@@ -225,6 +225,14 @@ div.#{$app-prefix}select {
 }
 
 /*************  TRAITS  ****************/
+.#{$app-prefix}traits-label {
+  border-bottom: 1px solid $mainDkColor;
+  font-size: 13px;
+  font-weight: lighter;
+  margin-bottom: 5px;
+  padding: 10px;
+  text-align: left;
+}
 .#{$trt-prefix}trait {
   display: flex;
   justify-content: space-between;