Add the possibility to insert new images inside Asset Manager

src/asset_manager/config/config.js

@@ -1,5 +1,7 @@
 define(function () {
 	return {
+		// Indicates if try to load data from the selected storage
+    autoload: 1,
 
 		// Style prefix
 		stylePrefix			: 'am-',
@@ -44,8 +46,8 @@ define(function () {
 		// Store assets data where the new one is added or deleted
 		storeOnChange		: true,
 
-		// It could be useful avoid to send other requests, for saving assets,
-		// after each upload because the uploader script has already done it
+		// It could be useful to avoid send other requests for saving assets,
+		// as after upload the script may have already done it
 		storeAfterUpload	: false,
 
 	};

src/asset_manager/main.js

@@ -1,12 +1,6 @@
 define(function(require) {
-	/**
-	 * @class 	AssetManager
-	 * @param 	{Object} Configurations
-	 *
-	 * @return	{Object}
- 	 * */
-	var AssetManager	= function(config)
-	{
+
+	var AssetManager	= function(config) {
 		var c			= config || {},
 			defaults	= require('./config/config'),
 			Assets		= require('./model/Assets'),
@@ -24,12 +18,88 @@ define(function(require) {
 		    	config		: c,
 		};
 
-	    this.am 		= new AssetsView(obj);
-	    this.fu 		= new FileUpload(obj);
+	  this.am 		= new AssetsView(obj);
+	  this.fu 		= new FileUpload(obj);
 	};
 
 	AssetManager.prototype	= {
 
+			/**
+			 * Add new asset/s to the collection. URLs are supposed to be unique
+			 * @param {string|Object|Array<string>|Array<Object>} assets URL strings or an objects representing the resource.
+			 * @return {this}
+			 * @example
+			 * // In case of strings, would be interpreted as images
+			 * assetManager.add('http://img.jpg');
+			 * assetManager.add(['http://img.jpg', './path/to/img.png']);
+			 *
+			 * // Using objects you could indicate the type and other meta informations
+			 * assetManager.add({
+			 * 	src: 'http://img.jpg',
+			 * 	type: 'image',
+			 * 	height: 300,
+			 *	width: 200,
+			 * });
+			 * assetManager.add([{
+			 * 	src: 'http://img.jpg',
+			 * 	type: 'image',
+			 * },{
+			 * 	src: './path/to/img.png',
+			 * 	type: 'image',
+			 * }]);
+			 */
+			add: function(assets){
+				return this;
+			},
+
+			/**
+			 * Return the asset by URL
+			 * @param  {string} id URL of the asset
+			 * @return {Object} Object representing the asset
+			 * @example
+			 * var asset = assetManager.get('http://img.jpg');
+			 */
+			get: function(id){
+				return {};
+			},
+
+			/**
+			 * Return all assets
+			 * @return {Collection}
+			 */
+			getAll: function(){
+				return assets;
+			},
+
+			/**
+			 * Remove asset by URL
+			 * @param  {string} id URL of the asset
+			 * @return {this}
+			 * @example
+			 * assetManager.remove('http://img.jpg');
+			 */
+			remove: function(id){
+				return this;
+			},
+
+			/**
+			 * Store data from the selected storage
+			 * @return {[type]} [description]
+			 */
+			store: function(){
+
+			},
+
+			/**
+			 * Load data from the selected storage
+			 * @return {[type]} [description]
+			 */
+			load: function(){
+
+			},
+
+			//-------
+
 			/**
 			 * Get collection of assets
 			 *

src/asset_manager/model/Asset.js

@@ -1,36 +1,36 @@
-define(['backbone'], 
+define(['backbone'],
 	function (Backbone) {
 		/**
 		 * @class Asset
 		 * */
-		return Backbone.Model.extend({ 
-			
+		return Backbone.Model.extend({
+
 			defaults: {
 				type:	'none',			//Type of the asset
 				src:	'',				//Location
 			},
-			
+
 			initialize: function(options) {
 				this.options = options || {};
 			},
-			
+
 			/**
-			 * Get filename of the asset 
-			 * 
+			 * Get filename of the asset
+			 *
 			 * @return	{String}
 			 * */
 			getFilename: function(){
-				return  this.get('src').split('/').pop(); 
+				return  this.get('src').split('/').pop();
 			},
-			
+
 			/**
-			 * Get extension of the asset 
-			 * 
+			 * Get extension of the asset
+			 *
 			 * @return	{String}
 			 * */
 			getExtension: function(){
-				return  this.getFilename().split('.').pop(); 
+				return  this.getFilename().split('.').pop();
 			},
-			
+
 		});
 });

src/asset_manager/model/Assets.js

@@ -1,11 +1,52 @@
-define(['backbone','./Asset'], 
+define(['backbone','./Asset'],
 	function (Backbone, Asset) {
 		/**
 		 * @class Assets
 		 * */
-		return Backbone.Collection.extend({ 
-			
+		return Backbone.Collection.extend({
+
 			model:	Asset,
-			
+
+      /**
+       * Add new image asset to the collection
+       * @param {string} url URL of the image
+       * @param {Object} opts Options
+       * @return {this}
+       * @private
+       */
+      addImg: function(url, opts){
+        this.add({
+          type: 'image',
+          src: url,
+        }, opts);
+        return this;
+      },
+
+      /**
+       * Prevent inserting assets with the same 'src'
+       * @private
+       */
+      add: function(models, opt) {
+        var mods = [];
+        models = models instanceof Array ? models : [models];
+
+        for (var i = 0, len = models.length; i < len; i++) {
+          var model = models[i];
+
+          if(!model || !model.src)
+            continue;
+
+          var found = this.where({src: model.src});
+
+          if(!found.length)
+            mods.push(model);
+        }
+
+        if(mods.length == 1)
+          mods = mods[0];
+
+        return Backbone.Collection.prototype.add.apply(this, [mods, opt]);
+      },
+
 		});
 });

src/asset_manager/template/assetImage.html

@@ -1,4 +1,7 @@
-<div id="<%= pfx %>preview" style="background-image: url(<%= src %>);"></div>
+<div id="<%= pfx %>preview-cont">
+  <div id="<%= pfx %>preview" style="background-image: url(<%= src %>);"></div>
+  <div id="<%= pfx %>preview-bg" class="<%= ppfx %>checker-bg"></div>
+</div>
 <div id="<%= pfx %>meta">
 	<div id="<%= pfx %>name"><%= name %></div>
 	<div id="<%= pfx %>dimensions"><%= dim %></div>

src/asset_manager/template/assets.html

@@ -0,0 +1,15 @@
+<div class="<%= pfx %>assets-cont">
+  <div class="<%= pfx %>assets-header">
+    <form id="login-form" class="<%= pfx %>add-asset">
+      <input class="<%= ppfx %>input" placeholder="http://path/to/the/image.jpg" />
+      <button class="<%= ppfx %>btn-prim">Add image</button>
+      <div style="clear:both"></div>
+    </form>
+    <div class="<%= pfx %>dips" style="display:none">
+      <button class="fa fa-th <%= ppfx %>btnt"></button>
+      <button class="fa fa-th-list <%= ppfx %>btnt"></button>
+    </div>
+  </div>
+  <div class="<%= pfx %>assets"></div>
+  <div style="clear:both"></div>
+</div>

src/asset_manager/view/AssetImageView.js

@@ -80,7 +80,8 @@ define(['./AssetView','text!./../template/assetImage.html'],
 				name: 	name,
 				src: 	this.model.get('src'),
 				dim:	dim,
-				pfx:	this.pfx
+				pfx:	this.pfx,
+				ppfx:	this.ppfx
 			}));
 			this.$el.attr('class', this.className);
 			return this;

src/asset_manager/view/AssetView.js

@@ -9,6 +9,7 @@ define(['backbone'],
 			this.options 		= o;
 			this.config			= o.config || {};
 			this.pfx				= this.config.stylePrefix || '';
+			this.ppfx				= this.config.pStylePrefix || '';
 			this.className	= this.pfx + 'asset';
 			this.listenTo( this.model, 'destroy remove', this.remove );
 		},

src/asset_manager/view/AssetsView.js

@@ -1,14 +1,17 @@
-define(['backbone', './AssetView', './AssetImageView', './FileUploader'],
-	function (Backbone, AssetView, AssetImageView, FileUploader) {
+define(['backbone', './AssetView', './AssetImageView', './FileUploader', 'text!./../template/assets.html'],
+	function (Backbone, AssetView, AssetImageView, FileUploader, assetsTemplate) {
 	/**
 	 * @class AssetsView
 	 * */
 	return Backbone.View.extend({
 
+		template: _.template(assetsTemplate),
+
 		initialize: function(o) {
-			this.options 	= o;
-			this.config		= o.config;
-			this.pfx		= this.config.stylePrefix;
+			this.options = o;
+			this.config = o.config;
+			this.pfx = this.config.stylePrefix || '';
+			this.ppfx = this.config.pStylePrefix || '';
 			this.listenTo( this.collection, 'add', this.addToAsset );
 			this.listenTo( this.collection, 'deselectAll', this.deselectAll );
 			this.className	= this.pfx + 'assets';
@@ -29,6 +32,43 @@ define(['backbone', './AssetView', './AssetImageView', './FileUploader'],
 					}
 				}
 			}
+
+			this.events = {};
+			this.events.submit = 'addFromStr';
+			this.delegateEvents();
+		},
+
+		/**
+		 * Add new asset to the collection via string
+		 * @param {Event} e Event object
+		 * @return {this}
+		 */
+		addFromStr: function(e){
+			e.preventDefault();
+
+			if(!this.inputUrl || !this.inputUrl.value)
+				this.inputUrl = this.el.querySelector('.'+this.pfx+'add-asset input');
+
+			var url = this.inputUrl.value.trim();
+
+			if(!url)
+				return;
+
+			this.collection.addImg(url, {at: 0});
+
+			this.getAssetsEl().scrollTop = 0;
+			this.inputUrl.value = '';
+			return this;
+		},
+
+		/**
+		 * Returns assets element
+		 * @return {HTMLElement}
+		 */
+		getAssetsEl: function(){
+			//if(!this.assets) // Not able to cache as after the rerender it losses the ref
+			this.assets = this.el.querySelector('.' + this.pfx + 'assets');
+			return this.assets;
 		},
 
 		/**
@@ -90,7 +130,8 @@ define(['backbone', './AssetView', './AssetImageView', './FileUploader'],
 			if(fragment){
 				fragment.appendChild( rendered );
 			}else{
-				this.$el.prepend(rendered);
+				var assetsEl = this.getAssetsEl();
+				assetsEl.insertBefore(rendered, assetsEl.firstChild);
 			}
 
 			return rendered;
@@ -113,9 +154,12 @@ define(['backbone', './AssetView', './AssetImageView', './FileUploader'],
 				this.addAsset(model, fragment);
 			},this);
 
-			this.$el.append(fragment);
-			this.$el.attr('class', this.className);
+			this.$el.html(this.template({
+				pfx:	this.pfx,
+				ppfx: this.ppfx,
+			}));
 
+			this.$el.find('.'+this.pfx + 'assets').append(fragment);
 			return this;
 		}
 	});

src/demo.js

@@ -45,14 +45,14 @@ require(['config/require-config'], function() {
 				storeOnChange		: true,
 				storeAfterUpload	: true,
 				assets				: [
-					      				   { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', date: '2015-01-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://www.freewhd.com/wp-content/uploads/2014/01/work-desk-14949.jpg', date: '2015-02-01',height:1080, width:1728},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', height:350, width:250},
+					      				   { type: 'image', src : './img/work-desk.jpg', date: '2015-02-01',height:1080, width:1728},
 					      				   { type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320},
 					      				   { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
 				      				   ]

src/editor/model/Editor.js

@@ -293,8 +293,8 @@ define([
 			initAssetManager: function() {
 				var cfg			= this.config.assetManager,
 					pfx			= cfg.stylePrefix || 'am-';
+				cfg.pStylePrefix = this.config.stylePrefix;
 				cfg.stylePrefix = this.config.stylePrefix + pfx;
-
 				if(this.stm)
 					cfg.stm = this.stm;
 

styles/css/main.css

@@ -2576,7 +2576,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   opacity: 0.5;
   filter: alpha(opacity=50); }
 
-.checker-bg, .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
+.wte-checker-bg, .checker-bg, .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); }
 
 /********************* MAIN ************************/
@@ -2607,6 +2607,27 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   filter: alpha(opacity=50);
   pointer-events: none; }
 
+.wte-btn-prim {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 2px;
+  padding: 3px 6px;
+  cursor: pointer;
+  color: #ddd;
+  padding: 0.5em;
+  border: none; }
+
+.wte-btn-prim:active {
+  background-color: rgba(255, 255, 255, 0.1); }
+
+.wte-input {
+  background-color: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
+  color: #eee;
+  padding: 0.5em 1em; }
+
 /*************  CANVAS  ****************/
 .wte-cv-canvas {
   position: absolute;
@@ -2627,12 +2648,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .wte-cv-canvas * {
   box-sizing: border-box; }
 
-.btn-cl, .wte-mdl-dialog .wte-mdl-btn-close, .wte-am-assets #wte-am-close {
+.btn-cl, .wte-mdl-dialog .wte-mdl-btn-close, .wte-am-assets-cont #wte-am-close {
   font-size: 25px;
   opacity: 0.3;
   filter: alpha(opacity=30);
   cursor: pointer; }
-  .btn-cl:hover, .wte-mdl-dialog .wte-mdl-btn-close:hover, .wte-am-assets #wte-am-close:hover {
+  .btn-cl:hover, .wte-mdl-dialog .wte-mdl-btn-close:hover, .wte-am-assets-cont #wte-am-close:hover {
     opacity: 0.7;
     filter: alpha(opacity=70); }
 
@@ -2771,7 +2792,7 @@ ol.example li.placeholder:before {
     height: 30px;
     width: 25px; }
   .wte-pn-panel#wte-pn-views {
-    border-bottom: 2px solid #3c3c3c;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
     right: 0;
     width: 16.5%;
     z-index: 4; }
@@ -2783,7 +2804,7 @@ ol.example li.placeholder:before {
     overflow: auto;
     box-shadow: 0 0 5px #333; }
 
-.wte-pn-btn {
+.wte-pn-btn, .wte-btnt {
   box-sizing: border-box;
   height: 35px;
   width: 35px;
@@ -2797,16 +2818,16 @@ ol.example li.placeholder:before {
   cursor: pointer;
   padding: 0 5px;
   position: relative; }
-  .wte-pn-btn.wte-pn-active {
-    background-color: #3a3a3a;
-    box-shadow: 0 0 3px #2d2d2d inset; }
-  .wte-pn-btn > .wte-pn-arrow-rd {
+  .wte-pn-btn.wte-pn-active, .wte-btnt.wte-pn-active {
+    background-color: rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset; }
+  .wte-pn-btn > .wte-pn-arrow-rd, .wte-btnt > .wte-pn-arrow-rd {
     border-bottom: 5px solid #eee;
     border-left: 5px solid transparent;
     bottom: 2px;
     right: 2px;
     position: absolute; }
-  .wte-pn-btn > .wte-pn-buttons {
+  .wte-pn-btn > .wte-pn-buttons, .wte-btnt > .wte-pn-buttons {
     background-color: #444;
     border-radius: 2px;
     position: absolute;
@@ -2814,9 +2835,9 @@ ol.example li.placeholder:before {
     left: 50px;
     top: 0;
     padding: 5px; }
-    .wte-pn-btn > .wte-pn-buttons.wte-pn-visible {
+    .wte-pn-btn > .wte-pn-buttons.wte-pn-visible, .wte-btnt > .wte-pn-buttons.wte-pn-visible {
       display: block; }
-    .wte-pn-btn > .wte-pn-buttons > .wte-pn-arrow-l {
+    .wte-pn-btn > .wte-pn-buttons > .wte-pn-arrow-l, .wte-btnt > .wte-pn-buttons > .wte-pn-arrow-l {
       border-bottom: 5px solid transparent;
       border-right: 5px solid #444;
       border-top: 5px solid transparent;
@@ -3048,11 +3069,11 @@ ol.example li.placeholder:before {
     .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
       bottom: 7px; }
     .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-input, .wte-clm-tags .wte-sm-field.wte-sm-input, .wte-sm-sector .wte-sm-input.wte-clm-field, .wte-clm-tags .wte-sm-input.wte-clm-field {
-      background-color: #333333;
+      background-color: rgba(0, 0, 0, 0.3);
       /*353535*/
-      border: 1px solid #292929;
+      border: 1px solid rgba(0, 0, 0, 0.1);
       /*292929*/
-      box-shadow: 1px 1px 0 #575757;
+      box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
       /*575757*/
       color: #d5d5d5;
       border-radius: 2px;
@@ -3065,8 +3086,8 @@ ol.example li.placeholder:before {
     .wte-sm-sector .wte-sm-field.wte-sm-select option, .wte-clm-tags .wte-sm-field.wte-sm-select option, .wte-sm-sector .wte-sm-select.wte-clm-field option, .wte-clm-tags .wte-sm-select.wte-clm-field option, .wte-sm-sector .wte-clm-select option, .wte-clm-tags .wte-clm-select option {
       margin: 5px 0; }
     .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field {
-      background-color: transparent;
-      border: 1px solid #333333; }
+      background-color: rgba(0, 0, 0, 0.1);
+      border: 1px solid rgba(0, 0, 0, 0.25); }
     .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field {
       width: auto;
       padding: 0;
@@ -3150,16 +3171,16 @@ ol.example li.placeholder:before {
       background-repeat: no-repeat;
       background-position: center center; }
     .wte-sm-sector .wte-sm-property .wte-sm-layers, .wte-clm-tags .wte-sm-property .wte-sm-layers {
-      background-color: #3a3a3a;
-      border: 1px solid #333333;
-      box-shadow: 1px 1px 0 #575757;
+      background-color: rgba(0, 0, 0, 0.13);
+      border: 1px solid rgba(0, 0, 0, 0.13);
+      box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
       border-radius: 2px;
       margin-top: 5px;
       min-height: 30px; }
     .wte-sm-sector .wte-sm-property .wte-sm-layer, .wte-clm-tags .wte-sm-property .wte-sm-layer {
-      background-color: #454545;
+      background-color: rgba(255, 255, 255, 0.055);
       border-radius: 2px;
-      box-shadow: 1px 1px 0 #333333, 1px 1px 0 #515151 inset;
+      box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(255, 255, 255, 0.055) inset;
       margin: 2px;
       padding: 7px;
       position: relative;
@@ -3190,7 +3211,7 @@ ol.example li.placeholder:before {
         width: 100%;
         background-size: cover !important; }
       .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-active, .wte-clm-tags .wte-sm-property .wte-sm-layer.wte-sm-active {
-        background-color: #4c4c4c; }
+        background-color: rgba(255, 255, 255, 0.12); }
       .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box {
         display: none; }
   .wte-sm-sector #wte-sm-text-shadow #wte-sm-preview::after, .wte-clm-tags #wte-sm-text-shadow #wte-sm-preview::after {
@@ -3349,6 +3370,21 @@ ol.example li.placeholder:before {
 
 /********* Assets Manager **********/
 .wte-am-assets {
+  height: 290px;
+  overflow: auto;
+  clear: both; }
+
+.wte-am-assets-header {
+  padding: 5px; }
+
+.wte-am-add-asset input {
+  width: 70%; }
+
+.wte-am-add-asset button {
+  width: 25%;
+  float: right; }
+
+.wte-am-assets-cont {
   background-color: #3a3a3a;
   border-radius: 3px;
   box-sizing: border-box;
@@ -3356,39 +3392,53 @@ ol.example li.placeholder:before {
   width: 45%;
   float: right;
   height: 325px;
-  overflow: auto; }
-  .wte-am-assets .wte-am-highlight {
+  overflow: hidden; }
+  .wte-am-assets-cont #wte-am-preview-cont {
+    position: relative;
+    height: 70px;
+    width: 30%;
+    background-color: #444;
+    border-radius: 2px;
+    float: left;
+    overflow: hidden; }
+  .wte-am-assets-cont #wte-am-preview {
+    position: absolute;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 100%;
+    width: 100%;
+    z-index: 1; }
+  .wte-am-assets-cont #wte-am-preview-bg {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+    z-index: 0; }
+  .wte-am-assets-cont .wte-am-highlight {
     background-color: #444; }
-  .wte-am-assets .wte-am-asset {
+  .wte-am-assets-cont .wte-am-asset {
     border-bottom: 1px solid #323232;
     padding: 5px;
     cursor: pointer;
     position: relative; }
-    .wte-am-assets .wte-am-asset:hover #wte-am-close {
+    .wte-am-assets-cont .wte-am-asset:hover #wte-am-close {
       display: block; }
-    .wte-am-assets .wte-am-asset #wte-am-preview {
-      height: 70px;
-      width: 30%;
-      background-position: center center;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-color: #444;
-      border-radius: 2px;
-      float: left; }
-  .wte-am-assets #wte-am-close {
+  .wte-am-assets-cont #wte-am-close {
     position: absolute;
     right: 5px;
     top: 0;
     display: none; }
-  .wte-am-assets #wte-am-meta {
+  .wte-am-assets-cont #wte-am-meta {
     width: 70%;
     float: left;
     font-size: 12px;
     padding: 5px 0 0 5px;
     box-sizing: border-box; }
-    .wte-am-assets #wte-am-meta > div {
+    .wte-am-assets-cont #wte-am-meta > div {
       margin-bottom: 5px; }
-    .wte-am-assets #wte-am-meta #wte-am-dimensions {
+    .wte-am-assets-cont #wte-am-meta #wte-am-dimensions {
       font-size: 10px;
       opacity: 0.5;
       filter: alpha(opacity=50); }

styles/scss/main.scss

@@ -23,6 +23,8 @@ $colorBlue:		#3b97e3;
 $colorRed: 		#DD3636;
 $colorYell:		#ffca6f;
 $colorGreen:	#62c462;
+$tagBg: #804f7b;
+$secColor: $tagBg;
 
 $imageCompDim:	50px;
 
@@ -67,7 +69,7 @@ $imageCompDim:	50px;
 .opac50{
 	@include opacity(0.50);
 }
-.checker-bg{
+.#{$app-prefix}checker-bg, .checker-bg{
 	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
 }
 
@@ -91,6 +93,29 @@ $imageCompDim:	50px;
   @include opacity(0.50);
   pointer-events: none;
 }
+
+.#{$app-prefix}btn-prim{
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 2px;
+  padding: 3px 6px;
+  cursor: pointer;
+  color: #ddd;
+  padding: 0.5em;
+  border: none;
+}
+.#{$app-prefix}btn-prim:active{
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.#{$app-prefix}input{
+  background-color: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
+  color: $fontColor;
+  padding: 0.5em 1em;
+}
 /*************  CANVAS  ****************/
 .#{$cv-prefix}canvas {
   position: absolute;
@@ -252,7 +277,7 @@ $leftWidth: 16.5%;
   }
 
   &##{$pn-prefix}views{
-  	border-bottom: 2px solid darken($mainColor, 3%);
+  	border-bottom: 2px solid rgba(0,0,0,0.3);
   	right: 0;
   	width: $leftWidth;
   	z-index: 4;
@@ -268,7 +293,7 @@ $leftWidth: 16.5%;
   }
 }
 
-.#{$pn-prefix}btn{
+.#{$pn-prefix}btn, .#{$app-prefix}btnt{
 	box-sizing: border-box;
 	height: 35px; width: 35px;
 	line-height: 35px;
@@ -283,8 +308,8 @@ $leftWidth: 16.5%;
 	position: relative;
 
 	&.#{$pn-prefix}active{
-		background-color: $mainDkColor;
-    	box-shadow: 0 0 3px darken($mainDkColor,5%) inset;
+		background-color: rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
 	}
 
 	> .#{$pn-prefix}arrow-rd {
@@ -551,9 +576,9 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 		.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; }
 
 	 	&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite, &.#{$sm-prefix}input {
-		  background-color: darken($mainDkColor, 2.5%);/*353535*/
-		  border: 1px solid darken($mainDkColor, 6.5%);/*292929*/
-		  box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);/*575757*/
+		  background-color: rgba(0, 0, 0, 0.3);/*353535*/
+		  border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/
+		  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);/*575757*/
 		  color: $inputFontColor;
 		  border-radius: 2px;
 		  box-sizing: border-box;
@@ -563,8 +588,8 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 		&.#{$sm-prefix}select select{ height: 20px; }
 		&.#{$sm-prefix}select option { margin: 5px 0;}
 		&.#{$sm-prefix}composite{
-			background-color: transparent;
-			border: 1px solid darken($mainDkColor, 2.5%);
+			background-color: rgba(0,0,0,0.1);
+			border: 1px solid rgba(0, 0, 0, 0.25);
 		}
 		&.#{$sm-prefix}list{
 			width:auto;
@@ -661,18 +686,18 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 		}
 
 		.#{$sm-prefix}layers {
-		  background-color: $mainDkColor;
-		  border: 1px solid darken($mainDkColor, 2.5%);
-		  box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);
+		  background-color: rgba(0,0,0,0.13);
+		  border: 1px solid rgba(0,0,0,0.13);
+		  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
 		  border-radius: 2px;
 		  margin-top: 5px;
 		  min-height: 30px;
 		}
 
 		.#{$sm-prefix}layer {
-		  background-color: lighten($mainDkColor, 4.5%);
+		  background-color: rgba(255, 255, 255, 0.055);
 		  border-radius: 2px;
-		  box-shadow: 1px 1px 0 darken($mainDkColor, 2.5%), 1px 1px 0 lighten($mainDkColor, 9%) inset;
+		  box-shadow: 1px 1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255, 255, 255, 0.055) inset;
 		  margin: 2px;
 		  padding: 7px;
 		  position: relative;
@@ -709,7 +734,7 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 			  background-size: cover !important;
 			}
 			&.#{$sm-prefix}active {
-			  background-color: lighten($mainDkColor, 7%);
+			  background-color: rgba(255, 255, 255, 0.12);
 			}
 			&.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box{
 				display:none;
@@ -777,7 +802,6 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 /********* Class manager **********/
 $addBtnBg: lighten($mainDkColor, 10%);
 $paddElClm: 5px 6px;
-$tagBg: #804f7b;
 
 .#{$clm-prefix}field{
 		@extend .#{$sm-prefix}field
@@ -911,8 +935,27 @@ $tagBg: #804f7b;
 }
 
 /********* Assets Manager **********/
+.#{$am-prefix}assets{
+  height: 290px;
+  overflow: auto;
+  clear: both;
+}
+
+.#{$am-prefix}assets-header{
+  padding: 5px;
+}
+
+.#{$am-prefix}add-asset{
+  input{
+    width: 70%;
+  }
+  button{
+    width: 25%;
+    float: right;
+  }
+}
 
-.#{$am-prefix}assets {
+.#{$am-prefix}assets-cont {
   background-color: $mainDkColor;
   border-radius: 3px;
   box-sizing: border-box;
@@ -920,26 +963,45 @@ $tagBg: #804f7b;
   width: 45%;
   float:right;
   height: 325px;
-  overflow: auto;
+  overflow: hidden;
+
+  ##{$am-prefix}preview-cont{
+    position: relative;
+    height: 70px; width: 30%;
+    background-color: $mainColor;
+    border-radius: 2px;
+    float: left;
+    overflow: hidden;
+  }
+
+  ##{$am-prefix}preview{
+    position: absolute;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+  }
+
+  ##{$am-prefix}preview-bg{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    @include opacity(0.5);
+    z-index: 0;
+  }
 
