ZacharyZhang-NY
09dd3fc2cb
The gallery's entry runs natively or, on wasm32, from a wasm_bindgen start through gpui_web, single-threaded with WebGL2 fallback. ?page, ?story and ?theme choose what shows; an unknown one fails in the page and the log. set_theme switches the mode later. Pictures load from ELY_GALLERY_ASSETS. scripts/stories.py writes examples/gallery/stories.json from the pages.
82 lines
2.9 KiB
Rust
82 lines
2.9 KiB
Rust
use ely_gpui_component::{
|
|
media::{ImageThumbnail, ImageViewer},
|
|
overlays::{Lightbox, Slide},
|
|
};
|
|
use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, px};
|
|
|
|
use crate::{
|
|
probe::probe,
|
|
ui::{keep, picture, resource, row, section, set},
|
|
};
|
|
|
|
/// The gallery's pictures: a file, its width over height, a caption, and a corner label.
|
|
const PICTURES: [(&str, f32, &str, &str); 5] = [
|
|
(asset!("atrium.jpg"), 1.5, "An atrium, noon", ""),
|
|
(asset!("dunes.jpg"), 1.5, "Dunes at first light", ""),
|
|
(
|
|
asset!("atrium-olive.jpg"),
|
|
1.5,
|
|
"An olive tree by the stair",
|
|
"HDR",
|
|
),
|
|
(asset!("dunes-grass.jpg"), 1.5, "Grass on the ridge", ""),
|
|
(asset!("dunes-square.jpg"), 1.0, "The long shadow", "+2"),
|
|
];
|
|
|
|
pub fn viewer(cx: &mut App) -> impl IntoElement + use<> {
|
|
section(
|
|
"ImageViewer",
|
|
"A picture to look at closely. It fits at first; the buttons, plus and minus, or Cmd-scroll zoom it, and 0 and 1 go back to fit and actual size, as a double press does. Drag it or use the arrows once it overhangs; R turns it.",
|
|
cx,
|
|
)
|
|
.child(probe(
|
|
"media-viewer",
|
|
div().w(px(640.)).h(px(440.)).child(ImageViewer::new("media-viewer", resource(PICTURES[0].0))),
|
|
))
|
|
}
|
|
|
|
pub fn thumbnails(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
|
let shown = keep("media-shown", || None::<usize>, window, cx);
|
|
let opened = keep("media-last", || 0usize, window, cx);
|
|
let last = *opened.read(cx);
|
|
let thumbs = PICTURES
|
|
.iter()
|
|
.enumerate()
|
|
.map(|(ix, (path, ratio, _, label))| {
|
|
let (open, mark) = (shown.clone(), opened.clone());
|
|
let thumb = ImageThumbnail::new(
|
|
SharedString::from(format!("media-thumb-{ix}")),
|
|
picture(*path),
|
|
*ratio,
|
|
)
|
|
.selected(ix == last)
|
|
.on_click(move |_, cx| {
|
|
set(&mark, ix, cx);
|
|
set(&open, Some(ix), cx);
|
|
});
|
|
let thumb = if label.is_empty() {
|
|
thumb
|
|
} else {
|
|
thumb.label(*label)
|
|
};
|
|
div().w(px(96. * ratio + 6.)).child(thumb)
|
|
});
|
|
let overlay = (*shown.read(cx)).map(|at| {
|
|
let (step, close) = (shown.clone(), shown.clone());
|
|
Lightbox::new(
|
|
"media-lightbox",
|
|
PICTURES.map(|(path, _, caption, _)| Slide::new(picture(path), caption)),
|
|
at,
|
|
move |_, cx| set(&close, None, cx),
|
|
)
|
|
.on_step(move |to, _, cx| set(&step, Some(to), cx))
|
|
});
|
|
section(
|
|
"ImageThumbnail / Lightbox → overlays::Lightbox",
|
|
"Pictures small, each in its own shape, with a label when one helps. The one last opened keeps a ring; a press or Enter opens the lightbox, which steps through them all.",
|
|
cx,
|
|
)
|
|
.child(probe("media-thumbs", row().items_end().children(thumbs)))
|
|
.children(overlay)
|
|
}
|