CSS Panel - Style sheets dirty flag added

3 files changed, 66 insertions, 1 deletions

diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css
index 1d26b041..2e72cd9c 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.css
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css
@@ -131,6 +131,11 @@
     font-weight: bold;
 }
 
+.ss-dirty:after {
+    content: "*";
+    color: #A33939;
+}
+
 .ss-invisible {
     display: none;
 }
\ No newline at end of file
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 3ddd8454..0ff195d5 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.js
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -57,6 +57,12 @@ exports.StyleSheet = Montage.create(Component, {
                 this._element.classList.remove('default-style-sheet');
             }
 
+            if(this.dirty) {
+                this.nameText.element.classList.add('ss-dirty');
+            } else {
+                this.nameText.element.classList.remove('ss-dirty');
+            }
+
         }
     },
 
@@ -137,6 +143,21 @@ exports.StyleSheet = Montage.create(Component, {
             this._name = text;
         }
     },
+    _dirty : {
+        value: null
+    },
+    dirty : {
+        get: function() {
+            return this._dirty;
+        },
+        set: function(value) {
+            if(value === this._dirty) { return false; }
+
+            this._dirty = value;
+            this.needsDraw = true;
+        }
+    },
+
     _readOnly : { value: null },
     readOnly : {
         get: function() {
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 b2d2c0fb..8131a619 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
@@ -17,6 +17,8 @@ exports.StyleSheetsView = Montage.create(Component, {
     documentNameLabel    : { value: null },
     noDocumentLabelClass : { value: "no-document" },
 
+    dirtyStyleSheets: { value: null },
+
     _documentName : { value: null },
     documentName : {
         get: function() {
@@ -52,7 +54,21 @@ exports.StyleSheetsView = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
-    
+
+    _dirtyStyleSheets : { value: null },
+    dirtyStyleSheets : {
+        get: function() {
+            return this._dirtyStyleSheets;
+        },
+        set: function(value) {
+            if(value === this._dirtyStyleSheets) { return false; }
+
+            this._dirtyStyleSheets = value;
+
+            this.needsDraw = true;
+        }
+    },
+
     /// Toolbar Button Actions
     /// --------------------------------
 
@@ -79,10 +95,22 @@ exports.StyleSheetsView = Montage.create(Component, {
                 'oneway': false
             });
 
+            Object.defineBinding(this, 'dirtyStyleSheets', {
+                'boundObject': this.stylesController,
+                'boundObjectPropertyPath': 'dirtyStyleSheets',
+                'oneway': true
+            });
+
             this._initView = this.needsDraw = true;
         }
     },
 
+    handleStyleSheetModified : {
+        value: function(e) {
+            this.needsDraw = true;
+        }
+    },
+
     /// Draw cycle
     /// --------------------------------
     
@@ -94,6 +122,7 @@ exports.StyleSheetsView = Montage.create(Component, {
     prepareForDraw : {
         value: function() {
             this.eventManager.addEventListener("styleSheetsReady", this, false);
+            this.eventManager.addEventListener("styleSheetModified", this, false);
         }
     },
     draw : {
@@ -115,6 +144,16 @@ exports.StyleSheetsView = Montage.create(Component, {
                 this.documentNameLabel.classList.add(this.noDocumentLabelClass);
             }
 
+            if(this.dirtyStyleSheets) {
+                var dirtySheets = this.dirtyStyleSheets.map(function(sheetDescriptor) {
+                    return sheetDescriptor.stylesheet;
+                });
+
+                this.styleSheetList.childComponents.forEach(function(sheetComponent) {
+                    sheetComponent.dirty = dirtySheets.indexOf(sheetComponent.source) !== -1;
+                }, this);
+            }
+
             if(this._needsScroll) {
 
                 setTimeout(function() {