diff options
Diffstat (limited to 'js/components/tools-properties/tag-properties.reel')
3 files changed, 70 insertions, 3 deletions
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 7f1b0f7f..7969dff9 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.css +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css | |||
@@ -4,3 +4,19 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | .tagRadioButtons .fillColorCtrl { | ||
8 | width: 18px; | ||
9 | height: 18px; | ||
10 | margin-top: 6px; | ||
11 | margin-left: 3px; | ||
12 | margin-right: 8px; | ||
13 | border: 1px black solid; | ||
14 | } | ||
15 | |||
16 | .tagRadioButtons .colorCtrlIcon { | ||
17 | width: 20px; | ||
18 | height: 20px; | ||
19 | margin-top: 6px; | ||
20 | -webkit-transform: scale(0.8); | ||
21 | background-color: rgb(40, 40, 40); | ||
22 | } \ 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 c80ba36e..379c37a0 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html | |||
@@ -17,7 +17,9 @@ | |||
17 | "properties": { | 17 | "properties": { |
18 | "element": {"#": "tagProperties"}, | 18 | "element": {"#": "tagProperties"}, |
19 | 19 | ||
20 | "divElement": {"#": "divTool"}, | 20 | "_fillColorCtrl": {"#": "fillColorCtrl"}, |
21 | |||
22 | "divElement": {"#": "divTool"}, | ||
21 | "imageElement": {"#": "imageTool"}, | 23 | "imageElement": {"#": "imageTool"}, |
22 | "videoElement": {"#": "videoTool"}, | 24 | "videoElement": {"#": "videoTool"}, |
23 | "canvasElement": {"#": "canvasTool"}, | 25 | "canvasElement": {"#": "canvasTool"}, |
@@ -30,13 +32,17 @@ | |||
30 | } | 32 | } |
31 | } | 33 | } |
32 | } | 34 | } |
33 | </script> | 35 | </script> |
34 | 36 | ||
35 | </head> | 37 | </head> |
36 | 38 | ||
37 | <body> | 39 | <body> |
38 | <div id="tagProperties" class="subToolHolderPanel"> | 40 | <div id="tagProperties" class="subToolHolderPanel"> |
39 | <div id="tagToolContainer" class="tagRadioButtons"> | 41 | <div id="tagToolContainer" class="tagRadioButtons"> |
42 | <div class="leftLabel colorCtrlIcon FillTool"></div> | ||
43 | <div data-montage-id="fillColorCtrl" class="leftLabel fillColorCtrl"></div> | ||
44 | <div class="nj-divider divider-vertical"> </div> | ||
45 | |||
40 | <input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/> | 46 | <input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/> |
41 | <input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/> | 47 | <input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/> |
42 | <input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/> | 48 | <input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/> |
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 1caabc35..32063d9a 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.js +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js | |||
@@ -8,7 +8,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 ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 9 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
10 | 10 | ||
11 | exports.TagProperties = Montage.create(ToolProperties, { | 11 | var TagProperties = exports.TagProperties = Montage.create(ToolProperties, { |
12 | divElement: { value: null, enumerable: false }, | 12 | divElement: { value: null, enumerable: false }, |
13 | imageElement: { value: null, enumerable: false }, | 13 | imageElement: { value: null, enumerable: false }, |
14 | videoElement: { value: null, enumerable: false }, | 14 | videoElement: { value: null, enumerable: false }, |
@@ -17,6 +17,24 @@ exports.TagProperties = Montage.create(ToolProperties, { | |||
17 | classField: { value: null, enumerable: false }, | 17 | classField: { value: null, enumerable: false }, |
18 | customName: { value: null, enumerable: false }, | 18 | customName: { value: null, enumerable: false }, |
19 | customLabel: { value: null, enumerable: false }, | 19 | customLabel: { value: null, enumerable: false }, |
20 | addedColorChips: { value: false }, | ||
21 | |||
22 | _fill: { | ||
23 | enumerable: false, | ||
24 | value: { colorMode: 'nocolor', color: null, webGlColor: null } | ||
25 | }, | ||
26 | |||
27 | fill: { | ||
28 | enumerable: true, | ||
29 | get: function () { | ||
30 | return this._fill; | ||
31 | }, | ||
32 | set: function (value) { | ||
33 | if (value !== this._fill) { | ||
34 | this._fill = value; | ||
35 | } | ||
36 | } | ||
37 | }, | ||
20 | 38 | ||
21 | _subPrepare: { | 39 | _subPrepare: { |
22 | value: function() { | 40 | value: function() { |
@@ -31,6 +49,33 @@ exports.TagProperties = Montage.create(ToolProperties, { | |||
31 | } | 49 | } |
32 | }, | 50 | }, |
33 | 51 | ||
52 | draw: { | ||
53 | enumerable: false, | ||
54 | value: function () { | ||
55 | Object.getPrototypeOf(TagProperties).draw.call(this); | ||
56 | |||
57 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
58 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
59 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
60 | |||
61 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | ||
62 | |||
63 | this.addedColorChips = true; | ||
64 | } | ||
65 | |||
66 | if (this.addedColorChips) { | ||
67 | this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); | ||
68 | } | ||
69 | } | ||
70 | }, | ||
71 | |||
72 | handleFillColorChange: { | ||
73 | value: function (e) { | ||
74 | this.fill = e._event; | ||
75 | this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); | ||
76 | } | ||
77 | }, | ||
78 | |||
34 | handleClick: { | 79 | handleClick: { |
35 | value: function(event) { | 80 | value: function(event) { |
36 | this.selectedElement = event._event.target.id; | 81 | this.selectedElement = event._event.target.id; |