From c24dabde169b0ed04afcbe5278213f8f18813941 Mon Sep 17 00:00:00 2001
From: Elijah Voigt <elijah.caine.mv@gmail.com>
Date: Tue, 22 Jul 2025 15:20:55 -0700
Subject: [PATCH] Made the debug UI look a little less awful

---
 examples/ui.rs |  7 +++----
 src/debug.rs   | 53 ++++++++++++++++++++++++++++----------------------
 src/ui.rs      | 41 +++++++++++++++++++++++++-------------
 3 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/examples/ui.rs b/examples/ui.rs
index 3d3235b..ecc7d5d 100644
--- a/examples/ui.rs
+++ b/examples/ui.rs
@@ -33,7 +33,7 @@ fn setup_list(mut commands: Commands) {
             ..default()
         },))
         .with_children(|parent| {
-            parent.spawn(Text("This srolls".into()));
+            parent.spawn(Text("This scrolls...".into()));
             // List items
             (0..250).for_each(|i| {
                 parent.spawn(Text(format!("Item {i}")));
@@ -60,7 +60,7 @@ fn setup_nav_tree(mut commands: Commands) {
     commands
         .spawn((
             Node {
-                align_self: AlignSelf::Start,
+                top: Val::Percent(25.0),
                 justify_self: JustifySelf::End,
                 min_width: Val::Px(25.0),
                 min_height: Val::Px(25.0),
@@ -80,12 +80,11 @@ fn setup_nav_tree(mut commands: Commands) {
                         position_type: PositionType::Absolute,
                         flex_direction: FlexDirection::Column,
                         right: Val::Percent(100.0),
-                        width: Val::Auto,
                         ..default()
                     },
                 ))
                 .with_children(|parent| {
-                    (0..10).for_each(|_| {
+                    (0..5).for_each(|_| {
                         let title: String = lipsum_title_with_rng(thread_rng())
                             .split_whitespace()
                             .take(2)
diff --git a/src/debug.rs b/src/debug.rs
index 667668e..bcebfc6 100644
--- a/src/debug.rs
+++ b/src/debug.rs
@@ -71,10 +71,10 @@ fn init_debug_ui(mut commands: Commands) {
     commands.spawn((
         DebuggingState::On,
         Name::new("Debug Indicator"),
-        Text(" Debug: ON ".into()),
-        TextColor(WHITE.into()),
-        BackgroundColor(RED.into()),
-        BorderRadius::MAX,
+        GlobalZIndex(i32::MAX - 1),
+        children![
+            Text(" Debug: ON ".into()),
+        ],
         Node {
             align_self: AlignSelf::Center,
             justify_self: JustifySelf::End,
@@ -86,9 +86,10 @@ fn init_debug_ui(mut commands: Commands) {
     commands.spawn((
         DebuggingState::On,
         Name::new("Version #"),
-        Text::new(VERSION),
-        TextColor(WHITE.into()),
-        BackgroundColor(BLACK.into()),
+        children![
+            Text::new(VERSION),
+        ],
+        GlobalZIndex(i32::MAX - 1),
         Node {
             width: Val::Auto,
             align_self: AlignSelf::End,
@@ -101,41 +102,42 @@ fn init_debug_ui(mut commands: Commands) {
     commands.spawn((
         DebuggingState::On,
         Name::new("FPS"),
-        Text::new("FPS: ##.#"),
-        TextColor(WHITE.into()),
-        BackgroundColor(BLACK.into()),
-        SyncResource::<Fps>::default(),
+        GlobalZIndex(i32::MAX - 1),
         Node {
             width: Val::Auto,
             align_self: AlignSelf::Start,
             justify_self: JustifySelf::End,
             ..default()
         },
-    ));
+    )).with_children(|parent| {
+        parent.spawn((
+            Text::new("FPS: ##.#"),
+            SyncResource::<Fps>::default(),
+        ));
+    });
 
     commands.spawn((
         DebuggingState::On,
         Name::new("Entity Count"),
-        Text::new("Entities: ###"),
-        TextColor(WHITE.into()),
-        BackgroundColor(BLACK.into()),
-        SyncResource::<EntityCount>::default(),
+        GlobalZIndex(i32::MAX - 1),
         Node {
             width: Val::Auto,
             align_self: AlignSelf::Start,
             justify_self: JustifySelf::Center,
             ..default()
         },
-    ));
+    )).with_children(|parent| {
+        parent.spawn((
+            Text::new("Entities: ###"),
+            SyncResource::<EntityCount>::default(),
+        ));
+    });
 
     // Tooltip
     commands.spawn((
         DebuggingState::On,
-        Text("Tooltip Placeholder".into()),
-        Pickable::IGNORE,
-        TextColor(WHITE.into()),
         SyncResource::<ToolTip>::default(),
-        BackgroundColor(BLACK.with_alpha(0.9).into()),
+        Pickable::IGNORE,
         GlobalZIndex(i32::MAX),
         Node {
             position_type: PositionType::Absolute,
@@ -147,7 +149,12 @@ fn init_debug_ui(mut commands: Commands) {
             justify_content: JustifyContent::Center,
             ..default()
         },
-    ));
+    )).with_children(|parent| {
+        parent.spawn((
+            Text("Tooltip Placeholder".into()),
+            SyncResource::<ToolTip>::default(),
+        ));
+    });
 }
 
 /// Toggles the debug state from off -> on // off -> on when triggered
@@ -197,7 +204,7 @@ impl Display for ToolTip {
 }
 
 fn tooltip_follow(
-    mut tooltip: Single<(&mut Node, &mut Visibility), With<SyncResource<ToolTip>>>,
+    mut tooltip: Single<(&mut Node, &mut Visibility), (With<SyncResource<ToolTip>>, Without<Text>)>,
     window: Single<&Window>,
 ) {
     if let Some(Vec2 { x, y }) = window.cursor_position() {
diff --git a/src/ui.rs b/src/ui.rs
index b4f246a..92ecaa2 100644
--- a/src/ui.rs
+++ b/src/ui.rs
@@ -14,6 +14,7 @@ impl Plugin for BaseUiPlugin {
                 add_ui_text
                     .run_if(any_component_added::<Text>)
                     .after(add_ui_node),
+                navs_on_top.run_if(any_component_changed::<NavState>)
             ),
         );
     }
@@ -98,11 +99,11 @@ fn add_ui_text(added: Query<Entity, Added<Text>>, mut commands: Commands) {
         style: Res<Style>,
     ) {
         // ONLY DO THIS IF CHILD OF BUTTON
-        if let Ok((mut tc, ChildOf(p))) = query.get_mut(trigger.target()) {
-            if buttons.contains(*p) {
-                debug!("pointer pressed {:?}", trigger.target());
-                tc.0 = style.primary;
-            }
+        if let Ok((mut tc, ChildOf(p))) = query.get_mut(trigger.target())
+            && buttons.contains(*p)
+        {
+            debug!("pointer pressed {:?}", trigger.target());
+            tc.0 = style.primary;
         }
     }
 
@@ -113,11 +114,11 @@ fn add_ui_text(added: Query<Entity, Added<Text>>, mut commands: Commands) {
         style: Res<Style>,
     ) {
         // ONLY DO THIS IF CHILD OF BUTTON
-        if let Ok((mut tc, ChildOf(p))) = query.get_mut(trigger.target()) {
-            if buttons.contains(*p) {
-                debug!("pointer released {:?}", trigger.target());
-                tc.0 = style.secondary;
-            }
+        if let Ok((mut tc, ChildOf(p))) = query.get_mut(trigger.target())
+            && buttons.contains(*p)
+        {
+            debug!("pointer released {:?}", trigger.target());
+            tc.0 = style.secondary;
         }
     }
 
@@ -137,10 +138,8 @@ fn add_ui_node(
     added.iter_mut().for_each(|(e, mut n)| {
         debug!("Updating node: {:?}", e);
 
-        n.padding = UiRect::all(Val::Px(3.0));
-
         // Update Node border
-        n.border = UiRect::all(Val::Px(1.0));
+        n.border = UiRect::all(Val::Px(2.0));
 
         let mut this = commands.entity(e);
 
@@ -208,3 +207,19 @@ pub enum NavState {
     #[default]
     Closed,
 }
+
+fn navs_on_top(
+    changed: Query<(Entity, &NavState), Changed<NavState>>,
+    mut commands: Commands,
+) {
+    changed.iter().for_each(|(e, ns)| {
+        match ns {
+            NavState::Open => {
+                commands.entity(e).insert(GlobalZIndex(i32::MAX/ 2));
+            }
+            NavState::Closed => {
+                commands.entity(e).remove::<GlobalZIndex>();
+            }
+        }
+    })
+}