Remove buttonside, use new corner_radii instead

Piotr Osiewicz created

Change summary

crates/search/src/elements.rs       | 163 -------------------------------
crates/search/src/project_search.rs |   4 
crates/search/src/search.rs         |   1 
crates/search/src/search_bar.rs     | 117 +++++++--------------
styles/src/style_tree/search.ts     |   2 
5 files changed, 42 insertions(+), 245 deletions(-)

Detailed changes

crates/search/src/elements.rs 🔗

@@ -1,163 +0,0 @@
-use std::ops::Range;
-
-use gpui::color::Color;
-use gpui::geometry::rect::RectF;
-use gpui::geometry::vector::IntoVector2F;
-use gpui::json::{self, ToJson};
-use gpui::{scene::Path, LayoutContext};
-use gpui::{Element, PaintContext, SceneBuilder, View, ViewContext};
-
-type CreatePath = fn(RectF, Color, f32) -> Path;
-type AdjustBorder = fn(RectF, f32) -> RectF;
-type BorderThickness = f32;
-
-pub(crate) struct ButtonSide {
-    color: Color,
-    factory: CreatePath,
-    /// After the outline is drawn with border color,
-    /// the drawing bounds have to be adjusted by different factors in different dimensions.
-    border_adjustment: AdjustBorder,
-    border: Option<(BorderThickness, Color)>,
-    radius: f32,
-}
-
-impl ButtonSide {
-    fn new(
-        color: Color,
-        factory: CreatePath,
-        border_adjustment: AdjustBorder,
-        radius: f32,
-    ) -> Self {
-        Self {
-            color,
-            factory,
-            border_adjustment,
-            border: None,
-            radius,
-        }
-    }
-    pub fn with_border(mut self, width: f32, color: Color) -> Self {
-        self.border = Some((width, color));
-        self
-    }
-    pub fn left(color: Color, corner_radius: f32) -> Self {
-        Self::new(
-            color,
-            left_button_side,
-            left_button_border_adjust,
-            corner_radius,
-        )
-    }
-    pub fn right(color: Color, corner_radius: f32) -> Self {
-        Self::new(
-            color,
-            right_button_side,
-            right_button_border_adjust,
-            corner_radius,
-        )
-    }
-}
-
-fn left_button_border_adjust(bounds: RectF, width: f32) -> RectF {
-    let width = width.into_vector_2f();
-    let mut lower_right = bounds.clone().lower_right();
-    lower_right.set_x(lower_right.x() + width.x());
-    RectF::from_points(bounds.origin() + width, lower_right)
-}
-fn right_button_border_adjust(bounds: RectF, width: f32) -> RectF {
-    let width = width.into_vector_2f();
-    let mut origin = bounds.clone().origin();
-    origin.set_x(origin.x() - width.x());
-    RectF::from_points(origin, bounds.lower_right() - width)
-}
-fn left_button_side(bounds: RectF, color: Color, radius: f32) -> Path {
-    use gpui::geometry::PathBuilder;
-    let mut path = PathBuilder::new();
-    path.reset(bounds.lower_right());
-    path.line_to(bounds.upper_right());
-    let mut middle_point = bounds.origin();
-    let distance_to_line = (middle_point.y() - bounds.lower_left().y()).min(-radius.abs());
-    middle_point.set_y(middle_point.y() - distance_to_line);
-    path.curve_to(middle_point, bounds.origin());
-    let mut target = bounds.lower_left();
-    target.set_y(target.y() + distance_to_line);
-    path.line_to(target);
-    path.curve_to(bounds.lower_right(), bounds.lower_left());
-    path.build(color, None)
-}
-
-fn right_button_side(bounds: RectF, color: Color, radius: f32) -> Path {
-    use gpui::geometry::PathBuilder;
-    let mut path = PathBuilder::new();
-    path.reset(bounds.lower_left());
-    path.line_to(bounds.origin());
-    let mut middle_point = bounds.upper_right();
-    let distance_to_line = (middle_point.y() - bounds.lower_right().y()).min(-radius.abs());
-    middle_point.set_y(middle_point.y() - distance_to_line);
-    path.curve_to(middle_point, bounds.upper_right());
-    let mut target = bounds.lower_right();
-    target.set_y(target.y() + distance_to_line);
-    path.line_to(target);
-    path.curve_to(bounds.lower_left(), bounds.lower_right());
-    path.build(color, None)
-}
-
-impl<V: View> Element<V> for ButtonSide {
-    type LayoutState = ();
-
-    type PaintState = ();
-
-    fn layout(
-        &mut self,
-        constraint: gpui::SizeConstraint,
-        _: &mut V,
-        _: &mut LayoutContext<V>,
-    ) -> (gpui::geometry::vector::Vector2F, Self::LayoutState) {
-        (constraint.max, ())
-    }
-
-    fn paint(
-        &mut self,
-        scene: &mut SceneBuilder,
-        bounds: RectF,
-        _: RectF,
-        _: &mut Self::LayoutState,
-        _: &mut V,
-        _: &mut PaintContext<V>,
-    ) -> Self::PaintState {
-        let mut bounds = bounds;
-        if let Some((border_width, border_color)) = self.border.as_ref() {
-            scene.push_path((self.factory)(bounds, border_color.clone(), self.radius));
-            bounds = (self.border_adjustment)(bounds, *border_width);
-        };
-        scene.push_path((self.factory)(bounds, self.color, self.radius));
-    }
-
-    fn rect_for_text_range(
-        &self,
-        _: Range<usize>,
-        _: RectF,
-        _: RectF,
-        _: &Self::LayoutState,
-        _: &Self::PaintState,
-        _: &V,
-        _: &ViewContext<V>,
-    ) -> Option<RectF> {
-        None
-    }
-
-    fn debug(
-        &self,
-        bounds: RectF,
-        _: &Self::LayoutState,
-        _: &Self::PaintState,
-        _: &V,
-        _: &ViewContext<V>,
-    ) -> gpui::json::Value {
-        json::json!({
-            "type": "ButtonSide",
-            "bounds": bounds.to_json(),
-            "color": self.color.to_json(),
-        })
-    }
-}

