From de77e56dc689f105608eb9bcea58fee8f82d5941 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Tue, 5 Sep 2023 18:53:25 -0600 Subject: [PATCH] Checkpoint --- 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(-) diff --git a/crates/gpui2/src/elements/svg.rs b/crates/gpui2/src/elements/svg.rs index c9ee84f8c54b04c61737a10abd831f4ae04dd00c..bbd45098e41ef9f0354e4cfe2407b2f8e756d423 100644 --- a/crates/gpui2/src/elements/svg.rs +++ b/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 Element 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, diff --git a/crates/storybook/src/collab_panel.rs b/crates/storybook/src/collab_panel.rs index 4677b60145ad095b8f7113602532575e32d73c69..f38668368611044ecbd03e98db49e0ba4ac4c4d4 100644 --- a/crates/storybook/src/collab_panel.rs +++ b/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() -> CollabPanelElement { } impl CollabPanelElement { - fn list_section_header(&self, theme: &Theme) -> impl Element { - 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 { - 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) -> impl IntoElement { let theme = theme(cx); @@ -88,118 +44,26 @@ impl CollabPanelElement { //:: 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 CollabPanelElement { ), ) } + + fn list_section_header( + &self, + label: impl Into>, + theme: &Theme, + ) -> impl Element { + 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>, theme: &Theme) -> impl Element { + 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), + ) + } } diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs index 03a8cfce0d933c4e34caa745c8ea3f49901a5b5c..6913e1c0b6f3a0bb27de6aa2bf010c2b99016179 100644 --- a/crates/storybook/src/storybook.rs +++ b/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)