1use gpui2::{px, rgb, Div, Hsla, Render};
2use ui::prelude::*;
3
4use crate::story::Story;
5
6/// A reimplementation of the MDN `z-index` example, found here:
7/// [https://developer.mozilla.org/en-US/docs/Web/CSS/z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
8pub struct ZIndexStory;
9
10impl Render for ZIndexStory {
11 type Element = Div<Self>;
12
13 fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
14 Story::container(cx)
15 .child(Story::title(cx, "z-index"))
16 .child(
17 div()
18 .flex()
19 .child(
20 div()
21 .w(px(250.))
22 .child(Story::label(cx, "z-index: auto"))
23 .child(ZIndexExample::new(0)),
24 )
25 .child(
26 div()
27 .w(px(250.))
28 .child(Story::label(cx, "z-index: 1"))
29 .child(ZIndexExample::new(1)),
30 )
31 .child(
32 div()
33 .w(px(250.))
34 .child(Story::label(cx, "z-index: 3"))
35 .child(ZIndexExample::new(3)),
36 )
37 .child(
38 div()
39 .w(px(250.))
40 .child(Story::label(cx, "z-index: 5"))
41 .child(ZIndexExample::new(5)),
42 )
43 .child(
44 div()
45 .w(px(250.))
46 .child(Story::label(cx, "z-index: 7"))
47 .child(ZIndexExample::new(7)),
48 ),
49 )
50 }
51}
52
53trait Styles: Styled + Sized {
54 // Trailing `_` is so we don't collide with `block` style `StyleHelpers`.
55 fn block_(self) -> Self {
56 self.absolute()
57 .w(px(150.))
58 .h(px(50.))
59 .text_color(rgb::<Hsla>(0x000000))
60 }
61
62 fn blue(self) -> Self {
63 self.bg(rgb::<Hsla>(0xe5e8fc))
64 .border_5()
65 .border_color(rgb::<Hsla>(0x112382))
66 .line_height(px(55.))
67 // HACK: Simulate `text-align: center`.
68 .pl(px(24.))
69 }
70
71 fn red(self) -> Self {
72 self.bg(rgb::<Hsla>(0xfce5e7))
73 .border_5()
74 .border_color(rgb::<Hsla>(0xe3a1a7))
75 // HACK: Simulate `text-align: center`.
76 .pl(px(8.))
77 }
78}
79
80impl<V: 'static> Styles for Div<V> {}
81
82#[derive(Component)]
83struct ZIndexExample {
84 z_index: u32,
85}
86
87impl ZIndexExample {
88 pub fn new(z_index: u32) -> Self {
89 Self { z_index }
90 }
91
92 fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
93 div()
94 .relative()
95 .size_full()
96 // Example element.
97 .child(
98 div()
99 .absolute()
100 .top(px(15.))
101 .left(px(15.))
102 .w(px(180.))
103 .h(px(230.))
104 .bg(rgb::<Hsla>(0xfcfbe5))
105 .text_color(rgb::<Hsla>(0x000000))
106 .border_5()
107 .border_color(rgb::<Hsla>(0xe3e0a1))
108 .line_height(px(215.))
109 // HACK: Simulate `text-align: center`.
110 .pl(px(24.))
111 .z_index(self.z_index)
112 .child(format!(
113 "z-index: {}",
114 if self.z_index == 0 {
115 "auto".to_string()
116 } else {
117 self.z_index.to_string()
118 }
119 )),
120 )
121 // Blue blocks.
122 .child(
123 div()
124 .blue()
125 .block_()
126 .top(px(0.))
127 .left(px(0.))
128 .z_index(6)
129 .child("z-index: 6"),
130 )
131 .child(
132 div()
133 .blue()
134 .block_()
135 .top(px(30.))
136 .left(px(30.))
137 .z_index(4)
138 .child("z-index: 4"),
139 )
140 .child(
141 div()
142 .blue()
143 .block_()
144 .top(px(60.))
145 .left(px(60.))
146 .z_index(2)
147 .child("z-index: 2"),
148 )
149 // Red blocks.
150 .child(
151 div()
152 .red()
153 .block_()
154 .top(px(150.))
155 .left(px(0.))
156 .child("z-index: auto"),
157 )
158 .child(
159 div()
160 .red()
161 .block_()
162 .top(px(180.))
163 .left(px(30.))
164 .child("z-index: auto"),
165 )
166 .child(
167 div()
168 .red()
169 .block_()
170 .top(px(210.))
171 .left(px(60.))
172 .child("z-index: auto"),
173 )
174 }
175}