From 7ca20cc617fb1f9d6d692b27e8bbb74f69693dcd Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 20 Jun 2012 11:30:06 -0700 Subject: Fixes: IKNINJA-1448 Improving logic on calculating position of the color stops in the gradient picker. --- .../gradientpicker.reel/gradientpicker.js | 67 +++++++--------------- 1 file changed, 20 insertions(+), 47 deletions(-) (limited to 'js/components') diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 7fd5d918..6071f3c6 100755 --- a/js/components/gradientpicker.reel/gradientpicker.js +++ b/js/components/gradientpicker.reel/gradientpicker.js @@ -52,6 +52,11 @@ exports.GradientPicker = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + _trackData: { + value: {width: 0, x: 0, y: 0} + }, + //////////////////////////////////////////////////////////////////// + // prepareForDraw: { value: function() { // @@ -62,7 +67,7 @@ exports.GradientPicker = Montage.create(Component, { willDraw: { value: function() { //Getting component views from layout - this.element._trackWidth = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText); + this._trackData.width = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText); //TODO: Fix events and remove this hack this.trackCover.addEventListener('mouseover', function () { if (!this._updating) { @@ -83,13 +88,13 @@ exports.GradientPicker = Montage.create(Component, { // draw: { value: function() { - // + //Checking for mode to assign radio value if (this.mode === 'linear') { this.radioLinear.checked = 'true'; } else if (this.mode === 'radial') { this.radioRadial.checked = 'true'; } - // + //Checkign for value to initialize stops if (!this.value) { this.addDefaultStops(); } else { @@ -104,35 +109,17 @@ exports.GradientPicker = Montage.create(Component, { // didDraw: { value: function() { - // + //Adding event listener for stops this.trackMain.addEventListener('click', this, false); - - - - - - //////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////// - //TODO: Determing a better way to get screen position - var element = this.trackMain; - this.element._trackX = 0, this.element._trackY = 0; - // - while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) { - this.element._trackX += element.offsetLeft - element.scrollLeft; - this.element._trackY += element.offsetTop - element.scrollTop; - element = element.parentNode; - } - //////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////// - - //This is forever changing, not sure why - //console.log(this.element._trackX, this.element._trackY); - - + //Getting position of track + var point = webkitConvertPointFromNodeToPage(this.trackMain, new WebKitPoint(0, 0)); + //Setting position of track to calculate movement + this._trackData.x = point.x; + this._trackData.y = point.y; } }, //////////////////////////////////////////////////////////////////// - // + //Default stops funtion (reset) addDefaultStops: { value: function() { this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true); @@ -223,24 +210,10 @@ exports.GradientPicker = Montage.create(Component, { } else if (percent>100) { percent = 100; } - - - - - //////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////// - //TODO: toggling visibility because of a browser bug - stop.style.visibility = 'hidden'; //TODO: To be removed - var adj = (parseInt(getComputedStyle(stop).getPropertyCSSValue('width').cssText)*percent/100)/this.element._trackWidth; + // + var adj = (parseInt(getComputedStyle(stop).getPropertyCSSValue('width').cssText)*percent/100)/this._trackData.width; stop.style.left = Math.round(percent-Math.round(adj*100))+'%'; stop.button.stopPosition = percent; - stop.style.visibility = 'visible'; //TODO: To be removed - //////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////// - - - - } catch (e) { //TEMP } @@ -292,15 +265,15 @@ exports.GradientPicker = Montage.create(Component, { // this.application.ninja.colorController.colorPopupManager.hideColorChipPopup(); // - if ((e._event.y+this.hack.y) > this.element._trackY+70 || (e._event.y+this.hack.y) < this.element._trackY) { + if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) { this.removeStop(this.currentStop); } // - if (this.currentStop.button.stopPosition !== Math.round(((e._event.x+this.hack.x)-(this.element._trackX-23))/this.element._trackWidth*100)) { + if (this.currentStop.button.stopPosition !== Math.round((e._event.x-this._trackData.x)/this._trackData.width*100)) { this.trackCover.style.display = 'block'; } // - this.positionStop(this.currentStop, Math.round(((e._event.x+this.hack.x)-(this.element._trackX-23))/this.element._trackWidth*100)); + this.positionStop(this.currentStop, Math.round((e._event.x-this._trackData.x)/this._trackData.width*100)); } }, //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From 7615da5c6ba54bd082eac4b8a6d9196084e5c590 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 20 Jun 2012 16:45:29 -0700 Subject: Adding transparent background to color chip buttons Add a transparent pattern to the background of color chips consumed in the app, this way you can preview colors in alpha. This was lost, just added back again. Not a big change, just minor CSS, so should only be quickly tested prior to merge. --- .../tools-properties/brush-properties.reel/brush-properties.html | 2 +- .../tools-properties/fill-properties.reel/fill-properties.html | 2 +- .../ink-bottle-properties.reel/ink-bottle-properties.html | 2 +- .../tools-properties/pen-properties.reel/pen-properties.html | 4 ++-- .../tools-properties/shape-properties.reel/shape-properties.html | 4 ++-- .../tools-properties/tag-properties.reel/tag-properties.html | 2 +- .../tools-properties/text-properties.reel/text-properties.css | 4 ++-- .../tools-properties/text-properties.reel/text-properties.html | 2 +- 8 files changed, 11 insertions(+), 11 deletions(-) (limited to 'js/components') diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html index 7d99a42a..8753e921 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html @@ -82,7 +82,7 @@
-
+
 
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index ca447b8b..a479dbda 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -66,7 +66,7 @@
-
+
 
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html index 5620eed8..41c55bc0 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html @@ -151,7 +151,7 @@
-
+
 
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index adb5cd7d..c77ac660 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html @@ -51,9 +51,9 @@
 
