Update trait view

9 years ago · 2870b23e9a
8 changed files with 135 additions and 134 deletions
--- a/src/commands/view/OpenTraitManager.js
+++ b/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;
--- a/src/domain_abstract/view/DomainViews.js
+++ b/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;

--- a/src/trait_manager/config/config.js
+++ b/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',
-
 	};
 });
--- a/src/trait_manager/main.js
+++ b/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;
 			},

 		};
--- a/src/trait_manager/view/TraitView.js
+++ b/src/trait_manager/view/TraitView.js
@ -9,22 +9,34 @@ 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);
 		},

 		/**
@ -32,17 +44,7 @@ define(['backbone'], function (Backbone) {
 		 * @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;
 		},

--- a/src/trait_manager/view/TraitsView.js
+++ b/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();
+				}
 			},

 		});
--- a/styles/css/main.css
+++ b/styles/css/main.css
@ -1,4 +1,5 @@
@charset "UTF-8";
+/* stylelint-disable */
 /***
 Spectrum Colorpicker v1.7.1
 https://github.com/bgrins/spectrum
@ -2558,15 +2559,15 @@ 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");
@ -2574,46 +2575,46 @@ $fontColorActive: #4f8ef7;
  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; }
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@ -1,3 +1,4 @@
+/* stylelint-disable */
@import "spectrum";
@import "font-awesome";

@ -13,10 +14,11 @@ $com-prefix: 	$app-prefix + 'com-';
 $sm-prefix: 	$app-prefix + 'sm-';
 $cv-prefix: 	$app-prefix + 'cv-';
 $clm-prefix: 	$app-prefix + 'clm-';
+$trt-prefix: 	$app-prefix + 'trt-';

 /* Dark theme */
-$mainColor:		#444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
-$fontColor:   #ddd; /*l: #d8d7db*/
+$mainColor:		#444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */
+$fontColor:   #ddd; /* l: #d8d7db */
 $fontColorActive: #f8f8f8;

 /* Light theme
@ -25,14 +27,14 @@ $fontColor: #9299a3;
 $fontColorActive: #4f8ef7;
 */

-$mainDkColor:	rgba(0, 0, 0, 0.3);/* darken($mainColor, 4%) - #383838*/
+$mainDkColor:	rgba(0, 0, 0, 0.3);/* darken($mainColor, 4%) - #383838 */
 $mainDklColor: rgba(0, 0, 0, 0.1);
-$mainLhColor:	rgba(255, 255, 255, 0.1);/*#515151*/
+$mainLhColor:	rgba(255, 255, 255, 0.1); /* #515151 */
 $mainLhlColor: rgba(255, 255, 255, 0.7);
 $fontColorDk:	#777;
 $mainFont:		Helvetica, sans-serif;
 $colorBlue:		#3b97e3;
-$colorRed: 		#DD3636;
+$colorRed: 		#dd3636;
 $colorYell:		#ffca6f;
 $colorGreen:	#62c462;
 $tagBg: #804f7b;
@ -47,60 +49,60 @@ $fontV: 5;//random(1000)
@font-face {
  font-family: 'font3336';
  src: url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}');
-  src: url('#{$fontPath}/#{$fontName}.woff?v=#{$fontV}') format('woff'),
-       //url('#{$fontPath}/#{$fontName}.woff2?v=#{$fontV}') format('woff2'),
-       url('#{$fontPath}/#{$fontName}.ttf?v=#{$fontV}') format('truetype'),
-       url('#{$fontPath}/#{$fontName}.svg?v=#{$fontV}') format('svg'),
-       url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}') format('embedded-opentype');
+  src:
+    url('#{$fontPath}/#{$fontName}.woff?v=#{$fontV}') format('woff'),
+    //url('#{$fontPath}/#{$fontName}.woff2?v=#{$fontV}') format('woff2'),
+    url('#{$fontPath}/#{$fontName}.ttf?v=#{$fontV}') format('truetype'),
+    url('#{$fontPath}/#{$fontName}.svg?v=#{$fontV}') format('svg'),
+    url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
 }

@mixin user-select($v) {
-    -moz-user-select: 	$v;
-	-khtml-user-select: $v;
-	-webkit-user-select:$v;
-	-ms-user-select: 	$v;
-	-o-user-select: 	$v;
- 	user-select: 		$v;
+  -moz-user-select: $v;
+  -khtml-user-select: $v;
+  -webkit-user-select: $v;
+  -ms-user-select: $v;
+  -o-user-select: $v;
+  user-select: $v;
 }

@mixin opacity($v) {
-  opacity: 		$v;
-  $opacity-ie: 	$v * 100;
-  filter: 		alpha(opacity=$opacity-ie);
+  opacity: $v;
+  filter: alpha(opacity=$v * 100);
 }

-@mixin appearance($v){
-	-webkit-appearance: $v;
-	-moz-appearance: $v;
-	appearance: $v;
+@mixin appearance($v) {
+  -webkit-appearance: $v;
+  -moz-appearance: $v;
+  appearance: $v;
 }

-.#{$app-prefix}fonts{}
+//.#{$app-prefix}fonts {}

-.#{$app-prefix}fonts:before{
+.#{$app-prefix}fonts::before {
  display: block;
  font: normal normal normal 14px font3336; // shortening font declaration
-  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 5em;
 }
-.#{$app-prefix}f-b1:before { content: 'q'; }
-.#{$app-prefix}f-b2:before { content: 'w'; }
-.#{$app-prefix}f-b3:before { content: 'e'; }
-.#{$app-prefix}f-b37:before { content: 'r'; }
-.#{$app-prefix}f-hero:before { content: 't'; }
-.#{$app-prefix}f-h1p:before { content: 'y'; }
-.#{$app-prefix}f-3ba:before { content: 'u'; }
-.#{$app-prefix}f-image:before { content: 'i'; }
-.#{$app-prefix}f-text:before { content: 'o'; }
-.#{$app-prefix}f-quo:before { content: 'p'; }
+.#{$app-prefix}f-b1::before { content: 'q'; }
+.#{$app-prefix}f-b2::before { content: 'w'; }
+.#{$app-prefix}f-b3::before { content: 'e'; }
+.#{$app-prefix}f-b37::before { content: 'r'; }
+.#{$app-prefix}f-hero::before { content: 't'; }
+.#{$app-prefix}f-h1p::before { content: 'y'; }
+.#{$app-prefix}f-3ba::before { content: 'u'; }
+.#{$app-prefix}f-image::before { content: 'i'; }
+.#{$app-prefix}f-text::before { content: 'o'; }
+.#{$app-prefix}f-quo::before { content: 'p'; }


-.#{$app-prefix}invis-invis, .#{$app-prefix}no-app{
+.#{$app-prefix}invis-invis,
+.#{$app-prefix}no-app {
 	background-color: transparent;
 	border: none;
 	color:inherit;
@ -188,17 +190,20 @@ $fontV: 5;//random(1000)
  color: $fontColor;
  padding: 0.5em 1em;
 }
-.#{$app-prefix}select{
+.#{$app-prefix}select {
  @extend .#{$app-prefix}input;
 }
-div.#{$app-prefix}select{
+
+div.#{$app-prefix}select {
  padding: 0;
 }
-.#{$app-prefix}select select{
-  padding-right: 10px
+
+.#{$app-prefix}select select {
+  padding-right: 10px;
 }
+
 .#{$app-prefix}select:-moz-focusring,
-.#{$app-prefix}select select:-moz-focusring{
+.#{$app-prefix}select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 $mainLhlColor;
 }
@ -214,10 +219,20 @@ div.#{$app-prefix}select{
 .#{$app-prefix}select option,
 .#{$clm-prefix}select option,
 .#{$sm-prefix}select option,
-.#{$sm-prefix}unit option{
+.#{$sm-prefix}unit option {
  @extend .#{$app-prefix}bg-main;
  //background-color: $mainDkColor;
 }
+
+/*************  TRAITS  ****************/
+.#{$trt-prefix}trait {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  font-size: 0.75em;
+  font-weight: lighter;
+}
+
 /*************  CANVAS  ****************/
 .#{$cv-prefix}canvas {
  background-color: rgba(0, 0, 0, 0.15);
@ -638,6 +653,7 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
    background-color: transparent;
    width: 100%;
    position: relative;
+    padding: 3px 0;
    z-index:1;
  }