Add highlight interaction to plugins

benfrankel · Dec 4, 2023 · 9d3a609 · 9d3a609
1 parent 36d1559
commit 9d3a609
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 229 deletions.
diff --git a/assets/config.ron b/assets/config.ron
@@ -50,6 +50,7 @@
 
         plugin_view_width: Px(250.0),
         plugin_view_background_color: Rgba(red: 0.184, green: 0.188, blue: 0.239, alpha: 1.000),
+        plugin_view_highlight_color: Rgba(red: 0.263, green: 0.275, blue: 0.318, alpha: 1.000),
         plugin_view_text_color: Rgba(red: 0.800, green: 0.800, blue: 0.800, alpha: 1.000),
         plugin_view_font_size: Px(16.0),
 

diff --git a/src/state/editor_screen.rs b/src/state/editor_screen.rs
@@ -12,6 +12,7 @@ use crate::config::Config;
 use crate::state::AppState::*;
 use crate::ui::CodeTyper;
 use crate::ui::FontSize;
+use crate::ui::InteractionColor;
 use crate::ui::Tooltip;
 use crate::ui::TooltipSide;
 use crate::ui::BOLD_FONT_HANDLE;
@@ -38,6 +39,7 @@ pub struct EditorScreenConfig {
 
     plugin_view_width: Val,
     plugin_view_background_color: Color,
+    plugin_view_highlight_color: Color,
     plugin_view_text_color: Color,
     plugin_view_font_size: Val,
 
@@ -162,17 +164,23 @@ fn enter_editor_screen(mut commands: Commands, root: Res<AppRoot>, config: Res<C
                 Name::new("Plugin"),
                 NodeBundle {
                     style: Style {
+                        margin: UiRect::bottom(Val::Px(1.0)),
                         padding: UiRect::vertical(Val::Px(4.0)),
                         ..default()
                     },
                     ..default()
                 },
+                Interaction::default(),
+                InteractionColor {
+                    normal: Color::NONE,
+                    hovered: config.plugin_view_highlight_color,
+                    pressed: config.plugin_view_highlight_color,
+                },
                 Tooltip {
                     text: format!("This is the description for {plugin_name}."),
                     side: TooltipSide::Right,
                     offset: vec2(12.0, 0.0),
                 },
-                Interaction::default(),
             ))
             .set_parent(plugin_view)
             .id();

diff --git a/src/state/editor_screen/code_view.rs b/src/state/editor_screen/code_view.rs
diff --git a/src/state/editor_screen/system_view.rs b/src/state/editor_screen/system_view.rs
diff --git a/src/state/title_screen.rs b/src/state/title_screen.rs
@@ -12,8 +12,8 @@ use crate::state::AppState::*;
 use crate::ui::vh;
 use crate::ui::vmin;
 use crate::ui::vw;
-use crate::ui::ButtonColor;
 use crate::ui::FontSize;
+use crate::ui::InteractionColor;
 use crate::ui::BOLD_FONT_HANDLE;
 use crate::ui::FONT_HANDLE;
 use crate::AppRoot;
@@ -206,7 +206,7 @@ fn enter_title_screen(mut commands: Commands, root: Res<AppRoot>, config: Res<Co
                 border_color: config.button_border_color.into(),
                 ..default()
             },
-            ButtonColor {
+            InteractionColor {
                 normal: config.button_normal_color,
                 hovered: config.button_hovered_color,
                 pressed: config.button_pressed_color,

diff --git a/src/ui.rs b/src/ui.rs
@@ -1,18 +1,18 @@
-mod button_color;
 mod code_typer;
 mod font;
+mod interaction_color;
 mod tooltip;
 
 use bevy::prelude::*;
 use bevy_mod_picking::prelude::*;
 
 use crate::camera::CAMERA_HEIGHT;
 use crate::camera::CAMERA_WIDTH;
-pub use crate::ui::button_color::ButtonColor;
 pub use crate::ui::code_typer::CodeTyper;
 pub use crate::ui::font::FontSize;
 pub use crate::ui::font::BOLD_FONT_HANDLE;
 pub use crate::ui::font::FONT_HANDLE;
+pub use crate::ui::interaction_color::InteractionColor;
 pub use crate::ui::tooltip::Tooltip;
 pub use crate::ui::tooltip::TooltipConfig;
 pub use crate::ui::tooltip::TooltipSide;
@@ -23,7 +23,7 @@ impl Plugin for UiPlugin {
     fn build(&self, app: &mut App) {
         app.add_plugins((
             DefaultPickingPlugins,
-            button_color::ButtonColorPlugin,
+            interaction_color::InteractionColorPlugin,
             code_typer::CodeTyperPlugin,
             font::FontPlugin,
             tooltip::TooltipPlugin,

diff --git a/src/ui/button_color.rs b/src/ui/button_color.rs
diff --git a/src/ui/interaction_color.rs b/src/ui/interaction_color.rs
@@ -0,0 +1,33 @@
+use bevy::prelude::*;
+
+pub struct InteractionColorPlugin;
+
+impl Plugin for InteractionColorPlugin {
+    fn build(&self, app: &mut App) {
+        app.register_type::<InteractionColor>()
+            .add_systems(Update, update_button_color);
+    }
+}
+
+// The background color to use for each interaction state
+#[derive(Component, Reflect)]
+pub struct InteractionColor {
+    pub normal: Color,
+    pub hovered: Color,
+    pub pressed: Color,
+}
+
+fn update_button_color(
+    mut interaction_query: Query<
+        (&InteractionColor, &Interaction, &mut BackgroundColor),
+        Changed<Interaction>,
+    >,
+) {
+    for (palette, interaction, mut color) in &mut interaction_query {
+        color.0 = match interaction {
+            Interaction::None => palette.normal,
+            Interaction::Hovered => palette.hovered,
+            Interaction::Pressed => palette.pressed,
+        }
+    }
+}