From c2ec390d42945d2df1aed3f2b7ff3d1aa722fce8 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 13 Apr 2012 16:51:50 -0700 Subject: - code editor view options bar - Checkbox for user to toggle between manually triggered autocomplete and automatic autocomplete - font zoom hottext Signed-off-by: Ananya Sen --- .../code-editor-view-options.css | 3 ++ .../code-editor-view-options.html | 56 ++++++++++++++++++++++ .../code-editor-view-options.js | 48 +++++++++++++++++++ 3 files changed, 107 insertions(+) create mode 100644 js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css create mode 100644 js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html create mode 100644 js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js (limited to 'js/code-editor/ui') 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..5aa66af2 --- /dev/null +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -0,0 +1,3 @@ +.viewOptions{ + color:#F7F7F7; +} \ No newline at end of file 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..c6d3da4e --- /dev/null +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -0,0 +1,56 @@ + + + + + + + + + +

+

+ +

+ Automatic Code completion + +

+

+

+ + \ 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..a1ff8547 --- /dev/null +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js @@ -0,0 +1,48 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Component, { + hasReel: { + value: true + }, + + prepareForDraw: { + value: function() { + Object.defineBinding(this.codeCompleteCheck , "checked", { + boundObject: this.application.ninja.codeEditorController, + boundObjectPropertyPath: "automaticCodeComplete", + oneway : false + }); + + Object.defineBinding(this.zoomHottext , "value", { + boundObject: this.application.ninja.codeEditorController, + boundObjectPropertyPath: "editorFont", + oneway : false + }); + + } + }, + + willDraw: { + enumerable: false, + value: function() {} + }, + draw: { + enumerable: false, + value: function() {} + }, + didDraw: { + enumerable: false, + value: function() { + + } + } +}); \ No newline at end of file -- cgit v1.2.3 From 2449fc403e8a8a22f092c87e3268a69a2be67e43 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 16 Apr 2012 18:19:17 -0700 Subject: Added comment and uncomment control in the editor view options Signed-off-by: Ananya Sen --- .../code-editor-view-options.css | 13 ++++++++++++- .../code-editor-view-options.html | 12 ++++++++++-- .../code-editor-view-options.js | 20 ++++++++++++++++++++ 3 files changed, 42 insertions(+), 3 deletions(-) (limited to 'js/code-editor/ui') 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 index 5aa66af2..90cf88d3 100644 --- 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 @@ -1,3 +1,14 @@ .viewOptions{ color:#F7F7F7; -} \ No newline at end of file + font-size:12px; +} + +.viewOptions div{ + display:inline; +} + +.viewOptions .format{ + float:right; + font-size:9px; +} + 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 index c6d3da4e..6698baa9 100644 --- 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 @@ -36,7 +36,10 @@ "properties": { "element": {"#": "viewOptions"}, "codeCompleteCheck":{"@": "codeCompleteCheck"}, - "zoomHottext":{"@":"zoomHottext"} + "zoomHottext":{"@":"zoomHottext"}, + "format":{"#": "format"}, + "comment":{"#":"comment"}, + "uncomment":{"#":"uncomment"} } } } @@ -47,8 +50,13 @@

- Automatic Code completion + Automatic Completion +

+

+ + +

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 index a1ff8547..a381ae2a 100644 --- 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 @@ -42,7 +42,27 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo didDraw: { enumerable: false, value: function() { + this.format.addEventListener("click", this.handleFormat.bind(this), false); + this.comment.addEventListener("click", this.handleComment.bind(this), false); + this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); + } + }, + + handleFormat:{ + value: function(){ + this.application.ninja.codeEditorController.autoFormatSelection(); + } + }, + handleComment:{ + value: function(){ + this.application.ninja.codeEditorController.commentSelection(true); + } + }, + handleUncomment:{ + value: function(){ + this.application.ninja.codeEditorController.commentSelection(false); } } + }); \ No newline at end of file -- cgit v1.2.3 From 1f891c58bad0b7746659aa4138001b5ee76d9a0e Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 17 Apr 2012 18:10:39 -0700 Subject: added theme choices for editor Signed-off-by: Ananya Sen --- .../code-editor-view-options.css | 30 +++++++++++++++++++++- .../code-editor-view-options.html | 20 +++++++++++++-- .../code-editor-view-options.js | 14 +++++++--- 3 files changed, 58 insertions(+), 6 deletions(-) (limited to 'js/code-editor/ui') 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 index 90cf88d3..91054fb9 100644 --- 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 @@ -7,8 +7,36 @@ display:inline; } +.viewOptions .autoCodeComplete{ + float:left; +} + +.viewOptions .floatButtons{ + float:left; + font-size:9px; + padding-left: 20px; +} + .viewOptions .format{ - float:right; + float:left; + margin-left:5px; +} + +.viewOptions .themeOptions{ + float: right; +} + +.viewOptions .themeOptions select{ + background-color: #616161; + color: white; font-size:9px; + margin-top:2px; + border-color: #616161; +} + +.viewOptions .themeOptions select option{ + background-color: #616161; + color: white; + border-color: #616161; } 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 index 6698baa9..4a6cfa59 100644 --- 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 @@ -39,7 +39,8 @@ "zoomHottext":{"@":"zoomHottext"}, "format":{"#": "format"}, "comment":{"#":"comment"}, - "uncomment":{"#":"uncomment"} + "uncomment":{"#":"uncomment"}, + "themeSelect":{"#":"themeSelect"} } } } @@ -54,10 +55,25 @@ Automatic Completion

- +

+

+ Theme + +

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 index a381ae2a..0625dad9 100644 --- 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 @@ -45,24 +45,32 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo this.format.addEventListener("click", this.handleFormat.bind(this), false); this.comment.addEventListener("click", this.handleComment.bind(this), false); this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); + this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); } }, handleFormat:{ - value: function(){ + value: function(evt){ this.application.ninja.codeEditorController.autoFormatSelection(); } }, handleComment:{ - value: function(){ + value: function(evt){ this.application.ninja.codeEditorController.commentSelection(true); } }, handleUncomment:{ - value: function(){ + value: function(evt){ this.application.ninja.codeEditorController.commentSelection(false); } + }, + + handleThemeSelection:{ + value: function(evt){ + var theme = this.themeSelect.options[this.themeSelect.selectedIndex].value; + this.application.ninja.codeEditorController.handleThemeSelection(theme); + } } }); \ No newline at end of file -- cgit v1.2.3 From ea4385add0e9087487ccded929c2d6674d326db8 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 18 Apr 2012 00:29:52 -0700 Subject: - collapse panels for code view, restore for design view - apply theme selection to all code view documents Signed-off-by: Ananya Sen --- .../ui/code-editor-view-options.reel/code-editor-view-options.css | 2 ++ .../ui/code-editor-view-options.reel/code-editor-view-options.html | 2 +- .../ui/code-editor-view-options.reel/code-editor-view-options.js | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) (limited to 'js/code-editor/ui') 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 index 91054fb9..79468768 100644 --- 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 @@ -20,10 +20,12 @@ .viewOptions .format{ float:left; margin-left:5px; + height: 20px; } .viewOptions .themeOptions{ float: right; + margin-right:5px; } .viewOptions .themeOptions select{ 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 index 4a6cfa59..31e96adf 100644 --- 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 @@ -60,7 +60,7 @@

- Theme + Theme :

+

+ + ShortKeys + ▼ +

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 index 41fd991e..6c0e3f05 100644 --- 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 @@ -46,6 +46,7 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo this.comment.addEventListener("click", this.handleComment.bind(this), false); this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); + this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false); } }, @@ -71,6 +72,19 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo this.application.ninja.codeEditorController.editorTheme = this.themeSelect.options[this.themeSelect.selectedIndex].value; this.application.ninja.codeEditorController.handleThemeSelection(); } + }, + + handleShortKeys:{ + value:function(evt){ + var list = this.shortKeys.querySelector(".list"); + if(list && list.classList.contains("hide")){ + list.classList.remove("hide"); + list.classList.add("show"); + }else if(list && list.classList.contains("show")){ + list.classList.remove("show"); + list.classList.add("hide"); + } + } } }); \ No newline at end of file -- cgit v1.2.3 From 0e67024be5993049ea6acd9add96b76be6017a4d Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 30 Apr 2012 13:22:23 -0700 Subject: IKNINJA-1562 : override font-size for some themes to allow xooming Signed-off-by: Ananya Sen --- .../code-editor-view-options.css | 14 ++++++++++++++ .../code-editor-view-options.html | 6 +++--- 2 files changed, 17 insertions(+), 3 deletions(-) (limited to 'js/code-editor/ui') 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 index ed314fc9..1e3b4ce7 100644 --- 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 @@ -76,6 +76,7 @@ white-space: nowrap; padding:5px; background-color: #313131; + width:200px; } .viewOptions .shortKeys .list div{ @@ -88,4 +89,17 @@ .viewOptions .shortKeys .show{ visibility: visible; +} + +.viewOptions .shortKeys div{ + padding:2px; +} + +.viewOptions .shortKey{ + font-style: italic; + color: #d1d1d1; +} + +.viewOptions .shortKeyDesc{ + float:right; } \ No newline at end of file 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 index 8a46a0b1..d207ea23 100644 --- 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 @@ -75,9 +75,9 @@

