logiguard fork v3: full patch set on verified 8c74db0 tree
Includes prior-session patches (carry forward so the app compiles): - crates/gpui/build.rs: cross-compile manifest fix - crates/gpui/src/platform.rs: PlatformWindow::activate_with_token trait method - crates/gpui/src/window.rs: Window::activate_with_token public API - crates/gpui_linux/src/linux/wayland/window.rs: WaylandWindow::activate_with_token + activate() keyboard-serial fix Plus the focus-serial fix: - serial.rs: SerialKind::KeyboardEnter - client.rs: store wl_keyboard.enter serial; latest_serial_of() Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Mohamad Khani
229
crates/gpui/examples/focus_visible.rs
Normal file
229
crates/gpui/examples/focus_visible.rs
Normal file
@@ -0,0 +1,229 @@
|
||||
#![cfg_attr(target_family = "wasm", no_main)]
|
||||
|
||||
use gpui::{
|
||||
App, Bounds, Context, Div, ElementId, FocusHandle, KeyBinding, SharedString, Stateful, Window,
|
||||
WindowBounds, WindowOptions, actions, div, prelude::*, px, size,
|
||||
};
|
||||
use gpui_platform::application;
|
||||
|
||||
actions!(example, [Tab, TabPrev, Quit]);
|
||||
|
||||
struct Example {
|
||||
focus_handle: FocusHandle,
|
||||
items: Vec<(FocusHandle, &'static str)>,
|
||||
message: SharedString,
|
||||
}
|
||||
|
||||
impl Example {
|
||||
fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
|
||||
let items = vec![
|
||||
(
|
||||
cx.focus_handle().tab_index(1).tab_stop(true),
|
||||
"Button with .focus() - always shows border when focused",
|
||||
),
|
||||
(
|
||||
cx.focus_handle().tab_index(2).tab_stop(true),
|
||||
"Button with .focus_visible() - only shows border with keyboard",
|
||||
),
|
||||
(
|
||||
cx.focus_handle().tab_index(3).tab_stop(true),
|
||||
"Button with both .focus() and .focus_visible()",
|
||||
),
|
||||
];
|
||||
|
||||
let focus_handle = cx.focus_handle();
|
||||
window.focus(&focus_handle, cx);
|
||||
|
||||
Self {
|
||||
focus_handle,
|
||||
items,
|
||||
message: SharedString::from(
|
||||
"Try clicking vs tabbing! Click shows no border, Tab shows border.",
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
fn on_tab(&mut self, _: &Tab, window: &mut Window, cx: &mut Context<Self>) {
|
||||
window.focus_next(cx);
|
||||
self.message = SharedString::from("Pressed Tab - focus-visible border should appear!");
|
||||
}
|
||||
|
||||
fn on_tab_prev(&mut self, _: &TabPrev, window: &mut Window, cx: &mut Context<Self>) {
|
||||
window.focus_prev(cx);
|
||||
self.message =
|
||||
SharedString::from("Pressed Shift-Tab - focus-visible border should appear!");
|
||||
}
|
||||
|
||||
fn on_quit(&mut self, _: &Quit, _window: &mut Window, cx: &mut Context<Self>) {
|
||||
cx.quit();
|
||||
}
|
||||
}
|
||||
|
||||
impl Render for Example {
|
||||
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
||||
fn button_base(id: impl Into<ElementId>, label: &'static str) -> Stateful<Div> {
|
||||
div()
|
||||
.id(id)
|
||||
.h_16()
|
||||
.w_full()
|
||||
.flex()
|
||||
.justify_center()
|
||||
.items_center()
|
||||
.bg(gpui::rgb(0x2563eb))
|
||||
.text_color(gpui::white())
|
||||
.rounded_md()
|
||||
.cursor_pointer()
|
||||
.hover(|style| style.bg(gpui::rgb(0x1d4ed8)))
|
||||
.child(label)
|
||||
}
|
||||
|
||||
div()
|
||||
.id("app")
|
||||
.track_focus(&self.focus_handle)
|
||||
.on_action(cx.listener(Self::on_tab))
|
||||
.on_action(cx.listener(Self::on_tab_prev))
|
||||
.on_action(cx.listener(Self::on_quit))
|
||||
.size_full()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.p_8()
|
||||
.gap_6()
|
||||
.bg(gpui::rgb(0xf3f4f6))
|
||||
.child(
|
||||
div()
|
||||
.text_2xl()
|
||||
.font_weight(gpui::FontWeight::BOLD)
|
||||
.text_color(gpui::rgb(0x111827))
|
||||
.child("CSS focus-visible Demo"),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.p_4()
|
||||
.rounded_md()
|
||||
.bg(gpui::rgb(0xdbeafe))
|
||||
.text_color(gpui::rgb(0x1e3a8a))
|
||||
.child(self.message.clone()),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_4()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_2()
|
||||
.child(
|
||||
div()
|
||||
.text_sm()
|
||||
.font_weight(gpui::FontWeight::BOLD)
|
||||
.text_color(gpui::rgb(0x374151))
|
||||
.child("1. Regular .focus() - always visible:"),
|
||||
)
|
||||
.child(
|
||||
button_base("button1", self.items[0].1)
|
||||
.track_focus(&self.items[0].0)
|
||||
.focus(|style| {
|
||||
style.border_4().border_color(gpui::rgb(0xfbbf24))
|
||||
})
|
||||
.on_click(cx.listener(|this, _, _, cx| {
|
||||
this.message =
|
||||
"Clicked button 1 - focus border is visible!".into();
|
||||
cx.notify();
|
||||
})),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_2()
|
||||
.child(
|
||||
div()
|
||||
.text_sm()
|
||||
.font_weight(gpui::FontWeight::BOLD)
|
||||
.text_color(gpui::rgb(0x374151))
|
||||
.child("2. New .focus_visible() - only keyboard:"),
|
||||
)
|
||||
.child(
|
||||
button_base("button2", self.items[1].1)
|
||||
.track_focus(&self.items[1].0)
|
||||
.focus_visible(|style| {
|
||||
style.border_4().border_color(gpui::rgb(0x10b981))
|
||||
})
|
||||
.on_click(cx.listener(|this, _, _, cx| {
|
||||
this.message =
|
||||
"Clicked button 2 - no border! Try Tab instead.".into();
|
||||
cx.notify();
|
||||
})),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_2()
|
||||
.child(
|
||||
div()
|
||||
.text_sm()
|
||||
.font_weight(gpui::FontWeight::BOLD)
|
||||
.text_color(gpui::rgb(0x374151))
|
||||
.child(
|
||||
"3. Both .focus() (yellow) and .focus_visible() (green):",
|
||||
),
|
||||
)
|
||||
.child(
|
||||
button_base("button3", self.items[2].1)
|
||||
.track_focus(&self.items[2].0)
|
||||
.focus(|style| {
|
||||
style.border_4().border_color(gpui::rgb(0xfbbf24))
|
||||
})
|
||||
.focus_visible(|style| {
|
||||
style.border_4().border_color(gpui::rgb(0x10b981))
|
||||
})
|
||||
.on_click(cx.listener(|this, _, _, cx| {
|
||||
this.message =
|
||||
"Clicked button 3 - yellow border. Tab shows green!"
|
||||
.into();
|
||||
cx.notify();
|
||||
})),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
fn run_example() {
|
||||
application().run(|cx: &mut App| {
|
||||
cx.bind_keys([
|
||||
KeyBinding::new("tab", Tab, None),
|
||||
KeyBinding::new("shift-tab", TabPrev, None),
|
||||
KeyBinding::new("cmd-q", Quit, None),
|
||||
]);
|
||||
|
||||
let bounds = Bounds::centered(None, size(px(800.), px(600.0)), cx);
|
||||
cx.open_window(
|
||||
WindowOptions {
|
||||
window_bounds: Some(WindowBounds::Windowed(bounds)),
|
||||
..Default::default()
|
||||
},
|
||||
|window, cx| cx.new(|cx| Example::new(window, cx)),
|
||||
)
|
||||
.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();
|
||||
}
|
||||
Reference in New Issue
Block a user