Extract Story into separate story crate (#3378)
This PR extracts the `Story` component into a separate `story` crate so that it can be shared among various crates that define stories. Release Notes: - N/A --------- Co-authored-by: Nate Butler <iamnbutler@gmail.com>
This commit is contained in:
Marshall Bowers
co-authored by
Nate Butler
Nate Butler
parent
f4b4bdfd83
commit
1b05aad30c
@@ -1,38 +0,0 @@
|
||||
use gpui::{div, Div, Element, ParentElement, SharedString, Styled, WindowContext};
|
||||
|
||||
use crate::ActiveTheme;
|
||||
|
||||
pub struct Story {}
|
||||
|
||||
impl Story {
|
||||
pub fn container(cx: &mut WindowContext) -> Div {
|
||||
div()
|
||||
.size_full()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.pt_2()
|
||||
.px_4()
|
||||
.font("Zed Mono")
|
||||
.bg(cx.theme().colors().background)
|
||||
}
|
||||
|
||||
pub fn title(cx: &mut WindowContext, title: SharedString) -> impl Element {
|
||||
div()
|
||||
.text_xl()
|
||||
.text_color(cx.theme().colors().text)
|
||||
.child(title)
|
||||
}
|
||||
|
||||
pub fn title_for<T>(cx: &mut WindowContext) -> impl Element {
|
||||
Self::title(cx, std::any::type_name::<T>().into())
|
||||
}
|
||||
|
||||
pub fn label(cx: &mut WindowContext, label: impl Into<SharedString>) -> impl Element {
|
||||
div()
|
||||
.mt_4()
|
||||
.mb_2()
|
||||
.text_xs()
|
||||
.text_color(cx.theme().colors().text)
|
||||
.child(label.into())
|
||||
}
|
||||
}
|
||||
@@ -4,8 +4,14 @@ mod status;
|
||||
mod syntax;
|
||||
mod system;
|
||||
|
||||
#[cfg(feature = "stories")]
|
||||
mod stories;
|
||||
|
||||
pub use colors::*;
|
||||
pub use players::*;
|
||||
pub use status::*;
|
||||
pub use syntax::*;
|
||||
pub use system::*;
|
||||
|
||||
#[cfg(feature = "stories")]
|
||||
pub use stories::*;
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
use gpui::Hsla;
|
||||
|
||||
use crate::{amber, blue, jade, lime, orange, pink, purple, red};
|
||||
|
||||
#[derive(Debug, Clone, Copy, Default)]
|
||||
pub struct PlayerColor {
|
||||
pub cursor: Hsla,
|
||||
@@ -133,141 +135,3 @@ impl PlayerColors {
|
||||
self.0[(participant_index as usize % len) + 1]
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "stories")]
|
||||
pub use stories::*;
|
||||
|
||||
use crate::{amber, blue, jade, lime, orange, pink, purple, red};
|
||||
|
||||
#[cfg(feature = "stories")]
|
||||
mod stories {
|
||||
use super::*;
|
||||
use crate::{ActiveTheme, Story};
|
||||
use gpui::{div, img, px, Div, ParentElement, Render, Styled, ViewContext};
|
||||
|
||||
pub struct PlayerStory;
|
||||
|
||||
impl Render for PlayerStory {
|
||||
type Element = Div;
|
||||
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
|
||||
Story::container(cx).child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_4()
|
||||
.child(Story::title_for::<PlayerColors>(cx))
|
||||
.child(Story::label(cx, "Player Colors"))
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(
|
||||
div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div().w_8().h_8().rounded_md().bg(player.cursor)
|
||||
}),
|
||||
),
|
||||
)
|
||||
.child(div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div().w_8().h_8().rounded_md().bg(player.background)
|
||||
}),
|
||||
))
|
||||
.child(div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div().w_8().h_8().rounded_md().bg(player.selection)
|
||||
}),
|
||||
)),
|
||||
)
|
||||
.child(Story::label(cx, "Avatar Rings"))
|
||||
.child(div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div()
|
||||
.my_1()
|
||||
.rounded_full()
|
||||
.border_2()
|
||||
.border_color(player.cursor)
|
||||
.child(
|
||||
img()
|
||||
.rounded_full()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size_6()
|
||||
.bg(gpui::red()),
|
||||
)
|
||||
}),
|
||||
))
|
||||
.child(Story::label(cx, "Player Backgrounds"))
|
||||
.child(div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div()
|
||||
.my_1()
|
||||
.rounded_xl()
|
||||
.flex()
|
||||
.items_center()
|
||||
.h_8()
|
||||
.py_0p5()
|
||||
.px_1p5()
|
||||
.bg(player.background)
|
||||
.child(
|
||||
div().relative().neg_mx_1().rounded_full().z_index(3)
|
||||
.border_2()
|
||||
.border_color(player.background)
|
||||
.size(px(28.))
|
||||
.child(
|
||||
img()
|
||||
.rounded_full()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size(px(24.))
|
||||
.bg(gpui::red()),
|
||||
),
|
||||
).child(
|
||||
div().relative().neg_mx_1().rounded_full().z_index(2)
|
||||
.border_2()
|
||||
.border_color(player.background)
|
||||
.size(px(28.))
|
||||
.child(
|
||||
img()
|
||||
.rounded_full()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size(px(24.))
|
||||
.bg(gpui::red()),
|
||||
),
|
||||
).child(
|
||||
div().relative().neg_mx_1().rounded_full().z_index(1)
|
||||
.border_2()
|
||||
.border_color(player.background)
|
||||
.size(px(28.))
|
||||
.child(
|
||||
img()
|
||||
.rounded_full()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size(px(24.))
|
||||
.bg(gpui::red()),
|
||||
),
|
||||
)
|
||||
}),
|
||||
))
|
||||
.child(Story::label(cx, "Player Selections"))
|
||||
.child(div().flex().flex_col().gap_px().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div()
|
||||
.flex()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.rounded_sm()
|
||||
.px_0p5()
|
||||
.text_color(cx.theme().colors().text)
|
||||
.bg(player.selection)
|
||||
.child("The brown fox jumped over the lazy dog."),
|
||||
)
|
||||
.child(div().flex_1())
|
||||
}),
|
||||
)),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
use gpui::prelude::*;
|
||||
use gpui::{div, px, Div, ViewContext};
|
||||
use story::Story;
|
||||
|
||||
use crate::{default_color_scales, ColorScaleStep};
|
||||
|
||||
pub struct ColorsStory;
|
||||
|
||||
impl Render for ColorsStory {
|
||||
type Element = Div;
|
||||
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
|
||||
let color_scales = default_color_scales();
|
||||
|
||||
Story::container().child(Story::title("Colors")).child(
|
||||
div()
|
||||
.id("colors")
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.overflow_y_scroll()
|
||||
.text_color(gpui::white())
|
||||
.children(color_scales.into_iter().map(|scale| {
|
||||
div()
|
||||
.flex()
|
||||
.child(
|
||||
div()
|
||||
.w(px(75.))
|
||||
.line_height(px(24.))
|
||||
.child(scale.name().clone()),
|
||||
)
|
||||
.child(
|
||||
div().flex().gap_1().children(
|
||||
ColorScaleStep::ALL
|
||||
.map(|step| div().flex().size_6().bg(scale.step(cx, step))),
|
||||
),
|
||||
)
|
||||
})),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
mod color;
|
||||
mod players;
|
||||
|
||||
pub use color::*;
|
||||
pub use players::*;
|
||||
@@ -0,0 +1,137 @@
|
||||
use gpui::{div, img, px, Div, ParentElement, Render, Styled, ViewContext};
|
||||
use story::Story;
|
||||
|
||||
use crate::{ActiveTheme, PlayerColors};
|
||||
|
||||
pub struct PlayerStory;
|
||||
|
||||
impl Render for PlayerStory {
|
||||
type Element = Div;
|
||||
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
|
||||
Story::container().child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_4()
|
||||
.child(Story::title_for::<PlayerColors>())
|
||||
.child(Story::label("Player Colors"))
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(
|
||||
div().flex().gap_1().children(
|
||||
cx.theme()
|
||||
.players()
|
||||
.0
|
||||
.clone()
|
||||
.iter_mut()
|
||||
.map(|player| div().w_8().h_8().rounded_md().bg(player.cursor)),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div().w_8().h_8().rounded_md().bg(player.background)
|
||||
}),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div().w_8().h_8().rounded_md().bg(player.selection)
|
||||
}),
|
||||
),
|
||||
),
|
||||
)
|
||||
.child(Story::label("Avatar Rings"))
|
||||
.child(div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div()
|
||||
.my_1()
|
||||
.rounded_full()
|
||||
.border_2()
|
||||
.border_color(player.cursor)
|
||||
.child(
|
||||
img()
|
||||
.rounded_full()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size_6()
|
||||
.bg(gpui::red()),
|
||||
)
|
||||
}),
|
||||
))
|
||||
.child(Story::label("Player Backgrounds"))
|
||||
.child(div().flex().gap_1().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div()
|
||||
.my_1()
|
||||
.rounded_xl()
|
||||
.flex()
|
||||
.items_center()
|
||||
.h_8()
|
||||
.py_0p5()
|
||||
.px_1p5()
|
||||
.bg(player.background)
|
||||
.child(
|
||||
div().relative().neg_mx_1().rounded_full().z_index(3)
|
||||
.border_2()
|
||||
.border_color(player.background)
|
||||
.size(px(28.))
|
||||
.child(
|
||||
img()
|
||||
.rounded_full()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size(px(24.))
|
||||
.bg(gpui::red()),
|
||||
),
|
||||
).child(
|
||||
div().relative().neg_mx_1().rounded_full().z_index(2)
|
||||
.border_2()
|
||||
.border_color(player.background)
|
||||
.size(px(28.))
|
||||
.child(
|
||||
img()
|
||||
.rounded_full()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size(px(24.))
|
||||
.bg(gpui::red()),
|
||||
),
|
||||
).child(
|
||||
div().relative().neg_mx_1().rounded_full().z_index(1)
|
||||
.border_2()
|
||||
.border_color(player.background)
|
||||
.size(px(28.))
|
||||
.child(
|
||||
img()
|
||||
.rounded_full()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size(px(24.))
|
||||
.bg(gpui::red()),
|
||||
),
|
||||
)
|
||||
}),
|
||||
))
|
||||
.child(Story::label("Player Selections"))
|
||||
.child(div().flex().flex_col().gap_px().children(
|
||||
cx.theme().players().0.clone().iter_mut().map(|player| {
|
||||
div()
|
||||
.flex()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.rounded_sm()
|
||||
.px_0p5()
|
||||
.text_color(cx.theme().colors().text)
|
||||
.bg(player.selection)
|
||||
.child("The brown fox jumped over the lazy dog."),
|
||||
)
|
||||
.child(div().flex_1())
|
||||
}),
|
||||
)),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -144,8 +144,3 @@ pub struct DiagnosticStyle {
|
||||
pub hint: Hsla,
|
||||
pub ignored: Hsla,
|
||||
}
|
||||
|
||||
#[cfg(feature = "stories")]
|
||||
mod story;
|
||||
#[cfg(feature = "stories")]
|
||||
pub use story::*;
|
||||
|
||||
Reference in New Issue
Block a user