mirror of
https://github.com/rio-labs/rio.git
synced 2026-01-24 14:28:29 -06:00
revert to ScrollContainers
This commit is contained in:
@@ -426,9 +426,11 @@ Use the `rio.Icon` component like this:
|
||||
children.append(self.build_details())
|
||||
|
||||
# Combine everything
|
||||
return rio.Column(
|
||||
*children,
|
||||
spacing=1,
|
||||
margin=1,
|
||||
scroll_y="auto",
|
||||
return rio.ScrollContainer(
|
||||
rio.Column(
|
||||
*children,
|
||||
spacing=1,
|
||||
margin=1,
|
||||
),
|
||||
scroll_x="never",
|
||||
)
|
||||
|
||||
@@ -404,119 +404,121 @@ class ThemePickerPage(rio.Component):
|
||||
)
|
||||
|
||||
# Combine everything
|
||||
return rio.Column(
|
||||
# Main Colors
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Primary",
|
||||
palette_slug="primary",
|
||||
round_top=True,
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Secondary",
|
||||
palette_slug="secondary",
|
||||
round_bottom=True,
|
||||
),
|
||||
# Neutral Colors
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Background",
|
||||
palette_slug="background",
|
||||
margin_top=1,
|
||||
round_top=True,
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Neutral",
|
||||
palette_slug="neutral",
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="HUD",
|
||||
palette_slug="hud",
|
||||
pick_opacity=True,
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Disabled",
|
||||
palette_slug="disabled",
|
||||
round_bottom=True,
|
||||
),
|
||||
# Semantic Colors
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Success",
|
||||
palette_slug="success",
|
||||
margin_top=1,
|
||||
round_top=True,
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Warning",
|
||||
palette_slug="warning",
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Danger",
|
||||
palette_slug="danger",
|
||||
round_bottom=True,
|
||||
),
|
||||
# Corner radii
|
||||
rio.Text(
|
||||
"Corner Radii",
|
||||
style="heading3",
|
||||
margin_top=1,
|
||||
margin_bottom=1,
|
||||
justify="left",
|
||||
),
|
||||
radius_sliders,
|
||||
# Theme Variants
|
||||
rio.Text(
|
||||
"Variants",
|
||||
style="heading3",
|
||||
margin_top=1,
|
||||
margin_bottom=1,
|
||||
justify="left",
|
||||
),
|
||||
rio.Grid(
|
||||
[
|
||||
rio.Text("Light Theme", justify="left"),
|
||||
rio.Switch(
|
||||
is_on=self.create_light_theme,
|
||||
on_change=self._toggle_create_light_theme,
|
||||
width="grow",
|
||||
),
|
||||
],
|
||||
[
|
||||
rio.Text("Dark Theme", justify="left"),
|
||||
rio.Switch(
|
||||
is_on=self.create_dark_theme,
|
||||
on_change=self._toggle_create_dark_theme,
|
||||
width="grow",
|
||||
),
|
||||
],
|
||||
row_spacing=0.5,
|
||||
column_spacing=0.5,
|
||||
),
|
||||
# Code Sample
|
||||
rio.Text(
|
||||
"Code",
|
||||
style="heading3",
|
||||
margin_top=1,
|
||||
margin_bottom=1,
|
||||
justify="left",
|
||||
),
|
||||
rio.Markdown(
|
||||
f"""
|
||||
Use this code to recreate the current theme in your app:
|
||||
return rio.ScrollContainer(
|
||||
rio.Column(
|
||||
# Main Colors
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Primary",
|
||||
palette_slug="primary",
|
||||
round_top=True,
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Secondary",
|
||||
palette_slug="secondary",
|
||||
round_bottom=True,
|
||||
),
|
||||
# Neutral Colors
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Background",
|
||||
palette_slug="background",
|
||||
margin_top=1,
|
||||
round_top=True,
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Neutral",
|
||||
palette_slug="neutral",
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="HUD",
|
||||
palette_slug="hud",
|
||||
pick_opacity=True,
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Disabled",
|
||||
palette_slug="disabled",
|
||||
round_bottom=True,
|
||||
),
|
||||
# Semantic Colors
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Success",
|
||||
palette_slug="success",
|
||||
margin_top=1,
|
||||
round_top=True,
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Warning",
|
||||
palette_slug="warning",
|
||||
),
|
||||
PalettePicker(
|
||||
shared_open_key=self.bind().shared_open_key,
|
||||
palette_nicename="Danger",
|
||||
palette_slug="danger",
|
||||
round_bottom=True,
|
||||
),
|
||||
# Corner radii
|
||||
rio.Text(
|
||||
"Corner Radii",
|
||||
style="heading3",
|
||||
margin_top=1,
|
||||
margin_bottom=1,
|
||||
justify="left",
|
||||
),
|
||||
radius_sliders,
|
||||
# Theme Variants
|
||||
rio.Text(
|
||||
"Variants",
|
||||
style="heading3",
|
||||
margin_top=1,
|
||||
margin_bottom=1,
|
||||
justify="left",
|
||||
),
|
||||
rio.Grid(
|
||||
[
|
||||
rio.Text("Light Theme", justify="left"),
|
||||
rio.Switch(
|
||||
is_on=self.create_light_theme,
|
||||
on_change=self._toggle_create_light_theme,
|
||||
width="grow",
|
||||
),
|
||||
],
|
||||
[
|
||||
rio.Text("Dark Theme", justify="left"),
|
||||
rio.Switch(
|
||||
is_on=self.create_dark_theme,
|
||||
on_change=self._toggle_create_dark_theme,
|
||||
width="grow",
|
||||
),
|
||||
],
|
||||
row_spacing=0.5,
|
||||
column_spacing=0.5,
|
||||
),
|
||||
# Code Sample
|
||||
rio.Text(
|
||||
"Code",
|
||||
style="heading3",
|
||||
margin_top=1,
|
||||
margin_bottom=1,
|
||||
justify="left",
|
||||
),
|
||||
rio.Markdown(
|
||||
f"""
|
||||
Use this code to recreate the current theme in your app:
|
||||
|
||||
```python
|
||||
{get_source_for_theme(self.session.theme, create_theme_pair=self.create_light_theme and self.create_dark_theme)}
|
||||
```
|
||||
""",
|
||||
```python
|
||||
{get_source_for_theme(self.session.theme, create_theme_pair=self.create_light_theme and self.create_dark_theme)}
|
||||
```
|
||||
""",
|
||||
),
|
||||
margin=1,
|
||||
align_y=0,
|
||||
),
|
||||
margin=1,
|
||||
align_y=0,
|
||||
scroll_y="auto",
|
||||
scroll_x="never",
|
||||
)
|
||||
|
||||
@@ -155,14 +155,16 @@ class TreePage(rio.Component):
|
||||
# Delegate the hard work to another component
|
||||
return rio.Column(
|
||||
self._build_back_menu(heading),
|
||||
component_details.ComponentDetails(
|
||||
component_id=self.bind().selected_component_id,
|
||||
on_switch_to_layout_view=self._switch_to_layout,
|
||||
margin_left=MARGIN,
|
||||
margin_right=MARGIN,
|
||||
margin_bottom=MARGIN,
|
||||
rio.ScrollContainer(
|
||||
component_details.ComponentDetails(
|
||||
component_id=self.bind().selected_component_id,
|
||||
on_switch_to_layout_view=self._switch_to_layout,
|
||||
margin_left=MARGIN,
|
||||
margin_right=MARGIN,
|
||||
margin_bottom=MARGIN,
|
||||
),
|
||||
height="grow",
|
||||
scroll_y="auto",
|
||||
scroll_x="never",
|
||||
),
|
||||
)
|
||||
|
||||
@@ -172,12 +174,14 @@ class TreePage(rio.Component):
|
||||
|
||||
return rio.Column(
|
||||
self._build_back_menu("Layout"),
|
||||
layout_subpage.LayoutSubpage(
|
||||
component_id=self.bind().selected_component_id,
|
||||
margin=MARGIN,
|
||||
align_y=0,
|
||||
scroll_y="auto",
|
||||
rio.ScrollContainer(
|
||||
layout_subpage.LayoutSubpage(
|
||||
component_id=self.bind().selected_component_id,
|
||||
margin=MARGIN,
|
||||
align_y=0,
|
||||
),
|
||||
height="grow",
|
||||
scroll_x="never",
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
@@ -138,18 +138,20 @@ class ChatPage(rio.Component):
|
||||
),
|
||||
rio.Column(
|
||||
# Messages
|
||||
rio.Column(
|
||||
# Display the messages
|
||||
*message_components,
|
||||
# Take up superfluous space
|
||||
rio.Spacer(),
|
||||
spacing=1,
|
||||
# Center the column on wide screens
|
||||
margin=2,
|
||||
width=column_width,
|
||||
align_x=column_align_x,
|
||||
rio.ScrollContainer(
|
||||
rio.Column(
|
||||
# Display the messages
|
||||
*message_components,
|
||||
# Take up superfluous space
|
||||
rio.Spacer(),
|
||||
spacing=1,
|
||||
# Center the column on wide screens
|
||||
margin=2,
|
||||
width=column_width,
|
||||
align_x=column_align_x,
|
||||
),
|
||||
height="grow",
|
||||
scroll_y="auto",
|
||||
scroll_x="never",
|
||||
),
|
||||
# User input
|
||||
rio.Row(
|
||||
|
||||
Reference in New Issue
Block a user