Skip to content

Focusout for Dropdown, Menubar and ContextMenu #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Jun 11, 2025
Merged

Focusout for Dropdown, Menubar and ContextMenu #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
79f16fa
Maybe dropdown fix?
wheregmis May 8, 2025
eb50d7a
on focus out try
wheregmis May 8, 2025
d93355b
this way might work
wheregmis May 8, 2025
9d6065f
item selection should work now
wheregmis May 15, 2025
78f2d75
adding type
wheregmis May 17, 2025
afebe2b
Focus out try for menubar
wheregmis May 28, 2025
31b339d
Merge remote-tracking branch 'origin/main' into pr/wheregmis/22
ealmloff May 30, 2025
f27c85d
Using data state instead of hidden and basic animations
wheregmis May 31, 2025
a8e41a2
Adding inert to context_menu, dropdown menu and menubar
wheregmis Jun 2, 2025
6e0313e
Merge branch 'main' into click_out_onfocusout
wheregmis Jun 2, 2025
6d3ae0e
Revert "Adding inert to context_menu, dropdown menu and menubar"
wheregmis Jun 2, 2025
a12dacb
Just comment inert for now
wheregmis Jun 2, 2025
cfbaaf0
handle menubar navigation
ealmloff Jun 11, 2025
e130f1b
Merge branch 'main' into pr/wheregmis/22
ealmloff Jun 11, 2025
342d973
merge styles
ealmloff Jun 11, 2025
c20bdc0
Merge branch 'menu-navigation' into pr/wheregmis/22
ealmloff Jun 11, 2025
ce00340
simplify menubar logic
ealmloff Jun 11, 2025
0cba6c3
implement similar keyboard navigation logic for the dropdown menu com…
ealmloff Jun 11, 2025
44749ac
Keyboard navigation for the context menu component
ealmloff Jun 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions preview/src/components/context_menu/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,25 +25,37 @@ pub(super) fn Demo() -> Element {
class: "context-menu-item",
value: "edit".to_string(),
index: 0usize,
on_select: move |value| {
tracing::info!("Selected item: {}", value);
},
"Edit"
}
ContextMenuItem {
class: "context-menu-item",
value: "undo".to_string(),
index: 1usize,
disabled: true,
on_select: move |value| {
tracing::info!("Selected item: {}", value);
},
"Undo"
}
ContextMenuItem {
class: "context-menu-item",
value: "duplicate".to_string(),
index: 1usize,
index: 2usize,
on_select: move |value| {
tracing::info!("Selected item: {}", value);
},
"Duplicate"
}
ContextMenuItem {
class: "context-menu-item",
value: "delete".to_string(),
index: 2usize,
index: 3usize,
on_select: move |value| {
tracing::info!("Selected item: {}", value);
},
"Delete"
}
}
Expand Down
31 changes: 16 additions & 15 deletions preview/src/components/context_menu/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
border-radius: 0.5rem;
padding: 0.25rem;
box-shadow: 0 0 0 1px var(--dim-border-color);
animation: slideIn 0.1s ease-out;
z-index: 1000;
transform-origin: var(--radix-context-menu-content-transform-origin);
will-change: transform, opacity;
}

@media (prefers-color-scheme: dark) {
Expand All @@ -14,8 +16,18 @@
}
}

.context-menu-content[hidden] {
display: none;
.context-menu-content[data-state="closed"] {
pointer-events: none;
opacity: 0;
transform: scale(0.95) translateY(-2px);
transition: opacity 150ms ease-in, transform 150ms ease-in;
}

.context-menu-content[data-state="open"] {
opacity: 1;
transform: scale(1) translateY(0);
transition: opacity 200ms ease-out,
transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.context-menu-item {
Expand All @@ -28,6 +40,7 @@
color: var(--text-color);
display: flex;
align-items: center;
transition: background-color 100ms ease-out;
}

.context-menu-item[data-disabled="true"] {
Expand All @@ -47,15 +60,3 @@
background: var(--hover-border-color);
}
}

@keyframes slideIn {
from {
opacity: 0;
transform: scale(0.95);
}

to {
opacity: 1;
transform: scale(1);
}
}
30 changes: 16 additions & 14 deletions preview/src/components/dropdown_menu/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@
padding: 0.25rem;
box-shadow: inset 0 0 0 1px var(--dim-border-color);
animation: slideIn 0.1s ease-out;
z-index: 1000;
/* Animation properties */
opacity: 0;
transform: translateY(-8px) scale(0.95);
transition: all 0.2s ease;
}

