forestia/bevy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set checkbox and radio fill color to gray when disabled in core widgets example (#19792)

Browse Source 
Simple color change to the core widgets example. This sets the fill
colors of the elements to gray if they are selected but disabled. It was
hard to notice if they were disabled when they were still green.


![disabled_gray](https://github.com/user-attachments/assets/299f0700-9fab-4aa4-9076-f17859a60a5e)
This commit is contained in:
Jordan Halase 2025-07-02 18:55:58 -05:00 committed by GitHub
parent 05d954e1ab
commit 0adbacd4c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
examples/ui/core_widgets.rs
View File

@ -53,8 +53,9 @@ const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
const SLIDER_TRACK: Color = Color::srgb(0.05, 0.05, 0.05);
const SLIDER_THUMB: Color = Color::srgb(0.35, 0.75, 0.35);
const CHECKBOX_OUTLINE: Color = Color::srgb(0.45, 0.45, 0.45);
const CHECKBOX_CHECK: Color = Color::srgb(0.35, 0.75, 0.35);
const ELEMENT_OUTLINE: Color = Color::srgb(0.45, 0.45, 0.45);
const ELEMENT_FILL: Color = Color::srgb(0.35, 0.75, 0.35);
const ELEMENT_FILL_DISABLED: Color = Color::srgb(0.5019608, 0.5019608, 0.5019608);
/// Marker which identifies buttons with a particular style, in this case the "Demo style".
#[derive(Component)]
@ -353,7 +354,7 @@ fn slider(min: f32, max: f32, value: f32, on_change: Callback<In<f32>>) -> impl
height: Val::Px(6.0),
..default()
},
BackgroundColor(SLIDER_TRACK), // Border color for the checkbox
BackgroundColor(SLIDER_TRACK), // Border color for the slider
BorderRadius::all(Val::Px(3.0)),
)),
// Invisible track to allow absolute placement of thumb entity. This is narrower than
@ -456,7 +457,7 @@ fn update_slider_style2(
fn thumb_color(disabled: bool, hovered: bool) -> Color {
match (disabled, hovered) {
(true, _) => GRAY.into(),
(true, _) => ELEMENT_FILL_DISABLED,
(false, true) => SLIDER_THUMB.lighter(0.3),
@ -495,7 +496,7 @@ fn checkbox(
border: UiRect::all(Val::Px(2.0)),
..default()
},
BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox
BorderColor::all(ELEMENT_OUTLINE), // Border color for the checkbox
BorderRadius::all(Val::Px(3.0)),
children![
// Checkbox inner
@ -509,7 +510,7 @@ fn checkbox(
top: Val::Px(2.0),
..default()
},
BackgroundColor(CHECKBOX_CHECK),
BackgroundColor(ELEMENT_FILL),
),
],
)),
@ -525,7 +526,7 @@ fn checkbox(
)
}
// Update the checkbox's styles.
// Update the element's styles.
fn update_checkbox_or_radio_style(
mut q_checkbox: Query<
(Has<Checked>, &Hovered, Has<InteractionDisabled>, &Children),
@ -635,27 +636,27 @@ fn set_checkbox_or_radio_style(
mark_bg: &mut BackgroundColor,
) {
let color: Color = if disabled {
// If the checkbox is disabled, use a lighter color
CHECKBOX_OUTLINE.with_alpha(0.2)
// If the element is disabled, use a lighter color
ELEMENT_OUTLINE.with_alpha(0.2)
} else if hovering {
// If hovering, use a lighter color
CHECKBOX_OUTLINE.lighter(0.2)
ELEMENT_OUTLINE.lighter(0.2)
} else {
// Default color for the checkbox
CHECKBOX_OUTLINE
// Default color for the element
ELEMENT_OUTLINE
};
// Update the background color of the check mark
// Update the background color of the element
border_color.set_all(color);
let mark_color: Color = match (disabled, checked) {
(true, true) => CHECKBOX_CHECK.with_alpha(0.5),
(false, true) => CHECKBOX_CHECK,
(true, true) => ELEMENT_FILL_DISABLED,
(false, true) => ELEMENT_FILL,
(_, false) => Srgba::NONE.into(),
};
if mark_bg.0 != mark_color {
// Update the color of the check mark
// Update the color of the element
mark_bg.0 = mark_color;
}
}
@ -707,7 +708,7 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B
border: UiRect::all(Val::Px(2.0)),
..default()
},
BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox
BorderColor::all(ELEMENT_OUTLINE), // Border color for the radio button
BorderRadius::MAX,
children![
// Radio inner
@ -722,7 +723,7 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B
..default()
},
BorderRadius::MAX,
BackgroundColor(CHECKBOX_CHECK),
BackgroundColor(ELEMENT_FILL),
),
],
)),