ZacharyZhang-NY/Ely-GPUI-Components
2
2 Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

T08a menus: menu, items, groups, separators, submenus, check and radio rows, key hints, icons; dropdown, split, overflow and context hosts; overlays pick on key release

Browse Source
This commit is contained in:
ZacharyZhang-NY committed 2026-09-25 13:03:23 -04:00
1 parent a923def708
commit f990586abd
20 files changed
+1695 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/gallery/pages/menus.rs
+322
View File
@@ -0,0 +1,322 @@
use ely_gpui_component::{
buttons::ButtonVariant,
menus::{ContextMenu, DropdownMenu, Menu, MenuItem, OverflowMenu, SplitButton},
primitives::IconName,
theme::{ActiveTheme, Radius},
};
use gpui::{
AnyElement, App, Entity, IntoElement, ParentElement, SharedString, Styled, Window, div, px,
};
use super::Page;
use crate::{
probe::probe,
script::Step,
ui::{keep, row, section, set, specimen},
};
pub const PAGE: Page = Page {
number: 8,
slug: "menus",
title: "Menus",
summary: "Rows of actions that open from a button, a right click or an arrow, and nest.",
render,
script: SCRIPT,
};
const SCRIPT: &[Step] = &[
Step::Rest,
Step::Click("file-menu"),
Step::Wait(300),
Step::Key("down"),
Step::Key("down"),
Step::Key("down"),
Step::Key("right"),
Step::Wait(400),
Step::Shot("submenu"),
Step::Key("escape"),
Step::Key("escape"),
Step::Click("view-menu"),
Step::Wait(400),
Step::Shot("checks"),
Step::Key("escape"),
Step::ClickEnd("merge"),
Step::Wait(400),
Step::Shot("split"),
Step::Key("escape"),
Step::Click("more"),
Step::Wait(400),
Step::Shot("overflow"),
Step::Key("escape"),
Step::RightAt("canvas", 180.0, 70.0),
Step::Wait(400),
Step::Shot("context"),
Step::Key("escape"),
Step::Rest,
];
/// Records the last row run, for the captions.
fn ran(
key: &'static str,
window: &mut Window,
cx: &mut App,
) -> (Entity<Option<SharedString>>, String) {
let last = keep(key, || None::<SharedString>, window, cx);
let caption = last
.read(cx)
.clone()
.map_or("nothing run yet".to_string(), |name| format!("ran {name}"));
(last, caption)
}
fn run(
last: &Entity<Option<SharedString>>,
name: &'static str,
) -> impl Fn(&mut Window, &mut App) + 'static {
let last = last.clone();
move |_, cx| set(&last, Some(name.into()), cx)
}
fn file_menu(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let (last, caption) = ran("file-ran", window, cx);
let recent = Menu::new()
.item(
MenuItem::new("roadmap.md")
.icon(IconName::FileText)
.on_click(run(&last, "roadmap.md")),
)
.item(
MenuItem::new("tokens.rs")
.icon(IconName::FileText)
.on_click(run(&last, "tokens.rs")),
)
.separator()
.item(MenuItem::new("Clear recent").on_click(run(&last, "clear recent")));
let menu = Menu::new()
.item(
MenuItem::new("New file")
.icon(IconName::FilePlus)
.keys("secondary-n")
.on_click(run(&last, "new file")),
)
.item(
MenuItem::new("Open…")
.icon(IconName::FolderOpen)
.keys("secondary-o")
.on_click(run(&last, "open")),
)
.item(MenuItem::submenu("Open recent", recent).icon(IconName::History))
.separator()
.item(
MenuItem::new("Save")
.icon(IconName::Save)
.keys("secondary-s")
.on_click(run(&last, "save")),
)
.item(
MenuItem::new("Save as…")
.keys("secondary-shift-s")
.on_click(run(&last, "save as")),
)
.item(MenuItem::new("Revert").disabled(true))
.group(
"Share",
[
MenuItem::new("Copy link")
.icon(IconName::Link)
.on_click(run(&last, "copy link")),
MenuItem::new("Export PDF")
.icon(IconName::Download)
.on_click(run(&last, "export")),
],
);
section(
"Menu / MenuItem / MenuGroup / MenuSeparator / SubMenu / MenuItemShortcut / MenuItemIcon",
"Rows with an icon and a key hint, split by rules and titled groups. The hint only shows a chord; the app binds it. A row with an arrow opens the next menu beside it; Right and Left walk in and out.",
cx,
)
.child(specimen(
caption,
probe("file-menu", DropdownMenu::new("file", "File", menu).icon(IconName::FileText)),
cx,
))
}
fn view_menu(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let shown = keep("view-shown", || [true, false, true], window, cx);
let density = keep("view-density", || 1usize, window, cx);
let (now, dense) = (*shown.read(cx), *density.read(cx));
let flip = |ix: usize| {
let shown = shown.clone();
move |_: &mut Window, cx: &mut App| {
let mut next = *shown.read(cx);
next[ix] = !next[ix];
set(&shown, next, cx);
}
};
let pick = |ix: usize| {
let density = density.clone();
move |_: &mut Window, cx: &mut App| set(&density, ix, cx)
};
let menu = Menu::new()
.item(
MenuItem::check("Sidebar", now[0])
.keys("secondary-b")
.on_click(flip(0)),
)
.item(MenuItem::check("Minimap", now[1]).on_click(flip(1)))
.item(MenuItem::check("Status bar", now[2]).on_click(flip(2)))
.group(
"Density",
["Compact", "Standard", "Comfortable"]
.into_iter()
.enumerate()
.map(|(ix, name)| MenuItem::radio(name, dense == ix).on_click(pick(ix))),
);
let names = ["sidebar", "minimap", "status bar"];
let on: Vec<&str> = names
.iter()
.zip(now)
.filter(|(_, on)| *on)
.map(|(name, _)| *name)
.collect();
section(
"CheckboxMenuItem / RadioMenuItem",
"A check flips on its own; a radio is one of its group. The owner holds both and redraws the menu.",
cx,
)
.child(specimen(
format!("{}; {}", on.join(", "), ["compact", "standard", "comfortable"][dense]),
probe("view-menu", DropdownMenu::new("view", "View", menu).variant(ButtonVariant::Ghost)),
cx,
))
}
fn hosts(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let (last, caption) = ran("hosts-ran", window, cx);
let merge = Menu::new()
.item(MenuItem::new("Squash and merge").on_click(run(&last, "squash and merge")))
.item(MenuItem::new("Rebase and merge").on_click(run(&last, "rebase and merge")));
let more = Menu::new()
.item(
MenuItem::new("Rename")
.icon(IconName::Pencil)
.keys("f2")
.on_click(run(&last, "rename")),
)
.item(
MenuItem::new("Duplicate")
.icon(IconName::Copy)
.on_click(run(&last, "duplicate")),
)
.item(
MenuItem::new("Archive")
.icon(IconName::Archive)
.on_click(run(&last, "archive")),
)
.separator()
.item(
MenuItem::new("Delete")
.icon(IconName::Trash2)
.on_click(run(&last, "delete")),
);
let share = Menu::new()
.item(
MenuItem::new("Copy link")
.icon(IconName::Link)
.on_click(run(&last, "copy link")),
)
.item(
MenuItem::new("Email")
.icon(IconName::Mail)
.on_click(run(&last, "email")),
);
let main = last.clone();
section(
"DropdownMenu / SplitButton / OverflowMenu",
"A button that opens a menu; a main action with related ones under its arrow; and More, for what did not fit.",
cx,
)
.child(specimen(
caption,
row()
.child(probe("share", DropdownMenu::new("share", "Share", share).icon(IconName::Share2)))
.child(probe(
"merge",
SplitButton::new("merge", "Merge", merge)
.variant(ButtonVariant::Primary)
.on_click(move |_, _, cx| set(&main, Some("merge".into()), cx)),
))
.child(probe("more", OverflowMenu::new("more", more))),
cx,
))
}
fn context(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let (last, caption) = ran("context-ran", window, cx);
let menu = Menu::new()
.item(
MenuItem::new("Back")
.icon(IconName::ArrowLeft)
.keys("secondary-[")
.on_click(run(&last, "back")),
)
.item(
MenuItem::new("Forward")
.icon(IconName::ArrowRight)
.disabled(true),
)
.item(
MenuItem::new("Reload")
.icon(IconName::RotateCw)
.keys("secondary-r")
.on_click(run(&last, "reload")),
)
.separator()
.item(
MenuItem::new("Copy link")
.icon(IconName::Link)
.on_click(run(&last, "copy link")),
)
.item(
MenuItem::new("Inspect")
.icon(IconName::Code)
.on_click(run(&last, "inspect")),
);
let theme = cx.theme();
section(
"ContextMenu",
"A right click opens the menu where it lands; it stays inside the window.",
cx,
)
.child(specimen(
caption,
probe(
"canvas",
ContextMenu::new("canvas", menu).child(
div()
.flex()
.items_center()
.justify_center()
.w(px(420.0))
.h(px(140.0))
.border_1()
.border_dashed()
.border_color(theme.colors.border_strong)
.rounded(theme.radius(Radius::Lg))
.text_color(theme.colors.fg_subtle)
.child("Right-click anywhere here"),
),
),
cx,
))
}
fn render(window: &mut Window, cx: &mut App) -> AnyElement {
div()
.child(file_menu(window, cx))
.child(view_menu(window, cx))
.child(hosts(window, cx))
.child(context(window, cx))
.into_any_element()
}
examples/gallery/pages/mod.rs
+2
View File
@@ -1,6 +1,7 @@
mod buttons;
mod forms;
mod layout;
mod menus;
mod navigation;
mod primitives;
mod shell;
@@ -29,6 +30,7 @@ pub const ALL: &[Page] = &[
buttons::PAGE,
forms::PAGE,
navigation::PAGE,
menus::PAGE,
theme::PAGE,
];