ShortKeys ▼ -- cgit v1.2.3 From 3137d919e6b4ccbb2fb68c5920f4376acde3f1f5 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 1 May 2012 13:37:56 -0700 Subject: added copyrights Signed-off-by: Ananya Sen --- .../ui/code-editor-view-options.reel/code-editor-view-options.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/code-editor/ui') 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 index 1e3b4ce7..a2469070 100644 --- 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 @@ -1,3 +1,9 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + .viewOptions{ color:#F7F7F7; font-size:12px; -- cgit v1.2.3 From a1eec717b536f2f483983f094bd11bd6aa8f4691 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 1 May 2012 13:49:47 -0700 Subject: disable format button for now Signed-off-by: Ananya Sen --- .../ui/code-editor-view-options.reel/code-editor-view-options.css | 1 + .../ui/code-editor-view-options.reel/code-editor-view-options.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'js/code-editor/ui') 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 index a2469070..6130382b 100644 --- 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 @@ -83,6 +83,7 @@ padding:5px; background-color: #313131; width:200px; + cursor: text; } .viewOptions .shortKeys .list div{ 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 index d207ea23..0f335625 100644 --- 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 @@ -54,7 +54,7 @@ Automatic Completion

- +

-- cgit v1.2.3 From 0b3bfc68b49e2f74795d37b0adbd3fdc7b9b4b0a Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 2 May 2012 10:40:10 -0700 Subject: removing format button for now until fully implemented Signed-off-by: Ananya Sen --- .../ui/code-editor-view-options.reel/code-editor-view-options.html | 3 +-- .../ui/code-editor-view-options.reel/code-editor-view-options.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'js/code-editor/ui') 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 index 0f335625..1fa0d783 100644 --- 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 @@ -35,7 +35,6 @@ "element": {"#": "viewOptions"}, "codeCompleteCheck":{"@": "codeCompleteCheck"}, "zoomHottext":{"@":"zoomHottext"}, - "format":{"#": "format"}, "comment":{"#":"comment"}, "uncomment":{"#":"uncomment"}, "themeSelect":{"#":"themeSelect"}, @@ -54,7 +53,7 @@ Automatic Completion

- +

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 index 6c0e3f05..07561580 100644 --- 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 @@ -42,7 +42,7 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo didDraw: { enumerable: false, value: function() { - this.format.addEventListener("click", this.handleFormat.bind(this), false); + //this.format.addEventListener("click", this.handleFormat.bind(this), false); this.comment.addEventListener("click", this.handleComment.bind(this), false); this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); -- cgit v1.2.3 From f65a9fa92819580039edf9ccc54ab21512ee89b4 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Thu, 3 May 2012 11:19:55 -0700 Subject: use data-montage-id instead of id in template Signed-off-by: Ananya Sen --- .../code-editor-view-options.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'js/code-editor/ui') 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 index 1fa0d783..14d6cb55 100644 --- 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 @@ -45,21 +45,21 @@ -

+

- +

- + Automatic Completion

- - + +

Theme : - @@ -72,7 +72,7 @@

-

+