@media (prefers-color-scheme: dark) {
Expand All @@ -51,8 +56,17 @@
}
}

.dropdown-menu-content[hidden] {
display: none;
/* Open state animations */
.dropdown-menu-content[data-state="open"] {
opacity: 1;
transform: translateY(0) scale(1);
}

/* Closed state animations */
.dropdown-menu-content[data-state="closed"] {
opacity: 0;
transform: translateY(-8px) scale(0.95);
pointer-events: none;
}

.dropdown-menu-item {
Expand Down Expand Up @@ -84,15 +98,3 @@
background: var(--hover-border-color);
}
}

@keyframes slideIn {
from {
opacity: 0;
transform: scale(0.95);
}

to {
opacity: 1;
transform: scale(1);
}
}
18 changes: 12 additions & 6 deletions preview/src/components/menubar/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,29 @@ pub(super) fn Demo() -> Element {
MenubarTrigger { class: "menubar-trigger", "File" }
MenubarContent { class: "menubar-content",
MenubarItem {
index: 0usize,
class: "menubar-item",
value: "new".to_string(),
on_select: move |value| {
tracing::info!("Selected: {value}");
tracing::info!("Selected value: {}", value);
},
"New"
}
MenubarItem {
index: 1usize,
class: "menubar-item",
value: "open".to_string(),
on_select: move |value| {
tracing::info!("Selected: {value}");
tracing::info!("Selected value: {}", value);
},
"Open"
}
MenubarItem {
index: 2usize,
class: "menubar-item",
value: "save".to_string(),
on_select: move |value| {
tracing::info!("Selected: {value}");
tracing::info!("Selected value: {}", value);
},
"Save"
}
Expand All @@ -44,26 +47,29 @@ pub(super) fn Demo() -> Element {
MenubarTrigger { class: "menubar-trigger", "Edit" }
MenubarContent { class: "menubar-content",
MenubarItem {
index: 0usize,
class: "menubar-item",
value: "cut".to_string(),
on_select: move |value| {
tracing::info!("Selected: {value}");
tracing::info!("Selected value: {}", value);
},
"Cut"
}
MenubarItem {
index: 1usize,
class: "menubar-item",
value: "copy".to_string(),
on_select: move |value| {
tracing::info!("Selected: {value}");
tracing::info!("Selected value: {}", value);
},
"Copy"
}
MenubarItem {
index: 2usize,
class: "menubar-item",
value: "paste".to_string(),
on_select: move |value| {
tracing::info!("Selected: {value}");
tracing::info!("Selected value: {}", value);
},
"Paste"
}
Expand Down
33 changes: 17 additions & 16 deletions preview/src/components/menubar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
cursor: pointer;
color: var(--text-color);
border-radius: calc(.5rem - .25rem);
transition: background-color 100ms ease-out;
}

.menubar-menu[data-state="open"] .menubar-trigger {
Expand All @@ -41,6 +42,7 @@
.menubar-trigger:focus-visible {
color: var(--bright-text-color);
background: var(--hover-background-color);
outline: none;
}
@media (prefers-color-scheme: dark) {
.menubar-trigger:hover:not([data-disabled="true"]),
Expand All @@ -50,7 +52,6 @@
}

.menubar-content {
display: none;
position: absolute;
top: 100%;
left: 0;
Expand All @@ -61,7 +62,9 @@
border-radius: .5rem;
padding: .25rem;
box-shadow: inset 0 0 0 1px var(--dim-border-color);
animation: menubarSlideIn 0.1s ease-out;
z-index: 1000;
transform-origin: top;
will-change: transform, opacity;
}

@media (prefers-color-scheme: dark) {
Expand All @@ -71,8 +74,17 @@
}
}

.menubar-menu[data-state="open"] .menubar-content {
display: block;
.menubar-content[data-state="closed"] {
pointer-events: none;
opacity: 0;
transform: translateY(-4px) scale(0.98);
transition: opacity 150ms ease-in, transform 150ms ease-in;
}

.menubar-content[data-state="open"] {
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 200ms ease-out, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menubar-item {
Expand All @@ -92,6 +104,7 @@
.menubar-item:focus-visible {
color: var(--bright-text-color);
background: var(--hover-background-color);
outline: none;
}
@media (prefers-color-scheme: dark) {
.menubar-item:hover:not([data-disabled="true"]),
Expand All @@ -104,15 +117,3 @@
opacity: 0.5;
cursor: not-allowed;
}

@keyframes menubarSlideIn {
from {
opacity: 0;
transform: scale(0.95);
}

to {
opacity: 1;
transform: scale(1);
}
}
Loading
Loading