mirror/rio
1
0
Fork 0
mirror of https://github.com/rio-labs/rio.git synced 2026-01-06 21:29:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

breaking: updated several parameters for consistency

Browse Source
This commit is contained in:
Jakob Pinterits
2024-05-23 19:46:09 +02:00
parent f827b8eb43
commit 685dc2afcb
10 changed files with 48 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
changelog.md
View File

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

3
frontend/code/components/button.ts
View File

@@ -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;
}

9
frontend/code/components/slider.ts
View File

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

1
rio/app.py
View File

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

14
rio/components/banner.py
View File

@@ -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",

16
rio/components/button.py
View File

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

17
rio/components/card.py
View File

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

7
rio/components/rectangle.py
View File

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

4
rio/components/theme_context_switcher.py
View File

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

8
rio/theme.py
View File

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