Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ItemList highlight selected items and draw cursor-stylebox last #99361

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+50 −11
Open

ItemList highlight selected items and draw cursor-stylebox last #99361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion doc/classes/ItemList.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,11 +484,14 @@
<theme_item name="font_hovered_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Text [Color] used when the item is hovered and not selected yet.
</theme_item>
<theme_item name="font_hovered_selected_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Text [Color] used when the item is hovered and selected.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(0, 0, 0, 1)">
The tint of text outline of the item.
</theme_item>
<theme_item name="font_selected_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
Text [Color] used when the item is selected.
Text [Color] used when the item is selected, but not hovered.
</theme_item>
<theme_item name="guide_color" data_type="color" type="Color" default="Color(0.7, 0.7, 0.7, 0.25)">
[Color] of the guideline. The guideline is a line drawn between each row of items.
Expand Down Expand Up @@ -527,6 +530,12 @@
<theme_item name="hovered" data_type="style" type="StyleBox">
[StyleBox] for the hovered, but not selected items.
</theme_item>
<theme_item name="hovered_selected" data_type="style" type="StyleBox">
[StyleBox] for the hovered and selected items, used when the [ItemList] is not being focused.
</theme_item>
<theme_item name="hovered_selected_focus" data_type="style" type="StyleBox">
[StyleBox] for the hovered and selected items, used when the [ItemList] is being focused.
</theme_item>
<theme_item name="panel" data_type="style" type="StyleBox">
The background style for the [ItemList].
</theme_item>
Expand Down
6 changes: 6 additions & 0 deletions editor/themes/editor_theme_manager.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1058,13 +1058,19 @@ void EditorThemeManager::_populate_standard_styles(const Ref<EditorTheme> &p_the
style_itemlist_hover->set_bg_color(p_config.highlight_color * Color(1, 1, 1, 0.3));
style_itemlist_hover->set_border_width_all(0);

Ref<StyleBoxFlat> style_itemlist_hover_selected = style_tree_selected->duplicate();
style_itemlist_hover_selected->set_bg_color(p_config.highlight_color * Color(1, 1, 1, 1.2));
style_itemlist_hover_selected->set_border_width_all(0);

p_theme->set_stylebox(SceneStringName(panel), "ItemList", style_itemlist_bg);
p_theme->set_stylebox("focus", "ItemList", p_config.button_style_focus);
p_theme->set_stylebox("cursor", "ItemList", style_itemlist_cursor);
p_theme->set_stylebox("cursor_unfocused", "ItemList", style_itemlist_cursor);
p_theme->set_stylebox("selected_focus", "ItemList", style_tree_focus);
p_theme->set_stylebox("selected", "ItemList", style_tree_selected);
p_theme->set_stylebox("hovered", "ItemList", style_itemlist_hover);
p_theme->set_stylebox("hovered_selected", "ItemList", style_itemlist_hover_selected);
p_theme->set_stylebox("hovered_selected_focus", "ItemList", style_itemlist_hover_selected);
p_theme->set_color(SceneStringName(font_color), "ItemList", p_config.font_color);
p_theme->set_color("font_hovered_color", "ItemList", p_config.mono_color);
p_theme->set_color("font_selected_color", "ItemList", p_config.mono_color);
Expand Down
37 changes: 27 additions & 10 deletions scene/gui/item_list.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1166,6 +1166,8 @@ void ItemList::_notification(int p_what) {
first_item_visible = lo;
}

Rect2 cursor_rcache; // Place to save the position of the cursor and draw it after everything else.

// Draw visible items.
for (int i = first_item_visible; i < items.size(); i++) {
Rect2 rcache = items[i].rect_cache;
Expand All @@ -1182,11 +1184,12 @@ void ItemList::_notification(int p_what) {
rcache.size.width = width - rcache.position.x;
}

bool should_draw_selected_bg = items[i].selected;
bool should_draw_selected_bg = items[i].selected && hovered != i;
bool should_draw_hovered_selected_bg = items[i].selected && hovered == i;
bool should_draw_hovered_bg = hovered == i && !items[i].selected;
bool should_draw_custom_bg = items[i].custom_bg.a > 0.001;

if (should_draw_selected_bg || should_draw_hovered_bg || should_draw_custom_bg) {
if (should_draw_selected_bg || should_draw_hovered_selected_bg || should_draw_hovered_bg || should_draw_custom_bg) {
Rect2 r = rcache;
r.position += base_ofs;

Expand All @@ -1197,6 +1200,13 @@ void ItemList::_notification(int p_what) {
if (should_draw_selected_bg) {
draw_style_box(sbsel, r);
}
if (should_draw_hovered_selected_bg) {
if (has_focus()) {
draw_style_box(theme_cache.hovered_selected_focus_style, r);
} else {
draw_style_box(theme_cache.hovered_selected_style, r);
}
}
if (should_draw_hovered_bg) {
draw_style_box(theme_cache.hovered_style, r);
}
Expand Down Expand Up @@ -1294,7 +1304,9 @@ void ItemList::_notification(int p_what) {
}

Color txt_modulate;
if (items[i].selected) {
if (items[i].selected && hovered == i) {
txt_modulate = theme_cache.font_hovered_selected_color;
} else if (items[i].selected) {
txt_modulate = theme_cache.font_selected_color;
} else if (hovered == i) {
txt_modulate = theme_cache.font_hovered_color;
Expand Down Expand Up @@ -1366,15 +1378,17 @@ void ItemList::_notification(int p_what) {
}

if (i == current && (select_mode == SELECT_MULTI || select_mode == SELECT_TOGGLE)) {
Rect2 r = rcache;
r.position += base_ofs;

if (rtl) {
r.position.x = size.width - r.position.x - r.size.x;
}
cursor_rcache = rcache;
}
}
if (cursor_rcache.size != Size2()) { // Draw cursor last, so border isn't cut off.
cursor_rcache.position += base_ofs;

draw_style_box(cursor, r);
if (rtl) {
cursor_rcache.position.x = size.width - cursor_rcache.position.x - cursor_rcache.size.x;
}

draw_style_box(cursor, cursor_rcache);
}
} break;
}
Expand Down Expand Up @@ -1966,13 +1980,16 @@ void ItemList::_bind_methods() {
BIND_THEME_ITEM(Theme::DATA_TYPE_FONT_SIZE, ItemList, font_size);
BIND_THEME_ITEM(Theme::DATA_TYPE_COLOR, ItemList, font_color);
BIND_THEME_ITEM(Theme::DATA_TYPE_COLOR, ItemList, font_hovered_color);
BIND_THEME_ITEM(Theme::DATA_TYPE_COLOR, ItemList, font_hovered_selected_color);
BIND_THEME_ITEM(Theme::DATA_TYPE_COLOR, ItemList, font_selected_color);
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_CONSTANT, ItemList, font_outline_size, "outline_size");
BIND_THEME_ITEM(Theme::DATA_TYPE_COLOR, ItemList, font_outline_color);

BIND_THEME_ITEM(Theme::DATA_TYPE_CONSTANT, ItemList, line_separation);
BIND_THEME_ITEM(Theme::DATA_TYPE_CONSTANT, ItemList, icon_margin);
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_STYLEBOX, ItemList, hovered_style, "hovered");
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_STYLEBOX, ItemList, hovered_selected_style, "hovered_selected");
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_STYLEBOX, ItemList, hovered_selected_focus_style, "hovered_selected_focus");
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_STYLEBOX, ItemList, selected_style, "selected");
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_STYLEBOX, ItemList, selected_focus_style, "selected_focus");
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_STYLEBOX, ItemList, cursor_style, "cursor_unfocused");
Expand Down
3 changes: 3 additions & 0 deletions scene/gui/item_list.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,13 +146,16 @@ class ItemList : public Control {
int font_size = 0;
Color font_color;
Color font_hovered_color;
Color font_hovered_selected_color;
Color font_selected_color;
int font_outline_size = 0;
Color font_outline_color;

int line_separation = 0;
int icon_margin = 0;
Ref<StyleBox> hovered_style;
Ref<StyleBox> hovered_selected_style;
Ref<StyleBox> hovered_selected_focus_style;
Ref<StyleBox> selected_style;
Ref<StyleBox> selected_focus_style;
Ref<StyleBox> cursor_style;
Expand Down
4 changes: 4 additions & 0 deletions scene/theme/default_theme.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
// StyleBox colors
const Color style_normal_color = Color(0.1, 0.1, 0.1, 0.6);
const Color style_hover_color = Color(0.225, 0.225, 0.225, 0.6);
const Color style_hover_selected_color = Color(1, 1, 1, 0.4);
const Color style_pressed_color = Color(0, 0, 0, 0.6);
const Color style_disabled_color = Color(0.1, 0.1, 0.1, 0.3);
const Color style_focus_color = Color(1, 1, 1, 0.75);
Expand Down Expand Up @@ -929,10 +930,13 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const

theme->set_color(SceneStringName(font_color), "ItemList", control_font_lower_color);
theme->set_color("font_hovered_color", "ItemList", control_font_hover_color);
theme->set_color("font_hovered_selected_color", "ItemList", control_font_pressed_color);
theme->set_color("font_selected_color", "ItemList", control_font_pressed_color);
theme->set_color("font_outline_color", "ItemList", Color(0, 0, 0));
theme->set_color("guide_color", "ItemList", Color(0.7, 0.7, 0.7, 0.25));
theme->set_stylebox("hovered", "ItemList", make_flat_stylebox(Color(1, 1, 1, 0.07)));
theme->set_stylebox("hovered_selected", "ItemList", make_flat_stylebox(style_hover_selected_color));
theme->set_stylebox("hovered_selected_focus", "ItemList", make_flat_stylebox(style_hover_selected_color));
theme->set_stylebox("selected", "ItemList", make_flat_stylebox(style_selected_color));
theme->set_stylebox("selected_focus", "ItemList", make_flat_stylebox(style_selected_color));
theme->set_stylebox("cursor", "ItemList", focus);
Expand Down
Loading