From 7610028a8904f6d1671cf472d0d6961e2bb22639 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Mon, 9 Oct 2023 18:00:49 -0400 Subject: [PATCH] Add a story showcasing z-index --- crates/storybook2/src/stories/elements.rs | 1 + .../src/stories/elements/z_index.rs | 189 ++++++++++++++++++ crates/storybook2/src/story_selector.rs | 2 + 3 files changed, 192 insertions(+) create mode 100644 crates/storybook2/src/stories/elements/z_index.rs diff --git a/crates/storybook2/src/stories/elements.rs b/crates/storybook2/src/stories/elements.rs index ec9a6aa86e65f41fc51260ac4d733282760fa86e..1807e0efdc3f8f0ff93ce6c8a2abf8386a5e9a4b 100644 --- a/crates/storybook2/src/stories/elements.rs +++ b/crates/storybook2/src/stories/elements.rs @@ -4,3 +4,4 @@ pub mod details; pub mod icon; pub mod input; pub mod label; +pub mod z_index; diff --git a/crates/storybook2/src/stories/elements/z_index.rs b/crates/storybook2/src/stories/elements/z_index.rs new file mode 100644 index 0000000000000000000000000000000000000000..fa1095f64b5617b5cb981d2596a0e91a18f9b8b5 --- /dev/null +++ b/crates/storybook2/src/stories/elements/z_index.rs @@ -0,0 +1,189 @@ +use std::marker::PhantomData; + +use gpui3::{px, rgb, Div, Hsla}; +use ui::prelude::*; + +use crate::story::Story; + +/// A reimplementation of the MDN `z-index` example, found here: +/// [https://developer.mozilla.org/en-US/docs/Web/CSS/z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). +#[derive(Element)] +pub struct ZIndexStory { + state_type: PhantomData, +} + +impl ZIndexStory { + pub fn new() -> Self { + Self { + state_type: PhantomData, + } + } + + fn render(&mut self, cx: &mut ViewContext) -> impl Element { + Story::container(cx) + .child(Story::title(cx, "z-index")) + .child( + div() + .flex() + .child( + div() + .w(px(250.)) + .child(Story::label(cx, "z-index: auto")) + .child(ZIndexExample::new(0)), + ) + .child( + div() + .w(px(250.)) + .child(Story::label(cx, "z-index: 1")) + .child(ZIndexExample::new(1)), + ) + .child( + div() + .w(px(250.)) + .child(Story::label(cx, "z-index: 3")) + .child(ZIndexExample::new(3)), + ) + .child( + div() + .w(px(250.)) + .child(Story::label(cx, "z-index: 5")) + .child(ZIndexExample::new(5)), + ) + .child( + div() + .w(px(250.)) + .child(Story::label(cx, "z-index: 7")) + .child(ZIndexExample::new(7)), + ), + ) + } +} + +trait Styles: StyleHelpers { + fn blocks(self) -> Self { + self.absolute() + .w(px(150.)) + .h(px(50.)) + .text_color(rgb::(0x000000)) + } + + fn blue(self) -> Self { + self.fill(rgb::(0xe5e8fc)) + .border_5() + .border_color(rgb::(0x112382)) + // HACK: Simulate `line-height: 55px`. + .pt(px(16.)) + // HACK: Simulate `text-align: center`. + .pl(px(24.)) + } + + fn red(self) -> Self { + self.fill(rgb::(0xfce5e7)) + .border_5() + .border_color(rgb::(0xe3a1a7)) + // HACK: Simulate `text-align: center`. + .pl(px(8.)) + } +} + +impl Styles for Div {} + +#[derive(Element)] +struct ZIndexExample { + state_type: PhantomData, + z_index: u32, +} + +impl ZIndexExample { + pub fn new(z_index: u32) -> Self { + Self { + state_type: PhantomData, + z_index, + } + } + + fn render(&mut self, cx: &mut ViewContext) -> impl Element { + div() + .relative() + .size_full() + // Example element. + .child( + div() + .absolute() + .top(px(15.)) + .left(px(15.)) + .w(px(180.)) + .h(px(230.)) + .fill(rgb::(0xfcfbe5)) + .text_color(rgb::(0x000000)) + .border_5() + .border_color(rgb::(0xe3e0a1)) + // HACK: Simulate `line-height: 215px`. + .pt(px(100.)) + // HACK: Simulate `text-align: center`. + .pl(px(24.)) + .z_index(self.z_index) + .child(format!( + "z-index: {}", + if self.z_index == 0 { + "auto".to_string() + } else { + self.z_index.to_string() + } + )), + ) + // Blue blocks. + .child( + div() + .blue() + .blocks() + .top(px(0.)) + .left(px(0.)) + .z_index(6) + .child("z-index: 6"), + ) + .child( + div() + .blue() + .blocks() + .top(px(30.)) + .left(px(30.)) + .z_index(4) + .child("z-index: 4"), + ) + .child( + div() + .blue() + .blocks() + .top(px(60.)) + .left(px(60.)) + .z_index(2) + .child("z-index: 2"), + ) + // Red blocks. + .child( + div() + .red() + .blocks() + .top(px(150.)) + .left(px(0.)) + .child("z-index: auto"), + ) + .child( + div() + .red() + .blocks() + .top(px(180.)) + .left(px(30.)) + .child("z-index: auto"), + ) + .child( + div() + .red() + .blocks() + .top(px(210.)) + .left(px(60.)) + .child("z-index: auto"), + ) + } +} diff --git a/crates/storybook2/src/story_selector.rs b/crates/storybook2/src/story_selector.rs index 2b0f4c8b536ea3efa2402b23e097de02a2450ee5..07e29e5bef0b4512a57af5f13336439bcd6fe91d 100644 --- a/crates/storybook2/src/story_selector.rs +++ b/crates/storybook2/src/story_selector.rs @@ -18,6 +18,7 @@ pub enum ElementStory { Icon, Input, Label, + ZIndex, } impl ElementStory { @@ -31,6 +32,7 @@ impl ElementStory { Self::Icon => elements::icon::IconStory::new().into_any(), Self::Input => elements::input::InputStory::new().into_any(), Self::Label => elements::label::LabelStory::new().into_any(), + Self::ZIndex => elements::z_index::ZIndexStory::new().into_any(), } } }