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