aboutsummaryrefslogtreecommitdiff
path: root/js/code-editor/ui/code-editor-view-options.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/code-editor/ui/code-editor-view-options.reel')
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css53
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html78
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js76
3 files changed, 207 insertions, 0 deletions
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
new file mode 100644
index 00000000..442a5183
--- /dev/null
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
@@ -0,0 +1,53 @@
1.viewOptions{
2 color:#F7F7F7;
3 font-size:12px;
4}
5
6.viewOptions div{
7 display:inline;
8}
9
10.viewOptions .autoCodeComplete{
11 float:left;
12 height: 20px;
13}
14
15.viewOptions .autoCodeComplete span{
16 vertical-align: middle;
17}
18
19.viewOptions .autoCodeComplete .disabled{
20 color:#515151;
21}
22
23.viewOptions .floatButtons{
24 float:left;
25 font-size:9px;
26 padding-left: 20px;
27}
28
29.viewOptions .format{
30 float:left;
31 margin-left:5px;
32 height: 20px;
33}
34
35.viewOptions .themeOptions{
36 float: right;
37 margin-right:5px;
38}
39
40.viewOptions .themeOptions select{
41 background-color: #616161;
42 color: white;
43 font-size:9px;
44 margin-top:2px;
45 border-color: #616161;
46}
47
48.viewOptions .themeOptions select option{
49 background-color: #616161;
50 color: white;
51 border-color: #616161;
52}
53
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
new file mode 100644
index 00000000..fadc4683
--- /dev/null
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
@@ -0,0 +1,78 @@
1<!DOCTYPE HTML>
2<!-- <copyright>
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/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="code-editor-view-options.css">
11 <script type="text/montage-serialization">
12 {
13 "codeCompleteCheck":{
14 "prototype": "montage/ui/checkbox.reel",
15 "properties": {
16 "element": {"#": "codeComplete"}
17 }
18 },
19
20 "zoomHottext": {
21 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
22 "properties": {
23 "element": {"#": "zoomFont"},
24 "minValue":100,
25 "maxValue" :200,
26 "stepSize" :10,
27 "acceptableUnits" : ["%"],
28 "units" : "%"
29 }
30 },
31
32 "owner":{
33 "prototype": "js/code-editor/ui/code-editor-view-options.reel[CodeEditorViewOptions]",
34 "properties": {
35 "element": {"#": "viewOptions"},
36 "codeCompleteCheck":{"@": "codeCompleteCheck"},
37 "zoomHottext":{"@":"zoomHottext"},
38 "format":{"#": "format"},
39 "comment":{"#":"comment"},
40 "uncomment":{"#":"uncomment"},
41 "themeSelect":{"#":"themeSelect"}
42 }
43 }
44 }
45 </script>
46</head>
47<body>
48<div id="viewOptions" class="viewOptions">
49 <div>
50 <input class="zoomFont" id="zoomFont"/>
51 <div class="autoCodeComplete" >
52 <input type="checkbox" id="codeComplete" />
53 <span>Automatic Completion</span>
54 </div>
55 <div class="floatButtons">
56 <button id="format" value="format" class="nj-skinned format">Format</button>
57 <button id="comment" value="comment" class="nj-skinned format">comment</button>
58 <button id="uncomment" value="uncomment" class="nj-skinned format">uncomment</button>
59 </div>
60 <div class="themeOptions">
61 <span>Theme :</span>
62 <select id="themeSelect">
63 <option value="default" selected="">DEFAULT</option>
64 <option value="night">NIGHT</option>
65 <option value="monokai" >MONOKAI</option>
66 <option value="neat" >NEAT</option>
67 <option value="elegant" >ELEGANT</option>
68 <option value="cobalt" >COBALT</option>
69 <option value="eclipse" >ECLIPSE</option>
70 <option value="rubyblue" >RUBYBLUE</option>
71 <option value="lesser-dark" >LESSER-DARK</option>
72 <option value="xq-dark" >XQ-DARK</option>
73 </select>
74 </div>
75 </div>
76</div>
77</body>
78</html> \ No newline at end of file
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
new file mode 100644
index 00000000..41fd991e
--- /dev/null
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
@@ -0,0 +1,76 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No 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.
5</copyright> */
6
7////////////////////////////////////////////////////////////////////////
8//
9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component;
11
12var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Component, {
13 hasReel: {
14 value: true
15 },
16
17 prepareForDraw: {
18 value: function() {
19 Object.defineBinding(this.codeCompleteCheck , "checked", {
20 boundObject: this.application.ninja.codeEditorController,
21 boundObjectPropertyPath: "automaticCodeComplete",
22 oneway : false
23 });
24
25 Object.defineBinding(this.zoomHottext , "value", {
26 boundObject: this.application.ninja.codeEditorController,
27 boundObjectPropertyPath: "zoomFactor",
28 oneway : false
29 });
30
31 }
32 },
33
34 willDraw: {
35 enumerable: false,
36 value: function() {}
37 },
38 draw: {
39 enumerable: false,
40 value: function() {}
41 },
42 didDraw: {
43 enumerable: false,
44 value: function() {
45 this.format.addEventListener("click", this.handleFormat.bind(this), false);
46 this.comment.addEventListener("click", this.handleComment.bind(this), false);
47 this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false);
48 this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false);
49 }
50 },
51
52 handleFormat:{
53 value: function(evt){
54 this.application.ninja.codeEditorController.autoFormatSelection();
55 }
56 },
57 handleComment:{
58 value: function(evt){
59 this.application.ninja.codeEditorController.commentSelection(true);
60 }
61 },