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