From f4c05d331d197a97141ca6884d182ec74ac3b02a Mon Sep 17 00:00:00 2001 From: Jakob Pinterits Date: Thu, 5 Sep 2024 23:44:19 +0200 Subject: [PATCH] improved default root component --- rio/components/component.py | 4 +- rio/components/default_root_component.py | 94 ++++++++++++++++++------ 2 files changed, 74 insertions(+), 24 deletions(-) diff --git a/rio/components/component.py b/rio/components/component.py index a43ad223..63c2ee6d 100644 --- a/rio/components/component.py +++ b/rio/components/component.py @@ -1165,13 +1165,13 @@ class Component(abc.ABC, metaclass=ComponentMeta): rio.Button( yes_text, color=yes_color, - style="minor" if default is False else "major", + style="major" if default is True else "bold-text", on_press=lambda: dialog.close(True), ), rio.Button( no_text, color=no_color, - style="minor" if default is True else "major", + style="major" if default is True else "bold-text", on_press=lambda: dialog.close(False), ), spacing=inner_margin, diff --git a/rio/components/default_root_component.py b/rio/components/default_root_component.py index 4e70684d..48169a24 100644 --- a/rio/components/default_root_component.py +++ b/rio/components/default_root_component.py @@ -56,23 +56,56 @@ class Welcome(component.Component): @final class NavButton(component.Component): page: rio.Page + is_current: bool def build(self) -> rio.Component: - return rio.Rectangle( - content=rio.Link( - rio.Text( - self.page.name, - margin_x=OUTER_MARGIN, - margin_y=0.5, - ), - target_url=self.page.page_url, - ), - fill=rio.Color.TRANSPARENT, - hover_fill=self.session.theme.neutral_palette.background_active, - ripple=True, - transition_time=0.1, + main_row = rio.Row() + + # Add a marker if this is the current page + if self.is_current: + marker = rio.Rectangle( + fill=self.session.theme.primary_color, + min_width=0.5, + align_x=0, + corner_radius=(0, 1, 1, 0), + ) + else: + marker = None + + main_row.add( + rio.Switcher( + marker, + transition_time=0.1, + ) ) + # Prepare the base UI + main_row.add( + rio.Rectangle( + content=rio.Link( + rio.Text( + self.page.name, + style=rio.TextStyle( + font_weight="bold" if self.is_current else "normal", + ), + selectable=False, + margin_x=OUTER_MARGIN, + margin_y=0.5, + ), + target_url=f"/{self.page.page_url}", + ), + fill=rio.Color.TRANSPARENT, + hover_fill=None + if self.is_current + else self.session.theme.neutral_palette.background_active, + ripple=True, + transition_time=0.1, + grow_x=True, + ) + ) + + return main_row + @final class DefaultRootComponent(component.Component): @@ -82,6 +115,10 @@ class DefaultRootComponent(component.Component): `public`: False """ + @rio.event.on_page_change + async def _on_page_change(self) -> None: + await self.force_refresh() + def build(self) -> rio.Component: # Special case: If the app has no pages at all, display a warm welcome. if len(self.session.app.pages) == 0: @@ -111,7 +148,7 @@ class DefaultRootComponent(component.Component): overflow="wrap", margin_x=OUTER_MARGIN, ), - text="You can change the app name by passing `name=...` when creating the `rio.App` object.", + text="You can change the app name by passing `name=...` when creating your `rio.App` object.", ) ) @@ -124,22 +161,40 @@ class DefaultRootComponent(component.Component): overflow="wrap", margin_x=OUTER_MARGIN, ), - text="You can change the description name by passing `description=...` when creating the `rio.App` object.", + text="You can change the app description by passing `description=...` when creating your `rio.App` object.", ) ) + # Which page is currently active? + # Prepare the URL + segments = self.session.active_page_url.parts + + # Special case: Not deep enough + # print("-----") + if len(segments) <= 1: + # This won't match anything because it's not a valid URL segment" + current_page_url = "///" + else: + current_page_url = segments[1] + # Add navigation # # If this becomes any more involved, consider making it a separate # component pages = rio.Column( spacing=0.5, - margin_y=3, + margin_y=1.5, ) main_column.add(pages) for page in self.session.app.pages: - pages.add(NavButton(page)) + # print("PAGE", page.page_url, current_page_url) + pages.add( + NavButton( + page, + is_current=page.page_url == current_page_url, + ) + ) # Push the remaining UI to the bottom main_column.add(rio.Spacer()) @@ -187,11 +242,6 @@ class DefaultRootComponent(component.Component): content=main_column, fill=self.session.theme.neutral_color, ), - # Separator - rio.Rectangle( - min_width=0.3, - fill=self.session.theme.primary_palette.background, - ), # The user's content rio.PageView( grow_x=True,