Increase padding on search

Piotr Osiewicz created 2 years ago

Change summary

crates/search/src/project_search.rs |  6 ++----
crates/search/src/search_bar.rs     | 13 +------------
styles/src/style_tree/search.ts     | 13 +++++++++++--
3 files changed, 14 insertions(+), 18 deletions(-)

Detailed changes

crates/search/src/project_search.rs

@@ -1616,7 +1616,6 @@ impl View for ProjectSearchBar {
                         )
                         .with_children(filters)
                         .contained()
-                        .with_style(theme.search.container)
                         .aligned()
                         .top()
                         .flex(1., false),
@@ -1643,7 +1642,6 @@ impl View for ProjectSearchBar {
                                 .constrained()
                                 .with_height(theme.workspace.toolbar.height)
                                 .contained()
-                                .with_style(theme.search.container)
                                 .aligned()
                                 .right()
                                 .top()
@@ -1659,7 +1657,7 @@ impl View for ProjectSearchBar {
                         .flex(1., true),
                 )
                 .contained()
-                .with_uniform_padding(theme.workspace.toolbar.height / 3.)
+                .with_style(theme.search.container)
                 .flex_float()
                 .into_any_named("project search")
         } else {
@@ -1693,7 +1691,7 @@ impl ToolbarItemView for ProjectSearchBar {
             .as_ref()
             .map(|search| {
                 let offset = search.read(cx).filters_enabled as usize;
-                2 + offset
+                3 + offset
             })
             .unwrap_or_else(|| 2)
     }

crates/search/src/search_bar.rs

@@ -65,11 +65,6 @@ pub(super) fn render_nav_button<V: View>(
     MouseEventHandler::<NavButton, _>::new(direction as usize, cx, |state, cx| {
         let theme = theme::current(cx);
         let mut style = theme.search.nav_button.style_for(state).clone();
-
-        match direction {
-            Direction::Prev => style.container.border.left = false,
-            Direction::Next => style.container.border.right = false,
-        };
         let label = Label::new(icon, style.label.clone())
             .contained()
             .with_style(style.container.clone());
@@ -110,13 +105,7 @@ pub(super) fn render_nav_button<V: View>(
                 .with_height(theme.workspace.toolbar.height),
         }
     })
-    .on_click(
-        MouseButton::Left,
-        on_click, /*move |_, this, cx| {
-                  if let Some(search) = this.active_project_search.as_ref() {
-                      search.update(cx, |search, cx| search.select_match(direction, cx));
-                      }*/
-    )
+    .on_click(MouseButton::Left, on_click)
     .with_cursor_style(CursorStyle::PointingHand)
     .with_tooltip::<NavButton>(
         direction as usize,

styles/src/style_tree/search.ts

@@ -34,6 +34,7 @@ export default function search(): any {
     }
 
     return {
+        padding: { top: 32, bottom: 32, left: 32, right: 32 },
         // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
         match_background: with_opacity(
             foreground(theme.highest, "accent"),
@@ -187,7 +188,11 @@ export default function search(): any {
                     ...text(theme.highest, "mono", "on"),
                     background: background(theme.highest, "on"),
 
-                    border: border(theme.highest, "on"),
+                    border: {
+                        ...border(theme.highest, "on"),
+                        left: false,
+                        right: false
+                    },
 
                     padding: {
                         bottom: 6,
@@ -230,7 +235,11 @@ export default function search(): any {
                 text: text(theme.highest, "mono", "on"),
                 background: background(theme.highest, "on"),
                 corner_radius: 2,
-                border: border(theme.highest, "on"),
+                border: {
+                    ...border(theme.highest, "on"),
+                    left: false,
+                    right: false,
+                },
 
                 padding: {
                     bottom: 6,