IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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
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 // disable depreacation warning
codeEditor.$blockScrolling = Infinity; codeEditor.$blockScrolling = Infinity;
// Padding hacks // Padding hacks
codeEditor.renderer.setScrollMargin(10, 11); codeEditor.renderer.setScrollMargin(15, 15);
codeEditor.renderer.setPadding(10); codeEditor.renderer.setPadding(10);
setThemeMode(theme); setThemeMode(theme);
@@ -133,6 +133,10 @@ function link(scope, elem, attrs) {
scope.onChange(); scope.onChange();
}); });
scope.$on("$destroy", () => {
codeEditor.destroy();
});
// Keybindings // Keybindings
codeEditor.commands.addCommand({ codeEditor.commands.addCommand({
name: 'executeQuery', name: 'executeQuery',
@@ -155,7 +159,10 @@ function link(scope, elem, attrs) {
enableSnippets: true enableSnippets: true
}); });
console.log('getting completer', lang);
if (scope.getCompleter()) { 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()); codeEditor.completers.push(scope.getCompleter());
} }
}); });
@@ -176,6 +183,8 @@ function link(scope, elem, attrs) {
setModuleUrl("theme", fixedTheme); setModuleUrl("theme", fixedTheme);
themeModule = `ace/theme/${fixedTheme}`; themeModule = `ace/theme/${fixedTheme}`;
codeEditor.setTheme(themeModule); 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_keyword,\
.gf-code-dark .ace_meta.ace_tag,\ .gf-code-dark .ace_meta.ace_tag,\
.gf-code-dark .ace_storage {\ .gf-code-dark .ace_storage {\
color: #fae400\ color: #66d9ef\
}\ }\
.gf-code-dark .ace_punctuation,\ .gf-code-dark .ace_punctuation,\
.gf-code-dark .ace_punctuation.ace_tag {\ .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_constant,\
.gf-code-dark .ace_support.ace_function {\ .gf-code-dark .ace_support.ace_function {\
color: #66d9ef\ color: #59e6e3\
}\ }\
.gf-code-dark .ace_fold {\ .gf-code-dark .ace_fold {\
background-color: #a6e22e;\ background-color: #a6e22e;\

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

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