aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Color/colorpanelbase.reel/colorpanelbase.js8
-rw-r--r--js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css4
-rw-r--r--js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss4
-rw-r--r--js/panels/properties/content.reel/content.js29
-rw-r--r--js/panels/properties/sections/custom.reel/custom.js51
5 files changed, 83 insertions, 13 deletions
diff --git a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
index 9a27689a..ff738bbe 100644
--- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
@@ -1499,13 +1499,13 @@ exports.ColorPanelBase = Montage.create(Component, {
1499 // 1499 //
1500 if (type._event.clientX && type._event.clientY) { 1500 if (type._event.clientX && type._event.clientY) {
1501 // 1501 //
1502 if (type._event.clientX > (parseInt(document.width)/2)) { 1502 //if (type._event.clientX > (parseInt(document.width)/2)) {
1503 //TODO: Fix offset hack 1503 //TODO: Fix offset hack
1504 this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX) +'px', (type._event.target.clientHeight/2+type._event.clientY - type._event.offsetY)+'px', 'right', 'top'); 1504 this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX) +'px', (type._event.target.clientHeight/2+type._event.clientY - type._event.offsetY)+'px', 'right', 'top');
1505 } else { 1505 //} else {
1506 // 1506 //
1507 this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX)+parseInt(type._event.target.offsetWidth)+'px', (type._event.target.offsetHeight/2+type._event.clientY - type._event.offsetY)+'px', 'left', 'top'); 1507 // this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX)+parseInt(type._event.target.offsetWidth)+'px', (type._event.target.offsetHeight/2+type._event.clientY - type._event.offsetY)+'px', 'left', 'top');
1508 } 1508 //}
1509 } 1509 }
1510 } 1510 }
1511 } else { 1511 } else {
diff --git a/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css b/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css
index 6a418279..4db0abff 100644
--- a/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css
+++ b/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css
@@ -6,7 +6,7 @@
6 </copyright> */ 6 </copyright> */
7/* line 12, colorpanelpopup.scss */ 7/* line 12, colorpanelpopup.scss */
8.cpp_popup { 8.cpp_popup {
9 overflow: none; 9 overflow: hidden;
10 font-size: 12px; 10 font-size: 12px;
11 text-shadow: 1px 1px 1px #000; 11 text-shadow: 1px 1px 1px #000;
12 font-family: 'Droid Sans', sans-serif; 12 font-family: 'Droid Sans', sans-serif;
@@ -28,7 +28,7 @@
28 text-indent: -9999px; 28 text-indent: -9999px;
29 overflow: hidden; 29 overflow: hidden;
30 float: right; 30 float: right;
31 padding: none; 31 padding: 0;
32 cursor: pointer; 32 cursor: pointer;
33 border: 1px solid transparent; 33 border: 1px solid transparent;
34} 34}
diff --git a/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss b/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss
index 20481fb6..1f63658a 100644
--- a/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss
+++ b/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss
@@ -10,7 +10,7 @@ $grey_light: #494949;
10 10
11.cpp_popup 11.cpp_popup
12{ 12{
13 overflow: none; 13 overflow: hidden;
14 font-size: 12px; 14 font-size: 12px;
15 text-shadow: 1px 1px 1px #000; 15 text-shadow: 1px 1px 1px #000;
16 font-family: 'Droid Sans', sans-serif; 16 font-family: 'Droid Sans', sans-serif;
@@ -32,7 +32,7 @@ $grey_light: #494949;
32 text-indent: -9999px; 32 text-indent: -9999px;
33 overflow: hidden; 33 overflow: hidden;
34 float: right; 34 float: right;
35 padding: none; 35 padding: 0;
36 cursor: pointer; 36 cursor: pointer;
37 border: 1px solid transparent; 37 border: 1px solid transparent;
38} 38}
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 0088447a..1ec6d769 100644
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -150,6 +150,35 @@ exports.Content = Montage.create(Component, {
150 this.customPi = stage.elementModel.pi; 150 this.customPi = stage.elementModel.pi;
151 this.displayCustomProperties(stage, stage.elementModel.pi); 151 this.displayCustomProperties(stage, stage.elementModel.pi);
152 } 152 }
153
154 // For now hardcode the background since it is the only custom property
155 // No need to loop through all the properties.
156 var backgroundChip = this.customSections[0].content.controls["background"];
157 backgroundChip.initialColor = ElementsMediator.getProperty(stage, "background");
158
159 /*
160 var customPI = PiData[this.customPi];
161 // Get all the custom section for the custom PI
162 for(var i = 0, customSec; customSec = customPI[i]; i++) {
163
164 // Now set the Fields for the custom PI
165 for(var j = 0, fields; fields = customSec.Section[j]; j++) {
166 for(var k = 0, control; control = fields[k]; k++) {
167
168 var colorChipEl = this.customSections[i].content.controls[control.id];
169 this.foo = colorChipEl;
170 colorChipEl.addEventListener("firstDraw", this, false);
171
172 }
173 }
174 }
175 */
176 }
177 },
178
179 handleFirstDraw: {
180 value: function() {
181 this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'});
153 } 182 }
154 }, 183 },
155 184
diff --git a/js/panels/properties/sections/custom.reel/custom.js b/js/panels/properties/sections/custom.reel/custom.js
index 992db8e6..a2b9b9fa 100644
--- a/js/panels/properties/sections/custom.reel/custom.js
+++ b/js/panels/properties/sections/custom.reel/custom.js
@@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
6 6
7var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
9var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
9 10
10//Custom Rows 11//Custom Rows
11var SingleRow = require("js/panels/properties/sections/custom-rows/single-row.reel").SingleRow; 12var SingleRow = require("js/panels/properties/sections/custom-rows/single-row.reel").SingleRow;
@@ -18,7 +19,7 @@ var Dropdown = require("js/components/combobox.reel").Combobox;
18var TextField = require("js/components/textfield.reel").TextField; 19var TextField = require("js/components/textfield.reel").TextField;
19var FileInput = require("js/components/ui/file-input.reel").FileInput; 20var FileInput = require("js/components/ui/file-input.reel").FileInput;
20var Checkbox = require("js/components/checkbox.reel").Checkbox; 21var Checkbox = require("js/components/checkbox.reel").Checkbox;
21 22var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
22 23
23exports.CustomSection = Montage.create(Component, { 24exports.CustomSection = Montage.create(Component, {
24 25
@@ -88,10 +89,8 @@ exports.CustomSection = Montage.create(Component, {
88 value:{} 89 value:{}
89 }, 90 },
90 91
91 handleChanging: 92 handleChanging: {
92 { 93 value:function(event) {
93 value:function(event)
94 {
95 var obj = event.currentTarget; 94 var obj = event.currentTarget;
96 this._dispatchPropEvent({"type": "changing", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj}); 95 this._dispatchPropEvent({"type": "changing", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
97 } 96 }
@@ -106,6 +105,27 @@ exports.CustomSection = Montage.create(Component, {
106 } 105 }
107 }, 106 },
108 107
108 /**
109 * Color change handler. Hard coding the stage for now since only the stage PI uses this color chip
110 */
111 handleColorChange: {
112 value: function(event) {
113 // Change the stage color for now
114 //console.log(this, event);
115 ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
116 /*
117 var propEvent = document.createEvent("CustomEvent");
118 propEvent.initEvent("propertyChange", true, true);
119 propEvent.type = "propertyChange";
120
121 propEvent.prop = "background";//event.prop;
122 propEvent.value = event._event.color.css;
123
124 this.dispatchEvent(propEvent);
125 */
126 }
127 },
128
109 _dispatchPropEvent: { 129 _dispatchPropEvent: {
110 value: function(event) { 130 value: function(event) {
111// console.log(event); 131// console.log(event);
@@ -140,6 +160,7 @@ exports.CustomSection = Montage.create(Component, {
140 case "textbox" : return this.createTextField(fields); 160 case "textbox" : return this.createTextField(fields);
141 case "file" : return this.createFileInput(fields); 161 case "file" : return this.createFileInput(fields);
142 case "checkbox" : return this.createCheckbox(fields); 162 case "checkbox" : return this.createCheckbox(fields);
163 case "chip" : return this.createColorChip(fields);
143 } 164 }
144 } 165 }
145 }, 166 },
@@ -305,6 +326,26 @@ exports.CustomSection = Montage.create(Component, {
305 326
306 return obj; 327 return obj;
307 } 328 }
329 },
330
331 createColorChip: {
332 value: function(aField) {
333 var obj = ColorChip.create();
334
335 obj.chip = true;
336 obj.iconType = "fillIcon";