2024-01-30 16:26:02 +00:00
|
|
|
use std::path::PathBuf;
|
|
|
|
use std::str::FromStr;
|
|
|
|
use std::sync::Arc;
|
|
|
|
|
2024-01-30 05:56:51 +00:00
|
|
|
use gpui::*;
|
2024-07-30 14:55:48 +00:00
|
|
|
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())
|
|
|
|
}
|
|
|
|
}
|
2024-01-30 05:56:51 +00:00
|
|
|
|
|
|
|
#[derive(IntoElement)]
|
2024-01-30 16:26:02 +00:00
|
|
|
struct ImageContainer {
|
2024-01-30 05:56:51 +00:00
|
|
|
text: SharedString,
|
2024-01-30 16:26:02 +00:00
|
|
|
src: ImageSource,
|
|
|
|
}
|
|
|
|
|
|
|
|
impl ImageContainer {
|
|
|
|
pub fn new(text: impl Into<SharedString>, src: impl Into<ImageSource>) -> Self {
|
|
|
|
Self {
|
|
|
|
text: text.into(),
|
|
|
|
src: src.into(),
|
|
|
|
}
|
|
|
|
}
|
2024-01-30 05:56:51 +00:00
|
|
|
}
|
|
|
|
|
2024-01-30 16:26:02 +00:00
|
|
|
impl RenderOnce for ImageContainer {
|
2024-01-30 05:56:51 +00:00
|
|
|
fn render(self, _: &mut WindowContext) -> impl IntoElement {
|
|
|
|
div().child(
|
|
|
|
div()
|
|
|
|
.flex_row()
|
|
|
|
.size_full()
|
|
|
|
.gap_4()
|
|
|
|
.child(self.text)
|
2024-07-30 14:55:48 +00:00
|
|
|
.child(img(self.src).w(px(256.0)).h(px(256.0))),
|
2024-01-30 05:56:51 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
struct ImageShowcase {
|
Add Loading and Fallback States to Image Elements (via StyledImage) (#20371)
@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>
2024-11-16 03:12:01 +00:00
|
|
|
local_resource: Arc<std::path::Path>,
|
2024-01-30 14:54:23 +00:00
|
|
|
remote_resource: SharedUri,
|
2024-07-30 14:55:48 +00:00
|
|
|
asset_resource: SharedString,
|
2024-01-30 05:56:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
impl Render for ImageShowcase {
|
|
|
|
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
|
|
|
|
div()
|
|
|
|
.size_full()
|
2024-09-30 23:39:19 +00:00
|
|
|
.flex()
|
|
|
|
.flex_col()
|
2024-01-30 05:56:51 +00:00
|
|
|
.justify_center()
|
|
|
|
.items_center()
|
|
|
|
.gap_8()
|
|
|
|
.bg(rgb(0xFFFFFF))
|
2024-09-30 23:39:19 +00:00
|
|
|
.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.))),
|
|
|
|
),
|
|
|
|
)
|
2024-01-30 05:56:51 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-04-29 03:59:21 +00:00
|
|
|
actions!(image, [Quit]);
|
|
|
|
|
2024-01-30 05:56:51 +00:00
|
|
|
fn main() {
|
|
|
|
env_logger::init();
|
|
|
|
|
2024-07-30 14:55:48 +00:00
|
|
|
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)],
|
|
|
|
}]);
|
2024-04-29 03:59:21 +00:00
|
|
|
|
2024-07-30 14:55:48 +00:00
|
|
|
let window_options = WindowOptions {
|
|
|
|
titlebar: Some(TitlebarOptions {
|
|
|
|
title: Some(SharedString::from("Image Example")),
|
|
|
|
appears_transparent: false,
|
|
|
|
..Default::default()
|
|
|
|
}),
|
2024-04-29 03:59:21 +00:00
|
|
|
|
2024-07-30 14:55:48 +00:00
|
|
|
window_bounds: Some(WindowBounds::Windowed(Bounds {
|
|
|
|
size: size(px(1100.), px(600.)),
|
|
|
|
origin: Point::new(px(200.), px(200.)),
|
|
|
|
})),
|
2024-04-29 03:59:21 +00:00
|
|
|
|
2024-07-30 14:55:48 +00:00
|
|
|
..Default::default()
|
|
|
|
};
|
|
|
|
|
|
|
|
cx.open_window(window_options, |cx| {
|
|
|
|
cx.new_view(|_cx| ImageShowcase {
|
|
|
|
// Relative path to your root project path
|
Add Loading and Fallback States to Image Elements (via StyledImage) (#20371)
@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>
2024-11-16 03:12:01 +00:00
|
|
|
local_resource: PathBuf::from_str("crates/gpui/examples/image/app-icon.png")
|
|
|
|
.unwrap()
|
|
|
|
.into(),
|
|
|
|
|
2024-07-30 14:55:48 +00:00
|
|
|
remote_resource: "https://picsum.photos/512/512".into(),
|
2024-09-18 21:29:34 +00:00
|
|
|
|
2024-09-17 17:50:36 +00:00
|
|
|
asset_resource: "image/color.svg".into(),
|
2024-07-30 14:55:48 +00:00
|
|
|
})
|
2024-01-30 05:56:51 +00:00
|
|
|
})
|
2024-07-30 14:55:48 +00:00
|
|
|
.unwrap();
|
|
|
|
});
|
2024-01-30 05:56:51 +00:00
|
|
|
}
|