Improve project_panel diagnostic icon knockout colors (#20760)
Closes #20572 Release Notes: - N/A cc @danilo-leal @WeetHet
This commit is contained in:
parent
5ff49db92f
commit
571c7d4f66
1 changed files with 26 additions and 20 deletions
|
@ -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)),
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue