CSS Panel Update

7 files changed, 40 insertions, 20 deletions

diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index b8223471..db0f494b 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -16,6 +16,7 @@ var ComponentsPanel = require("js/panels/Components/ComponentsPanel").Components
 var ProjectPanel    = require("js/panels/Project/ProjectPanel").ProjectPanel;
 var MaterialsPanel  = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
 var PresetsPanel    = require("js/panels/presets/presets-panel").PresetsPanel;
+var CSSPanelNew    = require("js/panels/css-panel/css-panel-container").CSSPanelContainer;
 
 exports.PanelContainer = Montage.create(Component, {
     lastOffset: {
@@ -45,7 +46,7 @@ exports.PanelContainer = Montage.create(Component, {
     },
 
     initPanelOrder: {
-        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
+        value: ['CSSPanelNew','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
     },
 
     panelOrder: {
@@ -101,6 +102,7 @@ exports.PanelContainer = Montage.create(Component, {
             this.addEventListener("change@appModel.CSSPanel", this, false);
             this.addEventListener("change@appModel.MaterialsPanel", this, false);
             this.addEventListener("change@appModel.PresetsPanel", this, false);
+            this.addEventListener("change@appModel.CSSPanelNew", this, false);
         }
     },
 
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html
index cc1876c3..86bfbbb7 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.html
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -26,9 +26,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             },
             "stylesViewContainer": {
                 "module" : "js/panels/css-panel/styles-view-container.reel",
-                "name": "StyleSheetView",
+                "name": "StylesViewContainer",
                 "properties": {
-                    "element": {"#": "css-styles-view" }
+                    "element": {"#": "styles-view-container" }
                 }
             }
         }
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html
index 4fb94335..43ffec6f 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.html
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -20,7 +20,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "module": "montage/ui/dynamic-text.reel",
                 "name": "DynamicText",
                 "properties": {
-                    "element": {"#": "sheet-name"}
+                    "element": {"#": "sheet-name"},
+                    "defaultText": "Style sheet"
                 },
                 "bindings": {
                     "value": {
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js
index daa614c2..a4fe5960 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.js
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -34,19 +34,21 @@ exports.StyleSheet = Montage.create(Component, {
             this._name = text;
         }
     },
-    _styleSheet : {
+    _source : {
         value: null
     },
-    styleSheet : {
+    source : {
         get: function() {
-            return this._styleSheet;
+            return this._source;
         },
         set: function(sheet) {
+            console.log('sheet being set');
             if(sheet.href) {
                 this.name = sheet.href.substring(sheet.href.lastIndexOf('/'));
             } else {
                 this.name = 'Style Tag';
             }
+            this._source = sheet;
         }
     }
 });
\ No newline at end of file
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
index 78836f21..d1dbfa2b 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
@@ -16,22 +16,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element" : {"#" : "style-sheet-view-container"}
                 }
             },
+            "arrayController" : {
+                "module" : "montage/ui/controller/array-controller",
+                "name": "ArrayController",
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "styleSheets",
+                        "oneway": true
+                    }
+                }
+            },
             "styleSheetList": {
                 "module" : "montage/ui/list.reel",
                 "name": "List",
                 "properties": {
-                    "element": {"#": "sheet-list" }
-                },
-                "bindings": {
-                    "content": {
-                        "boundObject": {"@": "owner" },
-                        "boundObjectPropertyPath": "styleSheets"
-                    }
+                    "element": {"#": "sheet-list" },
+                    "contentController": {"@": "arrayController"}
                 }
             },
             "sheet": {
                 "module": "js/panels/css-panel/style-sheet.reel",
                 "name": "StyleSheet",
+                "properties": {
+                    "element": {"#": "sheet-item"}
+                },
                 "bindings": {
                     "source": {
                         "boundObject": {"@": "styleSheetList"},
@@ -61,7 +70,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 <div id="style-sheet-view-container" class="style-sheet-view-container">
     <h3 id="no-document-message">No document loaded. Please Open or Create a new document.</h3>
     <ul id="sheet-list">
-        <li id="sheet-item"></li>
+        <li><div id="sheet-item"></div></li>
     </ul>
 </div>
 </body>
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
index f93de830..f8826b18 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
@@ -28,8 +28,12 @@ exports.StyleSheetsView = Montage.create(Component, {
     },
     handleStyleSheetsReady : {
         value: function(e) {
-            //this.styleSheets = null;
-            this.styleSheets = this.stylesController.userStyleSheets;
+            this.noDocumentCondition = false;
+
+            this.stylesController.userStyleSheets.forEach(function(sheet) {
+                this.styleSheets.push(sheet);
+            }, this);
+
         }
     },
     prepareForDraw : {
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
index 4b2bf60a..17ba6326 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
@@ -10,7 +10,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
     <script type="text/montage-serialization">
         {
             "owner": {
-                "module" : "js/panels/css-panel/styles-view-container.reel/styles-view-container.reel",
+                "module" : "js/panels/css-panel/styles-view-container.reel",
                 "name" : "StylesViewContainer",
                 "properties" : {