mirror of
https://github.com/zed-industries/zed.git
synced 2025-02-03 17:44:30 +00:00
516f7b3642
Some checks are pending
CI / Check Postgres and Protobuf migrations, mergability (push) Waiting to run
CI / Check formatting and spelling (push) Waiting to run
CI / (macOS) Run Clippy and tests (push) Waiting to run
CI / (Linux) Run Clippy and tests (push) Waiting to run
CI / (Linux) Build Remote Server (push) Waiting to run
CI / (Windows) Run Clippy and tests (push) Waiting to run
CI / Create a macOS bundle (push) Blocked by required conditions
CI / Create a Linux bundle (push) Blocked by required conditions
CI / Create arm64 Linux bundle (push) Blocked by required conditions
Deploy Docs / Deploy Docs (push) Waiting to run
Docs / Check formatting (push) Waiting to run
@iamnbutler edit: This pull request enhances the image element by introducing the ability to display loading and fallback states. Changes: - Implemented the loading and fallback states for image elements using `.with_loading` and `.with_fallback` respectively. - Introduced the `StyledImage` trait and `ImageStyle` to enable a fluent API for changing image styles across image types (`Img`, `Stateful<Img>`, etc). Example Usage: ```rust fn loading_element() -> impl IntoElement { div().size_full().flex_none().p_0p5().rounded_sm().child( div().size_full().with_animation( "loading-bg", Animation::new(Duration::from_secs(3)) .repeat() .with_easing(pulsating_between(0.04, 0.24)), move |this, delta| this.bg(black().opacity(delta)), ), ) } fn fallback_element() -> impl IntoElement { let fallback_color: Hsla = black().opacity(0.5); div().size_full().flex_none().p_0p5().child( div() .size_full() .flex() .items_center() .justify_center() .rounded_sm() .text_sm() .text_color(fallback_color) .border_1() .border_color(fallback_color) .child("?"), ) } impl Render for ImageLoadingExample { fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement { img("some/image/path") .id("image-1") .with_fallback(|| Self::fallback_element().into_any_element()) .with_loading(|| Self::loading_element().into_any_element()) } } ``` Note: An `Img` must have an `id` to be able to add a loading state. Release Notes: - N/A --------- Co-authored-by: nate <nate@zed.dev> Co-authored-by: michael <michael@zed.dev> Co-authored-by: Nate Butler <iamnbutler@gmail.com> Co-authored-by: Antonio Scandurra <me@as-cii.com>
167 lines
4.9 KiB
Rust
167 lines
4.9 KiB
Rust
use std::path::PathBuf;
|
|
use std::str::FromStr;
|
|
use std::sync::Arc;
|
|
|
|
use gpui::*;
|
|
use std::fs;
|
|
|
|
struct Assets {
|
|
base: PathBuf,
|
|
}
|
|
|
|
impl AssetSource for Assets {
|
|
fn load(&self, path: &str) -> Result<Option<std::borrow::Cow<'static, [u8]>>> {
|
|
fs::read(self.base.join(path))
|
|
.map(|data| Some(std::borrow::Cow::Owned(data)))
|
|
.map_err(|e| e.into())
|
|
}
|
|
|
|
fn list(&self, path: &str) -> Result<Vec<SharedString>> {
|
|
fs::read_dir(self.base.join(path))
|
|
.map(|entries| {
|
|
entries
|
|
.filter_map(|entry| {
|
|
entry
|
|
.ok()
|
|
.and_then(|entry| entry.file_name().into_string().ok())
|
|
.map(SharedString::from)
|
|
})
|
|
.collect()
|
|
})
|
|
.map_err(|e| e.into())
|
|
}
|
|
}
|
|
|
|
#[derive(IntoElement)]
|
|
struct ImageContainer {
|
|
text: SharedString,
|
|
src: ImageSource,
|
|
}
|
|
|
|
impl ImageContainer {
|
|
pub fn new(text: impl Into<SharedString>, src: impl Into<ImageSource>) -> Self {
|
|
Self {
|
|
text: text.into(),
|
|
src: src.into(),
|
|
}
|
|
}
|
|
}
|
|
|
|
impl RenderOnce for ImageContainer {
|
|
fn render(self, _: &mut WindowContext) -> impl IntoElement {
|
|
div().child(
|
|
div()
|
|
.flex_row()
|
|
.size_full()
|
|
.gap_4()
|
|
.child(self.text)
|
|
.child(img(self.src).w(px(256.0)).h(px(256.0))),
|
|
)
|
|
}
|
|
}
|
|
|
|
struct ImageShowcase {
|
|
local_resource: Arc<std::path::Path>,
|
|
remote_resource: SharedUri,
|
|
asset_resource: SharedString,
|
|
}
|
|
|
|
impl Render for ImageShowcase {
|
|
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
|
|
div()
|
|
.size_full()
|
|
.flex()
|
|
.flex_col()
|
|
.justify_center()
|
|
.items_center()
|
|
.gap_8()
|
|
.bg(rgb(0xFFFFFF))
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_row()
|
|
.justify_center()
|
|
.items_center()
|
|
.gap_8()
|
|
.child(ImageContainer::new(
|
|
"Image loaded from a local file",
|
|
self.local_resource.clone(),
|
|
))
|
|
.child(ImageContainer::new(
|
|
"Image loaded from a remote resource",
|
|
self.remote_resource.clone(),
|
|
))
|
|
.child(ImageContainer::new(
|
|
"Image loaded from an asset",
|
|
self.asset_resource.clone(),
|
|
)),
|
|
)
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_row()
|
|
.gap_8()
|
|
.child(
|
|
div()
|
|
.flex_col()
|
|
.child("Auto Width")
|
|
.child(img("https://picsum.photos/800/400").h(px(180.))),
|
|
)
|
|
.child(
|
|
div()
|
|
.flex_col()
|
|
.child("Auto Height")
|
|
.child(img("https://picsum.photos/480/640").w(px(180.))),
|
|
),
|
|
)
|
|
}
|
|
}
|
|
|
|
actions!(image, [Quit]);
|
|
|
|
fn main() {
|
|
env_logger::init();
|
|
|
|
App::new()
|
|
.with_assets(Assets {
|
|
base: PathBuf::from("crates/gpui/examples"),
|
|
})
|
|
.run(|cx: &mut AppContext| {
|
|
cx.activate(true);
|
|
cx.on_action(|_: &Quit, cx| cx.quit());
|
|
cx.bind_keys([KeyBinding::new("cmd-q", Quit, None)]);
|
|
cx.set_menus(vec![Menu {
|
|
name: "Image".into(),
|
|
items: vec![MenuItem::action("Quit", Quit)],
|
|
}]);
|
|
|
|
let window_options = WindowOptions {
|
|
titlebar: Some(TitlebarOptions {
|
|
title: Some(SharedString::from("Image Example")),
|
|
appears_transparent: false,
|
|
..Default::default()
|
|
}),
|
|
|
|
window_bounds: Some(WindowBounds::Windowed(Bounds {
|
|
size: size(px(1100.), px(600.)),
|
|
origin: Point::new(px(200.), px(200.)),
|
|
})),
|
|
|
|
..Default::default()
|
|
};
|
|
|
|
cx.open_window(window_options, |cx| {
|
|
cx.new_view(|_cx| ImageShowcase {
|
|
// Relative path to your root project path
|
|
local_resource: PathBuf::from_str("crates/gpui/examples/image/app-icon.png")
|
|
.unwrap()
|
|
.into(),
|
|
|
|
remote_resource: "https://picsum.photos/512/512".into(),
|
|
|
|
asset_resource: "image/color.svg".into(),
|
|
})
|
|
})
|
|
.unwrap();
|
|
});
|
|
}
|