671 lines
31 KiB
Rust
671 lines
31 KiB
Rust
use gpui::{
|
|
px, ClickEvent, FocusableView, IntoElement, ParentElement as _, Render, Styled as _, View,
|
|
ViewContext, VisualContext as _, WindowContext,
|
|
};
|
|
|
|
use ui::{
|
|
button::{Button, ButtonCustomStyle, ButtonStyled as _},
|
|
button_group::ButtonGroup,
|
|
checkbox::Checkbox,
|
|
h_flex,
|
|
prelude::FluentBuilder,
|
|
theme::{ActiveTheme, Theme},
|
|
v_flex, Disableable as _, Icon, IconName, Selectable as _, Sizable as _,
|
|
};
|
|
|
|
use crate::section;
|
|
|
|
pub struct ButtonStory {
|
|
focus_handle: gpui::FocusHandle,
|
|
disabled: bool,
|
|
loading: bool,
|
|
selected: bool,
|
|
compact: bool,
|
|
toggle_multiple: bool,
|
|
}
|
|
|
|
impl ButtonStory {
|
|
pub fn view(cx: &mut WindowContext) -> View<Self> {
|
|
cx.new_view(|cx| Self {
|
|
focus_handle: cx.focus_handle(),
|
|
disabled: false,
|
|
loading: false,
|
|
selected: false,
|
|
compact: false,
|
|
toggle_multiple: false,
|
|
})
|
|
}
|
|
|
|
fn on_click(ev: &ClickEvent, _: &mut WindowContext) {
|
|
println!("Button clicked! {:?}", ev);
|
|
}
|
|
}
|
|
|
|
impl super::Story for ButtonStory {
|
|
fn title() -> &'static str {
|
|
"Button"
|
|
}
|
|
|
|
fn description() -> &'static str {
|
|
"Displays a button or a component that looks like a button."
|
|
}
|
|
|
|
fn closeable() -> bool {
|
|
false
|
|
}
|
|
|
|
fn new_view(cx: &mut WindowContext) -> View<impl gpui::FocusableView> {
|
|
Self::view(cx)
|
|
}
|
|
}
|
|
|
|
impl FocusableView for ButtonStory {
|
|
fn focus_handle(&self, _: &gpui::AppContext) -> gpui::FocusHandle {
|
|
self.focus_handle.clone()
|
|
}
|
|
}
|
|
|
|
impl Render for ButtonStory {
|
|
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
|
let disabled = self.disabled;
|
|
let loading = self.loading;
|
|
let selected = self.selected;
|
|
let compact = self.compact;
|
|
let toggle_multiple = self.toggle_multiple;
|
|
|
|
v_flex()
|
|
.gap_6()
|
|
.child(
|
|
h_flex()
|
|
.gap_3()
|
|
.child("State")
|
|
.child(
|
|
Checkbox::new("disabled-button")
|
|
.label("Disabled")
|
|
.checked(self.disabled)
|
|
.on_click(cx.listener(|view, _, cx| {
|
|
view.disabled = !view.disabled;
|
|
cx.notify();
|
|
})),
|
|
)
|
|
.child(
|
|
Checkbox::new("loading-button")
|
|
.label("Loading")
|
|
.checked(self.loading)
|
|
.on_click(cx.listener(|view, _, cx| {
|
|
view.loading = !view.loading;
|
|
cx.notify();
|
|
})),
|
|
)
|
|
.child(
|
|
Checkbox::new("selected-button")
|
|
.label("Selected")
|
|
.checked(self.selected)
|
|
.on_click(cx.listener(|view, _, cx| {
|
|
view.selected = !view.selected;
|
|
cx.notify();
|
|
})),
|
|
)
|
|
.child(
|
|
Checkbox::new("compact-button")
|
|
.label("Compact")
|
|
.checked(self.compact)
|
|
.on_click(cx.listener(|view, _, cx| {
|
|
view.compact = !view.compact;
|
|
cx.notify();
|
|
})),
|
|
)
|
|
.child(
|
|
Checkbox::new("shadow-button")
|
|
.label("Shadow")
|
|
.checked(cx.theme().shadow)
|
|
.on_click(cx.listener(|_, _, cx| {
|
|
let mut theme = cx.theme().clone();
|
|
theme.shadow = !theme.shadow;
|
|
cx.set_global::<Theme>(theme);
|
|
cx.refresh();
|
|
})),
|
|
),
|
|
)
|
|
.child(
|
|
h_flex()
|
|
.gap_6()
|
|
.child(
|
|
section("Normal Button", cx)
|
|
.child(
|
|
Button::new("button-1")
|
|
.primary()
|
|
.label("Primary Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-2")
|
|
.label("Secondary Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-4")
|
|
.danger()
|
|
.label("Danger Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-5")
|
|
.outline()
|
|
.label("Outline Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-5-ghost")
|
|
.ghost()
|
|
.label("Ghost Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-5-link")
|
|
.link()
|
|
.label("Link Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-5-text")
|
|
.text()
|
|
.label("Text Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-6-custom")
|
|
.custom(
|
|
ButtonCustomStyle::new(cx)
|
|
.color(if cx.theme().mode.is_dark() {
|
|
ui::green_900()
|
|
} else {
|
|
ui::green_500()
|
|
})
|
|
.foreground(if cx.theme().mode.is_dark() {
|
|
ui::white()
|
|
} else {
|
|
ui::black()
|
|
})
|
|
.border(if cx.theme().mode.is_dark() {
|
|
ui::green_800()
|
|
} else {
|
|
ui::green_600()
|
|
})
|
|
.hover(if cx.theme().mode.is_dark() {
|
|
ui::green_800()
|
|
} else {
|
|
ui::green_500()
|
|
})
|
|
.active(if cx.theme().mode.is_dark() {
|
|
ui::green_950()
|
|
} else {
|
|
ui::green_600()
|
|
}),
|
|
)
|
|
.label("Custom Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
),
|
|
)
|
|
.child(
|
|
section("Button with Icon", cx)
|
|
.child(
|
|
Button::new("button-icon-1")
|
|
.primary()
|
|
.label("Confirm")
|
|
.icon(IconName::Check)
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-icon-2")
|
|
.label("Abort")
|
|
.icon(IconName::Close)
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-icon-3")
|
|
.label("Maximize")
|
|
.icon(Icon::new(IconName::Maximize))
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-icon-4")
|
|
.primary()
|
|
.child(
|
|
h_flex()
|
|
.items_center()
|
|
.gap_2()
|
|
.child("Custom Child")
|
|
.child(IconName::ChevronDown)
|
|
.child(IconName::Eye),
|
|
)
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-icon-5-ghost")
|
|
.ghost()
|
|
.icon(IconName::Check)
|
|
.label("Confirm")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-icon-6-link")
|
|
.link()
|
|
.icon(IconName::Check)
|
|
.label("Link")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-icon-6-text")
|
|
.text()
|
|
.icon(IconName::Check)
|
|
.label("Text Button")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
),
|
|
),
|
|
)
|
|
.child(
|
|
h_flex()
|
|
.gap_6()
|
|
.child(
|
|
section("Small Size", cx)
|
|
.child(
|
|
Button::new("button-6")
|
|
.label("Primary Button")
|
|
.icon(IconName::Check)
|
|
.primary()
|
|
.small()
|
|
.loading(true)
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-7")
|
|
.label("Secondary Button")
|
|
.small()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-8")
|
|
.label("Danger Button")
|
|
.danger()
|
|
.small()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-8-outline")
|
|
.label("Outline Button")
|
|
.outline()
|
|
.small()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-8-ghost")
|
|
.label("Ghost Button")
|
|
.ghost()
|
|
.small()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-8-link")
|
|
.label("Link Button")
|
|
.link()
|
|
.small()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
),
|
|
)
|
|
.child(
|
|
section("XSmall Size", cx)
|
|
.child(
|
|
Button::new("button-xs-1")
|
|
.label("Primary Button")
|
|
.primary()
|
|
.icon(IconName::Check)
|
|
.xsmall()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-xs-2")
|
|
.label("Secondary Button")
|
|
.xsmall()
|
|
.loading(true)
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-xs-3")
|
|
.label("Danger Button")
|
|
.danger()
|
|
.xsmall()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-xs-3-ghost")
|
|
.label("Ghost Button")
|
|
.ghost()
|
|
.xsmall()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-xs-3-outline")
|
|
.label("Outline Button")
|
|
.outline()
|
|
.xsmall()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-xs-3-link")
|
|
.label("Link Button")
|
|
.link()
|
|
.xsmall()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
),
|
|
),
|
|
)
|
|
.child(
|
|
section("Button Group", cx)
|
|
.child(
|
|
ButtonGroup::new("button-group")
|
|
.small()
|
|
.disabled(disabled)
|
|
.child(
|
|
Button::new("button-one")
|
|
.label("One")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-two")
|
|
.label("Two")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
)
|
|
.child(
|
|
Button::new("button-three")
|
|
.label("Three")
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.when(compact, |this| this.compact())
|
|
.on_click(Self::on_click),
|
|
),
|
|
)
|
|
.child(
|
|
h_flex()
|
|
.gap_2()
|
|
.child(
|
|
Checkbox::new("multiple-button")
|
|
.label("Multiple")
|
|
.checked(toggle_multiple)
|
|
.on_click(cx.listener(|view, _, cx| {
|
|
view.toggle_multiple = !view.toggle_multiple;
|
|
cx.notify();
|
|
})),
|
|
)
|
|
.child(
|
|
ButtonGroup::new("toggle-button-group")
|
|
.primary()
|
|
.compact()
|
|
.multiple(toggle_multiple)
|
|
.child(
|
|
Button::new("disabled-toggle-button")
|
|
.label("Disabled")
|
|
.selected(disabled),
|
|
)
|
|
.child(
|
|
Button::new("loading-toggle-button")
|
|
.label("Loading")
|
|
.selected(loading),
|
|
)
|
|
.child(
|
|
Button::new("selected-toggle-button")
|
|
.label("Selected")
|
|
.selected(selected),
|
|
)
|
|
.child(
|
|
Button::new("compact-toggle-button")
|
|
.label("Compact")
|
|
.selected(compact),
|
|
)
|
|
.on_click(cx.listener(|view, selected: &Vec<usize>, cx| {
|
|
view.disabled = selected.contains(&0);
|
|
view.loading = selected.contains(&1);
|
|
view.selected = selected.contains(&2);
|
|
view.compact = selected.contains(&3);
|
|
cx.notify();
|
|
})),
|
|
),
|
|
),
|
|
)
|
|
.child(
|
|
section("Icon Button", cx)
|
|
.child(
|
|
Button::new("icon-button-primary")
|
|
.icon(IconName::Search)
|
|
.loading_icon(IconName::LoaderCircle)
|
|
.primary()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-secondary")
|
|
.icon(IconName::Info)
|
|
.loading(true)
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-danger")
|
|
.icon(IconName::Close)
|
|
.danger()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-small-primary")
|
|
.icon(IconName::Search)
|
|
.small()
|
|
.primary()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-outline")
|
|
.icon(IconName::Search)
|
|
.outline()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-ghost")
|
|
.icon(IconName::ArrowLeft)
|
|
.loading_icon(IconName::LoaderCircle)
|
|
.ghost()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
),
|
|
)
|
|
.child(
|
|
section("Icon Button", cx)
|
|
.child(
|
|
Button::new("icon-button-4")
|
|
.icon(IconName::Info)
|
|
.small()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-5")
|
|
.icon(IconName::Close)
|
|
.small()
|
|
.danger()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-6")
|
|
.icon(IconName::Search)
|
|
.small()
|
|
.primary()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-7")
|
|
.icon(IconName::Info)
|
|
.xsmall()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-8")
|
|
.icon(IconName::Close)
|
|
.xsmall()
|
|
.danger()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
)
|
|
.child(
|
|
Button::new("icon-button-9")
|
|
.icon(IconName::Heart)
|
|
.size(px(24.))
|
|
.ghost()
|
|
.disabled(disabled)
|
|
.selected(selected)
|
|
.loading(loading)
|
|
.when(compact, |this| this.compact()),
|
|
),
|
|
)
|
|
}
|
|
}
|