zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-20 02:47:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Continue collab_panel

Browse Source
This commit is contained in:
Nate Butler 2023-09-05 17:13:33 -04:00
parent 0695e8d3b9
commit 477f4ddbbd
2 changed files with 125 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
crates/gpui2/src/style.rs
View File

@ -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,

122
crates/storybook/src/collab_panel.rs
View File

@ -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")),
)
}
}