382 lines
13 KiB
Rust
382 lines
13 KiB
Rust
use ely_gpui_component::{
|
|
buttons::{Button, ButtonVariant},
|
|
forms::{Input, Switch, TextInput},
|
|
overlays::{AlertDialog, ConfirmDialog, Dialog, HoverCard, Popover, PromptDialog},
|
|
primitives::{IconName, Severity},
|
|
theme::{ActiveTheme, TextSize},
|
|
typography::Caption,
|
|
};
|
|
use gpui::{
|
|
AnyElement, App, Entity, FontWeight, IntoElement, ParentElement, SharedString, Styled, Window,
|
|
div, prelude::*,
|
|
};
|
|
|
|
use super::Page;
|
|
use crate::{
|
|
probe::probe,
|
|
script::Step,
|
|
ui::{keep, row, section, set, specimen},
|
|
};
|
|
|
|
pub const PAGE: Page = Page {
|
|
number: 9,
|
|
slug: "overlays",
|
|
title: "Overlays",
|
|
summary: "Panels over the page: anchored to a control, over a scrim, or over everything.",
|
|
render,
|
|
script: SCRIPT,
|
|
};
|
|
|
|
const SCRIPT: &[Step] = &[
|
|
Step::Rest,
|
|
Step::Click("share"),
|
|
Step::Wait(400),
|
|
Step::Shot("popover"),
|
|
Step::Key("escape"),
|
|
Step::Hover("ada"),
|
|
Step::Wait(900),
|
|
Step::Shot("hovercard"),
|
|
Step::Hover("share"),
|
|
Step::Wait(400),
|
|
Step::Click("edit-profile"),
|
|
Step::Wait(500),
|
|
Step::Shot("dialog"),
|
|
Step::Key("escape"),
|
|
Step::Click("alert"),
|
|
Step::Wait(500),
|
|
Step::Shot("alert"),
|
|
Step::Key("escape"),
|
|
Step::Click("confirm"),
|
|
Step::Wait(500),
|
|
Step::Shot("confirm"),
|
|
Step::Key("escape"),
|
|
Step::Click("prompt"),
|
|
Step::Wait(400),
|
|
Step::Type("drafts/2027"),
|
|
Step::Wait(300),
|
|
Step::Shot("prompt"),
|
|
Step::Key("escape"),
|
|
Step::Click("fullscreen"),
|
|
Step::Wait(600),
|
|
Step::Shot("fullscreen"),
|
|
Step::Key("escape"),
|
|
Step::Rest,
|
|
];
|
|
|
|
fn popovers(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
|
let public = keep("share-public", || true, window, cx);
|
|
let on = *public.read(cx);
|
|
let theme = cx.theme();
|
|
let muted = theme.colors.fg_muted;
|
|
let panel = move |_: &mut Window, cx: &mut App| {
|
|
let theme = cx.theme();
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.gap_3()
|
|
.w_72()
|
|
.child(
|
|
div()
|
|
.font_weight(FontWeight::SEMIBOLD)
|
|
.child("Share this page"),
|
|
)
|
|
.child(
|
|
div()
|
|
.text_color(theme.colors.fg_muted)
|
|
.child("Anyone with the link can view it."),
|
|
)
|
|
.child(
|
|
Switch::new("share-switch", on)
|
|
.label("Public link")
|
|
.on_change(move |next, _, cx| set(&public, next, cx)),
|
|
)
|
|
.child(
|
|
Button::new("share-copy", "Copy link")
|
|
.icon(IconName::Link)
|
|
.full_width(),
|
|
)
|
|
};
|
|
section(
|
|
"Popover / DropdownPanel / InlinePopup",
|
|
"A panel of any content under its button. A press outside or Escape closes it, and Tab stays inside. The Link variant sets the trigger inline.",
|
|
cx,
|
|
)
|
|
.child(
|
|
row()
|
|
.child(probe(
|
|
"share",
|
|
Popover::new("share", "Share", panel).icon(IconName::Share2),
|
|
))
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.items_center()
|
|
.gap_1()
|
|
.text_color(muted)
|
|
.child("Read the")
|
|
.child(
|
|
Popover::new("terms", "terms", |_, cx| {
|
|
div()
|
|
.w_72()
|
|
.text_color(cx.theme().colors.fg_muted)
|
|
.child("Plain words: you own your work, and we keep it private.")
|
|
})
|
|
.variant(ButtonVariant::Link),
|
|
)
|
|
.child("before you share."),
|
|
),
|
|
)
|
|
}
|
|
|
|
fn profile(cx: &App) -> AnyElement {
|
|
let theme = cx.theme();
|
|
let colors = &theme.colors;
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.gap_3()
|
|
.w_64()
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.items_center()
|
|
.gap_3()
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.items_center()
|
|
.justify_center()
|
|
.size_10()
|
|
.rounded_full()
|
|
.bg(colors.hover)
|
|
.font_weight(FontWeight::SEMIBOLD)
|
|
.child("AL"),
|
|
)
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.child(
|
|
div()
|
|
.font_weight(FontWeight::SEMIBOLD)
|
|
.child("Ada Lovelace"),
|
|
)
|
|
.child(
|
|
div()
|
|
.text_size(theme.text_size(TextSize::Xs))
|
|
.text_color(colors.fg_subtle)
|
|
.child("Design · London"),
|
|
),
|
|
),
|
|
)
|
|
.child(
|
|
div()
|
|
.text_color(colors.fg_muted)
|
|
.child("Writes the first programs for machines not yet built."),
|
|
)
|
|
.child(Button::new("ada-follow", "Follow").primary())
|
|
.into_any_element()
|
|
}
|
|
|
|
fn hover_card(cx: &App) -> impl IntoElement + use<> {
|
|
let theme = cx.theme();
|
|
section(
|
|
"HoverCard",
|
|
"Rest the pointer on a name and a card opens. It stays while the pointer is on either, and never takes focus.",
|
|
cx,
|
|
)
|
|
.child(specimen(
|
|
"rest the pointer on the name",
|
|
probe(
|
|
"ada",
|
|
HoverCard::new(
|
|
"ada",
|
|
div()
|
|
.text_color(theme.colors.link)
|
|
.font_weight(FontWeight::MEDIUM)
|
|
.child("@ada"),
|
|
|_, cx| profile(cx),
|
|
),
|
|
),
|
|
cx,
|
|
))
|
|
}
|
|
|
|
/// Which dialog is open, if any.
|
|
#[derive(Clone, Copy, PartialEq)]
|
|
enum Open {
|
|
Profile,
|
|
Alert,
|
|
Confirm,
|
|
Prompt,
|
|
Fullscreen,
|
|
}
|
|
|
|
fn opener(
|
|
state: &Entity<Option<Open>>,
|
|
id: &'static str,
|
|
label: &'static str,
|
|
open: Open,
|
|
) -> impl IntoElement {
|
|
let state = state.clone();
|
|
probe(
|
|
id,
|
|
Button::new(id, label).on_click(move |_, _, cx| set(&state, Some(open), cx)),
|
|
)
|
|
}
|
|
|
|
fn dialogs(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
|
let open = keep("overlay-open", || None::<Open>, window, cx);
|
|
let said = keep("overlay-said", || None::<SharedString>, window, cx);
|
|
let (name, email, rename) = {
|
|
let make = |window: &mut Window, cx: &mut App, text: &str| {
|
|
let text = text.to_string();
|
|
cx.new(|cx| {
|
|
let mut input = TextInput::new(window, cx);
|
|
input.set_text(text, cx);
|
|
input
|
|
})
|
|
};
|
|
let fields = window.use_keyed_state("overlay-fields", cx, |window, cx| {
|
|
(
|
|
make(window, cx, "Ada Lovelace"),
|
|
make(window, cx, "ada@ely.dev"),
|
|
make(window, cx, "Roadmap"),
|
|
)
|
|
});
|
|
fields.read(cx).clone()
|
|
};
|
|
let shut = {
|
|
let open = open.clone();
|
|
move |_: &mut Window, cx: &mut App| set(&open, None, cx)
|
|
};
|
|
let caption = said
|
|
.read(cx)
|
|
.clone()
|
|
.map_or("each opens over a scrim; Escape closes it".into(), |said| {
|
|
said.to_string()
|
|
});
|
|
let overlay: Option<AnyElement> = (*open.read(cx)).map(|which| {
|
|
let (saved, confirmed, renamed) = (said.clone(), said.clone(), said.clone());
|
|
match which {
|
|
Open::Profile => Dialog::new("profile", "Edit profile", shut.clone())
|
|
.detail("How others see you across the workspace.")
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.gap_3()
|
|
.child(Input::new(&name))
|
|
.child(Input::new(&email)),
|
|
)
|
|
.action(|close| {
|
|
Button::new("profile-cancel", "Cancel")
|
|
.variant(ButtonVariant::Ghost)
|
|
.on_click(move |_, window, cx| close(window, cx))
|
|
})
|
|
.action(move |close| {
|
|
Button::new("profile-save", "Save")
|
|
.primary()
|
|
.on_click(move |_, window, cx| {
|
|
set(&saved, Some("profile saved".into()), cx);
|
|
close(window, cx);
|
|
})
|
|
})
|
|
.into_any_element(),
|
|
Open::Alert => AlertDialog::new(
|
|
"expired",
|
|
Severity::Warning,
|
|
"Session expired",
|
|
"Sign in again to keep your changes. Nothing you wrote is lost.",
|
|
shut.clone(),
|
|
)
|
|
.label("Sign in")
|
|
.into_any_element(),
|
|
Open::Confirm => ConfirmDialog::new(
|
|
"delete",
|
|
"Delete this project?",
|
|
"Its pages, files and history go with it. This cannot be undone.",
|
|
shut.clone(),
|
|
)
|
|
.confirm("Delete project")
|
|
.destructive()
|
|
.on_confirm(move |_, cx| set(&confirmed, Some("project deleted".into()), cx))
|
|
.into_any_element(),
|
|
Open::Prompt => PromptDialog::new("rename", "Rename", &rename, shut.clone())
|
|
.label("New name")
|
|
.submit("Rename")
|
|
.check(|text| match text.trim() {
|
|
"" => Err("A name cannot be empty.".into()),
|
|
text if text.contains('/') => Err("Names cannot hold a slash.".into()),
|
|
_ => Ok(()),
|
|
})
|
|
.on_submit(move |text, _, cx| {
|
|
set(&renamed, Some(format!("renamed to {text}").into()), cx)
|
|
})
|
|
.into_any_element(),
|
|
Open::Fullscreen => Dialog::new("notes", "Release notes", shut.clone())
|
|
.detail("Version 0.9 · September 2026")
|
|
.fullscreen()
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_col()
|
|
.gap_3()
|
|
.max_w(
|
|
cx.theme()
|
|
.container_width(ely_gpui_component::theme::ContainerSize::Sm),
|
|
)
|
|
.child(Caption::new("Menus nest, filter and follow their buttons."))
|
|
.child(Caption::new("Palettes pick on release, as buttons do."))
|
|
.child(Caption::new("Overlays hand focus back on every close.")),
|
|
)
|
|
.into_any_element(),
|
|
}
|
|
});
|
|
section(
|
|
"Dialog / Modal / AlertDialog / ConfirmDialog / PromptDialog / FullscreenDialog",
|
|
"A card over a scrim; Tab stays inside and focus returns on close. An alert holds until acknowledged, a confirm asks first, a prompt checks its one line, and a fullscreen dialog fills the window.",
|
|
cx,
|
|
)
|
|
.child(specimen(
|
|
caption,
|
|
row()
|
|
.child(opener(&open, "edit-profile", "Edit profile", Open::Profile))
|
|
.child(opener(&open, "alert", "Session expired", Open::Alert))
|
|
.child(opener(&open, "confirm", "Delete project", Open::Confirm))
|
|
.child({
|
|
let (open, rename) = (open.clone(), rename.clone());
|
|
probe(
|
|
"prompt",
|
|
Button::new("prompt", "Rename").on_click(move |_, _, cx| {
|
|
rename.update(cx, |input, cx| input.set_text("Roadmap", cx));
|
|
set(&open, Some(Open::Prompt), cx);
|
|
}),
|
|
)
|
|
})
|
|
.child(opener(&open, "fullscreen", "Release notes", Open::Fullscreen)),
|
|
cx,
|
|
))
|
|
.children(overlay)
|
|
}
|
|
|
|
fn pointers(cx: &App) -> impl IntoElement + use<> {
|
|
section(
|
|
"Tooltip / Sheet / Drawer",
|
|
"They live with the pieces they are made of.",
|
|
cx,
|
|
)
|
|
.child(Caption::new(
|
|
"Tooltip is primitives::Tooltip, on Primitives, chapter 1. Sheet and Drawer are layout::Sheet and layout::Drawer, on Layout, chapter 3.",
|
|
))
|
|
}
|
|
|
|
fn render(window: &mut Window, cx: &mut App) -> AnyElement {
|
|
div()
|
|
.child(popovers(window, cx))
|
|
.child(hover_card(cx))
|
|
.child(dialogs(window, cx))
|
|
.child(pointers(cx))
|
|
.into_any_element()
|
|
}
|