A bit more progress styling find

Nathan Sobo created 4 years ago

Fix the pinwheel when hovering mode buttons.

Change summary

crates/find/src/find.rs             | 13 ++++++++-----
crates/theme/src/theme.rs           | 11 ++++++++++-
crates/zed/assets/themes/_base.toml |  7 +++++--
3 files changed, 23 insertions(+), 8 deletions(-)

Detailed changes

crates/find/src/find.rs

@@ -53,15 +53,17 @@ impl View for FindBar {
 
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
         let theme = &self.settings.borrow().theme.find;
-        Flex::column()
+        Flex::row()
             .with_child(
                 ChildView::new(&self.query_editor)
                     .contained()
-                    .with_style(theme.query.container)
+                    .with_style(theme.editor.input.container)
+                    .constrained()
+                    .with_max_width(theme.editor.max_width)
                     .boxed(),
             )
             .with_child(
-                Flex::column()
+                Flex::row()
                     .with_child(self.render_mode_button("Aa", SearchMode::CaseSensitive, theme, cx))
                     .with_child(self.render_mode_button("|ab|", SearchMode::WholeWord, theme, cx))
                     .with_child(self.render_mode_button(".*", SearchMode::Regex, theme, cx))
@@ -70,6 +72,7 @@ impl View for FindBar {
                     .boxed(),
             )
             .contained()
+            .with_style(theme.container)
             .boxed()
     }
 }
@@ -94,7 +97,7 @@ impl FindBar {
                     Arc::new(move |_| {
                         let settings = settings.borrow();
                         EditorSettings {
-                            style: settings.theme.find.query.as_editor(),
+                            style: settings.theme.find.editor.input.as_editor(),
                             tab_size: settings.tab_size,
                             soft_wrap: editor::SoftWrap::None,
                         }
@@ -124,7 +127,7 @@ impl FindBar {
         cx: &mut RenderContext<Self>,
     ) -> ElementBox {
         let is_active = self.is_mode_enabled(mode);
-        MouseEventHandler::new::<Self, _, _, _>(0, cx, |state, _| {
+        MouseEventHandler::new::<Self, _, _, _>(mode as usize, cx, |state, _| {
             let style = match (is_active, state.hovered) {
                 (false, false) => &theme.mode_button,
                 (false, true) => &theme.hovered_mode_button,

crates/theme/src/theme.rs

@@ -90,7 +90,9 @@ pub struct Tab {
 
 #[derive(Clone, Deserialize, Default)]
 pub struct Find {
-    pub query: InputEditorStyle,
+    #[serde(flatten)]
+    pub container: ContainerStyle,
+    pub editor: FindEditor,
     pub mode_button_group: ContainerStyle,
     pub mode_button: ContainedText,
     pub active_mode_button: ContainedText,
@@ -99,6 +101,13 @@ pub struct Find {
     pub match_background: Color,
 }
 
+#[derive(Clone, Deserialize, Default)]
+pub struct FindEditor {
+    #[serde(flatten)]
+    pub input: InputEditorStyle,
+    pub max_width: f32,
+}
+
 #[derive(Deserialize, Default)]
 pub struct Sidebar {
     #[serde(flatten)]

crates/zed/assets/themes/_base.toml

@@ -321,6 +321,7 @@ tab_summary_spacing = 10
 
 [find]
 match_background = "$state.highlighted_line"
+background = "$surface.1"
 
 [find.mode_button]
 extends = "$text.1"
@@ -341,10 +342,12 @@ background = "$surface.2"
 extends = "$find.mode_button"
 background = "$surface.2"
 
-[find.query]
-background = "$surface.1"
+[find.editor]
+max_width = 400
+background = "$surface.0"
 corner_radius = 6
 padding = { left = 16, right = 16, top = 7, bottom = 7 }
+margin = { top = 5, bottom = 5, left = 5, right = 5 }
 text = "$text.0"
 placeholder_text = "$text.2"
 selection = "$selection.host"