From 94ff94677a961504125d5a954008f0063628e900 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 23 Jul 2012 17:10:32 -0700 Subject: tag-tool: Minor styles update and some cleanup Styled the position drop down and moved some styles to the reel. Signed-off-by: Valerio Virgillito --- .../tag-properties.reel/tag-properties.css | 18 ++++++++++++++++++ .../tag-properties.reel/tag-properties.html | 21 ++++++++++++--------- .../tag-properties.reel/tag-properties.js | 21 +++++++++++++++------ 3 files changed, 45 insertions(+), 15 deletions(-) (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.css b/js/components/tools-properties/tag-properties.reel/tag-properties.css index 9d6c37a7..99ddf8e6 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.css +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css @@ -28,3 +28,21 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ + +.tagRadioButtons select.nj-skinned { + visibility: visible; + position: relative; + margin-top: 1px; +} + +.tag-position select.nj-skinned { + border-radius: 0px; + padding-left: 5px; + height: 18px; + width: 100px; + border-color: #181818; +} + +input.tag-class { + border-color: #181818 !important; +} \ No newline at end of file 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 7db1b7cf..46568d8b 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html @@ -53,7 +53,9 @@ POSSIBILITY OF SUCH DAMAGE. "classField": {"#": "className"}, "customName": {"#": "customTagCB"}, - "customLabel": {"#": "customContainer"} + "customLabel": {"#": "customLabel"}, + + "elementPosition": {"#": "positionCB"} } } } @@ -76,12 +78,12 @@ POSSIBILITY OF SUCH DAMAGE.
 
-
+
- +
-
+
-
- +
+
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js index 9ff23a41..603d8dbe 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.js +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js @@ -29,9 +29,8 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; -var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; +var Montage = require("montage/core/core").Montage, + ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { divElement: { @@ -71,6 +70,11 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { } }, + elementPosition: { + value: null, + serializable: true + }, + _subPrepare: { value: function() { this.customName.style["display"] = "none"; @@ -81,6 +85,8 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { this.videoElement.addEventListener("click", this, false); this.canvasElement.addEventListener("click", this, false); this.customElement.addEventListener("click", this, false); + + this.elementPosition.disabled = true; } }, @@ -107,7 +113,6 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { handleFillColorChange: { value: function (e) { this.fill = e._event; -// this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); } }, @@ -130,8 +135,12 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { }, selectedElement: { - get: function() { return this._selectedElement;}, - set: function(value) { this._selectedElement = value; } + get: function() { + return this._selectedElement; + }, + set: function(value) { + this._selectedElement = value; + } } }); -- cgit v1.2.3 From ce770f06e8dac6f59c7beb4e51a53587a4c6517e Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 24 Jul 2012 12:35:19 -0700 Subject: Text Tool Color Change Fix Signed-off-by: Armen Kesablyan --- .../text-properties.reel/text-properties.html | 4 +- .../text-properties.reel/text-properties.js | 82 +++++++++++++++++++--- 2 files changed, 73 insertions(+), 13 deletions(-) (limited to 'js/components/tools-properties') 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 e84e1646..0840e6a6 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -287,8 +287,8 @@ POSSIBILITY OF SUCH DAMAGE.
- - + +
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js index 36aa3ce8..10285d0f 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -36,6 +36,27 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T exports.TextProperties = Montage.create(ToolProperties, { + + _keepSelected: {value: false, serializable: false}, + _addedColorChips: {value: false, serializable: false}, + + _setColor: { + enumerable: false, + value: { colorMode: 'rgb', color: {r:0,g:0,b:0,a:1,css: "rgb(0,0,0)"}, webGlColor: null } + }, + + setColor: { + enumerable: true, + get: function () { + return this._setColor; + }, + set: function (value) { + if (value !== this._setColor) { + this._setColor = value; + } + } + }, + fontName: {value: null, serializable: true}, fontSize: {value: null, serializable: true}, fontColor: {value: null, serializable: true}, @@ -55,10 +76,13 @@ exports.TextProperties = Montage.create(ToolProperties, { numberedList: {value: null, serializable: true}, bulletedList: {value: null, serializable: true}, + lastSelection: {value: null, serializable: true}, // Events handleEditorSelect: { value: function(e) { + + //Reset Buttons this.alignLeft.pressed = false; this.alignCenter.pressed = false; this.alignRight.pressed = false; @@ -66,7 +90,6 @@ exports.TextProperties = Montage.create(ToolProperties, { this.bulletedList.pressed = false; this.numberedList.pressed = false; - switch(this.application.ninja.stage.textTool.justify) { case "left": this.alignLeft.pressed = true; @@ -79,7 +102,7 @@ exports.TextProperties = Montage.create(ToolProperties, { break; case "full": this.alignJustify.pressed = true; - } + } switch(this.application.ninja.stage.textTool.listStyle) { case "ordered": @@ -87,13 +110,30 @@ exports.TextProperties = Montage.create(ToolProperties, { break; case "unordered": this.bulletedList.pressed = true; + } + + if(!this._keepSelected) { + this.lastSelection = e.target._savedSelectedRange; + } + if(this.application.ninja.stage.textTool.foreColor) { + this.setColor.color = this.application.ninja.colorController.parseCssToColor(this.application.ninja.stage.textTool.foreColor); + this.fontColor.color(this.setColor.colorMode, this.setColor.color); + } + } + }, + + handleEditorClicked: { + value: function(e) { + this._keepSelected = false; } }, handleEditorBlur: { value: function(e) { - + console.log("Editor Blur"); + window.getSelection().addRange(this.lastSelection); + e.target.focus(); } }, @@ -101,14 +141,9 @@ exports.TextProperties = Montage.create(ToolProperties, { // Draw Cycle prepareForDraw: { value: function() { - - this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80}; - this.application.ninja.colorController.addButton("chip", this.fontColor); - this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); - this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false); - this.application.ninja.stage.textTool.addEventListener("editorSelect", this.handleEditorSelect.bind(this), false); - + this.application.ninja.stage.textTool.element.addEventListener("blur", this.handleEditorBlur.bind(this), false); + this.application.ninja.stage.textTool.element.addEventListener("click", this.handleEditorClicked.bind(this), false); //Bind to Rich Text editor that lives on the stage component Object.defineBinding(this.application.ninja.stage.textTool, "fontName", { @@ -149,6 +184,23 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, + willDraw: { + value: function() { + if (this._addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { + this.fontColor.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: false, offset: -80 }; + this.application.ninja.colorController.addButton("chip", this.fontColor); + this.fontColor.addEventListener("change", this.handleFontColorChange.bind(this), false); + this.fontColor.addEventListener("mousedown", this.handleColorChangeClick.bind(this), false); + this._addedColorChips = true; + } + + if (this._addedColorChips) { + this.fontColor.color(this.setColor.colorMode, this.setColor.color); + this.application.ninja.stage.textTool.foreColor = this.setColor.color.css; + } + } + }, + // Actions handleJustifyLeftAction: { value: function(e) { @@ -220,10 +272,18 @@ exports.TextProperties = Montage.create(ToolProperties, { } }, + handleColorChangeClick: { + value: function(e) { + this._keepSelected = true; + } + }, + handleFontColorChange: { value: function(e) { - this.application.ninja.stage.textTool.element.style.color = e._event.color.css; + this.setColor = e._event; + this.application.ninja.stage.textTool.foreColor = this.setColor.color.css; + //this.application.ninja.stage.textTool.element.style.color = e._event.color.css; } } -- cgit v1.2.3 From 21d74af1e9fc57cc25cea8aa7408beabf79ff2f3 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 24 Jul 2012 14:08:48 -0700 Subject: removing console log Signed-off-by: Valerio Virgillito --- js/components/tools-properties/text-properties.reel/text-properties.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js index 10285d0f..9e0245bf 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -131,7 +131,6 @@ exports.TextProperties = Montage.create(ToolProperties, { handleEditorBlur: { value: function(e) { - console.log("Editor Blur"); window.getSelection().addRange(this.lastSelection); e.target.focus(); } -- cgit v1.2.3