From f3dc624fa464a79fd8e8cec1ddd16ed2109bda23 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 10 Feb 2012 16:05:27 -0800 Subject: Revert "Merge from /joseeight/ninja-internal/tree/FileIO" This reverts commit c48eeb01bd726895dc577d8b843b2a75883eee07. Signed-off-by: Ananya Sen --- .../text-properties.reel/text-properties.css | 30 +- .../text-properties.reel/text-properties.html | 326 +++++++-------------- .../text-properties.reel/text-properties.js | 236 +-------------- 3 files changed, 136 insertions(+), 456 deletions(-) (limited to 'js/components/tools-properties') 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 6aa61812..d581c6c3 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -5,33 +5,29 @@ */ .optionsTextTool { - padding: 6px; + display: -webkit-box; + -webkit-box-orient:horizontal; + -webkit-box-align: stretch; + padding: 5px; } -.optionsTextTool .btnGroup { - padding: 0px 8px; -} -.optionsTextTool > *, .optionsTextTool .btnGroup > * { - float:left; +.optionsTextTool > * { + -webkit-box-flex:0; } -.optionsTextTool button { +.optionsTextTool .button { width: auto; - padding: 4px 8px !important; - margin-left:4px; + +} + +.optionsTextTool .hottextunit { + padding-top:5px; } .optionsTextTool .label, .optionsTextTool .hottextunit { + float:none; font-size:11px; } -.optionsTextTool .fontSelection { - width:100px; -} -.optionsTextTool .fontColor { - width: 20px; - height: 18px; - margin: 2px 6px; -} \ 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 7ded1236..fb57c06d 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html @@ -33,8 +33,8 @@ "alignCenter": {"@": "alignCenter"}, "alignRight": {"@": "alignRight"}, "alignJustify": {"@": "alignJustify"}, - "indent": {"@": "indent"}, - "outdent": {"@": "outdent"}, + "indentRight": {"@": "indentRight"}, + "indentLeft": {"@": "indentLeft"}, "numberedList": {"@": "numberedList"}, "bulletedList": {"@": "bulletedList"} } @@ -57,16 +57,8 @@ "module": "js/components/combobox.reel", "name": "Combobox", "properties": { - "element": {"#": "fontSelection"}, - "identifier": "fontSelection" - }, - "listeners": [ - { - "type": "change", - "listener": {"@": "owner"} - } - ] - + "element": {"#": "fontSelection"} + } }, "fontSettings": { "module": "js/components/button.reel", @@ -77,226 +69,131 @@ }, "fontSize": { - "module": "js/components/combobox.reel", - "name": "Combobox", + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", "properties": { - "element": {"#": "fontSize"}, - "identifier": "fontSize" - }, - "listeners": [ - { - "type": "change", - "listener": {"@": "owner"} - } - ] + "element": {"#": "fontSize"} + } + }, + "fontColor": { + "module": "js/components/button.reel", + "name": "Button", + "properties": { + "element": {"#": "fontColor"} + } }, - "btnBold": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { "element": {"#": "btnBold"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "btnBold", - "label": "B" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "_isToggleButton": true + } }, "btnItalic": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { "element": {"#": "btnItalic"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "btnItalic", - "label": "I" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "_isToggleButton": true + } }, "btnUnderline": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { "element": {"#": "btnUnderline"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "btnUnderline", - "label": "U" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "_isToggleButton": true + } }, "btnStrikethrough": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { "element": {"#": "btnStrikethrough"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "btnStrikethrough", - "label": "S" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "_isToggleButton": true + } }, - + "txtLink": { + "module": "js/components/textfield.reel", + "name": "TextField", + "properties": { + "element": {"#": "txtLink"} + } + }, + "linkTarget": { + "module": "js/components/combobox.reel", + "name": "Combobox", + "properties": { + "element": {"#": "linkTarget"} + } + }, + "alignLeft": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "alignLeft"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "alignLeft", - "label": "Left" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "alignLeft"} + } }, "alignCenter": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "alignCenter"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "alignCenter", - "label": "Center" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "alignCenter"} + } }, "alignRight": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "alignRight"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "alignRight", - "label": "Right" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "alignRight"} + } }, "alignJustify": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "alignJustify"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "alignJustify", - "label": "Justify" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "alignJustify"} + } }, - "indent": { - "module": "montage/ui/button.reel", + "indentRight": { + "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "indent"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "outdent", - "label": ">>" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "indentRight"} + } }, - "outdent": { - "module": "montage/ui/button.reel", + "indentLeft": { + "module": "js/components/button.reel", "name": "Button", "properties": { - "element": {"#": "outdent"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "<<", - "label": "<<" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "indentLeft"} + } }, "bulletedList": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "bulletedList"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "bulletedList", - "label": "• • •" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + "element": {"#": "bulletedList"} + } }, "numberedList": { - "module": "montage/ui/toggle-button.reel", - "name": "ToggleButton", + "module": "js/components/button.reel", + "name": "Button", "properties": { - "element": {"#": "numberedList"}, - "pressedClass": "active", - "preventFocus": true, - "identifier": "numberedList", - "label": "1 2 3" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] - } + "element": {"#": "numberedList"} + } + }, + "fontColor": { + "module" : "js/components/ui/color-chip.reel", + "name" : "ColorChip", + "properties" : { + "element" : {"#": "fontColor"}, + "mode": "chip" + } + } } @@ -305,36 +202,33 @@
- - - - + + + + - - + + -
-
- - - - -
-
- - - - -
-
- - -
-
- - + + + + + + + + +
+ + +
+ + + + +
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 55274322..313693b1 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js @@ -25,25 +25,26 @@ exports.TextProperties = Montage.create(ToolProperties, { alignCenter: {value: null}, alignRight: {value: null}, alignJustify: {value: null}, - indent: {value: null}, - outdent: {value: null}, + indentRight: {value: null}, + indentLeft: {value: null}, numberedList: {value: null}, bulletedList: {value: null}, prepareForDraw: { value: function() { - this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; - this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; - this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; + this.linkTarget.items = ["Target","_blank","_self","_parent", "_top"]; + this.fontSettings.label = "Settings"; + this.btnBold.label = "Bold"; + this.btnItalic.label = "Italic"; + this.btnUnderline.label = "Underline"; + this.btnStrikethrough.label = "Strikethrough"; + this.alignLeft.label = "Left"; + this.alignCenter.label = "Center"; + this.alignRight.label = "Right"; + this.alignJustify.label = "Justify"; } }, - - handleEditorSelect: { - value: function(e) { - this.application.ninja.stage.textTool.updateStates(); - } - }, - + _subPrepare: { value: function() { //this.divElement.addEventListener("click", this, false); @@ -53,217 +54,6 @@ exports.TextProperties = Montage.create(ToolProperties, { handleClick: { value: function(event) { // this.selectedElement = event._event.target.id; - - } - }, - - handleBtnBoldAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("bold"); - } - }, - - handleBtnItalicAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("italic"); - } - }, - - handleBtnUnderlineAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("underline"); - } - }, - - handleBtnStrikethroughAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("strikethrough"); - } - }, - - handleAlignLeftAction: { - value: function(e) { - //this.alignLeft.value = false; - this.alignCenter.value = false; - this.alignRight.value = false; - this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyleft"); - } - }, - - handleAlignCenterAction: { - value: function(e) { - this.alignLeft.value = false; - //this.alignCenter.value = false; - this.alignRight.value = false; - this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifycenter"); - } - }, - - handleAlignRightAction: { - value: function(e) { - this.alignLeft.value = false; - this.alignCenter.value = false; - //this.alignRight.value = false; - this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyright"); - } - }, - - handleAlignJustifyAction: { - value: function(e) { - this.alignLeft.value = false; - this.alignCenter.value = false; - this.alignRight.value = false; - //this.alignJustify.value = false; - this.application.ninja.stage.textTool.doAction("justifyfull"); - } - }, - - handleIndentAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("indent"); - } - }, - - handleOutdentAction: { - value: function(e) { - this.application.ninja.stage.textTool.doAction("outdent"); - } - }, - - handleFontSizeChange: { - value: function(e) { - //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size. - for( var i = 0; i < this.fontSize.items.length; i++) { - if (this.fontSize.value === this.fontSize.items[i]) { - this.application.ninja.stage.textTool.doAction("fontsize", (i +1)); - break; - } - } - } - }, - - defineInitialProperties: { - value: function() { - if (!this.initialized) { - - //Setup Font Selection tool - this.fontColor = this.element.getElementsByClassName("fontColor")[0]; - 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, false); - - Object.defineBinding(this.btnBold, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.bold", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.btnItalic, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.italic", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.btnUnderline, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.underline", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.btnStrikethrough, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.strikethrough", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.alignLeft, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.justifyleft", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.alignCenter, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.justifycenter", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.alignRight, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.justifyright", - boundValueMutator: this.validatePressed, - oneway: true - }); - - Object.defineBinding(this.alignJustify, "pressed", { - boundObject: this.application.ninja.stage.textTool, - boundObjectPropertyPath: "states.justifyfull", - boundValueMutator: this.validatePressed, - oneway: true - }); - - this.initialized = true; - } - - } - }, - - validatePressed: { - value: function(val) { - if (val == "true") return true; else return false - } - }, - - initialized: { - value: false - }, - - handleFontSelectionChange: { - value: function() { - this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value); - this.application.ninja.stage.textTool.element.focus(); - } - }, - - handleNumberedListAction: { - value: function(e) { - //this.numberedList.value = false; - this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertorderedlist"); - this.application.ninja.stage.textTool.element.focus(); - } - }, - - handleBulletedListAction: { - value: function(e) { - this.numberedList.value = false; - //this.bulletedList.value = false; - this.application.ninja.stage.textTool.doAction("insertunorderedlist"); - this.application.ninja.stage.textTool.element.focus(); - } - }, - - handleFontColorChange: { - value: function(e) { - this.application.ninja.stage.textTool.element.style.color = e._event.color.css; - this.application.ninja.stage.textTool.element.focus(); - - //this.application.ninja.stage.textTool.doAction("forecolor",e._event.color.css); - } } - - }); \ No newline at end of file -- cgit v1.2.3