Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gpui: Support loading image from filesystem (#6978)

Browse source 
This PR implements support for loading and displaying images from a
local file using gpui's `img` element.

API Changes:
- Changed `SharedUrl` to `SharedUrl::File`, `SharedUrl::Network`

Usage:
```rust
// load from network
img(SharedUrl::network(...)) // previously img(SharedUrl(...)

// load from filesystem
img(SharedUrl::file(...))
```

This will be useful when implementing markdown image support, because we
need to be able to render images from the filesystem (relative/absolute
path), e.g. when implementing markdown preview #5064.

I also added an example `image` to the gpui crate, let me know if this
is useful. Showcase:
<img width="872" alt="image"
src="https://github.com/zed-industries/zed/assets/53836821/b4310a26-db81-44fa-9a7b-61e7d0ad4349">

**Note**: The example is fetching images from [Lorem
Picsum](https://picsum.photos) ([Github
Repo](https://github.com/DMarby/picsum-photos)), which is a free
resource for fetching images in a specific size. Please let me know if
you're okay with using this in the example.
This commit is contained in:
Bennet Bo Fenner 2024-01-30 06:56:51 +01:00 • committed by GitHub
parent b865db455d
commit dd74643993
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 210 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

46
crates/ui/src/components/stories/avatar.rs
View file

@ -1,4 +1,4 @@
use gpui::Render;
use gpui::{Render, SharedUrl};
use story::{StoryContainer, StoryItem, StorySection};
use crate::{prelude::*, AudioStatus, Availability, AvatarAvailabilityIndicator};
@ -13,50 +13,66 @@ impl Render for AvatarStory {
StorySection::new()
.child(StoryItem::new(
"Default",
Avatar::new("https://avatars.githubusercontent.com/u/1714999?v=4"),
Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1714999?v=4",
)),
))
.child(StoryItem::new(
"Default",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4"),
Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/326587?v=4",
)),
)),
)
.child(
StorySection::new()
.child(StoryItem::new(
"With free availability indicator",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAvailabilityIndicator::new(Availability::Free)),
Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/326587?v=4",
))
.indicator(AvatarAvailabilityIndicator::new(Availability::Free)),
))
.child(StoryItem::new(
"With busy availability indicator",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAvailabilityIndicator::new(Availability::Busy)),
Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/326587?v=4",
))
.indicator(AvatarAvailabilityIndicator::new(Availability::Busy)),
)),
)
.child(
StorySection::new()
.child(StoryItem::new(
"With info border",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.border_color(cx.theme().status().info_border),
Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/326587?v=4",
))
.border_color(cx.theme().status().info_border),
))
.child(StoryItem::new(
"With error border",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.border_color(cx.theme().status().error_border),
Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/326587?v=4",
))
.border_color(cx.theme().status().error_border),
)),
)
.child(
StorySection::new()
.child(StoryItem::new(
"With muted audio indicator",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Muted)),
Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/326587?v=4",
))
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Muted)),
))
.child(StoryItem::new(
"With deafened audio indicator",
Avatar::new("https://avatars.githubusercontent.com/u/326587?v=4")
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Deafened)),
Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/326587?v=4",
))
.indicator(AvatarAudioStatusIndicator::new(AudioStatus::Deafened)),
)),
)
}

16
crates/ui/src/components/stories/list_item.rs
View file

@ -45,7 +45,7 @@ impl Render for ListItemStory {
.child(
ListItem::new("with_start slot avatar")
.child("Hello, world!")
.start_slot(Avatar::new(SharedUrl::from(
.start_slot(Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1714999?v=4",
))),
)
@ -53,7 +53,7 @@ impl Render for ListItemStory {
.child(
ListItem::new("with_left_avatar")
.child("Hello, world!")
.end_slot(Avatar::new(SharedUrl::from(
.end_slot(Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1714999?v=4",
))),
)
@ -64,23 +64,23 @@ impl Render for ListItemStory {
.end_slot(
h_flex()
.gap_2()
.child(Avatar::new(SharedUrl::from(
.child(Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1789?v=4",
)))
.child(Avatar::new(SharedUrl::from(
.child(Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1789?v=4",
)))
.child(Avatar::new(SharedUrl::from(
.child(Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1789?v=4",
)))
.child(Avatar::new(SharedUrl::from(
.child(Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1789?v=4",
)))
.child(Avatar::new(SharedUrl::from(
.child(Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1789?v=4",
))),
)
.end_hover_slot(Avatar::new(SharedUrl::from(
.end_hover_slot(Avatar::new(SharedUrl::network(
"https://avatars.githubusercontent.com/u/1714999?v=4",
))),
)