diff options
Diffstat (limited to 'js/components/tools-properties/tag-properties.reel')
3 files changed, 68 insertions, 26 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..018448f1 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.css +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css | |||
@@ -3,4 +3,3 @@ | |||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
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 | |||
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 edc2d47f..87f87aff 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <!DOCTYPE HTML> | 1 | <!DOCTYPE HTML> |
2 | <!-- <copyright> | 2 | <!-- <copyright> |
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
@@ -17,6 +17,8 @@ | |||
17 | "properties": { | 17 | "properties": { |
18 | "element": {"#": "tagProperties"}, | 18 | "element": {"#": "tagProperties"}, |
19 | 19 | ||
20 | "_fillColorCtrl": {"#": "fillColorCtrl"}, | ||
21 | |||
20 | "divElement": {"#": "divTool"}, | 22 | "divElement": {"#": "divTool"}, |
21 | "imageElement": {"#": "imageTool"}, | 23 | "imageElement": {"#": "imageTool"}, |
22 | "videoElement": {"#": "videoTool"}, | 24 | "videoElement": {"#": "videoTool"}, |
@@ -35,25 +37,27 @@ | |||
35 | </head> | 37 | </head> |
36 | 38 | ||
37 | <body> | 39 | <body> |
38 | <div data-montage-id="tagProperties" class="subToolHolderPanel"> | 40 | <div data-montage-id="tagProperties" class="subToolHolderPanel toolOptionsFloatChildren"> |
39 | <div id="tagToolContainer" class="tagRadioButtons"> | 41 | <div data-montage-id="tagToolContainer" class="tagRadioButtons toolOptionsFloatChildren"> |
40 | <input type="radio" id="divTool" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" value="div" checked/> | 42 | <input type="radio" data-montage-id="divTool" class="toolOptsRadioButton divTool" title="Div Element" name="TagRadios" value="div" checked/> |
41 | <input type="radio" id="imageTool" data-montage-id="imageTool" class="tag-type" title="Image Element" value="image" name="TagRadios"/> | 43 | <input type="radio" data-montage-id="imageTool" class="toolOptsRadioButton imageTool" title="Image Element" name="TagRadios" value="image"/> |
42 | <input type="radio" id="videoTool" data-montage-id="videoTool" class="tag-type" title="Video Element" value="video" name="TagRadios"/> | 44 | <input type="radio" data-montage-id="videoTool" class="toolOptsRadioButton videoTool" title="Video Element" name="TagRadios" value="video"/> |
43 | <input type="radio" id="canvasTool" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" value="canvas" name="TagRadios"/> | 45 | <input type="radio" data-montage-id="canvasTool" class="toolOptsRadioButton canvasTool" title="Canvas Element" name="TagRadios" value="canvas"/> |
44 | <input type="radio" id="customTool" data-montage-id="customTool" class="tag-type" title="Custom Element" value="custom" name="TagRadios"/> | 46 | <input type="radio" data-montage-id="customTool" class="toolOptsRadioButton customTool" title="Custom Element" name="TagRadios" value="custom"/> |
45 | 47 | ||
46 | <div class="nj-divider divider-vertical"> </div> | 48 | <div class="nj-divider divider-vertical toolOptionsSpacer"> </div> |
47 | 49 | ||
48 | <div id="classNameContainer" class="leftLabel"> | 50 | <div class="toolColorChipIcon FillTool"></div> |
49 | <label class="label"> Class: | 51 | <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> |
50 | <input data-montage-id="className" type="text" name="ClassNameTextBox" class="textBox nj-skinned"> | 52 | <div class="nj-divider divider-vertical toolOptionsSpacer"> </div> |
51 | </label> | 53 | |
54 | <div id="classNameContainer"> | ||
55 | <label class="label"> Class:</label> | ||
56 | <input data-montage-id="className" type="text" name="ClassNameTextBox" class="textBox nj-skinned"/> | ||
52 | </div> | 57 | </div> |
53 | 58 | ||
54 | <div id="customContainer" class="leftLabel" style="padding-top: 3px;"> | 59 | <div id="customContainer"> |
55 | <label class="label"> Tag Name:</label> | 60 | <label class="label"> Tag Name:</label> |
56 | |||
57 | <select data-montage-id="customTagCB" class="nj-skinned"> | 61 | <select data-montage-id="customTagCB" class="nj-skinned"> |
58 | <option>article</option> | 62 | <option>article</option> |
59 | <option>aside</option> | 63 | <option>aside</option> |
@@ -61,11 +65,8 @@ | |||
61 | </select> | 65 | </select> |
62 | </div> | 66 | </div> |
63 | 67 | ||
64 | 68 | <div id="positionContainer"> | |
65 | |||
66 | <div id="positionContainer" class="leftLabel" style="padding-top: 3px;"> | ||
67 | <label class="label"> Position:</label> | 69 | <label class="label"> Position:</label> |
68 | |||
69 | <select data-montage-id="positionCB" class="nj-skinned"> | 70 | <select data-montage-id="positionCB" class="nj-skinned"> |
70 | <option>Static</option> | 71 | <option>Static</option> |
71 | <option>Absolute</option> | 72 | <option>Absolute</option> |
@@ -73,10 +74,7 @@ | |||
73 | <option>Fixed</option> | 74 | <option>Fixed</option> |
74 | <option>Inherit</option> | 75 | <option>Inherit</option> |
75 | </select> | 76 | </select> |
76 | |||
77 | </div> | 77 | </div> |
78 | |||
79 | |||
80 | </div> | 78 | </div> |
81 | </div> | 79 | </div> |
82 | </body> | 80 | </body> |
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 6519d5b8..52c6f44c 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.value; | 81 | this.selectedElement = event._event.target.value; |