fix remaining issues with background color in examples (#14115)

# Objective

- Fixes #14097

## Solution

- Switching the uses of `UiImage` in examples to `BackgroundColor` when
needed
This commit is contained in:
François Mockers 2024-07-03 03:13:55 +02:00 committed by GitHub
parent a47b91cccc
commit 160bcc787c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 62 additions and 52 deletions

View file

@ -224,20 +224,19 @@ fn menu(
tutorial_state: Res<State<TutorialState>>,
mut next_tutorial: ResMut<NextState<TutorialState>>,
mut interaction_query: Query<
(&Interaction, &mut UiImage, &MenuButton),
(&Interaction, &mut BackgroundColor, &MenuButton),
(Changed<Interaction>, With<Button>),
>,
) {
for (interaction, mut image, menu_button) in &mut interaction_query {
let color = &mut image.color;
for (interaction, mut color, menu_button) in &mut interaction_query {
match *interaction {
Interaction::Pressed => {
*color = if menu_button == &MenuButton::Tutorial
&& tutorial_state.get() == &TutorialState::Active
{
PRESSED_ACTIVE_BUTTON
PRESSED_ACTIVE_BUTTON.into()
} else {
PRESSED_BUTTON
PRESSED_BUTTON.into()
};
match menu_button {
@ -255,18 +254,18 @@ fn menu(
if menu_button == &MenuButton::Tutorial
&& tutorial_state.get() == &TutorialState::Active
{
*color = HOVERED_ACTIVE_BUTTON;
*color = HOVERED_ACTIVE_BUTTON.into();
} else {
*color = HOVERED_BUTTON;
*color = HOVERED_BUTTON.into();
}
}
Interaction::None => {
if menu_button == &MenuButton::Tutorial
&& tutorial_state.get() == &TutorialState::Active
{
*color = ACTIVE_BUTTON;
*color = ACTIVE_BUTTON.into();
} else {
*color = NORMAL_BUTTON;
*color = NORMAL_BUTTON.into();
}
}
}

View file

@ -142,22 +142,21 @@ mod custom_transitions {
fn menu(
mut next_state: ResMut<NextState<AppState>>,
mut interaction_query: Query<
(&Interaction, &mut UiImage),
(&Interaction, &mut BackgroundColor),
(Changed<Interaction>, With<Button>),
>,
) {
for (interaction, mut image) in &mut interaction_query {
let color = &mut image.color;
for (interaction, mut color) in &mut interaction_query {
match *interaction {
Interaction::Pressed => {
*color = PRESSED_BUTTON;
*color = PRESSED_BUTTON.into();
next_state.set(AppState::InGame);
}
Interaction::Hovered => {
*color = HOVERED_BUTTON;
*color = HOVERED_BUTTON.into();
}
Interaction::None => {
*color = NORMAL_BUTTON;
*color = NORMAL_BUTTON.into();
}
}
}

View file

@ -95,21 +95,21 @@ fn setup_menu(mut commands: Commands) {
fn menu(
mut next_state: ResMut<NextState<AppState>>,
mut interaction_query: Query<
(&Interaction, &mut UiImage),
(&Interaction, &mut BackgroundColor),
(Changed<Interaction>, With<Button>),
>,
) {
for (interaction, mut image) in &mut interaction_query {
for (interaction, mut color) in &mut interaction_query {
match *interaction {
Interaction::Pressed => {
image.color = PRESSED_BUTTON;
*color = PRESSED_BUTTON.into();
next_state.set(AppState::InGame);
}
Interaction::Hovered => {
image.color = HOVERED_BUTTON;
*color = HOVERED_BUTTON.into();
}
Interaction::None => {
image.color = NORMAL_BUTTON;
*color = NORMAL_BUTTON.into();
}
}
}

View file

@ -63,22 +63,21 @@ fn main() {
fn menu(
mut next_state: ResMut<NextState<AppState>>,
mut interaction_query: Query<
(&Interaction, &mut UiImage),
(&Interaction, &mut BackgroundColor),
(Changed<Interaction>, With<Button>),
>,
) {
for (interaction, mut image) in &mut interaction_query {
let color = &mut image.color;
for (interaction, mut color) in &mut interaction_query {
match *interaction {
Interaction::Pressed => {
*color = PRESSED_BUTTON;
*color = PRESSED_BUTTON.into();
next_state.set(AppState::InGame);
}
Interaction::Hovered => {
*color = HOVERED_BUTTON;
*color = HOVERED_BUTTON.into();
}
Interaction::None => {
*color = NORMAL_BUTTON;
*color = NORMAL_BUTTON.into();
}
}
}

View file

@ -100,12 +100,15 @@ fn main() {
struct IdleColor(Color);
fn button_system(
mut interaction_query: Query<(&Interaction, &mut UiImage, &IdleColor), Changed<Interaction>>,
mut interaction_query: Query<
(&Interaction, &mut BackgroundColor, &IdleColor),
Changed<Interaction>,
>,
) {
for (interaction, mut image, &IdleColor(idle_color)) in interaction_query.iter_mut() {
image.color = match interaction {
for (interaction, mut color, &IdleColor(idle_color)) in interaction_query.iter_mut() {
*color = match interaction {
Interaction::Hovered => ORANGE_RED.into(),
_ => idle_color,
_ => idle_color.into(),
};
}
}

View file

@ -19,27 +19,32 @@ const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
fn button_system(
mut interaction_query: Query<
(&Interaction, &mut UiImage, &mut BorderColor, &Children),
(
&Interaction,
&mut BackgroundColor,
&mut BorderColor,
&Children,
),
(Changed<Interaction>, With<Button>),
>,
mut text_query: Query<&mut Text>,
) {
for (interaction, mut image, mut border_color, children) in &mut interaction_query {
for (interaction, mut color, mut border_color, children) in &mut interaction_query {
let mut text = text_query.get_mut(children[0]).unwrap();
match *interaction {
Interaction::Pressed => {
text.sections[0].value = "Press".to_string();
image.color = PRESSED_BUTTON;
*color = PRESSED_BUTTON.into();
border_color.0 = RED.into();
}
Interaction::Hovered => {
text.sections[0].value = "Hover".to_string();
image.color = HOVERED_BUTTON;
*color = HOVERED_BUTTON.into();
border_color.0 = Color::WHITE;
}
Interaction::None => {
text.sections[0].value = "Button".to_string();
image.color = NORMAL_BUTTON;
*color = NORMAL_BUTTON.into();
border_color.0 = Color::BLACK;
}
}

View file

@ -459,13 +459,13 @@ fn buttons_handler<T>(
}
fn text_hover(
mut button_query: Query<(&Interaction, &mut UiImage, &Children), Changed<Interaction>>,
mut button_query: Query<(&Interaction, &mut BackgroundColor, &Children), Changed<Interaction>>,
mut text_query: Query<&mut Text>,
) {
for (interaction, mut image, children) in button_query.iter_mut() {
for (interaction, mut color, children) in button_query.iter_mut() {
match interaction {
Interaction::Hovered => {
image.color = Color::BLACK.with_alpha(0.6);
*color = Color::BLACK.with_alpha(0.6).into();
for &child in children {
if let Ok(mut text) = text_query.get_mut(child) {
// Bypass change detection to avoid recomputation of the text when only changing the color
@ -474,7 +474,7 @@ fn text_hover(
}
}
_ => {
image.color = Color::BLACK.with_alpha(0.5);
*color = Color::BLACK.with_alpha(0.5).into();
for &child in children {
if let Ok(mut text) = text_query.get_mut(child) {
text.bypass_change_detection().sections[0].style.color =

View file

@ -245,7 +245,7 @@ fn spawn_button(
margin: UiRect::horizontal(Val::Px(2.)),
..Default::default()
},
background_color: if active {
border_color: if active {
ACTIVE_BORDER_COLOR
} else {
INACTIVE_BORDER_COLOR
@ -359,7 +359,7 @@ fn update_buttons(
fn update_radio_buttons_colors(
mut event_reader: EventReader<ButtonActivatedEvent>,
button_query: Query<(Entity, &Constraint, &Interaction)>,
mut image_query: Query<&mut UiImage>,
mut border_query: Query<&mut BorderColor>,
mut color_query: Query<&mut BackgroundColor>,
mut text_query: Query<&mut Text>,
children_query: Query<&Children>,
@ -382,7 +382,7 @@ fn update_radio_buttons_colors(
)
};
image_query.get_mut(id).unwrap().color = border_color;
border_query.get_mut(id).unwrap().0 = border_color;
for &child in children_query.get(id).into_iter().flatten() {
color_query.get_mut(child).unwrap().0 = inner_color;
for &grandchild in children_query.get(child).into_iter().flatten() {

View file

@ -19,26 +19,31 @@ fn main() {
fn button_system(
mut interaction_query: Query<
(&Interaction, &mut TextureAtlas, &Children, &mut UiImage),
(
&Interaction,
&mut TextureAtlas,
&Children,
&mut BackgroundColor,
),
(Changed<Interaction>, With<Button>),
>,
mut text_query: Query<&mut Text>,
) {
for (interaction, mut atlas, children, mut image) in &mut interaction_query {
for (interaction, mut atlas, children, mut color) in &mut interaction_query {
let mut text = text_query.get_mut(children[0]).unwrap();
match *interaction {
Interaction::Pressed => {
text.sections[0].value = "Press".to_string();
atlas.index = (atlas.index + 1) % 30;
image.color = GOLD.into();
*color = GOLD.into();
}
Interaction::Hovered => {
text.sections[0].value = "Hover".to_string();
image.color = ORANGE.into();
*color = ORANGE.into();
}
Interaction::None => {
text.sections[0].value = "Button".to_string();
image.color = Color::WHITE;
*color = Color::BLACK.into();
}
}
}

View file

@ -19,25 +19,25 @@ fn main() {
fn button_system(
mut interaction_query: Query<
(&Interaction, &Children, &mut UiImage),
(&Interaction, &Children, &mut BackgroundColor),
(Changed<Interaction>, With<Button>),
>,
mut text_query: Query<&mut Text>,
) {
for (interaction, children, mut image) in &mut interaction_query {
for (interaction, children, mut color) in &mut interaction_query {
let mut text = text_query.get_mut(children[0]).unwrap();
match *interaction {
Interaction::Pressed => {
text.sections[0].value = "Press".to_string();
image.color = GOLD.into();
*color = GOLD.into();
}
Interaction::Hovered => {
text.sections[0].value = "Hover".to_string();
image.color = ORANGE.into();
*color = ORANGE.into();
}
Interaction::None => {
text.sections[0].value = "Button".to_string();
image.color = Color::WHITE;
*color = Color::BLACK.into();
}
}
}