Add new default player colors and the players story.

This commit is contained in:
Nate Butler 2023-11-07 21:51:12 -05:00
parent 79b4f78cb3
commit 0dd6ea6d41

View file

@ -40,7 +40,7 @@ pub use stories::*;
mod stories { mod stories {
use super::*; use super::*;
use crate::{ActiveTheme, Story}; use crate::{ActiveTheme, Story};
use gpui::{div, Div, ParentElement, Render, Styled, ViewContext}; use gpui::{div, img, px, Div, ParentElement, Render, Styled, ViewContext};
pub struct PlayerStory; pub struct PlayerStory;
@ -48,39 +48,123 @@ mod stories {
type Element = Div<Self>; type Element = Div<Self>;
fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element { fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
Story::container(cx) Story::container(cx).child(
.child(Story::title_for::<_, PlayerColors>(cx)) div()
.child(Story::label(cx, "Player Colors")) .flex()
.child( .flex_col()
div() .gap_4()
.flex() .child(Story::title_for::<_, PlayerColors>(cx))
.flex_col() .child(Story::label(cx, "Player Colors"))
.gap_1() .child(
.child( div()
div().flex().gap_1().children( .flex()
cx.theme() .flex_col()
.players() .gap_1()
.0 .child(
.clone() div().flex().gap_1().children(
.iter_mut() cx.theme().players().0.clone().iter_mut().map(|player| {
.map(|color| div().w_8().h_8().rounded_md().bg(color.cursor)), div().w_8().h_8().rounded_md().bg(player.cursor)
), }),
) ),
.child( )
div().flex().gap_1().children( .child(div().flex().gap_1().children(
cx.theme().players().0.clone().iter_mut().map(|color| { cx.theme().players().0.clone().iter_mut().map(|player| {
div().w_8().h_8().rounded_md().bg(color.background) div().w_8().h_8().rounded_md().bg(player.background)
}), }),
), ))
) .child(div().flex().gap_1().children(
.child( cx.theme().players().0.clone().iter_mut().map(|player| {
div().flex().gap_1().children( div().w_8().h_8().rounded_md().bg(player.selection)
cx.theme().players().0.clone().iter_mut().map(|color| {
div().w_8().h_8().rounded_md().bg(color.selection)
}), }),
)),
)
.child(Story::label(cx, "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(cx, "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(cx, "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())
}),
)),
)
} }
} }
} }