From 685dc2afcb5e4e15c568e87e948c3cdec5ed5470 Mon Sep 17 00:00:00 2001 From: Jakob Pinterits Date: Thu, 23 May 2024 19:46:09 +0200 Subject: [PATCH] breaking: updated several parameters for consistency --- changelog.md | 5 +++++ frontend/code/components/button.ts | 3 +-- frontend/code/components/slider.ts | 9 +++++++++ rio/app.py | 1 - rio/components/banner.py | 14 ++++---------- rio/components/button.py | 16 ---------------- rio/components/card.py | 17 ++++++++++++++++- rio/components/rectangle.py | 7 +++++++ rio/components/theme_context_switcher.py | 4 ++-- rio/theme.py | 8 ++++---- 10 files changed, 48 insertions(+), 36 deletions(-) diff --git a/changelog.md b/changelog.md index 96e96271..355939de 100644 --- a/changelog.md +++ b/changelog.md @@ -1,6 +1,11 @@ # Changelog - Rectangles now honor the theme's shadow color +- Renamed `Banner.markup` to `Banner.markdown` +- Removed the "multiline" style from Banners +- Removed `Button.initially_disabled_for` +- Added a `text_color` parameter to `Theme.from_colors` and `Theme.pair_from_colors` +- `rio run` now checks that the installed version of Rio is up-to-date ## 0.7 diff --git a/frontend/code/components/button.ts b/frontend/code/components/button.ts index 08862ce5..23cd10b1 100644 --- a/frontend/code/components/button.ts +++ b/frontend/code/components/button.ts @@ -12,7 +12,6 @@ export type ButtonState = ComponentState & { color?: ColorSet; content?: ComponentId; is_sensitive?: boolean; - initially_disabled_for?: number; }; export class ButtonComponent extends SingleContainer { @@ -53,7 +52,7 @@ export class ButtonComponent extends SingleContainer { setTimeout(() => { this.isStillInitiallyDisabled = false; - }, this.state.initially_disabled_for * 1000); + }, 350); return element; } diff --git a/frontend/code/components/slider.ts b/frontend/code/components/slider.ts index a4f222db..86c46f27 100644 --- a/frontend/code/components/slider.ts +++ b/frontend/code/components/slider.ts @@ -80,11 +80,17 @@ export class SliderComponent extends ComponentBase { } private onDragStart(event: MouseEvent): boolean { + event.stopPropagation(); + event.preventDefault(); + this.setValueFromMouseEvent(event); return true; } private onDragMove(event: MouseEvent): void { + event.stopPropagation(); + event.preventDefault(); + // Make future transitions instant to avoid lag this.element.style.setProperty( '--rio-slider-position-transition-time', @@ -95,6 +101,9 @@ export class SliderComponent extends ComponentBase { } private onDragEnd(event: MouseEvent): void { + event.stopPropagation(); + event.preventDefault(); + // Revert to the default transition time this.element.style.removeProperty( '--rio-slider-position-transition-time' diff --git a/rio/app.py b/rio/app.py index 7d2593ff..0f8da69b 100644 --- a/rio/app.py +++ b/rio/app.py @@ -30,7 +30,6 @@ def make_default_connection_lost_component() -> rio.Component: return rio.Rectangle( content=rio.Row( rio.Icon( - # "material/error", "material/signal-disconnected", fill="danger", width=1.6, diff --git a/rio/components/banner.py b/rio/components/banner.py index 95c25e51..ab3bc268 100644 --- a/rio/components/banner.py +++ b/rio/components/banner.py @@ -36,14 +36,8 @@ class Banner(component.Component): `"info"`, `"success"`, `"warning"` and `"danger"`. Depending on the value the banner may change its colors and icon. - `markup`: Whether the text should be interpreted as Markdown. If `True`, the - text will be rendered as Markdown, otherwise it will be rendered as - plain text. - - `multiline`: Whether long text may be wrapped over multiple lines. - Multiline banners are also styled slightly differently to make the icon - fit their larger size. Use `"\n"` to add a line break. - + `markdown`: If `True`, the banner text will be rendered as Markdown, + otherwise it will be rendered as plain text. ## Examples @@ -86,7 +80,7 @@ class Banner(component.Component): style: Literal["info", "success", "warning", "danger"] _: KW_ONLY - markup: bool = False + markdown: bool = False multiline: bool = False icon: str | None = None @@ -119,7 +113,7 @@ class Banner(component.Component): icon = self.icon # Prepare the text child - if self.markup: + if self.markdown: text_child = rio.Markdown( text, width="grow", diff --git a/rio/components/button.py b/rio/components/button.py index 6cf41998..7ea5ad23 100644 --- a/rio/components/button.py +++ b/rio/components/button.py @@ -17,7 +17,6 @@ __all__ = [ CHILD_MARGIN_X = 1.0 CHILD_MARGIN_Y = 0.3 -INITIALLY_DISABLED_FOR = 0.25 @final @@ -59,10 +58,6 @@ class Button(Component): `is_loading`: Whether the button should display a loading indicator. Use this to indicate to the user that an action is currently running. - `initially_disabled_for`: The number of seconds the button should be - disabled for after it is first rendered. This is useful to prevent - the user from accidentally pressing a button that suddenly appeared. - `on_press`: Triggered when the user clicks on the button. @@ -117,7 +112,6 @@ class Button(Component): color: rio.ColorSet = "keep" is_sensitive: bool = True is_loading: bool = False - initially_disabled_for: float = INITIALLY_DISABLED_FOR on_press: rio.EventHandler[[]] = None def build(self) -> rio.Component: @@ -193,7 +187,6 @@ class Button(Component): color=self.color, is_sensitive=self.is_sensitive, is_loading=self.is_loading, - initially_disabled_for=self.initially_disabled_for, width=8 if has_content else 4, height=2.2, ) @@ -239,11 +232,6 @@ class IconButton(Component): `is_sensitive`: Whether the button should respond to user input. - `initially_disabled_for`: The number of seconds the button should be - disabled for after it is first rendered. This is useful to prevent - the user from accidentally triggering an action when the page is - first loaded. - `size`: The size of the button. This is the diameter of the button in font-size units. @@ -304,7 +292,6 @@ class IconButton(Component): style: Literal["major", "minor", "plain"] color: rio.ColorSet is_sensitive: bool - initially_disabled_for: float = INITIALLY_DISABLED_FOR size: float on_press: rio.EventHandler[[]] @@ -349,7 +336,6 @@ class IconButton(Component): self.color = color self.is_sensitive = is_sensitive self.on_press = on_press - self.initially_disabled_for = INITIALLY_DISABLED_FOR def build(self) -> rio.Component: return _ButtonInternal( @@ -368,7 +354,6 @@ class IconButton(Component): is_loading=False, width=self.size, height=self.size, - initially_disabled_for=self.initially_disabled_for, # Make sure the button has a square aspect ratio align_x=0.5, align_y=0.5, @@ -393,7 +378,6 @@ class _ButtonInternal(FundamentalComponent): color: rio.ColorSet is_sensitive: bool is_loading: bool - initially_disabled_for: float async def _on_message(self, msg: Any) -> None: # Parse the message diff --git a/rio/components/card.py b/rio/components/card.py index 1755fc54..5b71ad89 100644 --- a/rio/components/card.py +++ b/rio/components/card.py @@ -27,6 +27,19 @@ class Card(FundamentalComponent): can be configured to elevate slightly when the mouse hovers over them, indicating to the user that they support interaction. + Cards update the theme context for their children, meaning that if you e.g. + assign the primary color to the card (`color="primary"`), all children will + automatically switch to a text color that is legible on top of the primary + color. This means you don't have to worry about colors of components, they + should always be legible. For this to work correctly prefer to pass colors + as strings instead of `rio.Color` objects. For example, prefer + `color="primary"` over `color=self.session.theme.primary_color`. This + informs Rio about the intent and makes the card automatically switch to the + "primary" context. + + You can find more details on how theming works in Rio in the [Theming + Quickstart Guide](https://rio.dev/docs/howto/theming-guide). + ## Attributes @@ -120,7 +133,9 @@ class Card(FundamentalComponent): "reportPress": report_press, "ripple": report_press if self.ripple is None else self.ripple, "elevate_on_hover": ( - report_press if self.elevate_on_hover is None else self.elevate_on_hover + report_press + if self.elevate_on_hover is None + else self.elevate_on_hover ), "colorize_on_hover": ( report_press diff --git a/rio/components/rectangle.py b/rio/components/rectangle.py index 4fd4fcb8..4259167e 100644 --- a/rio/components/rectangle.py +++ b/rio/components/rectangle.py @@ -32,6 +32,13 @@ class Rectangle(FundamentalComponent): `transition_time` attribute allows you to make your app feel dynamic and alive. + Because rectangles are meant as low-level building blocks, rather than full + fledged components, they don't automatically switch the theme context for + you. It's generally recommended to use `rio.Card` instead of `rio.Rectangle` + unless you need the extra control that `rio.Rectangle` provides. You can + find more details about theme contexts in the [Theming Quickstart + Guide](https://rio.dev/docs/howto/theming-guide). + ## Attributes diff --git a/rio/components/theme_context_switcher.py b/rio/components/theme_context_switcher.py index 17798d4b..dc6330e8 100644 --- a/rio/components/theme_context_switcher.py +++ b/rio/components/theme_context_switcher.py @@ -22,8 +22,8 @@ class ThemeContextSwitcher(FundamentalComponent): components. It is commonly used to switch between different themes. The `content` attribute can be used to change the currently displayed component. - You can find more details on theming on the [theming how-to - page](https://rio.dev/docs/howto/theming). + You can find more details on how theming works in the [Theming Quickstart + Guide](https://rio.dev/docs/howto/theming-guide). ## Attributes diff --git a/rio/theme.py b/rio/theme.py index d493792e..086ecd1f 100644 --- a/rio/theme.py +++ b/rio/theme.py @@ -314,8 +314,8 @@ class Theme: ## Parameters `primary_color`: The main color of your app. This color will be used to - tint the background and by some large components to fill entire - areas with color. + tint the background and by some large components to fill large + spaces with color. `secondary_color`: A color that nicely complements the primary color. It is often used by small components such as buttons and switches. @@ -629,8 +629,8 @@ class Theme: ## Parameters `primary_color`: The main color of your app. This color will be used to - tint the background and by some large components to fill entire - areas with color. + tint the background and by some large components to fill large + spaces with color `secondary_color`: A color that nicely complements the primary color. It is often used by small components such as buttons and switches.