IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 15:13:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

ace: minor fixes for ace editor

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-08-29 15:51:54 +02:00
parent 9375441991
commit bdb1cfb008
3 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/core/components/code_editor/code_editor.ts
View File

@ -99,7 +99,7 @@ function link(scope, elem, attrs) {
// disable depreacation warning
codeEditor.$blockScrolling = Infinity;
// Padding hacks
codeEditor.renderer.setScrollMargin(10, 11);
codeEditor.renderer.setScrollMargin(15, 15);
codeEditor.renderer.setPadding(10);
setThemeMode(theme);
@ -133,6 +133,10 @@ function link(scope, elem, attrs) {
scope.onChange();
});
scope.$on("$destroy", () => {
codeEditor.destroy();
});
// Keybindings
codeEditor.commands.addCommand({
name: 'executeQuery',
@ -155,7 +159,10 @@ function link(scope, elem, attrs) {
enableSnippets: true
});
console.log('getting completer', lang);
if (scope.getCompleter()) {
// make copy of array as ace seems to share completers array between instances
codeEditor.completers = codeEditor.completers.slice();
codeEditor.completers.push(scope.getCompleter());
}
});
@ -176,6 +183,8 @@ function link(scope, elem, attrs) {
setModuleUrl("theme", fixedTheme);
themeModule = `ace/theme/${fixedTheme}`;
codeEditor.setTheme(themeModule);
elem.addClass("gf-code-editor--theme-loaded");
});
}

4
public/app/core/components/code_editor/theme-grafana-dark.js
View File

@ -49,7 +49,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"]
.gf-code-dark .ace_keyword,\
.gf-code-dark .ace_meta.ace_tag,\
.gf-code-dark .ace_storage {\
color: #fae400\
color: #66d9ef\
}\
.gf-code-dark .ace_punctuation,\
.gf-code-dark .ace_punctuation.ace_tag {\
@ -71,7 +71,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"]
}\
.gf-code-dark .ace_support.ace_constant,\
.gf-code-dark .ace_support.ace_function {\
color: #66d9ef\
color: #59e6e3\
}\
.gf-code-dark .ace_fold {\
background-color: #a6e22e;\

24
public/sass/components/_code_editor.scss
View File

@ -3,6 +3,7 @@
min-width: 20rem;
flex-grow: 1;
margin-right: 0.25rem;
visibility: hidden;
&.ace_editor {
@include font-family-monospace();
@ -12,6 +13,10 @@
@include border-radius($input-border-radius-sm);
border: $input-btn-border-width solid $input-border-color;
}
&--theme-loaded {
visibility: visible;
}
}
.ace_editor.ace_autocomplete {
@ -46,24 +51,21 @@
}
}
$doc-font-size: 0.8rem;
$doc-text-padding: $doc-font-size * 0.5;
$doc-font-size: $font-size-sm;
.ace_tooltip.ace_doc-tooltip {
@include font-family-monospace();
font-size: $doc-font-size;
background-color: $dropdownBackground;
background-color: $popover-help-bg;
color: $popover-help-color;
background-image: none;
color: $dropdownLinkColor;
border: 1px solid $dropdownBorder;
padding-top: $doc-text-padding;
padding-bottom: 0px;
padding: 0.5rem 1rem;
hr {
background-color: $dropdownDividerBottom;
margin-top: $doc-text-padding;
margin-bottom: $doc-text-padding;
background-color: $popover-help-color;
margin: 0.5rem 0rem;
}
code {
@ -71,3 +73,7 @@ $doc-text-padding: $doc-font-size * 0.5;
margin: 0px;
}
}
.ace_tooltip {
border-radius: 3px;
}