mirror of
https://github.com/zed-industries/zed.git
synced 2026-08-16 20:44:31 +00:00
49ad06c1b4
Some checks are pending
Congratsbot / check-author (push) Waiting to run
Congratsbot / congrats (push) Blocked by required conditions
deploy_nightly_docs / deploy_docs (push) Waiting to run
run_tests / run_tests_windows (push) Blocked by required conditions
run_tests / check_workspace_binaries (push) Blocked by required conditions
run_tests / check_scripts (push) Blocked by required conditions
run_tests / orchestrate (push) Waiting to run
run_tests / check_style (push) Waiting to run
run_tests / clippy_windows (push) Blocked by required conditions
run_tests / clippy_linux (push) Blocked by required conditions
run_tests / clippy_mac (push) Blocked by required conditions
run_tests / clippy_mac_x86_64 (push) Blocked by required conditions
run_tests / run_tests_linux (push) Blocked by required conditions
run_tests / run_tests_mac (push) Blocked by required conditions
run_tests / miri_scheduler (push) Blocked by required conditions
run_tests / doctests (push) Blocked by required conditions
run_tests / extension_tests (push) Blocked by required conditions
run_tests / tests_pass (push) Blocked by required conditions
run_tests / build_visual_tests_binary (push) Blocked by required conditions
run_tests / check_wasm (push) Blocked by required conditions
run_tests / check_dependencies (push) Blocked by required conditions
run_tests / check_docs (push) Blocked by required conditions
run_tests / check_licenses (push) Blocked by required conditions
run_tests / check_postgres_and_protobuf_migrations (push) Blocked by required conditions
Adds a `container_query` element to GPUI, in the spirit of CSS container
queries: the element's own size is determined solely by its style and
the space offered by its parent, and once that size is known the
provided closure is called with the measured size to build the contents.
```rust
container_query(|size, _window, _cx| {
if size.width < px(240.) {
div().child("Narrow layout")
} else {
div().child("Wide layout")
}
});
```
Implementation notes:
- Defaults to filling its parent (`size_full()` semantics), overridable
via `Styled` since contents can't influence the container's size (the
same constraint CSS container queries impose).
- Reworks the `grid_layout` example (the Holy Grail layout) to
demonstrate it: the three-column grid collapses to a stacked column when
the window is narrower than 400px, and the header shows the live
measured width.
Release Notes:
- N/A
---------
Co-authored-by: zed-zippy[bot] <234243425+zed-zippy[bot]@users.noreply.github.com>
89 lines
3 KiB
Rust
89 lines
3 KiB
Rust
#![cfg_attr(target_family = "wasm", no_main)]
|
|
|
|
use gpui::{
|
|
App, Bounds, Context, Hsla, Window, WindowBounds, WindowOptions, container_query, div,
|
|
prelude::*, px, rgb, size,
|
|
};
|
|
use gpui_platform::application;
|
|
|
|
// https://en.wikipedia.org/wiki/Holy_grail_(web_design)
|
|
//
|
|
// Resize the window: the layout is chosen by `container_query` based on the
|
|
// measured size of the container, collapsing to a single stacked column when
|
|
// it becomes too narrow for the three-column grid.
|
|
struct HolyGrailExample {}
|
|
|
|
impl Render for HolyGrailExample {
|
|
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
|
|
container_query(|container_size, _window, _cx| {
|
|
let block = |color: Hsla| {
|
|
div()
|
|
.size_full()
|
|
.bg(color)
|
|
.border_1()
|
|
.border_dashed()
|
|
.rounded_md()
|
|
.border_color(gpui::white())
|
|
.items_center()
|
|
};
|
|
|
|
let header = block(gpui::white()).child(format!("Header — {}", container_size.width));
|
|
let table_of_contents = block(gpui::red()).child("Table of contents");
|
|
let content = block(gpui::green()).child("Content");
|
|
let ad = block(gpui::blue()).child("AD :(").text_color(gpui::white());
|
|
let footer = block(gpui::black())
|
|
.text_color(gpui::white())
|
|
.child("Footer");
|
|
|
|
let container = div().gap_1().bg(rgb(0x505050)).shadow_lg().size_full();
|
|
|
|
if container_size.width < px(400.) {
|
|
container
|
|
.flex()
|
|
.flex_col()
|
|
.child(header.h_12().flex_none())
|
|
.child(table_of_contents.h_20().flex_none())
|
|
.child(content.flex_1())
|
|
.child(ad.h_20().flex_none())
|
|
.child(footer.h_12().flex_none())
|
|
} else {
|
|
container
|
|
.grid()
|
|
.grid_cols(5)
|
|
.grid_rows(5)
|
|
.child(header.row_span(1).col_span_full())
|
|
.child(table_of_contents.col_span(1).h_56())
|
|
.child(content.col_span(3).row_span(3))
|
|
.child(ad.col_span(1).row_span(3))
|
|
.child(footer.row_span(1).col_span_full())
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
fn run_example() {
|
|
application().run(|cx: &mut App| {
|
|
let bounds = Bounds::centered(None, size(px(500.), px(500.0)), cx);
|
|
cx.open_window(
|
|
WindowOptions {
|
|
window_bounds: Some(WindowBounds::Windowed(bounds)),
|
|
..Default::default()
|
|
},
|
|
|_, cx| cx.new(|_| HolyGrailExample {}),
|
|
)
|
|
.unwrap();
|
|
cx.activate(true);
|
|
});
|
|
}
|
|
|
|
#[cfg(not(target_family = "wasm"))]
|
|
fn main() {
|
|
run_example();
|
|
}
|
|
|
|
#[cfg(target_family = "wasm")]
|
|
#[wasm_bindgen::prelude::wasm_bindgen(start)]
|
|
pub fn start() {
|
|
gpui_platform::web_init();
|
|
run_example();
|
|
}
|