dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

story: Add ClipboardStory (#799)

Browse source
This commit is contained in:
Jason Lee 2025-04-17 18:57:23 +08:00 committed by GitHub
parent 034e465d28
commit bef1dd2544
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 193 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
crates/story/src/clipboard_story.rs Normal file
View file

@ -0,0 +1,78 @@
use gpui::{
App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, SharedString,
Styled, Window,
};
use gpui_component::{clipboard::Clipboard, label::Label, link::Link, v_flex, ContextModal};
use crate::section;
pub struct ClipboardStory {
focus_handle: gpui::FocusHandle,
masked: bool,
}
impl super::Story for ClipboardStory {
fn title() -> &'static str {
"Clipboard"
}
fn description() -> &'static str {
"A button that helps you copy text or other content to your clipboard."
}
fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
Self::view(window, cx)
}
}
impl ClipboardStory {
pub(crate) fn new(_: &mut Window, cx: &mut App) -> Self {
Self {
focus_handle: cx.focus_handle(),
masked: false,
}
}
pub fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
cx.new(|cx| Self::new(window, cx))
}
}
impl Focusable for ClipboardStory {
fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {
self.focus_handle.clone()
}
}
impl Render for ClipboardStory {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
v_flex().gap_6().child(
section("Copy to Clipboard")
.max_w_md()
.child(
Clipboard::new("clipboard1")
.content(|_, _| Label::new("Click icon to copy"))
.value_fn({
let view = cx.entity().clone();
move |_, cx| {
SharedString::from(format!("masked :{}", view.read(cx).masked))
}
})
.on_copied(|value, window, cx| {
window.push_notification(format!("Copied value: {}", value), cx)
}),
)
.child(
Clipboard::new("clipboard2")
.content(|_, _| {
Link::new("link1")
.href("https://github.com")
.child("GitHub")
})
.value("https://github.com")
.on_copied(|value, window, cx| {
window.push_notification(format!("Copied value: {}", value), cx)
}),
),
)
}
}

159
crates/story/src/label_story.rs
View file

