aboutsummaryrefslogtreecommitdiff
path: root/js/code-editor/ui
diff options
context:
space:
mode:
Diffstat (limited to 'js/code-editor/ui')
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css42
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html80
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js76
3 files changed, 198 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..91054fb9
--- /dev/null
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
@@ -0,0 +1,42 @@
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}
13
14.viewOptions .floatButtons{
15 float:left;
16 font-size:9px;
17 padding-left: 20px;
18}
19
20.viewOptions .format{
21 float:left;
22 margin-left:5px;
23}
24
25.viewOptions .themeOptions{
26 float: right;
27}
28
29.viewOptions .themeOptions select{
30 background-color: #616161;
31 color: white;
32 font-size:9px;
33 margin-top:2px;
34 border-color: #616161;
35}
36
37.viewOptions .themeOptions select option{
38 background-color: #616161;
39 color: white;
40 border-color: #616161;
41}
42
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..4a6cfa59
--- /dev/null
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
@@ -0,0 +1,80 @@
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 "module": "js/components/hottextunit.reel",
22 "name": "HotTextUnit",
23 "properties": {
24 "element": {"#": "zoomFont"},
25 "minValue":100,
26 "maxValue" :200,
27 "stepSize" :10,
28 "acceptableUnits" : ["%"],
29 "units" : "%"
30 }
31 },
32
33 "owner":{
34 "module": "js/code-editor/ui/code-editor-view-options.reel",
35 "name": "CodeEditorViewOptions",
36 "properties": {
37 "element": {"#": "viewOptions"},
38 "codeCompleteCheck":{"@": "codeCompleteCheck"},
39 "zoomHottext":{"@":"zoomHottext"},
40 "format":{"#": "format"},
41 "comment":{"#":"comment"},
42 "uncomment":{"#":"uncomment"},
43 "themeSelect":{"#":"themeSelect"}
44 }
45 }
46 }
47 </script>
48</head>
49<body>
50<div id="viewOptions" class="viewOptions">
51 <div>
52 <input class="zoomFont" id="zoomFont"/>
53 <div class="autoCodeComplete" >
54 <input type="checkbox" id="codeComplete" />
55 <span>Automatic Completion</span>
56 </div>
57 <div class="floatButtons">
58 <button id="format" value="format" class="nj-skinned format">Format</button>
59 <button id="comment" value="comment" class="nj-skinned format">comment</button>
60 <button id="uncomment" value="uncomment" class="nj-skinned format">uncomment</button>
61 </div>
62 <div class="themeOptions">
63 <span>Theme</span>
64 <select id="themeSelect">
65 <option value="default" selected="">DEFAULT</option>
66 <option value="night">NIGHT</option>
67 <option value="monokai" >MONOKAI</option>
68 <option value="neat" >NEAT</option>
69 <option value="elegant" >ELEGANT</option>
70 <option value="cobalt" >COBALT</option>
71 <option value="eclipse" >ECLIPSE</option>
72 <option value="rubyblue" >RUBYBLUE</option>
73 <option value="lesser-dark" >LESSER-DARK</option>
74 <option value="xq-dark" >XQ-DARK</option>
75 </select>
76 </div>
77 </div>
78</div>
79</body>
80</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..0625dad9
--- /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: "editorFont",
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 },
62
63 handleUncomment:{
64 value: function(evt){
65 this.application.ninja.codeEditorController.commentSelection(false);
66 }
67 },
68
69 handleThemeSelection:{
70 value: function(evt){
71 var theme = this.themeSelect.options[this.themeSelect.selectedIndex].value;
72 this.application.ninja.codeEditorController.handleThemeSelection(theme);