crates/search/src/project_search.rs 🔗

@@ -1593,7 +1593,7 @@ impl View for ProjectSearchBar {
                                 .left(),
                         )
                         .constrained()
-                        .with_max_height(theme.search.search_bar_row_height)
+                        .with_height(theme.search.search_bar_row_height)
                         .flex(1., true),
                 )
                 .with_child(
@@ -1642,7 +1642,7 @@ impl View for ProjectSearchBar {
                                     None,
                                 ))
                                 .constrained()
-                                .with_height(theme.workspace.toolbar.height)
+                                .with_height(theme.search.search_bar_row_height)
                                 .contained()
                                 .aligned()
                                 .right()

crates/search/src/search.rs 🔗

@@ -6,7 +6,6 @@ use project::search::SearchQuery;
 pub use project_search::{ProjectSearchBar, ProjectSearchView};
 
 pub mod buffer_search;
-mod elements;
 mod history;
 mod mode;
 pub mod project_search;

crates/search/src/search_bar.rs 🔗

@@ -1,13 +1,12 @@
 use gpui::{
     elements::{Flex, Label, MouseEventHandler, ParentElement, Svg},
     platform::{CursorStyle, MouseButton},
-    scene::MouseClick,
+    scene::{CornerRadii, MouseClick},
     Action, AnyElement, Element, EventContext, View, ViewContext,
 };
 use workspace::searchable::Direction;
 
 use crate::{
-    elements::ButtonSide,
     mode::{SearchMode, Side},
     SearchOptions, SelectNextMatch, SelectPrevMatch,
 };
