WIP update picker style

Nate Butler created 2 years ago

Change summary

crates/file_finder2/src/file_finder.rs |  4 ++
crates/picker2/src/picker2.rs          | 32 ++++++++++++++++++---------
crates/ui2/src/styles/elevation.rs     | 14 ++++++++---
3 files changed, 34 insertions(+), 16 deletions(-)

Detailed changes

crates/file_finder2/src/file_finder.rs

@@ -720,7 +720,9 @@ impl PickerDelegate for FileFinderDelegate {
             ListItem::new(ix).inset(true).selected(selected).child(
                 v_stack()
                     .child(HighlightedLabel::new(file_name, file_name_positions))
-                    .child(HighlightedLabel::new(full_path, full_path_positions)),
+                    .child(
+                        HighlightedLabel::new(full_path, full_path_positions).color(Color::Muted),
+                    ),
             ),
         )
     }

crates/picker2/src/picker2.rs

@@ -1,6 +1,6 @@
 use editor::Editor;
 use gpui::{
-    div, prelude::*, uniform_list, AnyElement, AppContext, Div, FocusHandle, FocusableView,
+    div, prelude::*, rems, uniform_list, AnyElement, AppContext, Div, FocusHandle, FocusableView,
     MouseButton, MouseDownEvent, Render, Task, UniformListScrollHandle, View, ViewContext,
     WindowContext,
 };
@@ -193,10 +193,27 @@ impl<D: PickerDelegate> Render for Picker<D> {
     type Element = Div;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+        let picker_editor = h_stack()
+            .overflow_hidden()
+            .flex_none()
+            .h_9()
+            .px_3()
+            .child(self.editor.clone());
+
+        let empty_state = div().p_1().child(
+            h_stack()
+                // TODO: This number matches the height of the uniform list items.
+                // Align these two with a less magic number.
+                .h(rems(1.4375))
+                .px_2()
+                .child(Label::new("No matches").color(Color::Muted)),
+        );
+
         div()
             .key_context("picker")
             .size_full()
-            .elevation_2(cx)
+            .overflow_hidden()
+            .elevation_3(cx)
             .on_action(cx.listener(Self::select_next))
             .on_action(cx.listener(Self::select_prev))
             .on_action(cx.listener(Self::select_first))
@@ -205,10 +222,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
             .on_action(cx.listener(Self::confirm))
             .on_action(cx.listener(Self::secondary_confirm))
             .child(
-                v_stack()
-                    .py_0p5()
-                    .px_1()
-                    .child(div().px_1().py_0p5().child(self.editor.clone())),
+                picker_editor
             )
             .child(Divider::horizontal())
             .when(self.delegate.match_count() > 0, |el| {
@@ -256,11 +270,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
             })
             .when(self.delegate.match_count() == 0, |el| {
                 el.child(
-                    v_stack().p_1().grow().child(
-                        div()
-                            .px_1()
-                            .child(Label::new("No matches").color(Color::Muted)),
-                    ),
+                    empty_state
                 )
             })
     }

crates/ui2/src/styles/elevation.rs

@@ -37,7 +37,7 @@ impl ElevationIndex {
 
             ElevationIndex::ElevatedSurface => smallvec![BoxShadow {
                 color: hsla(0., 0., 0., 0.12),
-                offset: point(px(0.), px(1.)),
+                offset: point(px(0.), px(2.)),
                 blur_radius: px(3.),
                 spread_radius: px(0.),
             }],
@@ -45,13 +45,19 @@ impl ElevationIndex {
             ElevationIndex::ModalSurface => smallvec![
                 BoxShadow {
                     color: hsla(0., 0., 0., 0.12),
-                    offset: point(px(0.), px(1.)),
+                    offset: point(px(0.), px(2.)),
                     blur_radius: px(3.),
                     spread_radius: px(0.),
                 },
                 BoxShadow {
-                    color: hsla(0., 0., 0., 0.20),
-                    offset: point(px(3.), px(1.)),
+                    color: hsla(0., 0., 0., 0.08),
+                    offset: point(px(0.), px(3.)),
+                    blur_radius: px(6.),
+                    spread_radius: px(0.),
+                },
+                BoxShadow {
+                    color: hsla(0., 0., 0., 0.04),
+                    offset: point(px(0.), px(6.)),
                     blur_radius: px(12.),
                     spread_radius: px(0.),
                 },