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