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') 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') 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') 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') 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 :
+
+
+
ctrl+space : code hints
+
ctrl+/ : comment selection
+
ctrl+shift+/ : uncomment selection
+
+ 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 --- .../codemirror-ninja-lib/ninja-simple-hint.js | 78 ---------------------- .../codemirror-ninja/lib/ninja-simple-hint.js | 78 ++++++++++++++++++++++ .../codemirror-ninja/theme/lesser-dark-ninja.css | 45 +++++++++++++ .../codemirror-ninja/theme/rubyblue-ninja.css | 22 ++++++ .../code-editor-view-options.css | 14 ++++ .../code-editor-view-options.html | 6 +- 6 files changed, 162 insertions(+), 81 deletions(-) delete mode 100644 js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js create mode 100644 js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js create mode 100644 js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css create mode 100644 js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css (limited to 'js/code-editor') diff --git a/js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js b/js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js deleted file mode 100644 index 866e1a8b..00000000 --- a/js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js +++ /dev/null @@ -1,78 +0,0 @@ -(function() { - CodeMirror.simpleHint = function(editor, getHints) { - // We want a single cursor position. - if (editor.somethingSelected()) return; - - // Ninja override: don't show code hinting if the token is empty - var tempToken = editor.getTokenAt(editor.getCursor()); - if(tempToken && ((tempToken.string === "") || !(/[\S]/gi.test(tempToken.string)))) return;//check that token has only spaces - - - var result = getHints(editor); - if (!result || !result.list.length) return; - var completions = result.list; - function insert(str) { - editor.replaceRange(str, result.from, result.to); - } - // Ninja override: don't autocomplete to reduce user's typing errors -// if (completions.length == 1) {insert(completions[0]); return true;} - - // Build the select widget - var complete = document.createElement("div"); - complete.className = "CodeMirror-completions"; - var sel = complete.appendChild(document.createElement("select")); - // Opera doesn't move the selection when pressing up/down in a - // multi-select, but it does properly support the size property on - // single-selects, so no multi-select is necessary. - if (!window.opera) sel.multiple = true; - for (var i = 0; i < completions.length; ++i) { - var opt = sel.appendChild(document.createElement("option")); - opt.appendChild(document.createTextNode(completions[i])); - } - sel.firstChild.selected = true; - sel.size = Math.min(10, completions.length); - var pos = editor.cursorCoords(); - complete.style.left = pos.x + "px"; - complete.style.top = pos.yBot + "px"; - document.body.appendChild(complete); - // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor. - var winW = window.innerWidth || Math.max(document.body.offsetWidth, document.documentElement.offsetWidth); - if(winW - pos.x < sel.clientWidth) - complete.style.left = (pos.x - sel.clientWidth) + "px"; - // Hack to hide the scrollbar. - if (completions.length <= 10) - complete.style.width = (sel.clientWidth - 1) + "px"; - - var done = false; - function close() { - if (done) return; - done = true; - complete.parentNode.removeChild(complete); - } - function pick() { - insert(completions[sel.selectedIndex]); - close(); - setTimeout(function(){editor.focus();}, 50); - } - CodeMirror.connect(sel, "blur", close); - CodeMirror.connect(sel, "keydown", function(event) { - var code = event.keyCode; - // Enter - if (code == 13) {CodeMirror.e_stop(event); pick();} - // Escape - else if (code == 27) {CodeMirror.e_stop(event); close(); editor.focus();} - else if (code != 38 && code != 40) { - close(); editor.focus(); - // Pass the event to the CodeMirror instance so that it can handle things like backspace properly. - editor.triggerOnKeyDown(event); - setTimeout(function(){CodeMirror.simpleHint(editor, getHints);}, 50); - } - }); - CodeMirror.connect(sel, "dblclick", pick); - - sel.focus(); - // Opera sometimes ignores focusing a freshly created node - if (window.opera) setTimeout(function(){if (!done) sel.focus();}, 100); - return true; - }; -})(); diff --git a/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js b/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js new file mode 100644 index 00000000..866e1a8b --- /dev/null +++ b/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js @@ -0,0 +1,78 @@ +(function() { + CodeMirror.simpleHint = function(editor, getHints) { + // We want a single cursor position. + if (editor.somethingSelected()) return; + + // Ninja override: don't show code hinting if the token is empty + var tempToken = editor.getTokenAt(editor.getCursor()); + if(tempToken && ((tempToken.string === "") || !(/[\S]/gi.test(tempToken.string)))) return;//check that token has only spaces + + + var result = getHints(editor); + if (!result || !result.list.length) return; + var completions = result.list; + function insert(str) { + editor.replaceRange(str, result.from, result.to); + } + // Ninja override: don't autocomplete to reduce user's typing errors +// if (completions.length == 1) {insert(completions[0]); return true;} + + // Build the select widget + var complete = document.createElement("div"); + complete.className = "CodeMirror-completions"; + var sel = complete.appendChild(document.createElement("select")); + // Opera doesn't move the selection when pressing up/down in a + // multi-select, but it does properly support the size property on + // single-selects, so no multi-select is necessary. + if (!window.opera) sel.multiple = true; + for (var i = 0; i < completions.length; ++i) { + var opt = sel.appendChild(document.createElement("option")); + opt.appendChild(document.createTextNode(completions[i])); + } + sel.firstChild.selected = true; + sel.size = Math.min(10, completions.length); + var pos = editor.cursorCoords(); + complete.style.left = pos.x + "px"; + complete.style.top = pos.yBot + "px"; + document.body.appendChild(complete); + // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor. + var winW = window.innerWidth || Math.max(document.body.offsetWidth, document.documentElement.offsetWidth); + if(winW - pos.x < sel.clientWidth) + complete.style.left = (pos.x - sel.clientWidth) + "px"; + // Hack to hide the scrollbar. + if (completions.length <= 10) + complete.style.width = (sel.clientWidth - 1) + "px"; + + var done = false; + function close() { + if (done) return; + done = true; + complete.parentNode.removeChild(complete); + } + function pick() { + insert(completions[sel.selectedIndex]); + close(); + setTimeout(function(){editor.focus();}, 50); + } + CodeMirror.connect(sel, "blur", close); + CodeMirror.connect(sel, "keydown", function(event) { + var code = event.keyCode; + // Enter + if (code == 13) {CodeMirror.e_stop(event); pick();} + // Escape + else if (code == 27) {CodeMirror.e_stop(event); close(); editor.focus();} + else if (code != 38 && code != 40) { + close(); editor.focus(); + // Pass the event to the CodeMirror instance so that it can handle things like backspace properly. + editor.triggerOnKeyDown(event); + setTimeout(function(){CodeMirror.simpleHint(editor, getHints);}, 50); + } + }); + CodeMirror.connect(sel, "dblclick", pick); + + sel.focus(); + // Opera sometimes ignores focusing a freshly created node + if (window.opera) setTimeout(function(){if (!done) sel.focus();}, 100); + return true; + }; +})(); diff --git a/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css b/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css new file mode 100644 index 00000000..fa7e8e07 --- /dev/null +++ b/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css @@ -0,0 +1,45 @@ +/* +http://lesscss.org/ dark theme +Ported to CodeMirror by Peter Kroon +*/ +.CodeMirror{ + line-height: 15px; +} +.cm-s-lesser-dark { + font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important; + /*font-size:12px;*/ +} + +.cm-s-lesser-dark { background: #262626; color: #EBEFE7; text-shadow: 0 -1px 1px #262626; } +.cm-s-lesser-dark div.CodeMirror-selected {background: #45443B !important;} /* 33322B*/ +.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; } +.cm-s-lesser-dark .CodeMirror-lines { margin-left:3px; margin-right:3px; }/*editable code holder*/ + +div.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/ + +.cm-s-lesser-dark .CodeMirror-gutter { background: #262626; border-right:1px solid #aaa; padding-right:3px; min-width:2.5em; } +.cm-s-lesser-dark .CodeMirror-gutter-text { color: #777; } + +.cm-s-lesser-dark span.cm-keyword { color: #599eff; } +.cm-s-lesser-dark span.cm-atom { color: #C2B470; } +.cm-s-lesser-dark span.cm-number { color: #B35E4D; } +.cm-s-lesser-dark span.cm-def {color: color: white;} +.cm-s-lesser-dark span.cm-variable { color:#D9BF8C; } +.cm-s-lesser-dark span.cm-variable-2 { color: #669199; } +.cm-s-lesser-dark span.cm-variable-3 { color: white; } +.cm-s-lesser-dark span.cm-property {color: #92A75C;} +.cm-s-lesser-dark span.cm-operator {color: #92A75C;} +.cm-s-lesser-dark span.cm-comment { color: #666; } +.cm-s-lesser-dark span.cm-string { color: #BCD279; } +.cm-s-lesser-dark span.cm-string-2 {color: #f50;} +.cm-s-lesser-dark span.cm-meta { color: #738C73; } +.cm-s-lesser-dark span.cm-error { color: #9d1e15; } +.cm-s-lesser-dark span.cm-qualifier {color: #555;} +.cm-s-lesser-dark span.cm-builtin { color: #ff9e59; } +.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; } +.cm-s-lesser-dark span.cm-tag { color: #669199; } +.cm-s-lesser-dark span.cm-attribute {color: #00c;} +.cm-s-lesser-dark span.cm-header {color: #a0a;} +.cm-s-lesser-dark span.cm-quote {color: #090;} +.cm-s-lesser-dark span.cm-hr {color: #999;} +.cm-s-lesser-dark span.cm-link {color: #00c;} diff --git a/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css b/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css new file mode 100644 index 00000000..b09e4e3e --- /dev/null +++ b/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css @@ -0,0 +1,22 @@ +.cm-s-rubyblue { + font:Trebuchet, Verdana, sans-serif; } /* - customized editor font - */ + +.cm-s-rubyblue { background: #112435; color: white; } +.cm-s-rubyblue div.CodeMirror-selected { background: #38566F !important; } +.cm-s-rubyblue .CodeMirror-gutter { background: #1F4661; border-right: 7px solid #3E7087; min-width:2.5em; } +.cm-s-rubyblue .CodeMirror-gutter-text { color: white; } +.cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid white !important; } + +.cm-s-rubyblue span.cm-comment { color: #999; font-style:italic; line-height: 1em; } +.cm-s-rubyblue span.cm-atom { color: #F4C20B; } +.cm-s-rubyblue span.cm-number, .cm-s-rubyblue span.cm-attribute { color: #82C6E0; } +.cm-s-rubyblue span.cm-keyword { color: #F0F; } +.cm-s-rubyblue span.cm-string { color: #F08047; } +.cm-s-rubyblue span.cm-meta { color: #F0F; } +.cm-s-rubyblue span.cm-variable-2, .cm-s-rubyblue span.cm-tag { color: #7BD827; } +.cm-s-rubyblue span.cm-variable-3, .cm-s-rubyblue span.cm-def { color: white; } +.cm-s-rubyblue span.cm-error { color: #AF2018; } +.cm-s-rubyblue span.cm-bracket { color: #F0F; } +.cm-s-rubyblue span.cm-link { color: #F4C20B; } +.cm-s-rubyblue span.CodeMirror-matchingbracket { color:#F0F !important; } +.cm-s-rubyblue span.cm-builtin, .cm-s-rubyblue span.cm-special { color: #FF9D00; } 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 @@
-
ctrl+space : code hints
-
ctrl+/ : comment selection
-
ctrl+shift+/ : uncomment selection
+
ctrl+space : code hints
+
ctrl+/ : comment selection
+
ctrl+shift+/ : uncomment selection
ShortKeys ▼ -- cgit v1.2.3 From 052caf2b8e10a1e42ec1355a9bb7dd039ea01f69 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 30 Apr 2012 17:26:24 -0700 Subject: set up different activeline colors for different themes Signed-off-by: Ananya Sen --- .../codemirror-ninja/theme/xq-dark-ninja.css | 46 ++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css (limited to 'js/code-editor') diff --git a/js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css b/js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css new file mode 100644 index 00000000..64006c87 --- /dev/null +++ b/js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css @@ -0,0 +1,46 @@ +/* +Copyright (C) 2011 by MarkLogic Corporation +Author: Mike Brevoort + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. +*/ +.cm-s-xq-dark { background: #0a001f; color: #f8f8f8; } +.cm-s-xq-dark span.CodeMirror-selected { background: #044259 !important; } +.cm-s-xq-dark .CodeMirror-gutter { background: #0a001f; border-right: 1px solid #aaa; } +.cm-s-xq-dark .CodeMirror-gutter-text { color: #f8f8f8; } +.cm-s-xq-dark .CodeMirror-cursor { border-left: 1px solid white !important; } + +.cm-s-xq-dark span.cm-keyword {color: #FFBD40;} +.cm-s-xq-dark span.cm-atom {color: #6C8CD5;} +.cm-s-xq-dark span.cm-number {color: #164;} +.cm-s-xq-dark span.cm-def {color: #FFF; text-decoration:underline;} +.cm-s-xq-dark span.cm-variable {color: #FFF;} +.cm-s-xq-dark span.cm-variable-2 {color: #EEE;} +.cm-s-xq-dark span.cm-variable-3 {color: #DDD;} +.cm-s-xq-dark span.cm-property {} +.cm-s-xq-dark span.cm-operator {} +.cm-s-xq-dark span.cm-comment {color: gray;} +.cm-s-xq-dark span.cm-string {color: #9FEE00;} +.cm-s-xq-dark span.cm-meta {color: yellow;} +.cm-s-xq-dark span.cm-error {color: #f00;} +.cm-s-xq-dark span.cm-qualifier {color: #FFF700;} +.cm-s-xq-dark span.cm-builtin {color: #30a;} +.cm-s-xq-dark span.cm-bracket {color: #cc7;} +.cm-s-xq-dark span.cm-tag {color: #FFBD40;} +.cm-s-xq-dark span.cm-attribute {color: #FFF700;} -- 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 --- js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js | 8 ++++++++ js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css | 9 +++++++++ js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css | 8 ++++++++ js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css | 8 ++++++++ .../code-editor-view-options.reel/code-editor-view-options.css | 6 ++++++ 5 files changed, 39 insertions(+) (limited to 'js/code-editor') diff --git a/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js b/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js index 866e1a8b..4787b4f8 100644 --- a/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js +++ b/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js @@ -1,3 +1,11 @@ +/* +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. + */ + +/* adopted from CodeMirror 2.23 (http://codemirror.net/) */ + (function() { CodeMirror.simpleHint = function(editor, getHints) { // We want a single cursor position. diff --git a/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css b/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css index fa7e8e07..fe0e353b 100644 --- a/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css +++ b/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css @@ -1,7 +1,16 @@ +/* + 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. + */ + +/* adopted from CodeMirror 2.23 (http://codemirror.net/) */ + /* http://lesscss.org/ dark theme Ported to CodeMirror by Peter Kroon */ + .CodeMirror{ line-height: 15px; } diff --git a/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css b/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css index b09e4e3e..656a88cf 100644 --- a/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css +++ b/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css @@ -1,3 +1,11 @@ +/* + 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. + */ + +/* adopted from CodeMirror 2.23 (http://codemirror.net/) */ + .cm-s-rubyblue { font:Trebuchet, Verdana, sans-serif; } /* - customized editor font - */ diff --git a/js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css b/js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css index 64006c87..4ccf2052 100644 --- a/js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css +++ b/js/code-editor/codemirror-ninja/theme/xq-dark-ninja.css @@ -1,3 +1,11 @@ +/* + 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. + */ + +/* adopted from CodeMirror 2.23 (http://codemirror.net/) */ + /* Copyright (C) 2011 by MarkLogic Corporation Author: Mike Brevoort 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') 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') 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') 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 @@
-
+
ctrl+space : code hints
ctrl+/ : comment selection
-- cgit v1.2.3 From fec9ccee11ea21ffc95edce6e89d0d302b63e3d8 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 16:18:00 -0700 Subject: Code reformatting Signed-off-by: Valerio Virgillito --- .../code-editor-view-options.js | 121 ++++++++++----------- 1 file changed, 55 insertions(+), 66 deletions(-) (limited to 'js/code-editor') 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 07561580..a27d4450 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 @@ -10,81 +10,70 @@ 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 - }); + 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: "zoomFactor", - oneway : false - }); + Object.defineBinding(this.zoomHottext , "value", { + boundObject: this.application.ninja.codeEditorController, + boundObjectPropertyPath: "zoomFactor", + oneway : false + }); - } - }, + } + }, - willDraw: { - enumerable: false, - value: function() {} - }, - draw: { - enumerable: false, - value: function() {} - }, - 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); - this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); - this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false); - } - }, + 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); + this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); + this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false); + } + }, - handleFormat:{ - value: function(evt){ - this.application.ninja.codeEditorController.autoFormatSelection(); - } - }, - handleComment:{ - value: function(evt){ - this.application.ninja.codeEditorController.commentSelection(true); - } - }, + handleFormat:{ + value: function(evt){ + this.application.ninja.codeEditorController.autoFormatSelection(); + } + }, + handleComment:{ + value: function(evt){ + this.application.ninja.codeEditorController.commentSelection(true); + } + }, - handleUncomment:{ - value: function(evt){ - this.application.ninja.codeEditorController.commentSelection(false); - } - }, + handleUncomment:{ + value: function(evt){ + this.application.ninja.codeEditorController.commentSelection(false); +