@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>
Release Notes:
- N/A
---
We may only want to set the height of an image to limit the size and
make the width adaptive.
In HTML, we will only set width or height, and the other side will adapt
and maintain the original image ratio.
I changed this because I had a logo image that only to be limited in
height, and then I found that setting the height of the `img` alone
would not display correctly.
I also tried to set `ObjectFit` in this Demo, but it seems that none of
them can achieve the same effect as "After".
## Before
<img width="809" alt="before 2024-09-18 164029"
src="https://github.com/user-attachments/assets/7ba559ed-e53b-43e6-a072-93c8ba5b14ee">
## After
<img width="749" alt="after 2024-09-18 172003"
src="https://github.com/user-attachments/assets/51ee2eba-76b3-400a-abbf-de0e9c4021e2">
Release Notes:
- N/A
Currently, the `img` element provided by GPUI only supports FilePath or
URL, but in actual applications we need to let `img` load an image
embedded in Assets.
The `svg` element can currently support this, but `img` cannot.
For example:
We have such an Assets directory:
```
assets
|- icons
|- images
|--- foo.png
```
```rs
// If give a path, considered an Asset
img("images/foo.png");
// If give a URI, considered a Remote image
img("https://foo.bar/images/foo.png");
// If give a PathBuf, considered a Local file
img(PathBuf::from("path/to/foo.png"));
```
## Example test
```
cargo run -p gpui --example image
```
<img width="827" alt="image"
src="https://github.com/user-attachments/assets/e45dcf7f-4626-4fb0-aca9-9b6e1045a952">
---------
Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>
This PR adds support for animated images. The image requires a id for it
to actually animate across frames.
Currently it only has support for `GIF`, I tried adding decoding a
animated `WebP` into frames but it seems to error. This issue in the
image crate seems to document this
https://github.com/image-rs/image/issues/2263.
Not sure if this is the best way or the desired way for animated images
to work in GPUI but I would really like support for animated images.
Open to feedback.
Example Video:
https://github.com/zed-industries/zed/assets/76515905/011f790f-d070-499b-96c9-bbff141fb002
Closes https://github.com/zed-industries/zed/issues/9993
Release Notes:
- N/A
---------
Co-authored-by: Antonio Scandurra <me@as-cii.com>
Co-authored-by: Nathan <nathan@zed.dev>
On most platforms, things were working correctly, but had the wrong
type. On X11, there were some problems with window and display size
calculations.
Release Notes:
- Fixed issues with window positioning on X11
---------
Co-authored-by: Conrad Irwin <conrad.irwin@gmail.com>
Co-authored-by: Mikayla <mikayla@zed.dev>
TODO:
- [x] Finish GPUI changes on other operating systems
This is a largely internal change to how we report data to our
diagnostics and telemetry. This PR also includes an update to our blade
backend which allows us to report errors in a more useful way when
failing to initialize blade.
Release Notes:
- N/A
---------
Co-authored-by: Conrad Irwin <conrad.irwin@gmail.com>
Now, regardless of how the Zed window is closed, Zed can remember the
window's restore size.
- [x] Windows implementation
- [x] macOS implementation
- [x] Linux implementation (partial)
- [x] update SQL data base (mark column `fullscreen` as deprecated)
The current implementation on Linux is basic, and I'm not sure if it's
correct.
The variable `fullscreen` in SQL can be removed, but I'm unsure how to
do it.
edit: mark `fullscreen` as deprecated
### Case 1
When the window is closed as maximized, reopening it will open in the
maximized state, and returning from maximized state will restore the
position and size it had when it was maximized.
https://github.com/zed-industries/zed/assets/14981363/7207752e-878a-4d43-93a7-41ad1fdb3a06
### Case 2
When the window is closed as fullscreen, reopening it will open in
fullscreen mode, and toggling fullscreen will restore the position and
size it had when it entered fullscreen (note that the fullscreen
application was not recorded in the video, showing a black screen, but
it had actually entered fullscreen mode).
https://github.com/zed-industries/zed/assets/14981363/ea5aa70d-b296-462a-afb3-4c3372883ea3
### What's more
- As English is not my native language, some variable and struct names
may need to be modified to match their actual meaning.
- I am not familiar with the APIs related to macOS and Linux, so
implementation for these two platforms has not been done for now.
- Any suggestions and ideas are welcome.
Release Notes:
- N/A
### fix cropping problem
Prior to these changes the images were being cropped so you never
actually saw
the full image but you had to use your mouse to make the window bigger
to see
both the text and the images...
### activate
```rust
cx.activate(true);
```
was not in place so the window did not appear when you ran the example
### No longer need to Ctrl-c to quit the example
Now you can hit *Cmd-q* to quit out of the example instead of having to
*Ctrl-c* in your
terminal where you fired off the example
Release Notes:
- N/A