@@ -65,48 +64,31 @@ 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();
-        let button_side_width = style.container.corner_radii.top_left;
-        style.container.corner_radii = (0.).into();
-        let label = Label::new(icon, style.label.clone())
-            .contained()
-            .with_style(style.container.clone());
+        let mut container_style = style.container.clone();
+        let label = Label::new(icon, style.label.clone()).contained();
         match direction {
-            Direction::Prev => Flex::row()
-                .with_child(
-                    ButtonSide::left(
-                        style
-                            .clone()
-                            .container
-                            .background_color
-                            .unwrap_or_else(gpui::color::Color::transparent_black),
-                        button_side_width,
-                    )
-                    .with_border(style.container.border.width, style.container.border.color)
-                    .contained()
+            Direction::Prev => {
+                container_style.corner_radii = CornerRadii {
+                    bottom_right: 0.,
+                    top_right: 0.,
+                    ..container_style.corner_radii
+                };
+                Flex::row()
+                    .with_child(label.with_style(container_style))
                     .constrained()
-                    .with_max_width(button_side_width),
-                )
-                .with_child(label)
-                .constrained()
-                .with_height(theme.workspace.toolbar.height),
-            Direction::Next => Flex::row()
-                .with_child(label)
-                .with_child(
-                    ButtonSide::right(
-                        style
-                            .clone()
-                            .container
-                            .background_color
-                            .unwrap_or_else(gpui::color::Color::transparent_black),
-                        button_side_width,
-                    )
-                    .with_border(style.container.border.width, style.container.border.color)
-                    .contained()
+                //.with_height(theme.workspace.toolbar.height)
+            }
+            Direction::Next => {
+                container_style.corner_radii = CornerRadii {
+                    bottom_left: 0.,
+                    top_left: 0.,
+                    ..container_style.corner_radii
+                };
+                Flex::row()
+                    .with_child(label.with_style(container_style))
                     .constrained()
-                    .with_max_width(button_side_width),
-                )
-                .constrained()
-                .with_height(theme.workspace.toolbar.height),
+                //   .with_height(theme.workspace.toolbar.height)
+            }
         }
     })
     .on_click(MouseButton::Left, on_click)
@@ -137,58 +119,37 @@ pub(crate) fn render_search_mode_button<V: View>(
             .in_state(is_active)
             .style_for(state)
             .clone();
-        let side_width = style.container.corner_radii.top_left;
-        style.container.corner_radii = (0.).into();
         if mode.button_side().is_some() {
             style.container.border.left = mode.border_left();
             style.container.border.right = mode.border_right();
         }
-        let label = Label::new(mode.label(), style.text.clone())
-            .contained()
-            .with_style(style.container);
-
+        let label = Label::new(mode.label(), style.text.clone()).contained();
+        let mut container_style = style.container.clone();
         if let Some(button_side) = mode.button_side() {
             if button_side == Side::Left {
+                container_style.corner_radii = CornerRadii {
+                    bottom_right: 0.,
+                    top_right: 0.,
+                    ..container_style.corner_radii
+                };
                 Flex::row()
                     .align_children_center()
-                    .with_child(
-                        ButtonSide::left(
-                            style
-                                .container
-                                .background_color
-                                .unwrap_or_else(gpui::color::Color::transparent_black),
-                            side_width,
-                        )
-                        .with_border(style.container.border.width, style.container.border.color)
-                        .contained()
-                        .constrained()
-                        .with_max_width(side_width)
-                        .with_height(theme.search.search_bar_row_height),
-                    )
-                    .with_child(label)
+                    .with_child(label.with_style(container_style))
                     .into_any()
             } else {
+                container_style.corner_radii = CornerRadii {
+                    bottom_left: 0.,
+                    top_left: 0.,
+                    ..container_style.corner_radii
+                };
                 Flex::row()
                     .align_children_center()
-                    .with_child(label)
-                    .with_child(
-                        ButtonSide::right(
-                            style
-                                .container
-                                .background_color
-                                .unwrap_or_else(gpui::color::Color::transparent_black),
-                            side_width,
-                        )
-                        .with_border(style.container.border.width, style.container.border.color)
-                        .contained()
-                        .constrained()
-                        .with_max_width(side_width)
-                        .with_height(theme.search.search_bar_row_height),
-                    )
+                    .with_child(label.with_style(container_style))
                     .into_any()
             }
         } else {
-            label.into_any()
+            container_style.corner_radii = CornerRadii::default();
+            label.with_style(container_style).into_any()
         }
     })
     .on_click(MouseButton::Left, on_click)

styles/src/style_tree/search.ts 🔗

@@ -245,7 +245,7 @@ export default function search(): any {
             base: {
                 text: text(theme.highest, "mono", "on"),
                 background: background(theme.highest, "on"),
-                corner_radius: 6,
+                corner_radius: { top_left: 6, top_right: 6, bottom_right: 6, bottom_left: 6 },
                 border: {
                     ...border(theme.highest, "on"),
                     left: false,