Style search in buffer below breadcrumbs

Nathan Sobo , Antonio Scandurra , and Max Brunsfeld created 3 years ago

We still have issues with project search styling.

Co-Authored-By: Antonio Scandurra <[e-mail]>
Co-Authored-By: Max Brunsfeld <[e-mail]>

Change summary

crates/breadcrumbs/src/breadcrumbs.rs |  2 ++
crates/gpui/src/color.rs              |  4 ++++
crates/search/src/buffer_search.rs    | 12 +++++++++++-
crates/theme/src/theme.rs             |  8 ++------
crates/workspace/src/toolbar.rs       |  2 +-
crates/zed/assets/themes/_base.toml   | 17 ++++++++++-------
6 files changed, 30 insertions(+), 15 deletions(-)

Detailed changes

crates/breadcrumbs/src/breadcrumbs.rs

@@ -75,6 +75,8 @@ impl View for Breadcrumbs {
                         .boxed(),
                 ]
             }))
+            .contained()
+            .with_style(theme.breadcrumbs.container)
             .boxed()
     }
 }

crates/gpui/src/color.rs

@@ -41,6 +41,10 @@ impl Color {
         Self(ColorU::from_u32(0x0000ffff))
     }
 
+    pub fn yellow() -> Self {
+        Self(ColorU::from_u32(0x00ffffff))
+    }
+
     pub fn new(r: u8, g: u8, b: u8, a: u8) -> Self {
         Self(ColorU::new(r, g, b, a))
     }

crates/search/src/buffer_search.rs

@@ -83,7 +83,13 @@ impl View for BufferSearchBar {
         Flex::row()
             .with_child(
                 Flex::row()
-                    .with_child(ChildView::new(&self.query_editor).flex(1., true).boxed())
+                    .with_child(
+                        ChildView::new(&self.query_editor)
+                            .aligned()
+                            .left()
+                            .flex(1., true)
+                            .boxed(),
+                    )
                     .with_children(self.active_editor.as_ref().and_then(|editor| {
                         let matches = self.editors_with_matches.get(&editor.downgrade())?;
                         let message = if let Some(match_ix) = self.active_match_index {
@@ -104,7 +110,9 @@ impl View for BufferSearchBar {
                     .with_style(editor_container)
                     .aligned()
                     .constrained()
+                    .with_min_width(theme.search.editor.min_width)
                     .with_max_width(theme.search.editor.max_width)
+                    .flex(1., false)
                     .boxed(),
             )
             .with_child(
@@ -124,6 +132,8 @@ impl View for BufferSearchBar {
                     .aligned()
                     .boxed(),
             )
+            .contained()
+            .with_style(theme.search.container)
             .named("search bar")
     }
 }

crates/theme/src/theme.rs

@@ -26,7 +26,7 @@ pub struct Theme {
     pub editor: Editor,
     pub search: Search,
     pub project_diagnostics: ProjectDiagnostics,
-    pub breadcrumbs: Breadcrumbs,
+    pub breadcrumbs: ContainedText,
 }
 
 #[derive(Deserialize, Default)]
@@ -123,6 +123,7 @@ pub struct Search {
 pub struct FindEditor {
     #[serde(flatten)]
     pub input: FieldEditor,
+    pub min_width: f32,
     pub max_width: f32,
 }
 
@@ -278,11 +279,6 @@ pub struct ProjectDiagnostics {
     pub tab_summary_spacing: f32,
 }
 
-#[derive(Clone, Deserialize, Default)]
-pub struct Breadcrumbs {
-    pub text: TextStyle,
-}
-
 #[derive(Clone, Deserialize, Default)]
 pub struct Editor {
     pub text_color: Color,

crates/workspace/src/toolbar.rs

@@ -127,7 +127,7 @@ impl Toolbar {
             }
         })
         .detach();
-        self.items.push((Box::new(item), dbg!(location)));
+        self.items.push((Box::new(item), location));
         cx.notify();
     }
 

crates/zed/assets/themes/_base.toml

@@ -87,13 +87,15 @@ lsp_message = "$text.2"
 [workspace.toolbar]
 background = "$surface.1"
 border = { color = "$border.0", width = 1, left = false, right = false, bottom = true, top = false }
-height = 44
+height = 34
 item_spacing = 8
-padding.left = 8
+padding.left = 16
 padding.right = 8
+padding.bottom = 4
 
 [breadcrumbs]
-text = "$text.1"
+extends = "$text.1"
+padding = { left = 6 }
 
 [panel]
 padding = { top = 12, left = 12, bottom = 12, right = 12 }
@@ -395,15 +397,16 @@ extends = "$text.2"
 padding = 6
 
 [search.editor]
-max_width = 250
+min_width = 200
+max_width = 500
 background = "$surface.0"
 corner_radius = 6
-padding = { left = 13, right = 13, top = 3, bottom = 3 }
-margin = { top = 5, bottom = 5, left = 5, right = 5 }
+padding = { left = 14, right = 14, top = 3, bottom = 3 }
+margin = { right = 5 }
 text = "$text.0"
 placeholder_text = "$text.2"
 selection = "$selection.host"
-border = { width = 1, color = "$border.0" }
+border = { width = 1, color = "$border.0", overlay = true }
 
 [search.invalid_editor]
 extends = "$search.editor"