From 50ee8428d398d2a5f21f4d642642ba85d7df3e5e Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 19 Mar 2012 13:51:31 -0700
Subject: Replacing old button component with montage button component in our
 UI.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../ui/property-control.reel/property-control.js   |  2 +-
 .../materials-library-panel.css                    |  8 ++---
 .../materials-library-panel.html                   | 42 ++++++++++++++++++++--
 .../materials-library-panel.js                     | 21 +----------
 .../materials-popup.reel/materials-popup.html      |  8 ++---
 .../materials-popup.reel/materials-popup.js        |  5 ++-
 .../color/colorchippopup.reel/colorchippopup.js    |  1 -
 .../color/colorpanelpopup.reel/colorpanelpopup.js  |  1 -
 8 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
index 58b1be9f..cd59c02c 100755
--- a/js/components/ui/property-control.reel/property-control.js
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -9,7 +9,7 @@ var Montage = require("montage/core/core").Montage,
     HotText = require("js/components/hottext.reel").HotText,
     HotTextUnit = require("js/components/hottextunit.reel").HotTextUnit,
     Slider = require("js/components/slider.reel").Slider,
-    Button = require("js/components/button.reel").Button,
+    Button = require("montage/ui/button.reel").Button,
     Checkbox = require("js/components/checkbox.reel").Checkbox,
     Combobox = require("js/components/combobox.reel").Combobox,
     TextField = require("js/components/TextField.reel").TextField,
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
index 07488da1..fe88ebf6 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
@@ -23,7 +23,7 @@
     width: 97%;
 }
 
-#ml_buttons button {
+#ml_buttons .nj-skinned{
   height: 22px;
   overflow: hidden;
   display: block;
@@ -31,17 +31,17 @@
   margin: 0px 1px;
 }
 
-#materialsLibraryPanel-ml_add_btn {
+#ml_add_btn {
     float: left;
     width: 60px;
 }
 
-#materialsLibraryPanel-ml_copy_btn {
+#ml_copy_btn {
     float: left;
     width: 60px;
 }
 
-#materialsLibraryPanel-ml_delete_btn {
+#ml_delete_btn {
     float: right;
     width: 60px;
 }
\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
index 6ba4ac75..fe17d0f8 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -10,6 +10,42 @@
     	<link rel="stylesheet" type="text/css" href="materials-library-panel.css">
          <script type="text/montage-serialization">
         {
+            "addButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_add_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
+            "copyButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_copy_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
+            "deleteButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_delete_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
              "materialInfo": {
                  "module": "js/panels/Materials/materials-popup.reel",
                  "name": "MaterialsPopup"
@@ -34,9 +70,9 @@
             </div>
             <hr />
             <div id="ml_buttons">
-                <button id="ml_add_btn">Add</button>
-                <button id="ml_copy_btn">Copy</button>
-                <button id="ml_delete_btn">Delete</button>
+                <button id="ml_add_btn" class="nj-skinned">Add</button>
+                <button id="ml_copy_btn" class="nj-skinned">Copy</button>
+                <button id="ml_delete_btn" class="nj-skinned">Delete</button>
             </div>
     	</div>
 
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index b16c4376..bb550598 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -5,7 +5,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Tree = require("js/components/tree.reel").Tree,
-    Button = require("js/components/button.reel").Button,
     MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
     PopupMananger =		require("js/components/popup-manager.reel").PopupMananger,
     Popup = require("montage/ui/popup/popup.reel").Popup;
@@ -27,24 +26,6 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
             materialsTree.needsDraw = true;
 
             materialsTree.addEventListener("change", this, true);
-
-            var addButton = Button.create();
-            addButton.element = document.getElementById("ml_add_btn");
-            addButton.label = "Add";
-            addButton.needsDraw = true;
-            addButton.addEventListener("action", this, true);
-
-            var copyButton = Button.create();
-            copyButton.element = document.getElementById("ml_copy_btn");
-            copyButton.label = "Copy";
-            copyButton.needsDraw = true;
-            copyButton.addEventListener("action", this, true);
-
-            var deleteButton = Button.create();
-            deleteButton.element = document.getElementById("ml_delete_btn");
-            deleteButton.label = "Delete";
-            deleteButton.needsDraw = true;
-            deleteButton.addEventListener("action", this, true);
     	}
     },
 
@@ -73,7 +54,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
         }
     },
 
-    captureAction: {
+    handleAction: {
         value:function(event) {
             switch(event._currentTarget.label)
             {
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index de4f98c1..34f68554 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -14,7 +14,7 @@
    		<script type="text/montage-serialization">
         {
             "okButton": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "mp_ok_btn"},
@@ -22,7 +22,7 @@
                 }
             },
             "cancelButton": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "mp_cancel_btn"},
@@ -111,8 +111,8 @@
             <hr />
             
             <div id="mp_buttons" class="mp_buttons">
-                <button id="mp_cancel_btn" class="mp_cancel_btn"></button>
-                <button id="mp_ok_btn" class="mp_ok_btn"></button>
+                <button id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button>
+                <button id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button>
             </div>
 
     	</div>
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index c57bb2d7..193e72b7 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -5,9 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    Component   = require("montage/ui/component").Component;
-var Button = 			require("js/components/button.reel").Button;
-var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    Component   = require("montage/ui/component").Component,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.js b/js/panels/color/colorchippopup.reel/colorchippopup.js
index 05bcb447..414be8b7 100755
--- a/js/panels/color/colorchippopup.reel/colorchippopup.js
+++ b/js/panels/color/colorchippopup.reel/colorchippopup.js
@@ -9,7 +9,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = 			require("montage/core/core").Montage,
 	Component = 		require("montage/ui/component").Component,
 	Slider = 			require("js/components/slider.reel").Slider,
-	Button = 			require("js/components/button.reel").Button,
 	HotText = 			require("js/components/hottext.reel").HotText,
 	ColorWheel = 		require("js/components/colorwheel.reel").ColorWheel,
 	GradientPicker = 	require("js/components/gradientpicker.reel").GradientPicker;
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index b957d495..dd7e6192 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -9,7 +9,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = 			require("montage/core/core").Montage,
 	Component = 		require("montage/ui/component").Component,
 	Slider = 			require("js/components/slider.reel").Slider,
-	Button = 			require("js/components/button.reel").Button,
 	HotText = 			require("js/components/hottext.reel").HotText,
 	ColorWheel = 		require("js/components/colorwheel.reel").ColorWheel,
 	GradientPicker = 	require("js/components/gradientpicker.reel").GradientPicker;
-- 
cgit v1.2.3