Update disabled menu, button, dropdown etc. to use default cursor. (#814)

To follow macOS UX design.
This commit is contained in:
Jason Lee 2025-04-24 21:28:15 +08:00 committed by GitHub
parent bbb267f2bf
commit a9d145dd50
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 13 additions and 33 deletions

View file

@ -169,6 +169,8 @@ impl Render for MenuStory {
}, },
) )
.separator() .separator()
.menu_with_disabled("Disabled Item", Box::new(Info(0)), true)
.separator()
.submenu("Links", window, cx, |menu, _, _| { .submenu("Links", window, cx, |menu, _, _| {
menu.link_with_icon( menu.link_with_icon(
"GitHub Repository", "GitHub Repository",

View file

@ -469,8 +469,7 @@ impl RenderOnce for Button {
) )
.when(self.disabled, |this| { .when(self.disabled, |this| {
let disabled_style = style.disabled(self.outline, cx); let disabled_style = style.disabled(self.outline, cx);
this.cursor_not_allowed() this.bg(disabled_style.bg)
.bg(disabled_style.bg)
.text_color(disabled_style.fg) .text_color(disabled_style.fg)
.border_color(disabled_style.border) .border_color(disabled_style.border)
.shadow_none() .shadow_none()

View file

@ -181,8 +181,7 @@ impl RenderOnce for Checkbox {
) )
}) })
.when(self.disabled, |this| { .when(self.disabled, |this| {
this.cursor_not_allowed() this.text_color(cx.theme().muted_foreground)
.text_color(cx.theme().muted_foreground)
}) })
.when_some( .when_some(
self.on_click.filter(|_| !self.disabled), self.on_click.filter(|_| !self.disabled),

View file

@ -575,8 +575,7 @@ where
}; };
title.when(self.disabled, |this| { title.when(self.disabled, |this| {
this.cursor_not_allowed() this.text_color(cx.theme().muted_foreground)
.text_color(cx.theme().muted_foreground)
}) })
} }
} }
@ -648,13 +647,7 @@ where
.border_color(cx.theme().input) .border_color(cx.theme().input)
.rounded(cx.theme().radius) .rounded(cx.theme().radius)
.when(cx.theme().shadow, |this| this.shadow_sm()) .when(cx.theme().shadow, |this| this.shadow_sm())
.map(|this| { .map(|this| if self.disabled { this } else { this })
if self.disabled {
this.cursor_not_allowed()
} else {
this
}
})
.overflow_hidden() .overflow_hidden()
.input_text_size(self.size) .input_text_size(self.size)
.map(|this| match self.width { .map(|this| match self.width {
@ -701,15 +694,12 @@ where
} }
}; };
this.child( this.child(Icon::new(icon).xsmall().text_color(
Icon::new(icon) match self.disabled {
.xsmall() true => cx.theme().muted_foreground.opacity(0.5),
.text_color(match self.disabled { false => cx.theme().muted_foreground,
true => cx.theme().muted_foreground.opacity(0.5), },
false => cx.theme().muted_foreground, ))
})
.when(self.disabled, |this| this.cursor_not_allowed()),
)
}), }),
) )
.child( .child(

View file

@ -143,8 +143,7 @@ impl RenderOnce for ListItem {
}) })
}) })
.when(self.disabled, |this| { .when(self.disabled, |this| {
this.cursor_not_allowed() this.text_color(cx.theme().muted_foreground)
.text_color(cx.theme().muted_foreground)
}) })
.child( .child(
h_flex() h_flex()

View file

@ -172,7 +172,6 @@ impl Element for Switch {
.border(inset) .border(inset)
.border_color(cx.theme().transparent) .border_color(cx.theme().transparent)
.bg(bg) .bg(bg)
.when(self.disabled, |this| this.cursor_not_allowed())
.when_some(self.tooltip.clone(), |this, tooltip| { .when_some(self.tooltip.clone(), |this, tooltip| {
this.tooltip(move |window, cx| { this.tooltip(move |window, cx| {
Tooltip::new(tooltip.clone()).build(window, cx) Tooltip::new(tooltip.clone()).build(window, cx)

View file

@ -583,7 +583,6 @@ impl RenderOnce for Tab {
.flex_wrap() .flex_wrap()
.items_center() .items_center()
.flex_shrink_0() .flex_shrink_0()
.when(self.disabled, |this| this.cursor_not_allowed())
.overflow_hidden() .overflow_hidden()
.h(height) .h(height)
.overflow_hidden() .overflow_hidden()

View file

@ -473,13 +473,6 @@ impl Calendar {
_ => this.size_9().rounded(cx.theme().radius * 2.), _ => this.size_9().rounded(cx.theme().radius * 2.),
}) })
.justify_center() .justify_center()
.map(|this| {
if disabled {
this.cursor_not_allowed()
} else {
this
}
})
.when(muted, |this| { .when(muted, |this| {
this.text_color(if disabled { this.text_color(if disabled {
cx.theme().muted_foreground.opacity(0.3) cx.theme().muted_foreground.opacity(0.3)