-  	.#{$am-prefix}highlight { background-color: $mainColor; }
+  .#{$am-prefix}highlight { background-color: $mainColor; }
 
-  	.#{$am-prefix}asset {
+  .#{$am-prefix}asset {
 	  border-bottom: 1px solid darken($mainDkColor, 3%);
 	  padding: 5px;
 	  cursor:pointer;
 	  position: relative;
-	  	&:hover ##{$am-prefix}close { display: block;}
-
-	  	##{$am-prefix}preview{
-			height: 70px; width: 30%;
-			background-position: center center;
-			background-size: cover;
-			background-repeat: no-repeat;
-			background-color: $mainColor;
-			border-radius: 2px;
-		    float: left;
-		}
+
+    &:hover ##{$am-prefix}close { display: block;}
+
 	}
 	##{$am-prefix}close {
 		@extend .btn-cl;

test/specs/asset_manager/model/Assets.js

@@ -4,10 +4,49 @@ define(['AssetManager/model/Assets'],
 		describe('Asset Manager', function() {
 
 			describe('Assets', function() {
+
+        var obj;
+
+        beforeEach(function () {
+          obj = new Assets();
+        });
+
+        afterEach(function () {
+          delete obj;
+        });
+
 				it('Object exists', function() {
 					Assets.should.be.exist;
 				});
 
+        it('Collection is empty', function() {
+          obj.length.should.equal(0);
+        });
+
+        it("Can't insert assets without src", function() {
+          obj.add({});
+          obj.length.should.equal(0);
+          obj.add([{},{},{}]);
+          obj.length.should.equal(0);
+        });
+
+        it("Insert assets only with src", function() {
+          obj.add([{},{src:'test'},{}]);
+          obj.length.should.equal(1);
+        });
+
+        it('addImg creates new asset', function() {
+          obj.addImg('/img/path');
+          obj.length.should.equal(1);
+        });
+
+        it('addImg asset is correct', function() {
+          obj.addImg('/img/path');
+          var asset = obj.at(0);
+          asset.get('type').should.equal('image');
+          asset.get('src').should.equal('/img/path');
+        });
+
 			});
 		});
 });

