Improve project_panel diagnostic icon knockout colors (#20760)

Closes #20572

Release Notes:

- N/A

cc @danilo-leal @WeetHet
This commit is contained in:
Nils Koch 2024-11-21 18:03:40 +00:00 committed by GitHub
parent 5ff49db92f
commit 571c7d4f66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -101,6 +101,7 @@ pub struct ProjectPanel {
// We keep track of the mouse down state on entries so we don't flash the UI // We keep track of the mouse down state on entries so we don't flash the UI
// in case a user clicks to open a file. // in case a user clicks to open a file.
mouse_down: bool, mouse_down: bool,
hovered_entries: HashSet<ProjectEntryId>,
} }
#[derive(Clone, Debug)] #[derive(Clone, Debug)]
@ -139,6 +140,7 @@ struct EntryDetails {
is_marked: bool, is_marked: bool,
is_editing: bool, is_editing: bool,
is_processing: bool, is_processing: bool,
is_hovered: bool,
is_cut: bool, is_cut: bool,
filename_text_color: Color, filename_text_color: Color,
diagnostic_severity: Option<DiagnosticSeverity>, diagnostic_severity: Option<DiagnosticSeverity>,
@ -256,7 +258,7 @@ fn get_item_color(cx: &ViewContext<ProjectPanel>) -> ItemColors {
ItemColors { ItemColors {
default: colors.surface_background, default: colors.surface_background,
hover: colors.element_active, hover: colors.ghost_element_hover,
drag_over: colors.drop_target_background, drag_over: colors.drop_target_background,
marked_active: colors.ghost_element_selected, marked_active: colors.ghost_element_selected,
} }
@ -380,6 +382,7 @@ impl ProjectPanel {
diagnostics: Default::default(), diagnostics: Default::default(),
scroll_handle, scroll_handle,
mouse_down: false, mouse_down: false,
hovered_entries: Default::default(),
}; };
this.update_visible_entries(None, cx); this.update_visible_entries(None, cx);
@ -2465,6 +2468,7 @@ impl ProjectPanel {
is_expanded, is_expanded,
is_selected: self.selection == Some(selection), is_selected: self.selection == Some(selection),
is_marked, is_marked,
is_hovered: self.hovered_entries.contains(&entry.id),
is_editing: false, is_editing: false,
is_processing: false, is_processing: false,
is_cut: self is_cut: self
@ -2594,6 +2598,7 @@ impl ProjectPanel {
let is_active = self let is_active = self
.selection .selection
.map_or(false, |selection| selection.entry_id == entry_id); .map_or(false, |selection| selection.entry_id == entry_id);
let is_hovered = details.is_hovered;
let width = self.size(cx); let width = self.size(cx);
let file_name = details.filename.clone(); let file_name = details.filename.clone();
@ -2626,6 +2631,14 @@ impl ProjectPanel {
marked_selections: selections, marked_selections: selections,
}; };
let (bg_color, border_color) = match (is_hovered, is_marked || is_active, self.mouse_down) {
(true, _, true) => (item_colors.marked_active, item_colors.hover),
(true, false, false) => (item_colors.hover, item_colors.hover),
(true, true, false) => (item_colors.hover, item_colors.marked_active),
(false, true, _) => (item_colors.marked_active, item_colors.marked_active),
_ => (item_colors.default, item_colors.default),
};
div() div()
.id(entry_id.to_proto() as usize) .id(entry_id.to_proto() as usize)
.when(is_local, |div| { .when(is_local, |div| {
@ -2703,6 +2716,14 @@ impl ProjectPanel {
cx.propagate(); cx.propagate();
}), }),
) )
.on_hover(cx.listener(move |this, hover, cx| {
if *hover {
this.hovered_entries.insert(entry_id);
} else {
this.hovered_entries.remove(&entry_id);
}
cx.notify();
}))
.on_click(cx.listener(move |this, event: &gpui::ClickEvent, cx| { .on_click(cx.listener(move |this, event: &gpui::ClickEvent, cx| {
if event.down.button == MouseButton::Right || event.down.first_mouse || show_editor if event.down.button == MouseButton::Right || event.down.first_mouse || show_editor
{ {
@ -2763,11 +2784,13 @@ impl ProjectPanel {
} }
})) }))
.cursor_pointer() .cursor_pointer()
.bg(bg_color)
.border_color(border_color)
.child( .child(
ListItem::new(entry_id.to_proto() as usize) ListItem::new(entry_id.to_proto() as usize)
.indent_level(depth) .indent_level(depth)
.indent_step_size(px(settings.indent_size)) .indent_step_size(px(settings.indent_size))
.selected(is_marked || is_active) .selectable(false)
.when_some(canonical_path, |this, path| { .when_some(canonical_path, |this, path| {
this.end_slot::<AnyElement>( this.end_slot::<AnyElement>(
div() div()
@ -2807,11 +2830,7 @@ impl ProjectPanel {
} else { } else {
IconDecorationKind::Dot IconDecorationKind::Dot
}, },
if is_marked || is_active { bg_color,
item_colors.marked_active
} else {
item_colors.default
},
cx, cx,
) )
.color(decoration_color.color(cx)) .color(decoration_color.color(cx))
@ -2924,19 +2943,6 @@ impl ProjectPanel {
.border_1() .border_1()
.border_r_2() .border_r_2()
.rounded_none() .rounded_none()
.hover(|style| {
if is_active {
style
} else {
style.bg(item_colors.hover).border_color(item_colors.hover)
}
})
.when(is_marked || is_active, |this| {
this.when(is_marked, |this| {
this.bg(item_colors.marked_active)
.border_color(item_colors.marked_active)
})
})
.when( .when(
!self.mouse_down && is_active && self.focus_handle.contains_focused(cx), !self.mouse_down && is_active && self.focus_handle.contains_focused(cx),
|this| this.border_color(Color::Selected.color(cx)), |this| this.border_color(Color::Selected.color(cx)),