Use input image opacity

lib/assets/javascripts/builder/components/form-components/editors/fill-color/inputs/input-image.js

@@ -7,6 +7,7 @@ var InputImageTemplate = require('./input-image.tpl');
 var ImageLoaderView = require('builder/components/img-loader-view');
 var InputColorFileView = require('builder/components/input-color/input-color-file-view');
 var TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
+var Utils = require('builder/helpers/utils');
 
 module.exports = CoreView.extend({
   tagName: 'li',
@@ -51,7 +52,7 @@ module.exports = CoreView.extend({
     this.iconView = new ImageLoaderView({
       imageClass: 'Editor-fillImageAsset',
       imageUrl: this._getImageURL(),
-      color: this.model.get('fixed')
+      color: this._getColor()
     });
 
     this.addView(this.iconView);
@@ -78,7 +79,7 @@ module.exports = CoreView.extend({
     }).bind(this);
 
     this.model.on('change:images change:image change:fixed', this.render, this);
-    this.model.on('change:fixed', this._updateImageColor, this);
+    this.model.on('change:opacity change:fixed', this._updateImageColor, this);
   },
 
   _categoryImagesPresent: function () {
@@ -92,7 +93,21 @@ module.exports = CoreView.extend({
   },
 
   _updateImageColor: function () {
-    this.iconView && this.iconView.updateImageColor(this.model.get('fixed'));
+    if (this.iconView) {
+      this.iconView.updateImageColor(this._getColor());
+    }
+  },
+
+  _getColor: function () {
+    var color = this.model.get('fixed');
+
+    return color
+      ? Utils.hexToRGBA(color, this._getOpacity())
+      : color;
+  },
+
+  _getOpacity: function () {
+    return this.model.get('opacity') != null ? this.model.get('opacity') : 1;
   },
 
   _onClick: function () {

lib/assets/javascripts/builder/components/input-color/input-color.js

@@ -173,15 +173,21 @@ module.exports = CoreView.extend({
 
     this.model.on('change:images', this.render, this);
     this.model.on('change:selected', this._onToggleSelected, this);
-    this.model.on('change:opacity', this.render, this);
     this.model.on('change:fixed', this.render, this);
     this.model.on('change:fixed', this._updateColor, this);
+    this.model.on('change:opacity', this.render, this);
+    this.model.on('change:opacity', this._updateColor, this);
     this.model.on('change:image', this.render, this);
     this.model.on('change:range', this.render, this);
   },
 
   _updateColor: function () {
-    this.iconView && this.iconView.updateImageColor(this.model.get('fixed'));
+    var value = this.model.get('fixed');
+
+    if (value) {
+      value = Utils.hexToRGBA(value, this._getOpacity());
+      this.iconView && this.iconView.updateImageColor(value);
+    }
   },
 
   _getValue: function () {