Update scroll_panel2.py

* ui: add pressed state and visual feedback for search button in `TreeDialog`

* less

selfdrive/ui/layouts/home.py

@@ -177,7 +177,7 @@ class HomeLayout(Widget):
 
     version_rect = rl.Rectangle(self.header_rect.x + self.header_rect.width - version_text_width, self.header_rect.y,
                                 version_text_width, self.header_rect.height)
-    gui_label(version_rect, self._version_text, 48, rl.WHITE, alignment=rl.GuiTextAlignment.TEXT_ALIGN_RIGHT, font_weight=FontWeight.AUDIOWIDE)
+    gui_label(version_rect, self._version_text, 48, rl.WHITE, alignment=rl.GuiTextAlignment.TEXT_ALIGN_RIGHT)
 
   def _render_home_content(self):
     self._render_left_column()

system/ui/lib/application.py

@@ -94,7 +94,6 @@ class FontWeight(StrEnum):
   BOLD = "Inter-Bold.fnt"
   SEMI_BOLD = "Inter-SemiBold.fnt"
   UNIFONT = "unifont.fnt"
-  AUDIOWIDE = "Audiowide-Regular.ttf"
 
   # Small UI fonts
   DISPLAY_REGULAR = "Inter-Regular.fnt"

system/ui/lib/scroll_panel2.py

@@ -16,6 +16,7 @@ AUTO_SCROLL_TC = 0.18
 BOUNCE_RETURN_RATE = 10.0
 REJECT_DECELERATION_FACTOR = 3
 MAX_SPEED = 10000.0  # px/s
+MOUSE_WHEEL_SCROLL_SPEED = 5
 
 DEBUG = os.getenv("DEBUG_SCROLL", "0") == "1"
 
@@ -58,7 +59,7 @@ class GuiScrollPanel2:
       self._handle_mouse_event(mouse_event, bounds, bounds_size, content_size)
       self._previous_mouse_event = mouse_event
 
-    self._update_state(bounds_size, content_size)
+    self._update_state(bounds, bounds_size, content_size)
 
     if DEBUG:
       print('Velocity:', self._velocity)
@@ -67,8 +68,17 @@ class GuiScrollPanel2:
       print()
     return self.get_offset()
 
-  def _update_state(self, bounds_size: float, content_size: float) -> None:
+  def _update_state(self, bounds: rl.Rectangle, bounds_size: float, content_size: float) -> None:
     """Runs per render frame, independent of mouse events. Updates auto-scrolling state and velocity."""
+    mouse_wheel = rl.get_mouse_wheel_move()
+    if mouse_wheel != 0:
+      mouse_pos = rl.get_mouse_position()
+      if rl.check_collision_point_rec(mouse_pos, bounds):
+        scroll_delta = mouse_wheel * MOUSE_WHEEL_SCROLL_SPEED
+        current_offset = self._offset.x if self._horizontal else self._offset.y
+        self.set_offset(current_offset + scroll_delta)
+        self._velocity = 0.0
+
     if self._state == ScrollState.AUTO_SCROLL:
       # simple exponential return if out of bounds
       out_of_bounds = self.get_offset() > 0 or self.get_offset() < (bounds_size - content_size)

system/ui/sunnypilot/lib/styles.py

@@ -69,6 +69,9 @@ class DefaultStyleSP(Base):
   BUTTON_PRIMARY_COLOR = rl.Color(70, 91, 234, 255)  # Royal Blue
   BUTTON_NEUTRAL_GRAY = rl.Color(51, 51, 51, 255)
   BUTTON_DISABLED_BG_COLOR = rl.Color(30, 30, 30, 255)  # Very Dark Grey
+  TREE_DIALOG_TRANSPARENT = rl.Color(0, 0, 0, 0)
+  TREE_DIALOG_SEARCH_BUTTON_PRESSED = rl.Color(0x69, 0x68, 0x68, 0xFF)
+  TREE_DIALOG_SEARCH_BUTTON_BORDER = rl.Color(150, 150, 150, 200)
 
   # Vehicle Description Colors
   GREEN = rl.Color(0, 241, 0, 255)

system/ui/sunnypilot/widgets/tree_dialog.py

@@ -99,6 +99,7 @@ class TreeOptionDialog(MultiOptionDialog):
     self.search_title = search_title or tr("Enter search query")
     self.search_subtitle = search_subtitle
     self.search_dialog = None
+    self._search_pressed = False
 
     self._build_visible_items()
 
@@ -183,9 +184,10 @@ class TreeOptionDialog(MultiOptionDialog):
     input_rect = rl.Rectangle(self._search_rect.x + inset, self._search_rect.y + inset,
                               self._search_rect.width - inset * 2, self._search_rect.height - inset * 2)
 
-    # Transparent fill + border
-    rl.draw_rectangle_rounded(input_rect, roundness, 10, rl.Color(0, 0, 0, 0))
-    rl.draw_rectangle_rounded_lines_ex(input_rect, roundness, 10, 3, rl.Color(150, 150, 150, 200))
+    # Transparent fill (unpressed), white fill (pressed), border
+    fill_color = style.TREE_DIALOG_SEARCH_BUTTON_PRESSED if self._search_pressed else style.TREE_DIALOG_TRANSPARENT
+    rl.draw_rectangle_rounded(input_rect, roundness, 10, fill_color)
+    rl.draw_rectangle_rounded_lines_ex(input_rect, roundness, 10, 3, style.TREE_DIALOG_SEARCH_BUTTON_BORDER)
 
     # Magnifying glass icon
     icon_color = rl.Color(180, 180, 180, 240)
@@ -233,8 +235,21 @@ class TreeOptionDialog(MultiOptionDialog):
 
     return self._result
 
-  def _handle_mouse_release(self, mouse_pos):
+  def _handle_mouse_press(self, mouse_pos):
     if self._search_rect and rl.check_collision_point_rec(mouse_pos, self._search_rect):
+      self._search_pressed = True
+      return True
+    return super()._handle_mouse_press(mouse_pos)
+
+  def _handle_mouse_release(self, mouse_pos):
+    clicked_search = False
+    if self._search_rect and rl.check_collision_point_rec(mouse_pos, self._search_rect):
+      clicked_search = self._search_pressed
+
+    self._search_pressed = False
+
+    if clicked_search:
       self._on_search_clicked()
       return True
+
     return super()._handle_mouse_release(mouse_pos)