5e504d10bb
Wait https://github.com/zed-industries/zed/pull/33008, https://github.com/zed-industries/zed/pull/34804 to merge. https://github.com/user-attachments/assets/3c21ebc9-44a0-4311-bb0f-5f63fe8d4bb3 - Improved `focus_ring` to render like an outline. - Added to support press `Enter`, `Space` key to trigger Checkbox, Button, Radio. ## Break Changes - The `FocusableExt` has been changed to only for crate internal. - The `FocusableCycle` has been removed, now GPUI has it own tab stop implementation.
84 lines
2.5 KiB
Rust
84 lines
2.5 KiB
Rust
use gpui::{
|
|
px, App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled,
|
|
Window,
|
|
};
|
|
use gpui_component::{indicator::Indicator, v_flex, ActiveTheme as _, IconName, Sizable};
|
|
|
|
use crate::section;
|
|
|
|
pub struct IndicatorStory {
|
|
focus_handle: gpui::FocusHandle,
|
|
value: f32,
|
|
}
|
|
|
|
impl super::Story for IndicatorStory {
|
|
fn title() -> &'static str {
|
|
"Indicator"
|
|
}
|
|
|
|
fn description() -> &'static str {
|
|
"Displays an indicator showing the completion progress of a task."
|
|
}
|
|
|
|
fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
|
|
Self::view(window, cx)
|
|
}
|
|
}
|
|
|
|
impl IndicatorStory {
|
|
pub fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
|
|
cx.new(|cx| Self::new(window, cx))
|
|
}
|
|
|
|
fn new(_: &mut Window, cx: &mut Context<Self>) -> Self {
|
|
Self {
|
|
focus_handle: cx.focus_handle(),
|
|
value: 50.,
|
|
}
|
|
}
|
|
|
|
pub fn set_value(&mut self, value: f32) {
|
|
self.value = value;
|
|
}
|
|
}
|
|
|
|
impl Focusable for IndicatorStory {
|
|
fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {
|
|
self.focus_handle.clone()
|
|
}
|
|
}
|
|
|
|
impl Render for IndicatorStory {
|
|
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
|
v_flex()
|
|
.items_center()
|
|
.gap_y_3()
|
|
.child(section("Indicator").gap_x_2().child(Indicator::new()))
|
|
.child(
|
|
section("Indicator with color")
|
|
.gap_x_2()
|
|
.child(Indicator::new().color(cx.theme().blue))
|
|
.child(Indicator::new().color(cx.theme().green)),
|
|
)
|
|
.child(
|
|
section("Indicator with size")
|
|
.gap_x_2()
|
|
.child(Indicator::new().with_size(px(64.)))
|
|
.child(Indicator::new().large())
|
|
.child(Indicator::new())
|
|
.child(Indicator::new().small())
|
|
.child(Indicator::new().xsmall()),
|
|
)
|
|
.child(
|
|
section("Indicator with Icon")
|
|
.gap_x_2()
|
|
.child(Indicator::new().icon(IconName::LoaderCircle))
|
|
.child(
|
|
Indicator::new()
|
|
.icon(IconName::LoaderCircle)
|
|
.large()
|
|
.color(cx.theme().cyan),
|
|
),
|
|
)
|
|
}
|
|
}
|