@ -1,17 +1,13 @@
use gpui::{ use gpui::{
div, px, rems, App, AppContext, Context, Entity, Focusable, IntoElement, Keystroke, div, px, rems, App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render,
ParentElement, Render, SharedString, Styled, Window, Styled, Window,
}; };
use gpui_component::{ use gpui_component::{
button::{Button, ButtonVariant, ButtonVariants as _}, button::{Button, ButtonVariant, ButtonVariants as _},
clipboard::Clipboard, green_500, h_flex,
h_flex,
label::Label, label::Label,
link::Link, v_flex, IconName, StyledExt,
red_500,
tag::Tag,
v_flex, yellow_500, yellow_800, ColorName, IconName, Kbd, Sizable, StyledExt,
}; };
use crate::section; use crate::section;
@ -63,22 +59,36 @@ impl Render for LabelStory {
.gap_6() .gap_6()
.child( .child(
section("Label") section("Label")
.max_w_md()
.items_start() .items_start()
.child(Label::new("This is a label")),
)
.child( .child(
section("Alignment").max_w_md().child(
v_flex() v_flex()
.w_full() .w_full()
.gap_4() .gap_4()
.child(Label::new("Text align left")) .child(Label::new("Text align left"))
.child(Label::new("Text align center").text_center()) .child(Label::new("Text align center").text_center())
.child(Label::new("Text align right").text_right()), .child(Label::new("Text align right").text_right()),
),
) )
.child(Label::new("Color Label").text_color(red_500()))
.child( .child(
section("Label with color")
.max_w_md()
.child(Label::new("Color Label").text_color(green_500())),
)
.child(
section("Font Size").max_w_md().child(
Label::new("Font Size Label") Label::new("Font Size Label")
.text_size(px(20.)) .text_size(px(20.))
.font_semibold() .font_semibold()
.line_height(rems(1.8)), .line_height(rems(1.8)),
),
) )
.child(
section("Multi-line, line-height and text wrap")
.max_w_md()
.child( .child(
div().w(px(200.)).child( div().w(px(200.)).child(
Label::new( Label::new(
@ -90,84 +100,7 @@ impl Render for LabelStory {
), ),
) )
.child( .child(
h_flex() section("Maksed Label").max_w_md().child(
.gap_3()
.child(
section("Link").child(
h_flex()
.items_start()
.gap_3()
.child(
Link::new("link1")
.href("https://github.com")
.child("GitHub"),
)
.child(
Link::new("link2")
.href("https://github.com")
.text_color(red_500())
.text_decoration_color(red_500())
.child("Red Link"),
)
.child(
Link::new("link3")
.child(
h_flex()
.gap_1()
.child(IconName::GitHub)
.child("GitHub"),
)
.on_click(cx.listener(|_, _, _, cx| {
cx.open_url("https://google.com")
})),
)
.child(
div().w(px(250.)).child(
Link::new("link4")
.child("https://github.com/longbridge/gpui-component")
.href("https://github.com/longbridge/gpui-component"),
),
),
),
)
.child(
section("Clipboard").child(
h_flex()
.w_full()
.gap_4()
.child(
Clipboard::new("clipboard1")
.content(|_, _| Label::new("Click icon to copy"))
.value_fn({
let view = cx.entity().clone();
move |_, cx| {
SharedString::from(format!(
"masked :{}",
view.read(cx).masked
))
}
})
.on_copied(|value, _, _| {
println!("Copied value: {}", value)
}),
)
.child(
Clipboard::new("clipboard2")
.content(|_, _| {
Link::new("link1")
.href("https://github.com")
.child("GitHub")
})
.value("https://github.com")
.on_copied(|value, _, _| {
println!("Copied value: {}", value)
}),
),
),
),
)
.child(
section("Maksed Label").child(
v_flex() v_flex()
.w_full() .w_full()
.gap_4() .gap_4()
@ -190,57 +123,5 @@ impl Render for LabelStory {
.child(Label::new("500 USD").text_xl().masked(self.masked)), .child(Label::new("500 USD").text_xl().masked(self.masked)),
), ),
) )
.child(
section("Tag")
.child(
h_flex()
.gap_2()
.child(Tag::primary().small().child("Tag"))
.child(Tag::secondary().small().child("Secondary"))
.child(Tag::outline().small().child("Outline"))
.child(Tag::danger().small().child("danger"))
.child(
Tag::custom(yellow_500(), yellow_800(), yellow_500())
.small()
.child("Custom"),
),
)
.child(
h_flex()
.gap_2()
.child(Tag::primary().child("Tag"))
.child(Tag::secondary().child("Secondary"))
.child(Tag::outline().child("Outline"))
.child(Tag::danger().child("danger"))
.child(
Tag::custom(yellow_500(), yellow_800(), yellow_500())
.child("Custom"),
),
),
)
.child(
section("Tag::color").child(
v_flex().gap_4().child(
h_flex().gap_2().flex_wrap().children(
ColorName::all()
.into_iter()
.filter(|color| *color != ColorName::Gray)
.map(|color| Tag::color(color).child(color.to_string())),
),
),
),
)
.child(
section("Kbd").child(
h_flex()
.gap_2()
.child(Kbd::new(Keystroke::parse("cmd-shift-p").unwrap()))
.child(Kbd::new(Keystroke::parse("cmd-ctrl-t").unwrap()))
.child(Kbd::new(Keystroke::parse("escape").unwrap()))
.child(Kbd::new(Keystroke::parse("backspace").unwrap()))
.child(Kbd::new(Keystroke::parse("/").unwrap()))
.child(Kbd::new(Keystroke::parse("enter").unwrap())),
),
)
} }
} }

2
crates/story/src/lib.rs
View file

@ -5,6 +5,7 @@ mod badge_story;
mod button_story; mod button_story;
mod calendar_story; mod calendar_story;
mod checkbox_story; mod checkbox_story;
mod clipboard_story;
mod drawer_story; mod drawer_story;
mod dropdown_story; mod dropdown_story;
mod form_story; mod form_story;
@ -52,6 +53,7 @@ pub use badge_story::BadgeStory;
pub use button_story::ButtonStory; pub use button_story::ButtonStory;
pub use calendar_story::CalendarStory; pub use calendar_story::CalendarStory;
pub use checkbox_story::CheckboxStory; pub use checkbox_story::CheckboxStory;
pub use clipboard_story::ClipboardStory;
pub use drawer_story::DrawerStory; pub use drawer_story::DrawerStory;
pub use dropdown_story::DropdownStory; pub use dropdown_story::DropdownStory;
pub use form_story::FormStory; pub use form_story::FormStory;

1
crates/story/src/main.rs
View file

@ -28,6 +28,7 @@ impl Gallery {
StoryContainer::panel::<BadgeStory>(window, cx), StoryContainer::panel::<BadgeStory>(window, cx),
StoryContainer::panel::<ButtonStory>(window, cx), StoryContainer::panel::<ButtonStory>(window, cx),
StoryContainer::panel::<CheckboxStory>(window, cx), StoryContainer::panel::<CheckboxStory>(window, cx),
StoryContainer::panel::<ClipboardStory>(window, cx),
StoryContainer::panel::<DropdownStory>(window, cx), StoryContainer::panel::<DropdownStory>(window, cx),
StoryContainer::panel::<DrawerStory>(window, cx), StoryContainer::panel::<DrawerStory>(window, cx),
StoryContainer::panel::<FormStory>(window, cx), StoryContainer::panel::<FormStory>(window, cx),

5
crates/ui/src/accordion.rs
View file

@ -217,7 +217,9 @@ impl RenderOnce for AccordionItem {
_ => rems(1.0), _ => rems(1.0),
}; };
div().flex_1().child(
v_flex() v_flex()
.w_full()
.bg(cx.theme().accordion) .bg(cx.theme().accordion)
.overflow_hidden() .overflow_hidden()
.when(self.bordered, |this| { .when(self.bordered, |this| {
@ -294,6 +296,7 @@ impl RenderOnce for AccordionItem {
}) })
.child(self.content), .child(self.content),
) )
}) }),
)
} }
} }