Checkpoint

Nathan Sobo created 2 years ago

Change summary

crates/gpui2/src/elements/svg.rs     |   3 
crates/storybook/src/collab_panel.rs | 215 ++++++++---------------------
crates/storybook/src/storybook.rs    |   2 
3 files changed, 67 insertions(+), 153 deletions(-)

Detailed changes

crates/gpui2/src/elements/svg.rs

@@ -5,6 +5,7 @@ use crate::{
 };
 use refineable::RefinementCascade;
 use std::borrow::Cow;
+use util::ResultExt;
 
 #[derive(IntoElement)]
 pub struct Svg {
@@ -52,7 +53,7 @@ impl<V: 'static> Element<V> for Svg {
     {
         let fill_color = self.computed_style().fill.and_then(|fill| fill.color());
         if let Some((path, fill_color)) = self.path.as_ref().zip(fill_color) {
-            if let Ok(svg_tree) = cx.asset_cache.svg(path) {
+            if let Some(svg_tree) = cx.asset_cache.svg(path).log_err() {
                 let icon = scene::Icon {
                     bounds: layout.bounds,
                     svg: svg_tree,

crates/storybook/src/collab_panel.rs

@@ -1,8 +1,8 @@
 use crate::theme::{theme, Theme};
 use gpui2::{
-    elements::div,
+    elements::{div, svg},
     style::{StyleHelpers, Styleable},
-    Element, IntoElement, ParentElement, ViewContext,
+    ArcCow, Element, IntoElement, ParentElement, ViewContext,
 };
 use std::marker::PhantomData;
 
@@ -18,50 +18,6 @@ pub fn collab_panel<V: 'static>() -> CollabPanelElement<V> {
 }
 
 impl<V: 'static> CollabPanelElement<V> {
-    fn list_section_header(&self, theme: &Theme) -> impl Element<V> {
-        div()
-            .h_7()
-            .px_2()
-            .flex()
-            .justify_between()
-            .items_center()
-            .child(div().flex().gap_1().text_sm().child("CHANNELS"))
-            .child(
-                div().flex().h_full().gap_1().items_center().child(
-                    div()
-                        .w_3p5()
-                        .h_3p5()
-                        .fill(theme.middle.positive.default.foreground),
-                ),
-            )
-    }
-
-    fn list_item_channel(&self, theme: &Theme) -> impl Element<V> {
-        div()
-            .h_7()
-            .px_2()
-            .flex()
-            .items_center()
-            .hover()
-            .fill(theme.lowest.variant.hovered.background)
-            .active()
-            .fill(theme.lowest.variant.pressed.background)
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_1()
-                    .text_sm()
-                    .child(
-                        div()
-                            .w_3p5()
-                            .h_3p5()
-                            .fill(theme.middle.positive.default.foreground),
-                    )
-                    .child("zed-industries"),
-            )
-    }
-
     fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
@@ -88,118 +44,26 @@ impl<V: 'static> CollabPanelElement<V> {
                             //:: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
                             // .group()
                             // List Section Header
-                            .child(
-                                div()
-                                    .px_2()
-                                    .flex()
-                                    .justify_between()
-                                    .items_center()
-                                    .hover()
-                                    .fill(theme.lowest.variant.hovered.background)
-                                    .active()
-                                    .fill(theme.lowest.variant.pressed.background)
-                                    .child(
-                                        div()
-                                            .flex()
-                                            .gap_1()
-                                            //:: State based on group interaction state
-                                            // .group_hover().text_color(theme.middle.variant.hovered.foreground)
-                                            .text_sm()
-                                            .child("#")
-                                            .child("CRDB"),
-                                    )
-                                    .child(
-                                        div().flex().h_full().gap_1().items_center().child(
-                                            div()
-                                                .w_3p5()
-                                                .h_3p5()
-                                                .fill(theme.middle.positive.default.foreground),
-                                        ),
-                                    ),
-                            )
+                            .child(self.list_section_header("#CRDB", theme))
                             // List Item Large
-                            .child(
-                                div()
-                                    .px_2()
-                                    .h_7()
-                                    .flex()
-                                    .justify_between()
-                                    .items_center()
-                                    .child(
-                                        div()
-                                            .flex()
-                                            .h_full()
-                                            .gap_1()
-                                            .items_center()
-                                            .text_sm()
-                                            .child(
-                                                div()
-                                                    .w_4()
-                                                    .h_4()
-                                                    .fill(theme.middle.negative.default.foreground),
-                                            )
-                                            .child("maxbrunsfeld"),
-                                    )
-                                    .child(
-                                        div().flex().h_full().gap_1().items_center().child(
-                                            div()
-                                                .w_3p5()
-                                                .h_3p5()
-                                                .fill(theme.middle.positive.default.foreground),
-                                        ),
-                                    ),
-                            ),
+                            .child(self.list_item("maxbrunsfeld", theme)),
                     )
-                    .child(self.list_section_header(theme))
                     .child(
                         div()
                             .py_2()
                             .flex()
                             .flex_col()
-                            .child(
-                                div()
-                                    .h_5()
-                                    .px_2()
-                                    .flex()
-                                    .justify_between()
-                                    .items_center()
-                                    .child(div().flex().gap_1().text_sm().child("CONTACTS"))
-                                    .child(
-                                        div().flex().h_full().gap_1().items_center().child(
-                                            div()
-                                                .w_3p5()
-                                                .h_3p5()
-                                                .fill(theme.middle.positive.default.foreground),
-                                        ),
-                                    ),
-                            )
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme))
-                            .child(self.list_item_channel(theme)),
+                            .child(self.list_section_header("CHANNELS", theme)),
+                    )
+                    .child(
+                        div()
+                            .py_2()
+                            .flex()
+                            .flex_col()
+                            .child(self.list_section_header("CONTACTS", theme))
+                            .child(self.list_item("as-cii", theme))
+                            .child(self.list_item("nathansobo", theme))
+                            .child(self.list_item("maxbrunsfeld", theme)),
                     ),
             )
             .child(
@@ -211,4 +75,53 @@ impl<V: 'static> CollabPanelElement<V> {
                 ),
             )
     }
