Update trait view

src/commands/view/OpenTraitManager.js

@@ -7,10 +7,7 @@ define(function() {
 				var pfx = config.stylePrefix;
 				var tm = editor.TraitManager;
 				if(!this.obj){
-          var tmView = new tm.TraitsView({
-						collection: [],
-						editor: editor.editor
-					});
+          var tmView = tm.getTraitsViewer();
 					this.obj = $('<div/>').get(0);
 					this.obj.appendChild(tmView.render().el);
 					var panels = editor.Panels;

src/domain_abstract/view/DomainViews.js

@@ -28,7 +28,8 @@ function(Backbone) {
     add: function(model, fragment){
       var frag = fragment || null;
       var view = new this.itemView({
-        model: model
+        model: model,
+        config: this.config
       }, this.config);
       var rendered = view.render().el;
 

src/trait_manager/config/config.js

@@ -1,9 +1,5 @@
 define(function () {
 	return {
 		stylePrefix: 'trt-',
-
-    // Text to show in case no element selected
-    textNoElement: 'Select an element before using Style Manager',
-
 	};
 });

src/trait_manager/main.js

@@ -5,7 +5,7 @@ define(function(require) {
 		defaults = require('./config/config'),
 		Traits = require('./model/Traits'),
 		TraitsView = require('./view/TraitsView');
-		var sectors, SectView;
+		var TraitsViewer;
 
 	  return {
 
@@ -32,22 +32,21 @@ define(function(require) {
 				var ppfx = c.pStylePrefix;
 				if(ppfx)
 					c.stylePrefix = ppfx + c.stylePrefix;
-
-				sectors = new Traits(c.traits);
-	  		TraitView = new TraitsView({
-					collection: sectors,
-					target: c.em,
+	  		TraitsViewer = new TraitsView({
+					collection: [],
+					editor: c.em,
 				  config: c,
 				});
         return this;
       },
 
 			/**
-			 * Render sectors and properties
-			 * @return	{HTMLElement}
-			 * */
-			render: function(){
-				return SectView.render().el;
+			 *
+			 * Get Traits viewer
+			 * @private
+			 */
+			getTraitsViewer: function() {
+				return TraitsViewer;
 			},
 
 		};

src/trait_manager/view/TraitView.js

@@ -9,40 +9,42 @@ define(['backbone'], function (Backbone) {
 		initialize: function(o) {
 			this.config = o.config || {};
 			this.pfx = this.config.stylePrefix || '';
+			this.ppfx = this.config.pStylePrefix || '';
+			this.target = this.model.get('target');
+			this.className = this.pfx + 'trait';
+			this.labelClass = this.ppfx + 'label';
+			this.fieldClass = this.ppfx + 'field';
+			this.inputhClass = this.ppfx + 'input-holder';
+			this.listenTo(this.model, 'change:value', this.onValueChange);
 		},
 
+		/**
+		 * Fires when the input is changed
+		 * @private
+		 */
 		onChange: function() {
-			//change model value
+			this.model.set('value', this.getInputEl().value);
 		},
 
 		/**
 		 * On change callback
 		 * @private
 		 */
-		onValuesChange: function() {
+		onValueChange: function() {
 			var m = this.model;
-			var trg = m.target;
+			var trg = this.target;
 			var attrs = trg.get('attributes');
 			attrs[m.get('name')] = m.get('value');
 			trg.set('attributes', attrs);
+			console.log(trg);
 		},
 
 		/**
 		 * Render label
 		 * @private
 		 */
 		renderLabel: function() {
-			/*
-			this.$el.html(this.templateLabel({
-				pfx		: this.pfx,
-				ppfx	: this.ppfx,
-				icon	: this.model.get('icon'),
-				info	: this.model.get('info'),
-				label	: this.model.get('name'),
-			}));
-			*/
-		console.log(this.model);
-			this.$el.html('<div class="label"><div>' + this.getLabel() + '</div></div>');
+			this.$el.html('<div class="' + this.labelClass + '">' + this.getLabel() + '</div>');
 		},
 
 		/**
@@ -55,24 +57,34 @@ define(['backbone'], function (Backbone) {
 			return model.get('label') || model.get('name');
 		},
 
+		/**
+		 * Returns input element
+		 * @return {HTMLElement}
+		 * @private
+		 */
+		getInputEl: function() {
+			return this.$input.get(0);
+		},
+
 		/**
 		 * Renders input
+		 * @private
 		 * */
 		renderField: function(){
 			if(!this.$input){
-				this.$el.append('<div class="input-h"></div>');
+				this.$el.append('<div class="' + this.fieldClass +'"><div class="' + this.inputhClass +'"></div></div>');
 				this.$input = $('<input>', {
 					placeholder: this.model.get('defaults'),
 					type: 'text'
 				});
-				this.$el.find('.input-h').html(this.$input);
+				this.$el.find('.' + this.inputhClass).html(this.$input);
 			}
-			//this.setValue(this.componentValue, 0);
 		},
 
 		render : function() {
 			this.renderLabel();
 			this.renderField();
+			this.el.className = this.className;
 			return this;
 		},
 

src/trait_manager/view/TraitsView.js

@@ -12,9 +12,7 @@ define(['backbone', 'Abstract/view/DomainViews', './TraitView'],
 				this.em = o.editor;
 				this.pfx = this.config.stylePrefix || '';
 				this.listenTo(this.em, 'change:selectedComponent', this.updatedCollection);
-				/*
-				if target not empty refresh
-				 */
+				this.updatedCollection();
 			},
 
 			/**
@@ -23,38 +21,10 @@ define(['backbone', 'Abstract/view/DomainViews', './TraitView'],
 			 */
 			updatedCollection: function() {
 				var comp = this.em.get('selectedComponent');
-				this.collection = comp.get('traits');
-				this.render();
-			},
-
-			onChange: function() {
-				//change model value
-			},
-
-			/**
-			 * On change callback
-			 * @private
-			 */
-			onValuesChange: function() {
-				var m = this.model;
-				var trg = m.target;
-				var attrs = trg.get('attributes');
-				attrs[m.get('name')] = m.get('value');
-				trg.set('attributes', attrs);
-			},
-
-			/**
-			 * Render label
-			 * @private
-			 */
-			renderLabel: function() {
-				this.$el.html(this.templateLabel({
-					pfx		: this.pfx,
-					ppfx	: this.ppfx,
-					icon	: this.model.get('icon'),
-					info	: this.model.get('info'),
-					label	: this.model.get('name'),
-				}));
+				if(comp){
+					this.collection = comp.get('traits');
+					this.render();
+				}
 			},
 
 		});

styles/css/main.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+/* stylelint-disable */
 /***
 Spectrum Colorpicker v1.7.1
 https://github.com/bgrins/spectrum
@@ -2558,62 +2559,62 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   content: ""; }
 
 /* Dark theme */
-/* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
-/*l: #d8d7db*/
+/* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */
+/* l: #d8d7db */
 /* Light theme
 $mainColor: #fff;
 $fontColor: #9299a3;
 $fontColorActive: #4f8ef7;
 */
-/* darken($mainColor, 4%) - #383838*/
-/*#515151*/
+/* darken($mainColor, 4%) - #383838 */
+/* #515151 */
 @font-face {
   font-family: 'font3336';
   src: url("../fonts/main-fonts.eot?v=5");
   src: url("../fonts/main-fonts.woff?v=5") format("woff"), url("../fonts/main-fonts.ttf?v=5") format("truetype"), url("../fonts/main-fonts.svg?v=5") format("svg"), url("../fonts/main-fonts.eot?v=5") format("embedded-opentype");
   font-weight: normal;
   font-style: normal; }
 
-.gjs-fonts:before {
+.gjs-fonts::before {
   display: block;
   font: normal normal normal 14px font3336;
-  font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 5em; }
 
-.gjs-f-b1:before {
+.gjs-f-b1::before {
   content: 'q'; }
 
-.gjs-f-b2:before {
+.gjs-f-b2::before {
   content: 'w'; }
 
-.gjs-f-b3:before {
+.gjs-f-b3::before {
   content: 'e'; }
 
-.gjs-f-b37:before {
+.gjs-f-b37::before {
   content: 'r'; }
 
-.gjs-f-hero:before {
+.gjs-f-hero::before {
   content: 't'; }
 
-.gjs-f-h1p:before {
+.gjs-f-h1p::before {
   content: 'y'; }
 
-.gjs-f-3ba:before {
+.gjs-f-3ba::before {
   content: 'u'; }
 
-.gjs-f-image:before {
+.gjs-f-image::before {
   content: 'i'; }
 
-.gjs-f-text:before {
+.gjs-f-text::before {
   content: 'o'; }
 
-.gjs-f-quo:before {
+.gjs-f-quo::before {
   content: 'p'; }
 
-.gjs-invis-invis, .gjs-clm-tags #gjs-clm-new, .gjs-no-app {
+.gjs-invis-invis, .gjs-clm-tags #gjs-clm-new,
+.gjs-no-app {
   background-color: transparent;
   border: none;
   color: inherit; }
@@ -2716,6 +2717,14 @@ div.gjs-select {
 .gjs-select select:focus {
   outline: none; }
 
+/*************  TRAITS  ****************/
+.gjs-trt-trait {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  font-size: 0.75em;
+  font-weight: lighter; }
+
 /*************  CANVAS  ****************/
 .gjs-cv-canvas {
   background-color: rgba(0, 0, 0, 0.15);
@@ -2848,7 +2857,7 @@ ol.example li.placeholder:before {
   outline: 1px solid #3b97e3; }
 
 *.gjs-com-hover-delete, div.gjs-com-hover-delete {
-  outline: 2px solid #DD3636;
+  outline: 2px solid #dd3636;
   opacity: 0.5;
   filter: alpha(opacity=50); }
 
@@ -2867,7 +2876,7 @@ ol.example li.placeholder:before {
   display: none; }
 
 .gjs-com-badge-red {
-  background-color: #DD3636; }
+  background-color: #dd3636; }
 
 .gjs-badge-warning {
   background-color: #ffca6f; }
@@ -3106,6 +3115,7 @@ ol.example li.placeholder:before {
     background-color: transparent;
     width: 100%;
     position: relative;
+    padding: 3px 0;
     z-index: 1; }
   .gjs-field select {
     height: 20px; }