Allow users to toggle application of stroke and border settings when using the ink bottle tool.

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

6 files changed, 215 insertions, 53 deletions

diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
index 7f1b0f7f..a926a0b4 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
@@ -4,3 +4,27 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+.inkBottleProperties input[type="checkbox"].nj-skinned {
+    float:left;
+    margin-top:5px;
+}
+
+.inkBottleProperties select.nj-skinned {
+    float:left;
+    margin:2px 5px 0 0;
+}
+
+.inkBottleProperties label.disabled {
+    color:#999999;
+}
+
+.inkBottleProperties label.disabled:hover {
+    color:#999999;
+    background-color: transparent;
+    cursor:default;
+}
+
+.inkBottleProperties div.disabled:hover {
+    background-color: transparent;
+    cursor:default;
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
index 1602e793..81facc49 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -11,6 +11,30 @@
 
         <script type="text/montage-serialization">
         {
+            "borderWidthCh": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useBorderWidthCh"},
+                    "identifier": "useBorderWidth",
+                    "checked": true
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
+            "borderWidthLabel": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "borderWidthLabel"},
+                    "value": "Border:"
+                }
+            },
+
             "borderWidthHT": {
                 "module": "js/components/hottextunit.reel",
                 "name": "HotTextUnit",
@@ -23,6 +47,54 @@
                 }
             },
 
+            "borderStyleCh": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useBorderStyleCh"},
+                    "identifier": "useBorderStyle",
+                    "checked": true
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
+            "borderStyleLabel": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "borderStyleLabel"},
+                    "value": "Style:"
+                }
+            },
+
+            "strokeSizeCh": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useStrokeSizeCh"},
+                    "identifier": "useStrokeSize",
+                    "checked": true
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
+            "strokeSizeLabel": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "strokeSizeLabel"},
+                    "value": "Stroke:"
+                }
+            },
+
             "strokeSizeHT": {
                 "module": "js/components/hottextunit.reel",
                 "name": "HotTextUnit",
@@ -36,6 +108,22 @@
                 }
             },
 
+            "webGlCh": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useWebGLCHIB"},
+                    "identifier": "useWebGl",
+                    "checked": true
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
             "_strokeMaterialCB": {
                 "module": "js/components/combobox.reel",
                 "name": "Combobox",
@@ -52,12 +140,19 @@
                 "properties": {
                     "element": {"#": "inkBottleProperties"},
 
+                    "useBorderWidth": {"@": "borderWidthCh"},
+                    "borderWidthLabel": {"@": "borderWidthLabel"},
                     "_borderWidth": {"@": "borderWidthHT"},
+
+                    "useBorderStyle": {"@": "borderStyleCh"},
+                    "borderStyleLabel": {"@": "borderStyleLabel"},
                     "_borderStyle": {"#": "borderStyleCB"},
 
+                    "useStrokeSize": {"@": "strokeSizeCh"},
+                    "strokeSizeLabel": {"@": "strokeSizeLabel"},
                     "_strokeSize": {"@": "strokeSizeHT"},
 
-                    "_useWebGL": {"#": "useWebGLCHIB"},
+                    "_useWebGL": {"@": "webGlCh"},
                     "_materialsContainer": {"#": "materialsContainerIB"},
                     "_strokeMaterial": {"@": "_strokeMaterialCB"}
                 }
@@ -68,13 +163,15 @@
     </head>
 
     <body>
-        <div id="inkBottleProperties" class="subToolHolderPanel">
+        <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleProperties">
 
-            <div id="bordersContainer" class="leftLabel" style="padding-top: 3px;">
+            <div data-montage-id="elementInkOptions" class="leftLabel" style="padding-top: 3px;">