gpui-component/crates/story/src/image_story.rs
Jason Lee 5e504d10bb
chore: Refactor tab key to switch focus. (#991)
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.
2025-09-29 16:48:24 +08:00

66 lines
1.7 KiB
Rust

use crate::section;
use gpui::{
img, App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement as _,
Render, Styled, Window,
};
use gpui_component::{dock::PanelControl, v_flex};
pub struct ImageStory {
focus_handle: gpui::FocusHandle,
}
impl super::Story for ImageStory {
fn title() -> &'static str {
"Image"
}
fn description() -> &'static str {
"Image and SVG image supported."
}
fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render> {
Self::view(window, cx)
}
fn zoomable() -> Option<PanelControl> {
Some(PanelControl::Toolbar)
}
}
impl ImageStory {
pub fn new(_: &mut Window, cx: &mut App) -> Self {
Self {
focus_handle: cx.focus_handle(),
}
}
pub fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
cx.new(|cx| Self::new(window, cx))
}
}
impl Focusable for ImageStory {
fn focus_handle(&self, _: &App) -> FocusHandle {
self.focus_handle.clone()
}
}
impl Render for ImageStory {
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
// The svg file are from Assets
// See: crates/story/src/assets.rs#L21
v_flex()
.gap_4()
.size_full()
.child(section("SVG 160px").child(img("src/fixtures/google.svg").size_40().flex_grow()))
.child(
section("SVG 80px")
.child(img("src/fixtures/color-wheel.svg").size_20().flex_grow()),
)
.child(
section("SVG from img 40px").child(
img("https://pub.lbkrs.com/files/202503/vEnnmgUM6bo362ya/sdk.svg").h_24(),
),
)
}
}