mawei/openpilot-meb
1
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

ui: add pressed state and visual feedback for search button in TreeOptionDialog (#1547)

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

* less
This commit is contained in:
Jason Wen
2025-12-03 02:29:33 -05:00
committed by GitHub
parent b9c54e07fb
commit bea05d4624
2 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
system/ui/sunnypilot/lib/styles.py
View File

@@ -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)

23
system/ui/sunnypilot/widgets/tree_dialog.py
View File

@@ -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)