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 .mx_neg_1()
79 .rounded_full()
80 .border_2()
81 .border_color(player.background)
82 .size(px(28.))
83 .child(
84 img("https://avatars.githubusercontent.com/u/1714999?v=4")
85 .rounded_full()
86 .size(px(24.))
87 .bg(gpui::red()),
88 ),
89 )
90 .child(
91 div()
92 .relative()
93 .mx_neg_1()
94 .rounded_full()
95 .border_2()
96 .border_color(player.background)
97 .size(px(28.))
98 .child(
99 img("https://avatars.githubusercontent.com/u/1714999?v=4")
100 .rounded_full()
101 .size(px(24.))
102 .bg(gpui::red()),
103 ),
104 )
105 .child(
106 div()
107 .relative()
108 .mx_neg_1()
109 .rounded_full()
110 .border_2()
111 .border_color(player.background)
112 .size(px(28.))
113 .child(
114 img("https://avatars.githubusercontent.com/u/1714999?v=4")
115 .rounded_full()
116 .size(px(24.))
117 .bg(gpui::red()),
118 ),
119 )
120 }),
121 ))
122 .child(Story::label("Player Selections"))
123 .child(div().flex().flex_col().gap_px().children(
124 cx.theme().players().0.clone().iter_mut().map(|player| {
125 div()
126 .flex()
127 .child(
128 div()
129 .flex()
130 .flex_none()
131 .rounded_sm()
132 .px_0p5()
133 .text_color(cx.theme().colors().text)
134 .bg(player.selection)
135 .child("The brown fox jumped over the lazy dog."),
136 )
137 .child(div().flex_1())
138 }),
139 )),
140 )
141 }
142}