aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.html3
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.js18
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js9
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js8
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.css3
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js10
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js8
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js31
-rw-r--r--js/panels/css-panel/styles-view-delegate.js11
9 files changed, 79 insertions, 22 deletions
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 42dca8a2..789635a0 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.html
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -31,6 +31,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
31 "properties": { 31 "properties": {
32 "element": {"#": "styles-view-container" }, 32 "element": {"#": "styles-view-container" },
33 "selectionName": {"@": "selectionName" } 33 "selectionName": {"@": "selectionName" }
34 },
35 "bindings": {
36 "currentDocument" : {"<-": "@owner.currentDocument" }
34 } 37 }
35 }, 38 },
36 "selectionName" : { 39 "selectionName" : {
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js
index a117787e..96d94b36 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.js
+++ b/js/panels/css-panel/css-panel.reel/css-panel.js
@@ -8,6 +8,24 @@ var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10exports.CssPanel = Montage.create(Component, { 10exports.CssPanel = Montage.create(Component, {
11
12 _currentDocument: {
13 value : null
14 },
15
16 currentDocument : {
17 get : function() {
18 return this._currentDocument;
19 },
20 set : function(value) {
21 if (value === this._currentDocument) {
22 return;
23 }
24
25 this._currentDocument = value;
26 }
27 },
28
11 prepareForDraw : { 29 prepareForDraw : {
12 value: function() { 30 value: function() {
13 } 31 }
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index e0ffb1a8..54181bf3 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -88,6 +88,14 @@ exports.CssStyleRule = Montage.create(Component, {
88 } 88 }
89 } 89 }
90 }, 90 },
91 handleStop : {
92 value: function(e) {
93 if(this.focusDelegate) {
94 e._event.detail.preventDefault();
95 this.focusDelegate.handleSelectorStop(this.rule, this.selectorField.value, this);
96 }
97 }
98 },
91 handleMouseover: { 99 handleMouseover: {
92 value: function(e) { 100 value: function(e) {
93 if(this.focusDelegate) { 101 if(this.focusDelegate) {
@@ -125,6 +133,7 @@ exports.CssStyleRule = Montage.create(Component, {
125 this.declarationComponent.type = 'inline'; 133 this.declarationComponent.type = 'inline';
126 } else { 134 } else {
127 this.selectorField.addEventListener('change', this, false); 135 this.selectorField.addEventListener('change', this, false);
136 this.selectorField.addEventListener('stop', this, false);
128 this.selectorField.element.addEventListener('mouseover', this, false); 137 this.selectorField.element.addEventListener('mouseover', this, false);
129 this.selectorField.element.addEventListener('mouseout', this, false); 138 this.selectorField.element.addEventListener('mouseout', this, false);
130 } 139 }
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
index e2e269ba..c7766d08 100644
--- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -45,7 +45,7 @@ exports.RuleListContainer = Montage.create(Component, {
45 for(i = 0; i<this.ruleLists.length; i++) { 45 for(i = 0; i<this.ruleLists.length; i++) {
46 list = this.ruleLists[i]; 46 list = this.ruleLists[i];
47 47
48 if(selection.length > 1) { 48 if(selection.length === list.selection.length) {
49 matchesAll = selection.every(function(element, index, array) { 49 matchesAll = selection.every(function(element, index, array) {
50 return list.selection.indexOf(element) !== -1; 50 return list.selection.indexOf(element) !== -1;
51 }); 51 });
@@ -53,12 +53,6 @@ exports.RuleListContainer = Montage.create(Component, {
53 if(matchesAll) { 53 if(matchesAll) {
54 break; 54 break;
55 } 55 }
56 } else {
57 ///// Selection (single element or stylesheet) is the same,
58 ///// Use the existing rule list
59 if(list.selection[0] === selection[0]) {
60 break;
61 }
62 } 56 }
63 57
64 list = null; 58 list = null;
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.css b/js/panels/css-panel/style-declaration.reel/style-declaration.css
index 6be8d33c..d4755b04 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.css
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -10,4 +10,7 @@
10} 10}
11.drag-over { 11.drag-over {
12 /*background-color: red;*/ 12 /*background-color: red;*/
13}
14.css-animation-prevent * {
15 -webkit-transition-duration: 0 !important;
13} \ No newline at end of file 16} \ No newline at end of file
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
index 57cbdb63..6187989b 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -216,7 +216,15 @@ exports.StyleDeclaration = Montage.create(Component, {
216 }, 216 },
217 217
218 addNewStyle : { 218 addNewStyle : {
219 value: function() { 219 value: function(preventAnimation) {
220 if(preventAnimation) {
221 this.element.classList.add('css-animation-prevent');
222
223 setTimeout(function() {
224 this.element.classList.remove('css-animation-prevent');
225 }.bind(this), 1000);
226 }
227
220 this.addStyle('property', 'value', { 228 this.addStyle('property', 'value', {
221 isEmpty : true 229 isEmpty : true
222 }); 230 });
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 5081a124..9e3b4a49 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
@@ -63,10 +63,10 @@ exports.StyleSheetsView = Montage.create(Component, {
63 if(this.styleSheetList) { 63 if(this.styleSheetList) {
64 sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)]; 64 sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)];
65 if(sheetComponent) { 65 if(sheetComponent) {
66 sheetComponent.default = true; 66 sheetComponent['default'] = true;
67 if(this._defaultStyleSheet) { 67 if(this._defaultStyleSheet) {
68 oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)]; 68 oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)];
69 oldDefaultSheet.default = false; 69 oldDefaultSheet['default'] = false;
70 } 70 }
71 } 71 }
72 } 72 }
@@ -115,12 +115,12 @@ exports.StyleSheetsView = Montage.create(Component, {
115 115
116 handleStyleSheetsReady : { 116 handleStyleSheetsReady : {
117 value: function(e) { 117 value: function(e) {
118 this.documentName = this.stylesController.activeDocument.name; 118 this.documentName = this.stylesController.currentDocument.name;
119 this.styleSheets = this.stylesController.userStyleSheets; 119 this.styleSheets = this.stylesController.userStyleSheets;
120 120
121 Object.defineBinding(this, 'activeDocument', { 121 Object.defineBinding(this, 'activeDocument', {
122 'boundObject': this.stylesController, 122 'boundObject': this.stylesController,
123 'boundObjectPropertyPath': 'activeDocument', 123 'boundObjectPropertyPath': 'currentDocument',
124 'oneway': true 124 'oneway': true
125 }); 125 });
126 126
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
index 4a391421..157d99de 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
@@ -8,6 +8,29 @@ var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10exports.StylesViewContainer = Montage.create(Component, { 10exports.StylesViewContainer = Montage.create(Component, {
11
12 _currentDocument: {
13 value : null
14 },
15
16 currentDocument : {
17 get : function() {
18 return this._