revert to ScrollContainers

This commit is contained in:
Aran-Fey
2024-06-28 08:47:34 +02:00
parent e2eab80cda
commit b00bc0b0a6
4 changed files with 151 additions and 141 deletions

View File

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

View File

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

View File

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

View File

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