Start sketching a collab panel in storybook

Nathan Sobo and Nate Butler created 2 years ago

Co-Authored-By: Nate Butler <[e-mail]>

Change summary

crates/gpui2/src/style.rs                    | 40 ++++++++++++++++++++++
crates/gpui2_macros/src/styleable_helpers.rs |  5 ++
crates/storybook/src/collab_panel.rs         | 34 ++++++++++++++++++
crates/storybook/src/storybook.rs            |  7 ++-
4 files changed, 83 insertions(+), 3 deletions(-)

Detailed changes

crates/gpui2/src/style.rs

@@ -359,6 +359,46 @@ pub trait StyleHelpers: Styleable<Style = Style> {
         self
     }
 
+    fn justify_between(mut self) -> Self
+    where
+        Self: Sized,
+    {
+        self.declared_style().justify_content = Some(JustifyContent::SpaceBetween);
+        self
+    }
+
+    fn justify_center(mut self) -> Self
+    where
+        Self: Sized,
+    {
+        self.declared_style().justify_content = Some(JustifyContent::Center);
+        self
+    }
+
+    fn justify_start(mut self) -> Self
+    where
+        Self: Sized,
+    {
+        self.declared_style().justify_content = Some(JustifyContent::Start);
+        self
+    }
+
+    fn justify_end(mut self) -> Self
+    where
+        Self: Sized,
+    {
+        self.declared_style().justify_content = Some(JustifyContent::End);
+        self
+    }
+
+    fn justify_around(mut self) -> Self
+    where
+        Self: Sized,
+    {
+        self.declared_style().justify_content = Some(JustifyContent::SpaceAround);
+        self
+    }
+
     fn fill<F>(mut self, fill: F) -> Self
     where
         F: Into<Fill>,

crates/gpui2_macros/src/styleable_helpers.rs

@@ -138,6 +138,11 @@ fn tailwind_prefixes() -> Vec<(&'static str, bool, Vec<TokenStream2>)> {
             false,
             vec![quote! { padding.left }, quote! { padding.right }],
         ),
+        (
+            "py",
+            false,
+            vec![quote! { padding.top }, quote! { padding.bottom }],
+        ),
         ("pl", false, vec![quote! { padding.left }]),
         ("pr", false, vec![quote! { padding.right }]),
         ("top", true, vec![quote! { inset.top }]),

crates/storybook/src/collab_panel.rs

@@ -0,0 +1,34 @@
+use crate::theme::theme;
+use gpui2::{elements::div, style::StyleHelpers, Element, IntoElement, ParentElement, ViewContext};
+use std::marker::PhantomData;
+
+#[derive(Element)]
+pub struct CollabPanelElement<V: 'static> {
+    view_type: PhantomData<V>,
+}
+
+pub fn collab_panel<V: 'static>() -> CollabPanelElement<V> {
+    CollabPanelElement {
+        view_type: PhantomData,
+    }
+}
+
+impl<V: 'static> CollabPanelElement<V> {
+    fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .full()
+            .text_color(theme.middle.variant.default.foreground)
+            .fill(theme.middle.base.default.background)
+            .py_2()
+            .child(
+                div()
+                    .px_2()
+                    .flex()
+                    .justify_between()
+                    .child("#CRDB")
+                    .child("V"),
+            )
+    }
+}

crates/storybook/src/storybook.rs

@@ -1,14 +1,15 @@
 #![allow(dead_code, unused_variables)]
 use crate::theme::Theme;
 use ::theme as legacy_theme;
+use collab_panel::collab_panel;
 use element_ext::ElementExt;
 use gpui2::{serde_json, vec2f, view, Element, RectF, ViewContext, WindowBounds};
 use legacy_theme::ThemeSettings;
 use log::LevelFilter;
 use settings::{default_settings, SettingsStore};
 use simplelog::SimpleLogger;
-use workspace::workspace;
 
+mod collab_panel;
 mod components;
 mod element_ext;
 mod theme;
@@ -27,7 +28,7 @@ fn main() {
 
         cx.add_window(
             gpui2::WindowOptions {
-                bounds: WindowBounds::Fixed(RectF::new(vec2f(0., 0.), vec2f(400., 300.))),
+                bounds: WindowBounds::Fixed(RectF::new(vec2f(0., 0.), vec2f(260., 800.))),
                 center: true,
                 ..Default::default()
             },
@@ -38,7 +39,7 @@ fn main() {
 }
 
 fn storybook<V: 'static>(cx: &mut ViewContext<V>) -> impl Element<V> {
-    workspace().themed(current_theme(cx))
+    collab_panel().themed(current_theme(cx))
 }
 
 // Nathan: During the transition, we will include the base theme on the legacy Theme struct.