Added ability to toggle combobox's visibility so we can show/hide materials comboboxes in the tool options.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

2 files changed, 51 insertions, 20 deletions

diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index 3200b01c..bc433f52 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -104,6 +104,26 @@ exports.Combobox = Montage.create(Component, {
         }
     },
 
+    _visible: {
+        enumerable: false,
+        value: true
+    },
+
+    visible: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+            return this._visible;
+        },
+        set: function(value) {
+            if(value !== this._visible)
+            {
+                this._visible = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     handleChange:
     {
         value:function(event)
@@ -158,6 +178,14 @@ exports.Combobox = Montage.create(Component, {
                     this.element.appendChild(optionItem);
                 }
                 this.element.disabled = !this._enabled;
+                if(this._visible)
+                {
+                    this.element.style.visibility = "visible";
+                }
+                else
+                {
+                    this.element.style.visibility = "hidden";
+                }
             }
         }
     },
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js
index 345e361c..79567453 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.js
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js
@@ -45,13 +45,16 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
                 this._selectedSubTool = value;
                 this[this._selectedSubTool.properties].visible = true;
 
-//                if(this._selectedSubTool.id === "LineTool") {
-//                    this._fillIcon.style["display"] = "none";
-//                    this._fillMaterial.style["display"] = "none";
-//                } else {
-//                    this._fillIcon.style["display"] = "";
-//                    this._fillMaterial.style["display"] = "";
-//                }
+                if(this._useWebGL.checked)
+                {
+                    if(this._selectedSubTool.id === "LineTool") {
+                        this._fillIcon.style["display"] = "none";
+                        this._fillMaterial.visible = false;
+                    } else {
+                        this._fillIcon.style["display"] = "";
+                        this._fillMaterial.visible = true;
+                    }
+                }
                 
             }
         }
@@ -62,23 +65,23 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
             if(this._useWebGL.checked)
             {
                 this._use3D = true;
-//                this._materialLabel.style["display"] = "";
-//                this._strokeIcon.style["display"] = "";
-//                this._strokeMaterial.style["display"] = "";
-//                if(this.selectedSubTool.id !== "LineTool")
-//                {
-//                    this._fillIcon.style["display"] = "";
-//                    this._fillMaterial.style["display"] = "";
-//                }
+                this._materialLabel.style["display"] = "";
+                this._strokeIcon.style["display"] = "";
+                this._strokeMaterial.visible = true;
+                if(this.selectedSubTool.id !== "LineTool")
+                {
+                    this._fillIcon.style["display"] = "";
+                    this._fillMaterial.visible = true;
+                }
             }
             else
             {
                 this._use3D = false;
-//                this._materialLabel.style["display"] = "none";
-//                this._strokeIcon.style["display"] = "none";
-//                this._strokeMaterial.style["display"] = "none";
-//                this._fillIcon.style["display"] = "none";
-//                this._fillMaterial.style["display"] = "none";
+                this._materialLabel.style["display"] = "none";
+                this._strokeIcon.style["display"] = "none";
+                this._strokeMaterial.visible = false;
+                this._fillIcon.style["display"] = "none";
+                this._fillMaterial.visible = false;
             }
         }
     }