Replacing old button component with montage button component in our UI.

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

5 files changed, 50 insertions, 34 deletions

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>