diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js
index 79567453..74875544 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.js
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js
@@ -8,12 +8,75 @@ var Montage = require("montage/core/core").Montage,
ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
-exports.ShapeProperties = Montage.create(ToolProperties, {
+var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, {
toolsData: { value: null },
- _use3D: { value: false },
+ _use3D: { value: false },
+ addedColorChips: { value: false },
+
+ _fill: {
+ enumerable: false,
+ value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
+ //this._fillColorCtrl.color('nocolor', null);
+ },
+
+ _stroke: {
+ enumerable: false,
+ value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] }
+ },
+
+ stroke: {
+ enumerable: true,
+ get: function () {
+ return this._stroke;
+ },
+ set: function (value) {
+ if (value !== this._stroke) {
+ this._stroke = value;
+ }
+ }
+ },
+
+ fill: {
+ enumerable: true,
+ get: function () {
+ return this._fill;
+ },
+ set: function (value) {
+ if (value !== this._fill) {
+ this._fill = value;
+ }
+ }
+ },
+
+ draw: {
+ enumerable: false,
+ value: function () {
+ Object.getPrototypeOf(ShapeProperties).draw.call(this);
+
+ if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+ // setup fill color
+ this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+ this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+
+ // setup stroke color
+ this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+ this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
+
+ this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+ this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false);
+
+ this.addedColorChips = true;
+ }
+
+ if (this.addedColorChips) {
+ this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
+ this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
+ }
+ }
+ },
_subPrepare: {
- value: function() {
+ value: function () {
this.rectProperties.visible = true;
Object.defineBinding(this._strokeMaterial, "items", {
@@ -33,21 +96,32 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
}
},
- _selectedSubTool: { value: null, enumerable: false},
+ _selectedSubTool: { value: null, enumerable: false },
- selectedSubTool : {
- get: function() { return this._selectedSubTool;},
- set: function(value) {
- if(value) {
+ selectedSubTool: {
+ get: function () { return this._selectedSubTool; },
+ set: function (value) {
+ if (value) {
- this._selectedSubTool? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false;
+ this._selectedSubTool ? this[this._selectedSubTool.properties].visible = false : this.rectProperties.visible = false;
this._selectedSubTool = value;
this[this._selectedSubTool.properties].visible = true;
- if(this._useWebGL.checked)
- {
- if(this._selectedSubTool.id === "LineTool") {
+ if (this._selectedSubTool.id === "LineTool") {
+ this._fillColorCtrl.style["display"] = "none";
+ this._fillColorCtrl.visible = false;
+ this._fillColorCtrlIcon.style["display"] = "none";
+ this._fillColorCtrlIcon.visible = false;
+ } else {
+ this._fillColorCtrl.style["display"] = "";
+ this._fillColorCtrl.visible = true;
+ this._fillColorCtrlIcon.style["display"] = "";
+ this._fillColorCtrlIcon.visible = true;
+ }
+
+ if (this._useWebGL.checked) {
+ if (this._selectedSubTool.id === "LineTool") {
this._fillIcon.style["display"] = "none";
this._fillMaterial.visible = false;
} else {
@@ -55,27 +129,23 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
this._fillMaterial.visible = true;
}
}
-
}
}
},
handleChange: {
- value: function(event) {
- if(this._useWebGL.checked)
- {
+ value: function (event) {
+ if (this._useWebGL.checked) {
this._use3D = true;
this._materialLabel.style["display"] = "";
this._strokeIcon.style["display"] = "";
this._strokeMaterial.visible = true;
- if(this.selectedSubTool.id !== "LineTool")
- {
+ if (this.selectedSubTool.id !== "LineTool") {
this._fillIcon.style["display"] = "";
this._fillMaterial.visible = true;
}
}
- else
- {
+ else {
this._use3D = false;
this._materialLabel.style["display"] = "none";
this._strokeIcon.style["display"] = "none";
@@ -84,6 +154,19 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
this._fillMaterial.visible = false;
}
}
- }
+ },
+ handleFillColorChange: {
+ value: function (e) {
+ this.fill = e._event;
+ this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+ }
+ },
+
+ handleStrokeColorChange: {
+ value: function (e) {
+ this.stroke = e._event;
+ this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
+ }
+ }
});
--
cgit v1.2.3
From 29ad6355ef60cfb3b3fc7f780504f3ed30845883 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Mon, 7 May 2012 14:30:47 -0700
Subject: More implementation of moving color chips to the individual subtools.
Removed the tool color bar
Added new icons for inkbottle
Removed Pencil tool
Removed Inkbottle tool
Added chips to the pen, brush and tag tools
Aligned controls in several subtools
---
.../tools-properties/shape-properties.reel/shape-properties.css | 7 +++++--
.../tools-properties/shape-properties.reel/shape-properties.html | 8 ++++----
2 files changed, 9 insertions(+), 6 deletions(-)
(limited to 'js/components/tools-properties/shape-properties.reel')
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css
index 6efa615c..1100bc70 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.css
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css
@@ -5,7 +5,7 @@
*/
.optionsShapeTool {
- padding: 6px;
+ padding: 4px;
}
.optionsShapeTool > * {
@@ -16,10 +16,13 @@
width: 20px;
height: 18px;
margin: 2px 6px;
+ border: 1px black solid;
}
.optionsShapeTool .colorCtrlIcon {
width: 20px;
height: 20px;
- background-color: rgb(54, 54, 54);
+ margin-top: 2px;
+ -webkit-transform: scale(0.8);
+ background-color: rgb(40, 40, 40);
}
\ No newline at end of file
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index d3faab75..3c492e6e 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -136,11 +136,11 @@
-
-
-
+
+
+
-
+
--
cgit v1.2.3
From 33bb9b7e97e9ec3bd664b3e1c3e7297ba8d07ede Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Mon, 7 May 2012 15:44:18 -0700
Subject: more work on making subtool styling/layout consistent
---
.../tools-properties/shape-properties.reel/shape-properties.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js/components/tools-properties/shape-properties.reel')
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 3c492e6e..cc3534f2 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -149,7 +149,7 @@
--
cgit v1.2.3
From 9f0754eb0c619e9e33df707f24eed1dd6ae95096 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Tue, 8 May 2012 14:48:28 -0700
Subject: implemented proper styling for shape, inkbottle and fill tools
make all icons for fill and stroke use the proper classes/images
---
.../tools-properties/shape-properties.reel/shape-properties.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
(limited to 'js/components/tools-properties/shape-properties.reel')
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index e84f8092..9363365e 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -152,12 +152,12 @@
--
cgit v1.2.3
From 7dd942b6e19d2d7a779bc50e7bf4c8f8780b8f3a Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Wed, 9 May 2012 14:19:14 -0700
Subject: Correct layout and styling for the shape tool and its sub tools
---
.../shape-properties.reel/shape-properties.css | 19 ++++++++++++++++---
.../shape-properties.reel/shape-properties.html | 3 ++-
2 files changed, 18 insertions(+), 4 deletions(-)
(limited to 'js/components/tools-properties/shape-properties.reel')
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css
index 1100bc70..4dc64d66 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.css
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css
@@ -5,17 +5,26 @@
*/
.optionsShapeTool {
- padding: 4px;
+ padding: 6px;
}
.optionsShapeTool > * {
float:left;
}
+.optionsShapeTool select.nj-skinned {
+ margin-top: 2px;
+}
+
+.optionsShapeTool .shapeCustomProps {
+ margin-top: -3px;
+ margin-left: -31px;
+}
+
.optionsShapeTool .fillColorCtrl, .optionsShapeTool .strokeColorCtrl {
width: 20px;
height: 18px;
- margin: 2px 6px;
+ margin: 1px 6px;
border: 1px black solid;
}
@@ -25,4 +34,8 @@
margin-top: 2px;
-webkit-transform: scale(0.8);
background-color: rgb(40, 40, 40);
-}
\ No newline at end of file
+}
+
+.optionsShapeTool checkbox {
+ padding: 6px;
+}
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 9363365e..c54f8b25 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -136,6 +136,7 @@