project panel: Add indent guides (#18260)

See #12673



https://github.com/user-attachments/assets/94079afc-a851-4206-9c9b-4fad3542334e



TODO:
- [x] Make active indent guides work for autofolded directories
- [x] Figure out which theme colors to use
- [x] Fix horizontal scrolling
- [x] Make indent guides easier to click
- [x] Fix selected background flashing when hovering over entry/indent
guide
- [x] Docs

Release Notes:

- Added indent guides to the project panel
This commit is contained in:
Bennet Bo Fenner 2024-10-24 13:07:20 +02:00 committed by GitHub
parent e040b200bc
commit 4214ed927f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 975 additions and 41 deletions

View file

@ -59,6 +59,9 @@ impl ThemeColors {
search_match_background: neutral().light().step_5(),
panel_background: neutral().light().step_2(),
panel_focused_border: blue().light().step_5(),
panel_indent_guide: neutral().light_alpha().step_5(),
panel_indent_guide_hover: neutral().light_alpha().step_6(),
panel_indent_guide_active: neutral().light_alpha().step_6(),
pane_focused_border: blue().light().step_5(),
pane_group_border: neutral().light().step_6(),
scrollbar_thumb_background: neutral().light_alpha().step_3(),
@ -162,6 +165,9 @@ impl ThemeColors {
search_match_background: neutral().dark().step_5(),
panel_background: neutral().dark().step_2(),
panel_focused_border: blue().dark().step_5(),
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(),
pane_focused_border: blue().dark().step_5(),
pane_group_border: neutral().dark().step_6(),
scrollbar_thumb_background: neutral().dark_alpha().step_3(),

View file

@ -136,6 +136,9 @@ pub(crate) fn zed_default_dark() -> Theme {
terminal_ansi_dim_white: crate::neutral().dark().step_10(),
panel_background: bg,
panel_focused_border: blue,
panel_indent_guide: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
panel_indent_guide_hover: hsla(225. / 360., 13. / 100., 12. / 100., 1.),
panel_indent_guide_active: hsla(225. / 360., 13. / 100., 12. / 100., 1.),
pane_focused_border: blue,
pane_group_border: hsla(225. / 360., 13. / 100., 12. / 100., 1.),
scrollbar_thumb_background: gpui::transparent_black(),

View file

@ -322,6 +322,15 @@ pub struct ThemeColorsContent {
#[serde(rename = "panel.focused_border")]
pub panel_focused_border: Option<String>,
#[serde(rename = "panel.indent_guide")]
pub panel_indent_guide: Option<String>,
#[serde(rename = "panel.indent_guide_hover")]
pub panel_indent_guide_hover: Option<String>,
#[serde(rename = "panel.indent_guide_active")]
pub panel_indent_guide_active: Option<String>,
#[serde(rename = "pane.focused_border")]
pub pane_focused_border: Option<String>,
@ -710,6 +719,18 @@ impl ThemeColorsContent {
.panel_focused_border
.as_ref()
.and_then(|color| try_parse_color(color).ok()),
panel_indent_guide: self
.panel_indent_guide
.as_ref()
.and_then(|color| try_parse_color(color).ok()),
panel_indent_guide_hover: self
.panel_indent_guide_hover
.as_ref()
.and_then(|color| try_parse_color(color).ok()),
panel_indent_guide_active: self
.panel_indent_guide_active
.as_ref()
.and_then(|color| try_parse_color(color).ok()),
pane_focused_border: self
.pane_focused_border
.as_ref()

View file

@ -123,6 +123,9 @@ pub struct ThemeColors {
pub search_match_background: Hsla,
pub panel_background: Hsla,
pub panel_focused_border: Hsla,
pub panel_indent_guide: Hsla,
pub panel_indent_guide_hover: Hsla,
pub panel_indent_guide_active: Hsla,
pub pane_focused_border: Hsla,
pub pane_group_border: Hsla,
/// The color of the scrollbar thumb.