players.rs
1use gpui::{div, img, px, Div, ParentElement, Render, Styled, ViewContext};
2use story::Story;
3
4use crate::{ActiveTheme, PlayerColors};
5
6pub struct PlayerStory;
7
8impl Render for PlayerStory {
9 type Element = Div;
10
11 fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
12 Story::container().child(
13 div()
14 .flex()
15 .flex_col()
16 .gap_4()
17 .child(Story::title_for::<PlayerColors>())
18 .child(Story::label("Player Colors"))
19 .child(
20 div()
21 .flex()
22 .flex_col()
23 .gap_1()
24 .child(
25 div().flex().gap_1().children(
26 cx.theme()
27 .players()
28 .0
29 .clone()
30 .iter_mut()
31 .map(|player| div().w_8().h_8().rounded_md().bg(player.cursor)),
32 ),
33 )
34 .child(
35 div().flex().gap_1().children(
36 cx.theme().players().0.clone().iter_mut().map(|player| {
37 div().w_8().h_8().rounded_md().bg(player.background)
38 }),
39 ),
40 )
41 .child(
42 div().flex().gap_1().children(
43 cx.theme().players().0.clone().iter_mut().map(|player| {
44 div().w_8().h_8().rounded_md().bg(player.selection)
45 }),
46 ),
47 ),
48 )
49 .child(Story::label("Avatar Rings"))
50 .child(div().flex().gap_1().children(
51 cx.theme().players().0.clone().iter_mut().map(|player| {
52 div()
53 .my_1()
54 .rounded_full()
55 .border_2()
56 .border_color(player.cursor)
57 .child(
58 img("https://avatars.githubusercontent.com/u/1714999?v=4")
59 .rounded_full()
60 .size_6()
61 .bg(gpui::red()),
62 )
63 }),
64 ))
65 .child(Story::label("Player Backgrounds"))
66 .child(div().flex().gap_1().children(
67 cx.theme().players().0.clone().iter_mut().map(|player| {
68 div()
69 .my_1()
70 .rounded_xl()
71 .flex()
72 .items_center()
73 .h_8()
74 .py_0p5()
75 .px_1p5()
76 .bg(player.background)
77 .child(
78 div()
79 .relative()
80 .neg_mx_1()
81 .rounded_full()
82 .z_index(3)
83 .border_2()
84 .border_color(player.background)
85 .size(px(28.))
86 .child(
87 img("https://avatars.githubusercontent.com/u/1714999?v=4")
88 .rounded_full()
89 .size(px(24.))
90 .bg(gpui::red()),
91 ),
92 )
93 .child(
94 div()
95 .relative()
96 .neg_mx_1()
97 .rounded_full()
98 .z_index(2)
99 .border_2()
100 .border_color(player.background)
101 .size(px(28.))
102 .child(
103 img("https://avatars.githubusercontent.com/u/1714999?v=4")
104 .rounded_full()
105 .size(px(24.))
106 .bg(gpui::red()),
107 ),
108 )
109 .child(
110 div()
111 .relative()
112 .neg_mx_1()
113 .rounded_full()
114 .z_index(1)
115 .border_2()
116 .border_color(player.background)
117 .size(px(28.))
118 .child(
119 img("https://avatars.githubusercontent.com/u/1714999?v=4")
120 .rounded_full()
121 .size(px(24.))
122 .bg(gpui::red()),
123 ),
124 )
125 }),
126 ))
127 .child(Story::label("Player Selections"))
128 .child(div().flex().flex_col().gap_px().children(
129 cx.theme().players().0.clone().iter_mut().map(|player| {
130 div()
131 .flex()
132 .child(
133 div()
134 .flex()
135 .flex_none()
136 .rounded_sm()
137 .px_0p5()
138 .text_color(cx.theme().colors().text)
139 .bg(player.selection)
140 .child("The brown fox jumped over the lazy dog."),
141 )
142 .child(div().flex_1())
143 }),
144 )),
145 )
146 }
147}