project_panel: Adjust entry background and border colors (#23403)

Danilo Leal created 11 months ago

Follow up to https://github.com/zed-industries/zed/pull/22658

This PR ensures the background and border color of a project panel entry
is exactly the same with one exception: if the item is focused, active,
and not with mouse down. The point is to not be able to see the border
at all given they're there to act sort of akin to CSS's `outline` (which
doesn't add up to the box model).

Please let me know if there is any edge case I either messed up here or
didn't account for.


https://github.com/user-attachments/assets/29c74f6a-b027-4d19-a7de-b9614f0d7859

Release Notes:

- N/A

Change summary

crates/project_panel/src/project_panel.rs | 23 ++++++++++++++---------
crates/theme/src/default_colors.rs        |  2 +-
2 files changed, 15 insertions(+), 10 deletions(-)

Detailed changes

crates/project_panel/src/project_panel.rs

@@ -270,7 +270,7 @@ fn get_item_color(cx: &ViewContext<ProjectPanel>) -> ItemColors {
         default: colors.panel_background,
         hover: colors.ghost_element_hover,
         drag_over: colors.drop_target_background,
-        marked_active: colors.ghost_element_selected,
+        marked_active: colors.element_selected,
         focused: colors.panel_focused_border,
     }
 }
@@ -3274,13 +3274,13 @@ impl ProjectPanel {
             marked_selections: selections,
         };
 
-        let default_color = if is_marked {
+        let bg_color = if is_marked || is_active {
             item_colors.marked_active
         } else {
             item_colors.default
         };
 
-        let bg_hover_color = if self.mouse_down || is_marked {
+        let bg_hover_color = if self.mouse_down || is_marked || is_active {
             item_colors.marked_active
         } else if !is_active {
             item_colors.hover
@@ -3291,10 +3291,15 @@ impl ProjectPanel {
         let border_color =
             if !self.mouse_down && is_active && self.focus_handle.contains_focused(cx) {
                 item_colors.focused
-            } else if self.mouse_down && is_marked || is_active {
-                item_colors.marked_active
             } else {
-                item_colors.default
+                bg_color
+            };
+
+        let border_hover_color =
+            if !self.mouse_down && is_active && self.focus_handle.contains_focused(cx) {
+                item_colors.focused
+            } else {
+                bg_hover_color
             };
 
         div()
@@ -3302,11 +3307,11 @@ impl ProjectPanel {
             .group(GROUP_NAME)
             .cursor_pointer()
             .rounded_none()
-            .bg(default_color)
+            .bg(bg_color)
             .border_1()
             .border_r_2()
             .border_color(border_color)
-            .hover(|style| style.bg(bg_hover_color))
+            .hover(|style| style.bg(bg_hover_color).border_color(border_hover_color))
             .when(is_local, |div| {
                 div.on_drag_move::<ExternalPaths>(cx.listener(
                     move |this, event: &DragMoveEvent<ExternalPaths>, cx| {
@@ -3532,7 +3537,7 @@ impl ProjectPanel {
                                             } else {
                                                 IconDecorationKind::Dot
                                             },
-                                            default_color,
+                                            bg_color,
                                             cx,
                                         )
                                         .group_name(Some(GROUP_NAME.into()))

crates/theme/src/default_colors.rs

@@ -165,7 +165,7 @@ impl ThemeColors {
             tab_active_background: neutral().dark().step_1(),
             search_match_background: neutral().dark().step_5(),
             panel_background: neutral().dark().step_2(),
-            panel_focused_border: blue().dark().step_12(),
+            panel_focused_border: blue().dark().step_8(),
             panel_indent_guide: neutral().dark_alpha().step_4(),
             panel_indent_guide_hover: neutral().dark_alpha().step_6(),
             panel_indent_guide_active: neutral().dark_alpha().step_6(),