Update trait style

src/demo.js

@@ -9,16 +9,23 @@ require(['config/require-config'], function() {
       noticeOnUnload: 0,
 			container	: '#gjs',
 			height: '100%',
-			//fromElement: true,
+			fromElement: true,
+			/*
 			components: [{
 				style:{
 					width:'100px',
 					height:'100px'
 				},
 				traits: ['title']
+			},{
+				type: 'image'
+			},{
+				tagName: 'a',
+				type: 'link',
+				content: 'mylink',
 			}],
+			*/
 			storageManager:{ autoload: 0},
-
 			commands: 		{
 					defaults		: [{
 													id: 	'open-github',

src/dom_components/main.js

@@ -40,6 +40,7 @@ define(function(require) {
 			Component = require('./model/Component'),
 			ComponentText = require('./model/ComponentText'),
 			ComponentImage = require('./model/ComponentImage'),
+			ComponentLink = require('./model/ComponentLink'),
 			ComponentView = require('./view/ComponentView'),
 			ComponentImageView = require('./view/ComponentImageView'),
 			ComponentTextView	= require('./view/ComponentTextView');
@@ -283,4 +284,4 @@ define(function(require) {
 
 		};
 	};
-});
+});

src/dom_components/model/ComponentLink.js

@@ -5,7 +5,7 @@ define(['./Component'],
 
 			defaults: _.extend({}, Component.prototype.defaults, {
 					droppable: false,
-					traits: ['href'],
+					traits: ['title', 'href', 'blank'],
 			}),
 
 		});

src/dom_components/model/Components.js

@@ -29,6 +29,12 @@ define([ 'backbone', 'require'],
 					    		this.mComponentText		= require("./ComponentText");
 							model	= new this.mComponentText(attrs, options);
 							break;
+							
+						case 'link':
+							if(!this.mComponentLink)
+					    		this.mComponentLink = require("./ComponentLink");
+							model	= new this.mComponentLink(attrs, options);
+							break;
 
 						case 'image':
 							if(!this.mComponentImage)

styles/css/main.css

@@ -2721,9 +2721,14 @@ div.gjs-select {
 .gjs-trt-trait {
   display: flex;
   justify-content: space-between;
-  padding: 10px;
+  padding: 5px 10px;
   font-size: 0.75em;
   font-weight: lighter; }
+  .gjs-trt-trait .gjs-label {
+    width: 30%;
+    text-align: left; }
+  .gjs-trt-trait .gjs-field {
+    width: 70%; }
 
 /*************  CANVAS  ****************/
 .gjs-cv-canvas {
@@ -3095,6 +3100,9 @@ ol.example li.placeholder:before {
 /*414141*/
 /*#252525*/
 /*b1b1b1*/
+.gjs-label {
+  line-height: 18px; }
+
 .gjs-field {
   background-color: rgba(0, 0, 0, 0.3);
   /*353535*/

styles/scss/main.scss

@@ -228,9 +228,18 @@ div.#{$app-prefix}select {
 .#{$trt-prefix}trait {
   display: flex;
   justify-content: space-between;
-  padding: 10px;
+  padding: 5px 10px;
   font-size: 0.75em;
   font-weight: lighter;
+
+  .#{$app-prefix}label {
+    width: 30%;
+    text-align: left;
+  }
+
+  .#{$app-prefix}field {
+    width: 70%;
+  }
 }
 
 /*************  CANVAS  ****************/
@@ -637,6 +646,10 @@ $lightBorder:   rgba(255, 255, 255, 0.05); /*414141*/
 $darkTextShadow:  $mainDkColor; /*#252525*/
 $arrowColor:    $mainLhlColor; /*b1b1b1*/
 
+.#{$app-prefix}label {
+  line-height: 18px;
+}
+
 .#{$app-prefix}field {
   background-color: $mainDkColor;/*353535*/
   border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/