Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Work on sample collab_panel story in the storybook

Browse source 
Co-Authored-By: Nathan Sobo <1789+nathansobo@users.noreply.github.com>
This commit is contained in:
Nate Butler 2023-09-05 15:19:44 -04:00
parent e08c0fc4ce
commit 0695e8d3b9
4 changed files with 117 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

82
crates/storybook/src/collab_panel.rs
View file

@ -1,5 +1,9 @@
use crate::theme::theme;
use gpui2::{elements::div, style::StyleHelpers, Element, IntoElement, ParentElement, ViewContext};
use gpui2::{
elements::div,
style::{StyleHelpers, Styleable},
Element, IntoElement, ParentElement, ViewContext,
};
use std::marker::PhantomData;
#[derive(Element)]
@ -13,23 +17,87 @@ pub fn collab_panel<V: 'static>() -> CollabPanelElement<V> {
}
}
// fn list_item<V: 'static>(cx: &mut ViewContext<V>) -> impl IntoElement<V> {
// let theme = theme(cx);
// div()
// .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)
// .active()
// .fill(theme.middle.variant.pressed.background)
// .child(div().flex().gap_1().child("#").child("Collab Panel"))
// .child(div().flex().gap_1().child("v"))
// }
// Macros to impl:
// - 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> {
let theme = theme(cx);
// Panel
div()
.full()
.font("Zed Sans")
.text_color(theme.middle.variant.default.foreground)
// .border_color(theme.middle.base.default.border)
.fill(theme.middle.base.default.background)
.py_2()
// List Container
.child(
div()
.px_2()
.flex()
.justify_between()
.child("#CRDB")
.child("V"),
.full()
.fill(theme.middle.variant.default.background)
.py_2()
// .border_b()
//:: 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()
//:: 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)
.child(
div()
.flex()
.gap_1()
//:: State based on group interaction state
// .group_hover().text_color(theme.middle.variant.hovered.foreground)
.child("#")
.child("Collab Panel"),
)
.child(div().flex().gap_1().child("v")),
)
// List Item Large
.child(
div()
.px_2()
.h_7()
.flex()
.justify_between()
// .items_center()
.child(
div()
.flex()
.gap_1()
.child(div().w_4().h_4().child("img"))
.child("maxbrunsfeld"),
)
.child(div().flex().gap_2().child("icon")),
),
)
}
}