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 --- index.html | 6 +- .../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 +- 7 files changed, 165 insertions(+), 84 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 diff --git a/index.html b/index.html index 2c50d294..1821e370 100755 --- a/index.html +++ b/index.html @@ -28,8 +28,8 @@ - - + + @@ -238,7 +238,7 @@ - + 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