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