From 489afc38421831b895042bbdb91ac7538ea04d8b Mon Sep 17 00:00:00 2001 From: Nick Date: Wed, 18 Feb 2026 02:34:57 -0700 Subject: [PATCH] four ui: edge shadows (#37239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ui: add edge shadow effect to horizontal scrollers in settings Adds a black gradient falloff shadow (20x240, 100%→0% opacity) on the left and right edges of horizontal Scroller panels. Enabled via an opt-in `edge_shadows` parameter on Scroller for easy per-screen control. Enabled on: settings menu, toggles, network, device, developer. Not enabled on: home screen carousel, vertical scrollers, setup screens. Co-authored-by: Cursor * ui: reduce edge shadow opacity to 80% Co-authored-by: Cursor * what on earth is this * some lines are ok --------- Co-authored-by: Cursor Co-authored-by: Shane Smiskol --- selfdrive/ui/mici/layouts/main.py | 2 +- system/ui/widgets/scroller.py | 22 ++++++++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/selfdrive/ui/mici/layouts/main.py b/selfdrive/ui/mici/layouts/main.py index f12c95eaf..b78a1d8ea 100644 --- a/selfdrive/ui/mici/layouts/main.py +++ b/selfdrive/ui/mici/layouts/main.py @@ -47,7 +47,7 @@ class MiciMainLayout(Widget): self._alerts_layout, self._home_layout, self._onroad_layout, - ], spacing=0, pad_start=0, pad_end=0, scroll_indicator=False) + ], spacing=0, pad_start=0, pad_end=0, scroll_indicator=False, edge_shadows=False) self._scroller.set_reset_scroll_at_show(False) # Disable scrolling when onroad is interacting with bookmark diff --git a/system/ui/widgets/scroller.py b/system/ui/widgets/scroller.py index fcba1952c..5930a2a6e 100644 --- a/system/ui/widgets/scroller.py +++ b/system/ui/widgets/scroller.py @@ -12,6 +12,8 @@ LINE_COLOR = rl.GRAY LINE_PADDING = 40 ANIMATION_SCALE = 0.6 +EDGE_SHADOW_WIDTH = 20 + MIN_ZOOM_ANIMATION_TIME = 0.075 # seconds DO_ZOOM = False DO_JELLO = False @@ -77,7 +79,7 @@ class ScrollIndicator(Widget): class Scroller(Widget): def __init__(self, items: list[Widget], horizontal: bool = True, snap_items: bool = True, spacing: int = ITEM_SPACING, line_separator: bool = False, pad_start: int = ITEM_SPACING, pad_end: int = ITEM_SPACING, - scroll_indicator: bool = True): + scroll_indicator: bool = True, edge_shadows: bool = True): super().__init__() self._items: list[Widget] = [] self._horizontal = horizontal @@ -107,8 +109,9 @@ class Scroller(Widget): self.scroll_panel = GuiScrollPanel2(self._horizontal, handle_out_of_bounds=not self._snap_items) self._scroll_enabled: bool | Callable[[], bool] = True - self._show_scroll_indicator = scroll_indicator + self._show_scroll_indicator = scroll_indicator and self._horizontal self._scroll_indicator = ScrollIndicator() + self._edge_shadows = edge_shadows and self._horizontal for item in items: self.add_widget(item) @@ -286,8 +289,19 @@ class Scroller(Widget): rl.end_scissor_mode() - # Draw scroll indicator - if self._show_scroll_indicator and self._horizontal and len(self._visible_items) > 0: + # Draw edge shadows on top of scroller content + if self._edge_shadows: + rl.draw_rectangle_gradient_h(int(self._rect.x), int(self._rect.y), + EDGE_SHADOW_WIDTH, int(self._rect.y), + rl.Color(0, 0, 0, 166), rl.BLANK) + + right_x = int(self._rect.x + self._rect.width - EDGE_SHADOW_WIDTH) + rl.draw_rectangle_gradient_h(right_x, int(self._rect.y), + EDGE_SHADOW_WIDTH, int(self._rect.y), + rl.BLANK, rl.Color(0, 0, 0, 166)) + + # Draw scroll indicator on top of edge shadows + if self._show_scroll_indicator and len(self._visible_items) > 0: self._scroll_indicator.update(self._scroll_offset, self._content_size, self._rect) self._scroll_indicator.render()