test/specs/asset_manager/view/AssetView.js

@@ -12,7 +12,7 @@ define(['AssetManager/view/AssetView', 'AssetManager/model/Asset', 'AssetManager
 
 				beforeEach(function () {
 					var coll 	= new Assets();
-					var model = coll.add({});
+					var model = coll.add({src: 'test'});
 					this.view = new AssetView({
 						config : {},
 						model: model
@@ -22,7 +22,7 @@ define(['AssetManager/view/AssetView', 'AssetManager/model/Asset', 'AssetManager
 				});
 
 				afterEach(function () {
-					this.view.model.destroy();
+					this.view.remove();
 				});
 
 				after(function () {

test/specs/asset_manager/view/AssetsView.js

@@ -33,38 +33,31 @@ define(['AssetManager/view/AssetsView', 'AssetManager/model/Assets'],
 				});
 
 				it("Collection is empty", function (){
-					this.view.$el.html().should.be.empty;
+					this.view.getAssetsEl().innerHTML.should.be.empty;
 				});
 
 				it("Add new asset", function (){
 					sinon.stub(this.view, "addAsset");
-					this.coll.add({});
+					this.coll.add({src: 'test'});
 					this.view.addAsset.calledOnce.should.equal(true);
 				});
 
 				it("Render new asset", function (){
-					this.coll.add({});
-					this.view.$el.html().should.not.be.empty;
-				});
-
-				it("Render correctly new asset", function (){
-					this.coll.add({});
-					var $asset = this.view.$el.children().first();
-					$asset.prop("tagName").should.equal('DIV');
-					$asset.html().should.be.empty;
+					this.coll.add({src: 'test'});
+					this.view.getAssetsEl().innerHTML.should.not.be.empty;
 				});
 
 				it("Render correctly new image asset", function (){
-					this.coll.add({ type: 'image'});
-					var $asset = this.view.$el.children().first();
-					$asset.prop("tagName").should.equal('DIV');
-					$asset.html().should.not.be.empty;
+					this.coll.add({ type: 'image', src: 'test'});
+					var asset = this.view.getAssetsEl().firstChild;
+					asset.tagName.should.equal('DIV');
+					asset.innerHTML.should.not.be.empty;
 				});
 
 				it("Clean collection from asset", function (){
-					var model = this.coll.add({});
+					var model = this.coll.add({src: 'test'});
 					this.coll.remove(model);
-					this.view.$el.html().should.be.empty;
+					this.view.getAssetsEl().innerHTML.should.be.empty;
 				});
 
 				it("Load no assets", function (){