Embed match index inside of search query editor

Antonio Scandurra created 3 years ago

Change summary

crates/search/src/buffer_search.rs  | 53 ++++++++++++++++--------------
crates/search/src/project_search.rs | 51 +++++++++++++++--------------
crates/zed/assets/themes/_base.toml |  2 
3 files changed, 57 insertions(+), 49 deletions(-)

Detailed changes

crates/search/src/buffer_search.rs

@@ -77,7 +77,28 @@ impl View for SearchBar {
             };
             Flex::row()
                 .with_child(
-                    ChildView::new(&self.query_editor)
+                    Flex::row()
+                        .with_child(
+                            ChildView::new(&self.query_editor)
+                                .flexible(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 {
+                                format!("{}/{}", match_ix + 1, matches.len())
+                            } else {
+                                "No matches".to_string()
+                            };
+
+                            Some(
+                                Label::new(message, theme.search.match_index.text.clone())
+                                    .contained()
+                                    .with_style(theme.search.match_index.container)
+                                    .aligned()
+                                    .boxed(),
+                            )
+                        }))
                         .contained()
                         .with_style(editor_container)
                         .aligned()
@@ -85,6 +106,13 @@ impl View for SearchBar {
                         .with_max_width(theme.search.max_editor_width)
                         .boxed(),
                 )
+                .with_child(
+                    Flex::row()
+                        .with_child(self.render_nav_button("<", Direction::Prev, cx))
+                        .with_child(self.render_nav_button(">", Direction::Next, cx))
+                        .aligned()
+                        .boxed(),
+                )
                 .with_child(
                     Flex::row()
                         .with_child(self.render_search_option(
@@ -99,29 +127,6 @@ impl View for SearchBar {
                         .aligned()
                         .boxed(),
                 )
-                .with_child(
-                    Flex::row()
-                        .with_child(self.render_nav_button("<", Direction::Prev, cx))
-                        .with_child(self.render_nav_button(">", Direction::Next, cx))
-                        .aligned()
-                        .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 {
-                        format!("{}/{}", match_ix + 1, matches.len())
-                    } else {
-                        "No matches".to_string()
-                    };
-
-                    Some(
-                        Label::new(message, theme.search.match_index.text.clone())
-                            .contained()
-                            .with_style(theme.search.match_index.container)
-                            .aligned()
-                            .boxed(),
-                    )
-                }))
                 .named("search bar")
         }
     }

crates/search/src/project_search.rs

@@ -572,7 +572,26 @@ impl ProjectSearchView {
         };
         Flex::row()
             .with_child(
-                ChildView::new(&self.query_editor)
+                Flex::row()
+                    .with_child(
+                        ChildView::new(&self.query_editor)
+                            .flexible(1., true)
+                            .boxed(),
+                    )
+                    .with_children(self.active_match_index.map(|match_ix| {
+                        Label::new(
+                            format!(
+                                "{}/{}",
+                                match_ix + 1,
+                                self.model.read(cx).match_ranges.len()
+                            ),
+                            theme.search.match_index.text.clone(),
+                        )
+                        .contained()
+                        .with_style(theme.search.match_index.container)
+                        .aligned()
+                        .boxed()
+                    }))
                     .contained()
                     .with_style(editor_container)
                     .aligned()
@@ -580,6 +599,13 @@ impl ProjectSearchView {
                     .with_max_width(theme.search.max_editor_width)
                     .boxed(),
             )
+            .with_child(
+                Flex::row()
+                    .with_child(self.render_nav_button("<", Direction::Prev, cx))
+                    .with_child(self.render_nav_button(">", Direction::Next, cx))
+                    .aligned()
+                    .boxed(),
+            )
             .with_child(
                 Flex::row()
                     .with_child(self.render_option_button("Case", SearchOption::CaseSensitive, cx))
@@ -590,29 +616,6 @@ impl ProjectSearchView {
                     .aligned()
                     .boxed(),
             )
-            .with_children({
-                self.active_match_index.into_iter().flat_map(|match_ix| {
-                    [
-                        Flex::row()
-                            .with_child(self.render_nav_button("<", Direction::Prev, cx))
-                            .with_child(self.render_nav_button(">", Direction::Next, cx))
-                            .aligned()
-                            .boxed(),
-                        Label::new(
-                            format!(
-                                "{}/{}",
-                                match_ix + 1,
-                                self.model.read(cx).match_ranges.len()
-                            ),
-                            theme.search.match_index.text.clone(),
-                        )
-                        .contained()
-                        .with_style(theme.search.match_index.container)
-                        .aligned()
-                        .boxed(),
-                    ]
-                })
-            })
             .contained()
             .with_style(theme.workspace.toolbar.container)
             .constrained()

crates/zed/assets/themes/_base.toml

@@ -392,7 +392,7 @@ extends = "$search.option_button"
 background = "$surface.2"
 
 [search.match_index]
-extends = "$text.1"
+extends = "$text.2"
 padding = 6
 
 [search.editor]