mirror of
https://github.com/zed-industries/zed.git
synced 2025-02-07 02:57:34 +00:00
938a0679c0
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">
166 lines
4.9 KiB
Rust
166 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<PathBuf>,
|
|
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: Arc::new(
|
|
PathBuf::from_str("crates/gpui/examples/image/app-icon.png").unwrap(),
|
|
),
|
|
remote_resource: "https://picsum.photos/512/512".into(),
|
|
|
|
asset_resource: "image/color.svg".into(),
|
|
})
|
|
})
|
|
.unwrap();
|
|
});
|
|
}
|