aboutsummaryrefslogtreecommitdiff
path: root/js/components/tools-properties
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/tools-properties')
-rw-r--r--js/components/tools-properties/pen-properties.reel/pen-properties.html22
-rw-r--r--js/components/tools-properties/pen-properties.reel/pen-properties.js18
-rw-r--r--js/components/tools-properties/text-properties.reel/text-properties.css30
-rw-r--r--js/components/tools-properties/text-properties.reel/text-properties.html326
-rw-r--r--js/components/tools-properties/text-properties.reel/text-properties.js236
5 files changed, 477 insertions, 155 deletions
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html
index 7af35a03..74a3a747 100644
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -12,12 +12,25 @@
12 <script type="text/montage-serialization"> 12 <script type="text/montage-serialization">
13 { 13 {
14 14
15 "strokeSizeHT": {
16 "module": "js/components/hottextunit.reel",
17 "name": "HotTextUnit",
18 "properties": {
19 "element": {"#": "strokeSize"},
20 "minValue": 1,
21 "maxValue": 100,
22 "value": 1,
23 "decimalPlace": 10,
24 "acceptableUnits" : ["px", "pt"]
25 }
26 },
27
15 "owner": { 28 "owner": {
16 "module": "js/components/tools-properties/pen-properties.reel", 29 "module": "js/components/tools-properties/pen-properties.reel",
17 "name": "PenProperties", 30 "name": "PenProperties",
18 "properties": { 31 "properties": {
19 "element": {"#": "penProperties"}, 32 "element": {"#": "penProperties"},
20 "reset": {"#": "resetPenTool"} 33 "_strokeSize": {"@": "strokeSizeHT"}
21 } 34 }
22 } 35 }
23 } 36 }
@@ -26,9 +39,12 @@
26 </head> 39 </head>
27 40
28 <body> 41 <body>
29 <div id="penProperties" class="subToolHolderPanel"> 42 <div id="penProperties" class="subToolHolderPanel">
30 <button id="resetPenTool" tabindex="0" class="montage-button" aria-role="button" aria-busy="false">Reset</button> 43 <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
44 <label class="label"> Stroke:</label>
45 <div id="strokeSize" class="label"></div>
31 </div> 46 </div>
47 </div>
32 </body> 48 </body>
33 49
34</html> \ No newline at end of file 50</html> \ No newline at end of file
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js
index ec8efa69..b57f9a6f 100644
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.js
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -5,24 +5,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
5</copyright> */ 5</copyright> */
6 6
7var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component;
9var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
10var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; 8var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
11 9
12exports.PenProperties = Montage.create(ToolProperties, { 10exports.PenProperties = Montage.create(ToolProperties, {
13 reset: { value: null }, 11 strokeSize: {
14 12 get: function() { return this._strokeSize; }
15 _subPrepare: {
16 value: function() {
17 this.reset.addEventListener("click", this, false);
18 }
19 },
20
21 handleClick: {
22 value: function(event) {
23 var newEvent = document.createEvent( "CustomEvent" );
24 newEvent.initCustomEvent( "resetPenTool", false, true );
25 defaultEventManager.dispatchEvent( newEvent );
26 }
27 } 13 }
28}); \ No newline at end of file 14}); \ No newline at end of file
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 d581c6c3..6aa61812 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -5,29 +5,33 @@
5 </copyright> */ 5 </copyright> */
6 6
7.optionsTextTool { 7.optionsTextTool {
8 display: -webkit-box; 8 padding: 6px;
9 -webkit-box-orient:horizontal;
10 -webkit-box-align: stretch;
11 padding: 5px;
12} 9}
13 10
14 11.optionsTextTool .btnGroup {
15.optionsTextTool > * { 12 padding: 0px 8px;
16 -webkit-box-flex:0;
17} 13}
18 14
19.optionsTextTool .button { 15.optionsTextTool > *, .optionsTextTool .btnGroup > * {
20 width: auto; 16 float:left;
21
22} 17}
23 18
24.optionsTextTool .hottextunit { 19.optionsTextTool button {
25 padding-top:5px; 20 width: auto;
21 padding: 4px 8px !important;
22 margin-left:4px;
26} 23}
27 24
28.optionsTextTool .label, .optionsTextTool .hottextunit { 25.optionsTextTool .label, .optionsTextTool .hottextunit {
29 float:none;
30 font-size:11px; 26 font-size:11px;
31} 27}
32 28
29.optionsTextTool .fontSelection {
30 width:100px;
31}
33 32
33.optionsTextTool .fontColor {
34 width: 20px;
35 height: 18px;
36 margin: 2px 6px;
37} \ 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 fb57c06d..7ded1236 100644
--- 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 @@
33 "alignCenter": {"@": "alignCenter"}, 33 "alignCenter": {"@": "alignCenter"},
34 "alignRight": {"@": "alignRight"}, 34 "alignRight": {"@": "alignRight"},
35 "alignJustify": {"@": "alignJustify"}, 35 "alignJustify": {"@": "alignJustify"},
36 "indentRight": {"@": "indentRight"}, 36 "indent": {"@": "indent"},
37 "indentLeft": {"@": "indentLeft"}, 37 "outdent": {"@": "outdent"},
38 "numberedList": {"@": "numberedList"}, 38 "numberedList": {"@": "numberedList"},
39 "bulletedList": {"@": "bulletedList"} 39 "bulletedList": {"@": "bulletedList"}
40 } 40 }
@@ -57,8 +57,16 @@
57 "module": "js/components/combobox.reel", 57 "module": "js/components/combobox.reel",
58 "name": "Combobox", 58 "name": "Combobox",
59 "properties": { 59 "properties": {
60 "element": {"#": "fontSelection"} 60 "element": {"#": "fontSelection"},
61 } 61 "identifier": "fontSelection"
62 },
63 "listeners": [
64 {
65 "type": "change",
66 "listener": {"@": "owner"}
67 }
68 ]
69
62 }, 70 },
63 "fontSettings": { 71 "fontSettings": {
64 "module": "js/components/button.reel", 72 "module": "js/components/button.reel",
@@ -69,131 +77,226 @@
69 }, 77 },
70 78
71 "fontSize": { 79 "fontSize": {
72 "module": "js/components/hottextunit.reel", 80 "module": "js/components/combobox.reel",
73 "name": "HotTextUnit", 81 "name": "Combobox",
74 "properties": { 82 "properties": {
75 "element": {"#": "fontSize"} 83 "element": {"#": "fontSize"},
76 } 84 "identifier": "fontSize"
77 }, 85 },
86 "listeners": [
87 {
88 "type": "change",
89 "listener": {"@": "owner"}
90 }
91 ]
78