@@ -364,6 +364,30 @@ pub trait StyleHelpers: Styleable<Style = Style> {
self
}
+ fn items_start(mut self) -> Self
+ where
+ Self: Sized,
+ {
+ self.declared_style().align_items = Some(AlignItems::FlexStart);
+ self
+ }
+
+ fn items_end(mut self) -> Self
+ where
+ Self: Sized,
+ {
+ self.declared_style().align_items = Some(AlignItems::FlexEnd);
+ self
+ }
+
+ fn items_center(mut self) -> Self
+ where
+ Self: Sized,
+ {
+ self.declared_style().align_items = Some(AlignItems::Center);
+ self
+ }
+
fn justify_between(mut self) -> Self
where
Self: Sized,
@@ -1,9 +1,5 @@
use crate::theme::theme;
-use gpui2::{
- elements::div,
- style::{StyleHelpers, Styleable},
- Element, IntoElement, ParentElement, ViewContext,
-};
+use gpui2::{elements::div, style::StyleHelpers, Element, IntoElement, ParentElement, ViewContext};
use std::marker::PhantomData;
#[derive(Element)]
@@ -17,7 +13,42 @@ pub fn collab_panel<V: 'static>() -> CollabPanelElement<V> {
}
}
-// fn list_item<V: 'static>(cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+// #[derive(Element)]
+// struct ListItem {
+// label: Option<ArcCow<'static, str>>,
+// }
+
+// pub fn list_item() -> ListItem {
+// ListItem { label: None }
+// }
+
+// impl ListItem {
+// pub fn render<V: 'static>(
+// &mut self,
+// view: &mut V,
+// cx: &mut ViewContext<Self>,
+// ) -> impl Element<V> {
+// let theme = theme(cx);
+
+// div()
+// .px_2()
+// .flex()
+// .justify_between()
+// .hover()
+// .fill(theme.middle.variant.hovered.background)
+// .active()
+// .fill(theme.middle.variant.pressed.background)
+// .child(div().flex().gap_1().child("#").child(self.label))
+// .child(div().flex().gap_1().child("v"))
+// }
+
+// pub fn label(mut self, label: impl Into<ArcCow<'static, str>>) -> Self {
+// self.label = Some(label.into());
+// self
+// }
+// }
+
+// fn list_item<V: 'static>(cx: &mut ViewContext<V>, label: &mut str) -> impl IntoElement<V> {
// let theme = theme(cx);
// div()
// .px_2()
@@ -36,7 +67,6 @@ pub fn collab_panel<V: 'static>() -> CollabPanelElement<V> {
// - border (b, t, l, r, x, y)
// - border_[foo]_[size] (border_b_2, border_t_4, etc)
// - border_color
-// - items_[center, start, end]
impl<V: 'static> CollabPanelElement<V> {
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
@@ -45,16 +75,17 @@ impl<V: 'static> CollabPanelElement<V> {
// Panel
div()
.full()
- .font("Zed Sans")
+ .flex()
+ .flex_col()
+ .font("Zed Sans Extended")
.text_color(theme.middle.variant.default.foreground)
// .border_color(theme.middle.base.default.border)
.fill(theme.middle.base.default.background)
// List Container
.child(
div()
- .full()
- .fill(theme.middle.variant.default.background)
- .py_2()
+ .fill(theme.lowest.base.default.background)
+ .pb_1()
// .border_b()
//:: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
// .group()
@@ -64,20 +95,19 @@ impl<V: 'static> CollabPanelElement<V> {
.px_2()
.flex()
.justify_between()
- //:: States - https://tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active
- .hover()
- .fill(theme.middle.variant.hovered.background)
- // .focus().fill(theme.middle.variant.active.background)
- .active()
- .fill(theme.middle.variant.pressed.background)
+ // .hover()
+ // .fill(theme.middle.variant.hovered.background)
+ // .active()
+ // .fill(theme.middle.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("Collab Panel"),
+ .child("CRDB"),
)
.child(div().flex().gap_1().child("v")),
)
@@ -88,16 +118,66 @@ impl<V: 'static> CollabPanelElement<V> {
.h_7()
.flex()
.justify_between()
- // .items_center()
+ .items_center()
.child(
div()
.flex()
+ .h_full()
.gap_1()
- .child(div().w_4().h_4().child("img"))
+ .items_center()
+ .text_sm()
+ .child(
+ div()
+ .w_4()
+ .h_4()
+ .fill(theme.middle.negative.default.foreground),
+ )
.child("maxbrunsfeld"),
)
- .child(div().flex().gap_2().child("icon")),
+ .child(
+ div()
+ .flex()
+ .h_full()
+ .gap_2()
+ .items_center()
+ .child(
+ div()
+ .w_3_5()
+ .h_3_5()
+ .fill(theme.middle.negative.default.foreground),
+ )
+ .child("i"),
+ ),
),
)
+ .child(
+ div()
+ .w_full()
+ .flex()
+ .flex_col()
+ .gap_y_1()
+ // List Section Header
+ .child(
+ div()
+ .h_7()
+ .px_2()
+ .flex()
+ .justify_between()
+ .items_center()
+ .child(div().flex().gap_1().text_sm().child("CHANNELS"))
+ .child(div().flex().gap_1().text_sm().child("v")),
+ ),
+ )
+ // Large List Item
+ .child(
+ div()
+ .h_7()
+ .px_2()
+ .flex()
+ .justify_between()
+ .items_center()
+ .child(div().flex().gap_1().text_sm().child("CONTACTS"))
+ .child(div().flex().gap_1().text_sm().child("v")),
+ )
}
}