+
+    fn list_section_header(
+        &self,
+        label: impl Into<ArcCow<'static, str>>,
+        theme: &Theme,
+    ) -> impl Element<V> {
+        div()
+            .h_7()
+            .px_2()
+            .flex()
+            .justify_between()
+            .items_center()
+            .child(div().flex().gap_1().text_sm().child(label))
+            .child(
+                div().flex().h_full().gap_1().items_center().child(
+                    svg()
+                        .path("icons/radix/caret-down.svg")
+                        .w_3p5()
+                        .h_3p5()
+                        .fill(theme.middle.positive.default.foreground),
+                ),
+            )
+    }
+
+    fn list_item(&self, label: impl Into<ArcCow<'static, str>>, theme: &Theme) -> impl Element<V> {
+        div()
+            .h_7()
+            .px_2()
+            .flex()
+            .items_center()
+            .hover()
+            .fill(theme.lowest.variant.hovered.background)
+            .active()
+            .fill(theme.lowest.variant.pressed.background)
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_1()
+                    .text_sm()
+                    .child(
+                        div()
+                            .w_3p5()
+                            .h_3p5()
+                            .fill(theme.middle.positive.default.foreground),
+                    )
+                    .child(label),
+            )
+    }
 }

crates/storybook/src/storybook.rs

@@ -19,7 +19,7 @@ mod workspace;
 fn main() {
     SimpleLogger::init(LevelFilter::Info, Default::default()).expect("could not initialize logger");
 
-    gpui2::App::new(()).unwrap().run(|cx| {
+    gpui2::App::new(Assets).unwrap().run(|cx| {
         let mut store = SettingsStore::default();
         store
             .set_default_settings(default_settings().as_ref(), cx)