From 35fb7def80d5f1d23c0e934a8a501e32e970f824 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 6 May 2017 12:17:13 +0200
Subject: [PATCH] Add isComponentStylable() to the style manager property view
 As isTargetStylable() checks the target (which could be the Component but
 also the CSS Rule), I need something to check also the selected component

---
 index.html                             |  2 +-
 src/style_manager/view/PropertyView.js | 30 ++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index f1b3b2cfe..ebad90c9a 100755
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 
     <div id="gjs" style="height:0px; overflow:hidden">
       <header class="header-banner">
-        <div class="container-width">
+        <div class="container-width" data-gjs-stylable="width, height">
           <!--
           <table>
             <thead>
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index 9fb8a0a70..627d848f8 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/src/style_manager/view/PropertyView.js
@@ -12,6 +12,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 
     initialize: function(o) {
       this.config = o.config || {};
+      this.em = this.config.em;
       this.pfx = this.config.stylePrefix || '';
       this.ppfx = this.config.pStylePrefix || '';
       this.target = o.target || {};
@@ -157,7 +158,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 
       // Check if component is allowed to be styled
       var hideNoStyle = this.config.hideNotStylable;
-      if (!this.isTargetStylable()) {
+      if (!this.isTargetStylable() || !this.isComponentStylable()) {
         if (hideNoStyle) {
           this.hide();
         }
@@ -213,9 +214,10 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 
     /**
      * Check if target is stylable with this property
+     * The target could be the Component as the CSS Rule
      * @return {Boolean}
      */
-    isTargetStylable: function(){
+    isTargetStylable: function() {
       var stylable = this.getTarget().get('stylable');
       // Stylable could also be an array indicating with which property
       // the target could be styled
@@ -224,6 +226,30 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
       return stylable;
     },
 
+    /**
+     * Check if the selected component is stylable with this property
+     * The target could be the Component as the CSS Rule
+     * @return {Boolean}
+     */
+    isComponentStylable: function() {
+      var em = this.em;
+      var component = em && em.get('selectedComponent');
+
+      if (!component) {
+        return true;
+      }
+
+      var stylable = component.get('stylable');
+      console.log('ST', stylable);
+      // Stylable could also be an array indicating with which property
+      // the target could be styled
+      if(stylable instanceof Array){
+        stylable = _.indexOf(stylable, this.property) >= 0;
+      }
+
+      return stylable;
+    },
+
     /**
      * Set value to the input
      * @param   {String}  value