From 92ab303bea64a557657f98ac6fe8bc250d45ac0b Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 27 Jun 2016 14:55:00 +0200 Subject: [PATCH] Add the possibility to insert new images inside Asset Manager --- src/asset_manager/config/config.js | 6 +- src/asset_manager/main.js | 90 ++++++++++++-- src/asset_manager/model/Asset.js | 26 ++-- src/asset_manager/model/Assets.js | 49 +++++++- src/asset_manager/template/assetImage.html | 5 +- src/asset_manager/template/assets.html | 15 +++ src/asset_manager/view/AssetImageView.js | 3 +- src/asset_manager/view/AssetView.js | 1 + src/asset_manager/view/AssetsView.js | 60 +++++++-- src/demo.js | 16 +-- src/editor/model/Editor.js | 2 +- styles/css/main.css | 130 ++++++++++++++------ styles/scss/main.scss | 126 ++++++++++++++----- test/specs/asset_manager/model/Assets.js | 39 ++++++ test/specs/asset_manager/view/AssetView.js | 4 +- test/specs/asset_manager/view/AssetsView.js | 27 ++-- 16 files changed, 460 insertions(+), 139 deletions(-) create mode 100644 src/asset_manager/template/assets.html diff --git a/src/asset_manager/config/config.js b/src/asset_manager/config/config.js index 6b56772b1..1e9498b15 100644 --- a/src/asset_manager/config/config.js +++ b/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, }; diff --git a/src/asset_manager/main.js b/src/asset_manager/main.js index 33c0d2e6c..617ac9943 100644 --- a/src/asset_manager/main.js +++ b/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|Array} 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 * diff --git a/src/asset_manager/model/Asset.js b/src/asset_manager/model/Asset.js index 810e4dad6..566333253 100644 --- a/src/asset_manager/model/Asset.js +++ b/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(); }, - + }); }); diff --git a/src/asset_manager/model/Assets.js b/src/asset_manager/model/Assets.js index a78092357..8c831767f 100644 --- a/src/asset_manager/model/Assets.js +++ b/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]); + }, + }); }); diff --git a/src/asset_manager/template/assetImage.html b/src/asset_manager/template/assetImage.html index afcb72b44..67d533051 100644 --- a/src/asset_manager/template/assetImage.html +++ b/src/asset_manager/template/assetImage.html @@ -1,4 +1,7 @@ -
+
+
+
+
<%= name %>
<%= dim %>
diff --git a/src/asset_manager/template/assets.html b/src/asset_manager/template/assets.html new file mode 100644 index 000000000..890ddd6f9 --- /dev/null +++ b/src/asset_manager/template/assets.html @@ -0,0 +1,15 @@ +
+
+
+ + +
+
+ +
+
+
+
\ No newline at end of file diff --git a/src/asset_manager/view/AssetImageView.js b/src/asset_manager/view/AssetImageView.js index b047deab2..52d9b9440 100644 --- a/src/asset_manager/view/AssetImageView.js +++ b/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; diff --git a/src/asset_manager/view/AssetView.js b/src/asset_manager/view/AssetView.js index 8bb17c629..1d992497d 100644 --- a/src/asset_manager/view/AssetView.js +++ b/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 ); }, diff --git a/src/asset_manager/view/AssetsView.js b/src/asset_manager/view/AssetsView.js index 31ea219e0..b33662c77 100644 --- a/src/asset_manager/view/AssetsView.js +++ b/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; } }); diff --git a/src/demo.js b/src/demo.js index b977949ac..75d68a348 100644 --- a/src/demo.js +++ b/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}, ] diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index d7f77916a..d733f9c79 100644 --- a/src/editor/model/Editor.js +++ b/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; diff --git a/styles/css/main.css b/styles/css/main.css index 224ea1b9e..da8dde3ce 100644 --- a/styles/css/main.css +++ b/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); } diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 6c1d3c117..fa28282fc 100644 --- a/styles/scss/main.scss +++ b/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; diff --git a/test/specs/asset_manager/model/Assets.js b/test/specs/asset_manager/model/Assets.js index ff3977c5c..fbf2820d4 100644 --- a/test/specs/asset_manager/model/Assets.js +++ b/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'); + }); + }); }); }); \ No newline at end of file diff --git a/test/specs/asset_manager/view/AssetView.js b/test/specs/asset_manager/view/AssetView.js index 4bf7f4a25..ccc843c2d 100644 --- a/test/specs/asset_manager/view/AssetView.js +++ b/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 () { diff --git a/test/specs/asset_manager/view/AssetsView.js b/test/specs/asset_manager/view/AssetsView.js index b3e336cb6..ce8a774b1 100644 --- a/test/specs/asset_manager/view/AssetsView.js +++ b/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 (){