-
+
-
+
 
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 ea246ea8..22ea7431 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -135,9 +135,9 @@
 
-
+
-
+
 
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html index 87f87aff..082384db 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html @@ -48,7 +48,7 @@
 
-
+
 
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css index 218105a7..586cdcd5 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -39,7 +39,7 @@ width: 160px; } -.optionsTextTool .toolColorChipCtrl { - margin-left: 6px; +.fontColorChipContainer { + margin-left: 10px !important; margin-right: 0px; } \ No newline at end of file diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html index e7fafd0d..f47ca0c8 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -290,7 +290,7 @@ -
+
-- cgit v1.2.3 From 4b186e0c3f97f704d1ac671a63cd02084e19fe0e Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 21 Jun 2012 12:51:14 -0700 Subject: Fixing reference issue for toolbar fill container The wrapper container was not being referenced, caused some toggling visibility issues. --- .../tools-properties/shape-properties.reel/shape-properties.html | 3 ++- .../tools-properties/shape-properties.reel/shape-properties.js | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'js/components') 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 22ea7431..5f93b556 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -112,6 +112,7 @@ "_fillColorCtrlIcon": {"#": "fillColorCtrlIcon"}, "_fillColorCtrl": {"#": "fillColorCtrl"}, "_strokeColorCtrl": {"#": "strokeColorCtrl"}, + "_fillColorCtrlContainer": {"#": "fillColorCtrlContainer"}, "_strokeSize": {"@": "_strokeSize1"}, "ovalProperties": {"@": "ovalProperties1"}, @@ -137,7 +138,7 @@
-
+
 
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 5829634c..7306275a 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js @@ -179,14 +179,14 @@ var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { this[this._selectedSubTool.properties].visible = true; if (this._selectedSubTool.id === "LineTool") { - this._fillColorCtrl.style["display"] = "none"; - this._fillColorCtrl.visible = false; + this._fillColorCtrlContainer.style["display"] = "none"; + this._fillColorCtrlContainer.visible = false; this._fillColorCtrlIcon.style["display"] = "none"; this._fillColorCtrlIcon.visible = false; this.endDivider.style["display"] = "none"; } else { - this._fillColorCtrl.style["display"] = ""; - this._fillColorCtrl.visible = true; + this._fillColorCtrlContainer.style["display"] = ""; + this._fillColorCtrlContainer.visible = true; this._fillColorCtrlIcon.style["display"] = ""; this._fillColorCtrlIcon.visible = true; this.endDivider.style["display"] = ""; -- cgit v1.2.3