From b9540e4c49b3119b146437ae405df3f4e9359e81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 9 Aug 2017 21:12:15 +0200 Subject: [PATCH] ace: minor ace theme tweaks --- .../components/code_editor/code_editor.ts | 12 +- .../components/code_editor/mode-prometheus.js | 2 +- .../code_editor/theme-grafana-dark.js | 116 ++++++++++++++++++ public/sass/components/_code_editor.scss | 1 - tasks/options/watch.js | 5 +- 5 files changed, 128 insertions(+), 8 deletions(-) create mode 100644 public/app/core/components/code_editor/theme-grafana-dark.js diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts index 19d4f7655fa..043b231f50a 100644 --- a/public/app/core/components/code_editor/code_editor.ts +++ b/public/app/core/components/code_editor/code_editor.ts @@ -28,12 +28,12 @@ import coreModule from 'app/core/core_module'; import ace from 'ace'; const ACE_SRC_BASE = "public/vendor/npm/ace-builds/src-noconflict/"; -const DEFAULT_THEME = "solarized_dark"; +const DEFAULT_THEME = "grafana-dark"; const DEFAULT_MODE = "text"; const DEFAULT_MAX_LINES = 10; const DEFAULT_TAB_SIZE = 2; -const GRAFANA_MODULES = ['mode-prometheus', 'snippets-prometheus']; +const GRAFANA_MODULES = ['mode-prometheus', 'snippets-prometheus', 'theme-grafana-dark']; const GRAFANA_MODULE_BASE = "public/app/core/components/code_editor/"; // Trick for loading additional modules @@ -46,9 +46,11 @@ function fixModuleUrl(moduleType, name) { if (_.includes(GRAFANA_MODULES, moduleName)) { baseUrl = GRAFANA_MODULE_BASE; } + if (moduleType === 'snippets') { componentName = `${moduleType}/${name}.js`; } + ace.config.setModuleUrl(aceModeName, baseUrl + componentName); } @@ -83,8 +85,9 @@ function link(scope, elem, attrs) { // disable depreacation warning codeEditor.$blockScrolling = Infinity; // Padding hacks - codeEditor.renderer.setScrollMargin(10, 10); + codeEditor.renderer.setScrollMargin(15, 15); codeEditor.renderer.setPadding(10); + setThemeMode(theme); setLangMode(langMode); setEditorContent(scope.content); @@ -158,8 +161,7 @@ function link(scope, elem, attrs) { function setThemeMode(theme) { fixModuleUrl("theme", theme); - let aceThemeName = `ace/theme/${theme}`; - codeEditor.setTheme(aceThemeName); + codeEditor.setTheme(`ace/theme/${theme}`); } function setEditorContent(value) { diff --git a/public/app/core/components/code_editor/mode-prometheus.js b/public/app/core/components/code_editor/mode-prometheus.js index aa0300b50a5..d16f20b2f07 100644 --- a/public/app/core/components/code_editor/mode-prometheus.js +++ b/public/app/core/components/code_editor/mode-prometheus.js @@ -46,7 +46,7 @@ var PrometheusHighlightRules = function() { regex : "[a-zA-Z_$][a-zA-Z0-9_$]*\\b" }, { token : "keyword.operator", - regex : "\\+|\\-|\\*|\\/|%|\\^|=|==|!=|<=|>=|<|>|=~|!~" + regex : "\\+|\\-|\\*|\\/|%|\\^|=|==|!=|<=|>=|<|>|=\\~|!\\~" }, { token : "paren.lparen", regex : "[\\(]" diff --git a/public/app/core/components/code_editor/theme-grafana-dark.js b/public/app/core/components/code_editor/theme-grafana-dark.js new file mode 100644 index 00000000000..be0dfd8f1ea --- /dev/null +++ b/public/app/core/components/code_editor/theme-grafana-dark.js @@ -0,0 +1,116 @@ +/* jshint ignore:start */ + +ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"], function(require, exports, module) { + "use strict"; + + exports.isDark = true; + exports.cssClass = "gf-code-dark"; + exports.cssText = ".gf-code-dark .ace_gutter {\ + background: #2f3129;\ + color: #8f908a\ + }\ + .gf-code-dark .ace_print-margin {\ + width: 1px;\ + background: #555651\ + }\ + .gf-code-dark {\ + background-color: #111;\ + color: #e0e0e0\ + }\ + .gf-code-dark .ace_cursor {\ + color: #f8f8f0\ + }\ + .gf-code-dark .ace_marker-layer .ace_selection {\ + background: #49483e\ + }\ + .gf-code-dark.ace_multiselect .ace_selection.ace_start {\ + box-shadow: 0 0 3px 0px #272822;\ + }\ + .gf-code-dark .ace_marker-layer .ace_step {\ + background: rgb(102, 82, 0)\ + }\ + .gf-code-dark .ace_marker-layer .ace_bracket {\ + margin: -1px 0 0 -1px;\ + border: 1px solid #49483e\ + }\ + .gf-code-dark .ace_marker-layer .ace_active-line {\ + background: #202020\ + }\ + .gf-code-dark .ace_gutter-active-line {\ + background-color: #272727\ + }\ + .gf-code-dark .ace_marker-layer .ace_selected-word {\ + border: 1px solid #49483e\ + }\ + .gf-code-dark .ace_invisible {\ + color: #52524d\ + }\ + .gf-code-dark .ace_entity.ace_name.ace_tag,\ + .gf-code-dark .ace_keyword,\ + .gf-code-dark .ace_meta.ace_tag,\ + .gf-code-dark .ace_storage {\ + color: #fae400\ + }\ + .gf-code-dark .ace_punctuation,\ + .gf-code-dark .ace_punctuation.ace_tag {\ + color: #fff\ + }\ + .gf-code-dark .ace_constant.ace_character,\ + .gf-code-dark .ace_constant.ace_language,\ + .gf-code-dark .ace_constant.ace_numeric,\ + .gf-code-dark .ace_constant.ace_other {\ + color: #fe85fc\ + }\ + .gf-code-dark .ace_invalid {\ + color: #f8f8f0;\ + background-color: #f92672\ + }\ + .gf-code-dark .ace_invalid.ace_deprecated {\ + color: #f8f8f0;\ + background-color: #ae81ff\ + }\ + .gf-code-dark .ace_support.ace_constant,\ + .gf-code-dark .ace_support.ace_function {\ + color: #66d9ef\ + }\ + .gf-code-dark .ace_fold {\ + background-color: #a6e22e;\ + border-color: #f8f8f2\ + }\ + .gf-code-dark .ace_storage.ace_type,\ + .gf-code-dark .ace_support.ace_class,\ + .gf-code-dark .ace_support.ace_type {\ + font-style: italic;\ + color: #66d9ef\ + }\ + .gf-code-dark .ace_entity.ace_name.ace_function,\ + .gf-code-dark .ace_entity.ace_other,\ + .gf-code-dark .ace_entity.ace_other.ace_attribute-name,\ + .gf-code-dark .ace_variable {\ + color: #a6e22e\ + }\ + .gf-code-dark .ace_variable.ace_parameter {\ + font-style: italic;\ + color: #fd971f\ + }\ + .gf-code-dark .ace_string {\ + color: #74e680\ + }\ + .gf-code-dark .ace_paren {\ + color: #f0a842\ + }\ + .gf-code-dark .ace_operator {\ + color: #FFF\ + }\ + .gf-code-dark .ace_comment {\ + color: #75715e\ + }\ + .gf-code-dark .ace_indent-guide {\ + background: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaccayaaaczgbynaaaaekleqvqimwpq0fd0zxbzd/wpaajvaoxesgneaaaaaelftksuqmcc) right repeat-y\ + }"; + + var dom = require("../lib/dom"); + dom.importCssString(exports.cssText, exports.cssClass); +}); + +/* jshint ignore:end */ diff --git a/public/sass/components/_code_editor.scss b/public/sass/components/_code_editor.scss index d5703c3b24e..a0254138e1f 100644 --- a/public/sass/components/_code_editor.scss +++ b/public/sass/components/_code_editor.scss @@ -3,7 +3,6 @@ min-width: 20rem; flex-grow: 1; margin-right: 0.25rem; - border: 1px solid #333333; &.ace_editor { min-height: 2.60rem; diff --git a/tasks/options/watch.js b/tasks/options/watch.js index 5b872cb212a..54ecbd6672e 100644 --- a/tasks/options/watch.js +++ b/tasks/options/watch.js @@ -21,7 +21,10 @@ module.exports = function(config, grunt) { return; } - gaze(config.srcDir + '/**/*', function(err, watcher) { + gaze([ + config.srcDir + '/app/**/*', + config.srcDir + '/sass/**/*', + ], function(err, watcher) { console.log('Gaze watchers setup');