Marshall BowersandNate Butler
1b05aad30c
This PR extracts the `Story` component into a separate `story` crate so that it can be shared among various crates that define stories. Release Notes: - N/A --------- Co-authored-by: Nate Butler <iamnbutler@gmail.com>
138 lines
6.0 KiB
Rust
138 lines
6.0 KiB
Rust
use gpui::{div, img, px, Div, ParentElement, Render, Styled, ViewContext};
|
|
use story::Story;
|
|
|
|
use crate::{ActiveTheme, PlayerColors};
|
|
|
|
pub struct PlayerStory;
|
|
|
|
impl Render for PlayerStory {
|
|
type Element = Div;
|
|
|
|
fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
|
|
Story::container().child(
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.gap_4()
|
|
.child(Story::title_for::<PlayerColors>())
|
|
.child(Story::label("Player Colors"))
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.gap_1()
|
|
.child(
|
|
div().flex().gap_1().children(
|
|
cx.theme()
|
|
.players()
|
|
.0
|
|
.clone()
|
|
.iter_mut()
|
|
.map(|player| div().w_8().h_8().rounded_md().bg(player.cursor)),
|
|
),
|
|
)
|
|
.child(
|
|
div().flex().gap_1().children(
|
|
cx.theme().players().0.clone().iter_mut().map(|player| {
|
|
div().w_8().h_8().rounded_md().bg(player.background)
|
|
}),
|
|
),
|
|
)
|
|
.child(
|
|
div().flex().gap_1().children(
|
|
cx.theme().players().0.clone().iter_mut().map(|player| {
|
|
div().w_8().h_8().rounded_md().bg(player.selection)
|
|
}),
|
|
),
|
|
),
|
|
)
|
|
.child(Story::label("Avatar Rings"))
|
|
.child(div().flex().gap_1().children(
|
|
cx.theme().players().0.clone().iter_mut().map(|player| {
|
|
div()
|
|
.my_1()
|
|
.rounded_full()
|
|
.border_2()
|
|
.border_color(player.cursor)
|
|
.child(
|
|
img()
|
|
.rounded_full()
|
|
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
|
.size_6()
|
|
.bg(gpui::red()),
|
|
)
|
|
}),
|
|
))
|
|
.child(Story::label("Player Backgrounds"))
|
|
.child(div().flex().gap_1().children(
|
|
cx.theme().players().0.clone().iter_mut().map(|player| {
|
|
div()
|
|
.my_1()
|
|
.rounded_xl()
|
|
.flex()
|
|
.items_center()
|
|
.h_8()
|
|
.py_0p5()
|
|
.px_1p5()
|
|
.bg(player.background)
|
|
.child(
|
|
div().relative().neg_mx_1().rounded_full().z_index(3)
|
|
.border_2()
|
|
.border_color(player.background)
|
|
.size(px(28.))
|
|
.child(
|
|
img()
|
|
.rounded_full()
|
|
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
|
.size(px(24.))
|
|
.bg(gpui::red()),
|
|
),
|
|
).child(
|
|
div().relative().neg_mx_1().rounded_full().z_index(2)
|
|
.border_2()
|
|
.border_color(player.background)
|
|
.size(px(28.))
|
|
.child(
|
|
img()
|
|
.rounded_full()
|
|
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
|
.size(px(24.))
|
|
.bg(gpui::red()),
|
|
),
|
|
).child(
|
|
div().relative().neg_mx_1().rounded_full().z_index(1)
|
|
.border_2()
|
|
.border_color(player.background)
|
|
.size(px(28.))
|
|
.child(
|
|
img()
|
|
.rounded_full()
|
|
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
|
.size(px(24.))
|
|
.bg(gpui::red()),
|
|
),
|
|
)
|
|
}),
|
|
))
|
|
.child(Story::label("Player Selections"))
|
|
.child(div().flex().flex_col().gap_px().children(
|
|
cx.theme().players().0.clone().iter_mut().map(|player| {
|
|
div()
|
|
.flex()
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_none()
|
|
.rounded_sm()
|
|
.px_0p5()
|
|
.text_color(cx.theme().colors().text)
|
|
.bg(player.selection)
|
|
.child("The brown fox jumped over the lazy dog."),
|
|
)
|
|
.child(div().flex_1())
|
|
}),
|
|
)),
|
|
)
|
|
}
|
|
}
|