mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-02-10 18:05:32 +08:00
Refactoring colors in ace editor
This commit is contained in:
Julia Radzhabova
42
vendor/ace/component/AceEditor.html
vendored
42
vendor/ace/component/AceEditor.html
vendored
@ -14,53 +14,40 @@
|
||||
|
||||
.ace_content {
|
||||
background: #fff;
|
||||
background: var(--background-normal, #fff);
|
||||
color: #444;
|
||||
color: var(--text-normal, #444);
|
||||
}
|
||||
|
||||
.ace_layer.ace_gutter-layer.ace_folding-enabled {
|
||||
color: #444;
|
||||
color: var(--text-normal, #444);
|
||||
}
|
||||
.divHeader {
|
||||
border-color: #dfdfdf;
|
||||
border-color: var(--border-divider, #dfdfdf);
|
||||
}
|
||||
.ace_scroller {
|
||||
border-left: none;
|
||||
}
|
||||
.ace_cursor {
|
||||
color: #444 !important;
|
||||
color: var(--text-normal, #444) !important;
|
||||
}
|
||||
.Ace-Tern-tooltip, .Ace-Tern-jsdoc-param-description {
|
||||
color: #444;
|
||||
color: var(--text-normal, #444);
|
||||
background-color: #f7f7f7;
|
||||
background-color: var(--background-toolbar, #f7f7f7);
|
||||
.ace-dark .ace_content, .ace-dark .ace_layer.ace_gutter-layer {
|
||||
background-color: #333;
|
||||
}
|
||||
.ace-dark .ace_content, .ace-dark .ace_layer.ace_gutter-layer, .ace-dark .ace_cursor {
|
||||
color: fade(#fff, 80%);
|
||||
}
|
||||
|
||||
.ace-chrome .ace_marker-layer .ace_selected-word {
|
||||
background: rgb(250, 250, 255, 0.3) !important;
|
||||
border: 1px solid rgb(200, 200, 250);
|
||||
}
|
||||
.ace_active-line {
|
||||
border-color: #333 !important;
|
||||
}
|
||||
.ace_active-line, .ace_gutter-active-line, .ace_gutter-active-line-bg {
|
||||
border-bottom: 1px solid;
|
||||
border-top: 1px solid;
|
||||
border-color: #eee !important;
|
||||
border-color: var(--canvas-background, #eee) !important;
|
||||
background-color: #fff !important;
|
||||
background-color: var(--background-normal, #fff) !important;
|
||||
}
|
||||
.oo_highlight {
|
||||
background-color: #555 !important;
|
||||
}
|
||||
.ace_line-hover, .ace_autocomplete .ace_active-line {
|
||||
background-color: #e0e0e0; !important;
|
||||
background-color: var(--highlight-button-hover, #e0e0e0) !important;
|
||||
background-color: #e0e0e0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
.ace_completion-highlight {
|
||||
@ -84,7 +71,6 @@
|
||||
}
|
||||
.ace_gutter, .gutter_bg {
|
||||
background: #fff !important;
|
||||
background: var(--background-normal, #fff) !important;
|
||||
}
|
||||
.Ace-Tern-jsdoc-tag {
|
||||
color: #FF5E5C;
|
||||
@ -95,24 +81,24 @@
|
||||
.Ace-Tern-farg-current-name {
|
||||
color : white;
|
||||
}
|
||||
.Ace-Tern-tooltip, .Ace-Tern-jsdoc-param-description {
|
||||
color: #444;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.Ace-Tern-tooltip {
|
||||
font-size: 11px;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-divider);
|
||||
background: #f7f7f7;
|
||||
background: var(--background-toolbar, #f7f7f7);
|
||||
color: #444;
|
||||
color: var(--text-normal, #444);
|
||||
border-top: 1px solid #dfdfdf;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
left: 0 !important;
|
||||
top: initial !important;
|
||||
}
|
||||
.Ace-Tern-tooltip .Ace-Tern-tooltip-boxclose {
|
||||
color: #444 !important;
|
||||
color: var(--icon-normal, #444) !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.Ace-Tern-tooltip .Ace-Tern-tooltip-boxclose:hover {
|
||||
@ -124,8 +110,8 @@
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
|
||||
scrollbar-color: #adadad #f7f7f7;
|
||||
scrollbar-color: var(--canvas-scroll-thumb-pressed, #adadad) var(--canvas-scroll-thumb, #f7f7f7);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
52
vendor/ace/component/AceEditorCode.js
vendored
52
vendor/ace/component/AceEditorCode.js
vendored
@ -134,44 +134,56 @@ var _postMessage = function(msg) {
|
||||
window.isDisable = false;
|
||||
};
|
||||
|
||||
var onThemeChanged = function(data) {
|
||||
try {
|
||||
data = window.JSON.parse(data)
|
||||
} catch(e) {
|
||||
data = {};
|
||||
}
|
||||
|
||||
if (!data.colors) return;
|
||||
var onThemeChanged = function(colors) {
|
||||
if (!colors) return;
|
||||
|
||||
let styles = document.querySelectorAll("style"),
|
||||
i = 0;
|
||||
if (styles) {
|
||||
while (i < styles.length) {
|
||||
if (styles[i].id === 'ace-chrome') {
|
||||
if (styles[i].id === 'ace-chrome' || styles[i].id === 'ace-custom-theme') {
|
||||
styles[i].parentNode.removeChild(styles[i]);
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
var theme_type = data.type || 'light',
|
||||
colors = data.colors;
|
||||
if ( !!colors ) {
|
||||
var _css_array = [':root ', '{'];
|
||||
for (var c in colors) {
|
||||
_css_array.push('--', c, ':', colors[c], ';');
|
||||
}
|
||||
_css_array.push('}');
|
||||
var _css = _css_array.join('');
|
||||
var _css = '';
|
||||
if (colors['text-normal'])
|
||||
_css += '.ace_content, .ace_layer.ace_gutter-layer.ace_folding-enabled, .ace_cursor, .Ace-Tern-tooltip, .Ace-Tern-jsdoc-param-description { color: ' + colors['text-normal'] + ' !important; }';
|
||||
|
||||
if (colors['icon-normal'])
|
||||
_css += '.Ace-Tern-tooltip .Ace-Tern-tooltip-boxclose { color: ' + colors['icon-normal'] + ' !important; }';
|
||||
|
||||
if (colors['background-normal']) {
|
||||
_css += '.ace_content, .ace_gutter, .gutter_bg { background: ' + colors['background-normal'] + ' !important; }';
|
||||
_css += '.ace_active-line, .ace_gutter-active-line, .ace_gutter-active-line-bg { background-color: ' + colors['background-normal'] + ' !important; }';
|
||||
}
|
||||
|
||||
if (colors['background-toolbar'])
|
||||
_css += '.Ace-Tern-tooltip, .Ace-Tern-jsdoc-param-description { background-color: ' + colors['background-toolbar'] + ' !important; }';
|
||||
|
||||
if (colors['highlight-button-hover'])
|
||||
_css += '.ace_line-hover, .ace_autocomplete .ace_active-line { background-color: ' + colors['highlight-button-hover'] + ' !important; }';
|
||||
|
||||
if (colors['canvas-background'])
|
||||
_css += '.ace_active-line, .ace_gutter-active-line, .ace_gutter-active-line-bg { border-color: ' + colors['canvas-background'] + ' !important; }';
|
||||
|
||||
if (colors['border-divider'])
|
||||
_css += '.Ace-Tern-tooltip { border-color: ' + colors['border-divider'] + ' !important; }';
|
||||
|
||||
if (colors['canvas-scroll-thumb-pressed'] && colors['canvas-scroll-thumb'])
|
||||
_css += '.ace_autocomplete { scrollbar-color: ' + colors['canvas-scroll-thumb-pressed'] + ' ' + colors['canvas-scroll-thumb'] + ' !important; }';
|
||||
|
||||
if (_css) {
|
||||
var style = document.createElement('style');
|
||||
style.id = 'ace-custom-theme';
|
||||
style.type = 'text/css';
|
||||
style.innerHTML = _css;
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
}
|
||||
|
||||
if (theme_type === 'dark')
|
||||
if (colors.type === 'dark')
|
||||
editor.setTheme("ace/theme/vs-dark");
|
||||
else
|
||||
editor.setTheme("ace/theme/vs-light");
|
||||
|
||||
2
vendor/ace/theme-vs-dark.js
vendored
2
vendor/ace/theme-vs-dark.js
vendored
@ -111,7 +111,7 @@ color: #4FC1FF;\
|
||||
color : #C586C0; \
|
||||
}\
|
||||
.ace_gutter-active-line {\
|
||||
background : #303030 !important\
|
||||
background-color: #303030 !important\
|
||||
}\
|
||||
.ace-chrome .ace_string.ace_regex, \
|
||||
.ace-chrome .ace_string {\
|
||||
|
||||
Reference in New Issue
Block a user