diff options
Diffstat (limited to 'js/components')
4 files changed, 107 insertions, 28 deletions
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..f7bb8295 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css | |||
@@ -12,6 +12,10 @@ | |||
12 | padding: 0px 8px; | 12 | padding: 0px 8px; |
13 | } | 13 | } |
14 | 14 | ||
15 | .optionsTextTool select { | ||
16 | margin: 2px; | ||
17 | } | ||
18 | |||
15 | .optionsTextTool > *, .optionsTextTool .btnGroup > * { | 19 | .optionsTextTool > *, .optionsTextTool .btnGroup > * { |
16 | float:left; | 20 | float:left; |
17 | } | 21 | } |
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..a7d2af10 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.html +++ b/js/components/tools-properties/text-properties.reel/text-properties.html | |||
@@ -236,7 +236,7 @@ | |||
236 | "element": {"#": "indent"}, | 236 | "element": {"#": "indent"}, |
237 | "pressedClass": "active", | 237 | "pressedClass": "active", |
238 | "preventFocus": true, | 238 | "preventFocus": true, |
239 | "identifier": "outdent", | 239 | "identifier": "indent", |
240 | "label": ">>" | 240 | "label": ">>" |
241 | }, | 241 | }, |
242 | "listeners": [ | 242 | "listeners": [ |
@@ -253,7 +253,7 @@ | |||
253 | "element": {"#": "outdent"}, | 253 | "element": {"#": "outdent"}, |
254 | "pressedClass": "active", | 254 | "pressedClass": "active", |
255 | "preventFocus": true, | 255 | "preventFocus": true, |
256 | "identifier": "<<", | 256 | "identifier": "outdent", |
257 | "label": "<<" | 257 | "label": "<<" |
258 | }, | 258 | }, |
259 | "listeners": [ | 259 | "listeners": [ |
@@ -310,10 +310,10 @@ | |||
310 | <label class="label" style="display: none">Tag:</label> | 310 | <label class="label" style="display: none">Tag:</label> |
311 | <select id="tagType" style="display: none"></select> | 311 | <select id="tagType" style="display: none"></select> |
312 | <label class="label">Font:</label> | 312 | <label class="label">Font:</label> |
313 | <select id="fontSelection" class="fontSelection"></select> | 313 | <select id="fontSelection" class="nj-skinned fontSelection"></select> |
314 | <button id="fontSettings" style="display: none"></button> | 314 | <button id="fontSettings" style="display: none"></button> |
315 | <label class="label">Size:</label> | 315 | <label class="label">Size:</label> |
316 | <input id="fontSize"/> | 316 | <select id="fontSize" class="nj-skinned"></select> |
317 | <div class="fontColor"></div> | 317 | <div class="fontColor"></div> |
318 | <div class="btnGroup"> | 318 | <div class="btnGroup"> |
319 | <button id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></button> | 319 | <button id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></button> |
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..88d38ffe 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.js +++ b/js/components/tools-properties/text-properties.reel/text-properties.js | |||
@@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
8 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
9 | var ArrayController = require("montage/ui/controller/array-controller").ArrayController; | ||
9 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 10 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
10 | 11 | ||
11 | exports.TextProperties = Montage.create(ToolProperties, { | 12 | exports.TextProperties = Montage.create(ToolProperties, { |
@@ -29,18 +30,57 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
29 | outdent: {value: null}, | 30 | outdent: {value: null}, |
30 | numberedList: {value: null}, | 31 | numberedList: {value: null}, |
31 | bulletedList: {value: null}, | 32 | bulletedList: {value: null}, |
33 | fontTypes: {value: null}, | ||
34 | fontSizes: {value: null}, | ||
32 | 35 | ||
33 | prepareForDraw: { | 36 | prepareForDraw: { |
34 | value: function() { | 37 | value: function() { |
38 | // code commented out because montage ui element select-input is incomplete. Will switch back when they fix or actually complete the component | ||
39 | // this.fontTypes = Montage.create(ArrayController); | ||
40 | // this.fontTypes.content = [ | ||
41 | // { value: "Arial", text: "Arial" }, | ||
42 | // { value: "Arial Black", text: "Arial Black" }, | ||
43 | // { value: "Courier New", text: "Courier New" }, | ||
44 | // { value: "Garamond", text: "Garamond" }, | ||
45 | // { value: "Georgia", text: "Georgia" }, | ||
46 | // { value: "Open Sans", text: "Open Sans" }, | ||
47 | // { value: "Tahoma", text: "Tahoma" }, | ||
48 | // { value: "Times New Roman", text: "Times New Roman" }, | ||
49 | // { value: "Trebuchet MS", text: "Trebuchet MS" }, | ||
50 | // { value: "Verdana", text: "Verdana" } | ||
51 | // ]; | ||
52 | |||
53 | //this.fontSelection.contentController = this.fontTypes; | ||
54 | // | ||
55 | // this.fontSizes = Montage.create(ArrayController); | ||
56 | // this.fontSizes.content = [ | ||
57 | // { value: 1, text: "8pt" }, | ||
58 | // { value: 2, text: "10pt" }, | ||
59 | // { value: 3, text: "12pt" }, | ||
60 | // { value: 4, text: "14pt" }, | ||
61 | // { value: 5, text: "18pt" }, | ||
62 | // { value: 6, text: "24pt" }, | ||
63 | // { value: 7, text: "36pt" } | ||
64 | // ]; | ||
65 | // this.fontSize.contentController = this.fontSizes; | ||
66 | |||
35 | this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; | 67 | this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"]; |
36 | this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; | ||
37 | this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; | 68 | this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"]; |
69 | this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"]; | ||
38 | } | 70 | } |
39 | }, | 71 | }, |
40 | 72 | ||
41 | handleEditorSelect: { | 73 | handleEditorSelect: { |
42 | value: function(e) { | 74 | value: function(e) { |
43 | this.application.ninja.stage.textTool.updateStates(); | 75 | this.application.ninja.stage.textTool.updateStates(); |
76 | // this.fontSelection.value = this.application.ninja.stage.textTool.states.fontname; | ||
77 | // | ||
78 | // for( var i = 0; i < this.fontSize.items.length; i++) { | ||
79 | // if (this.application.ninja.stage.textTool.states.fontsize == i + 1) { | ||
80 | // this.fontSize.value = this.fontSize.items[i] | ||
81 | // break; | ||
82 | // } | ||
83 | // } | ||
44 | } | 84 | } |
45 | }, | 85 | }, |
46 | 86 | ||
@@ -133,6 +173,18 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
133 | } | 173 | } |
134 | }, | 174 | }, |
135 | 175 | ||
176 | handleBulletedListAction: { | ||
177 | value: function(e) { | ||
178 | this.application.ninja.stage.textTool.doAction("insertunorderedlist"); | ||
179 | } | ||
180 | }, | ||
181 | |||
182 | handleNumberedListAction: { | ||
183 | value: function(e) { | ||
184 | this.application.ninja.stage.textTool.doAction("insertorderedlist"); | ||
185 | } | ||
186 | }, | ||
187 | |||
136 | handleFontSizeChange: { | 188 | handleFontSizeChange: { |
137 | value: function(e) { | 189 | value: function(e) { |
138 | //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size. | 190 | //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size. |
@@ -214,6 +266,34 @@ exports.TextProperties = Montage.create(ToolProperties, { | |||
214 | oneway: true | 266 | oneway: true |
215 | }); | 267 | }); |
216 | 268 | ||
269 | Object.defineBinding(this.numberedList, "pressed", { | ||
270 | boundObject: this.application.ninja.stage.textTool, | ||
271 | boundObjectPropertyPath: "states.insertorderedlist", | ||
272 | boundValueMutator: this.validatePressed, | ||
273 | oneway: true | ||
274 | }); | ||
275 | |||
276 | Object.defineBinding(this.bulletedList, "pressed", { | ||
277 | boundObject: this.application.ninja.stage.textTool, | ||
278 | boundObjectPropertyPath: "states.insertunorderedlist", | ||
279 | boundValueMutator: this.validatePressed, | ||
280 | oneway: true | ||
281 | }); | ||
282 | |||
283 | Object.defineBinding(this.fontSelection, "value", { | ||
284 | boundObject: this.application.ninja.stage.textTool, | ||
285 | boundObjectPropertyPath: "states.fontname", | ||
286 | boundValueMutator: this.validateFont, | ||
287 | oneway: true | ||
288 | }); | ||
289 | |||
290 | Object.defineBinding(this.fontSize, "value", { | ||
291 | boundObject: this.application.ninja.stage.textTool, | ||
292 | boundObjectPropertyPath: "states.fontsize", | ||
293 | boundValueMutator: this.validateFontSize.bind(this), | ||
294 | oneway: true | ||
295 | }); | ||
296 | |||