From 8feb1da1f80941fea7865cd885b1e170000e105a Mon Sep 17 00:00:00 2001 From: Micky Date: Mon, 31 Oct 2022 19:51:48 +0100 Subject: [PATCH] Improve Editor Documentation colors --- editor/editor_help.cpp | 59 ++++++++++++++++++++++++++-------------- editor/editor_themes.cpp | 10 +++++++ 2 files changed, 49 insertions(+), 20 deletions(-) diff --git a/editor/editor_help.cpp b/editor/editor_help.cpp index fc5b0345d06..85afcb47998 100644 --- a/editor/editor_help.cpp +++ b/editor/editor_help.cpp @@ -54,10 +54,14 @@ void EditorHelp::_update_theme() { qualifier_color = get_theme_color(SNAME("qualifier_color"), SNAME("EditorHelp")); type_color = get_theme_color(SNAME("type_color"), SNAME("EditorHelp")); + class_desc->add_theme_style_override("normal", get_theme_stylebox(SNAME("background"), SNAME("EditorHelp"))); + class_desc->add_theme_style_override("focus", get_theme_stylebox(SNAME("background"), SNAME("EditorHelp"))); class_desc->add_theme_color_override("selection_color", get_theme_color(SNAME("selection_color"), SNAME("EditorHelp"))); class_desc->add_theme_constant_override("line_separation", get_theme_constant(SNAME("line_separation"), SNAME("EditorHelp"))); class_desc->add_theme_constant_override("table_h_separation", get_theme_constant(SNAME("table_h_separation"), SNAME("EditorHelp"))); class_desc->add_theme_constant_override("table_v_separation", get_theme_constant(SNAME("table_v_separation"), SNAME("EditorHelp"))); + class_desc->add_theme_constant_override("text_highlight_h_padding", get_theme_constant(SNAME("text_highlight_h_padding"), SNAME("EditorHelp"))); + class_desc->add_theme_constant_override("text_highlight_v_padding", get_theme_constant(SNAME("text_highlight_v_padding"), SNAME("EditorHelp"))); doc_font = get_theme_font(SNAME("doc"), SNAME("EditorFonts")); doc_bold_font = get_theme_font(SNAME("doc_bold"), SNAME("EditorFonts")); @@ -1765,9 +1769,19 @@ static void _add_text_to_rt(const String &p_bbcode, RichTextLabel *p_rt, Control Ref doc_code_font = p_owner_node->get_theme_font(SNAME("doc_source"), SNAME("EditorFonts")); Ref doc_kbd_font = p_owner_node->get_theme_font(SNAME("doc_keyboard"), SNAME("EditorFonts")); - Color link_color = p_owner_node->get_theme_color(SNAME("link_color"), SNAME("EditorHelp")); - Color code_color = p_owner_node->get_theme_color(SNAME("code_color"), SNAME("EditorHelp")); - Color kbd_color = p_owner_node->get_theme_color(SNAME("kbd_color"), SNAME("EditorHelp")); + const Color type_color = p_owner_node->get_theme_color(SNAME("type_color"), SNAME("EditorHelp")); + const Color code_color = p_owner_node->get_theme_color(SNAME("code_color"), SNAME("EditorHelp")); + const Color kbd_color = p_owner_node->get_theme_color(SNAME("kbd_color"), SNAME("EditorHelp")); + const Color code_dark_color = Color(code_color, 0.8); + + const Color link_color = p_owner_node->get_theme_color(SNAME("link_color"), SNAME("EditorHelp")); + const Color link_method_color = p_owner_node->get_theme_color(SNAME("accent_color"), SNAME("Editor")); + const Color link_property_color = link_color.lerp(p_owner_node->get_theme_color(SNAME("accent_color"), SNAME("Editor")), 0.25); + const Color link_annotation_color = link_color.lerp(p_owner_node->get_theme_color(SNAME("accent_color"), SNAME("Editor")), 0.5); + + const Color code_bg_color = p_owner_node->get_theme_color(SNAME("code_bg_color"), SNAME("EditorHelp")); + const Color kbd_bg_color = p_owner_node->get_theme_color(SNAME("kbd_bg_color"), SNAME("EditorHelp")); + const Color param_bg_color = p_owner_node->get_theme_color(SNAME("param_bg_color"), SNAME("EditorHelp")); String bbcode = p_bbcode.dedent().replace("\t", "").replace("\r", "").strip_edges(); @@ -1900,14 +1914,21 @@ static void _add_text_to_rt(const String &p_bbcode, RichTextLabel *p_rt, Control const String link_tag = tag.substr(0, tag_end); const String link_target = tag.substr(tag_end + 1, tag.length()).lstrip(" "); - // Use monospace font with translucent colored background color to make clickable references + // Use monospace font to make clickable references // easier to distinguish from inline code and other text. p_rt->push_font(doc_code_font); - p_rt->push_color(link_color); - p_rt->push_bgcolor(code_color * Color(1, 1, 1, 0.15)); + + Color target_color = link_color; + if (link_tag == "method") { + target_color = link_method_color; + } else if (link_tag == "member" || link_tag == "signal" || link_tag == "theme property") { + target_color = link_property_color; + } else if (link_tag == "annotation") { + target_color = link_annotation_color; + } + p_rt->push_color(target_color); p_rt->push_meta("@" + link_tag + " " + link_target); - p_rt->add_text(link_target + (tag.begins_with("method ") ? "()" : "")); - p_rt->pop(); + p_rt->add_text(link_target + (link_tag == "method" ? "()" : "")); p_rt->pop(); p_rt->pop(); p_rt->pop(); @@ -1919,7 +1940,7 @@ static void _add_text_to_rt(const String &p_bbcode, RichTextLabel *p_rt, Control // Use monospace font with translucent background color to make code easier to distinguish from other text. p_rt->push_font(doc_code_font); - p_rt->push_bgcolor(Color(0.5, 0.5, 0.5, 0.15)); + p_rt->push_bgcolor(param_bg_color); p_rt->push_color(code_color); p_rt->add_text(param_name); p_rt->pop(); @@ -1930,17 +1951,15 @@ static void _add_text_to_rt(const String &p_bbcode, RichTextLabel *p_rt, Control } else if (doc->class_list.has(tag)) { // Class reference tag such as [Node2D] or [SceneTree]. - // Use monospace font with translucent colored background color to make clickable references + // Use monospace font to make clickable references // easier to distinguish from inline code and other text. p_rt->push_font(doc_code_font); - p_rt->push_color(link_color); - p_rt->push_bgcolor(code_color * Color(1, 1, 1, 0.15)); + p_rt->push_color(type_color); p_rt->push_meta("#" + tag); p_rt->add_text(tag); p_rt->pop(); p_rt->pop(); p_rt->pop(); - p_rt->pop(); pos = brk_end + 1; } else if (tag == "b") { @@ -1954,30 +1973,30 @@ static void _add_text_to_rt(const String &p_bbcode, RichTextLabel *p_rt, Control pos = brk_end + 1; tag_stack.push_front(tag); } else if (tag == "code") { - // Use monospace font with translucent background color to make code easier to distinguish from other text. + // Use monospace font with darkened background color to make code easier to distinguish from other text. p_rt->push_font(doc_code_font); - p_rt->push_bgcolor(Color(0.5, 0.5, 0.5, 0.15)); - p_rt->push_color(code_color); + p_rt->push_bgcolor(code_bg_color); + p_rt->push_color(code_color.lerp(p_owner_node->get_theme_color(SNAME("error_color"), SNAME("Editor")), 0.6)); code_tag = true; pos = brk_end + 1; tag_stack.push_front(tag); } else if (tag == "codeblock") { - // Use monospace font with translucent background color to make code easier to distinguish from other text. + // Use monospace font with darkened background color to make code easier to distinguish from other text. // Use a single-column table with cell row background color instead of `[bgcolor]`. // This makes the background color highlight cover the entire block, rather than individual lines. p_rt->push_font(doc_code_font); p_rt->push_table(1); p_rt->push_cell(); - p_rt->set_cell_row_background_color(Color(0.5, 0.5, 0.5, 0.15), Color(0.5, 0.5, 0.5, 0.15)); + p_rt->set_cell_row_background_color(code_bg_color, Color(code_bg_color, 0.99)); p_rt->set_cell_padding(Rect2(10 * EDSCALE, 10 * EDSCALE, 10 * EDSCALE, 10 * EDSCALE)); - p_rt->push_color(code_color); + p_rt->push_color(code_dark_color); codeblock_tag = true; pos = brk_end + 1; tag_stack.push_front(tag); } else if (tag == "kbd") { // Use keyboard font with custom color and background color. p_rt->push_font(doc_kbd_font); - p_rt->push_bgcolor(Color(0.5, 0.5, 0.5, 0.15)); + p_rt->push_bgcolor(kbd_bg_color); p_rt->push_color(kbd_color); code_tag = true; // Though not strictly a code tag, logic is similar. pos = brk_end + 1; diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp index 225d767163c..cdcb4a2ac51 100644 --- a/editor/editor_themes.cpp +++ b/editor/editor_themes.cpp @@ -1491,6 +1491,11 @@ Ref create_editor_theme(const Ref p_theme) { theme->set_stylebox("normal", "RichTextLabel", style_tree_bg); // Editor help. + Ref style_editor_help = style_default->duplicate(); + style_editor_help->set_bg_color(dark_color_2); + style_editor_help->set_border_color(dark_color_3); + theme->set_stylebox("background", "EditorHelp", style_editor_help); + theme->set_color("title_color", "EditorHelp", accent_color); theme->set_color("headline_color", "EditorHelp", mono_color); theme->set_color("text_color", "EditorHelp", font_color); @@ -1503,9 +1508,14 @@ Ref create_editor_theme(const Ref p_theme) { theme->set_color("link_color", "EditorHelp", accent_color.lerp(mono_color, 0.8)); theme->set_color("code_color", "EditorHelp", accent_color.lerp(mono_color, 0.6)); theme->set_color("kbd_color", "EditorHelp", accent_color.lerp(property_color, 0.6)); + theme->set_color("code_bg_color", "EditorHelp", dark_color_3); + theme->set_color("kbd_bg_color", "EditorHelp", dark_color_1); + theme->set_color("param_bg_color", "EditorHelp", dark_color_1); theme->set_constant("line_separation", "EditorHelp", Math::round(6 * EDSCALE)); theme->set_constant("table_h_separation", "EditorHelp", 16 * EDSCALE); theme->set_constant("table_v_separation", "EditorHelp", 6 * EDSCALE); + theme->set_constant("text_highlight_h_padding", "EditorHelp", 1 * EDSCALE); + theme->set_constant("text_highlight_v_padding", "EditorHelp", 2 * EDSCALE); // Panel theme->set_stylebox("panel", "Panel", make_flat_stylebox(dark_color_1, 6, 4, 6, 4, corner_width));