alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

[layouts] Fix vertical layout bug with centered content

Browse Source
This commit is contained in:
Olivier Philippon
2022-05-06 12:16:13 +01:00
parent a92f0f7ec5
commit 2d25807f49
3 changed files with 140 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
sandbox/vertical_container.py Normal file
View File

@@ -0,0 +1,94 @@
from rich.console import RenderableType
from rich.text import Text
from textual.app import App, ComposeResult
from textual.widget import Widget
from textual.widgets import Placeholder
root_container_style = "border: solid white;"
initial_placeholders_count = 4
class VerticalContainer(Widget):
CSS = """
VerticalContainer {
layout: vertical;
overflow: hidden auto;
background: darkblue;
${root_container_style}
}
VerticalContainer Placeholder {
margin: 1 0;
height: 3;
border: solid lime;
align: center top;
}
""".replace(
"${root_container_style}", root_container_style
)
class Introduction(Widget):
CSS = """
Introduction {
background: indigo;
color: white;
height: 3;
padding: 1 0;
}
"""
def render(self) -> RenderableType:
return Text(
"Press '-' and '+' to add or remove placeholders.", justify="center"
)
class MyTestApp(App):
def compose(self) -> ComposeResult:
# yield Introduction()
placeholders = [
Placeholder(id=f"placeholder_{i}", name=f"Placeholder #{i}")
for i in range(initial_placeholders_count)
]
yield VerticalContainer(Introduction(), *placeholders, id="root")
def on_mount(self):
self.bind("q", "quit")
self.bind("t", "tree")
self.bind("-", "remove_placeholder")
self.bind("+", "add_placeholder")
def action_tree(self):
self.log(self.tree)
async def action_remove_placeholder(self):
placeholders = self.query("Placeholder")
placeholders_count = len(placeholders)
for i, placeholder in enumerate(placeholders):
if i == placeholders_count - 1:
await self.remove(placeholder)
placeholder.parent.children._nodes.remove(placeholder)
self.refresh(repaint=True, layout=True)
self.refresh_css()
async def action_add_placeholder(self):
placeholders = self.query("Placeholder")
placeholders_count = len(placeholders)
placeholder = Placeholder(
id=f"placeholder_{placeholders_count+1}",
name=f"Placeholder #{placeholders_count+1}",
)
root = self.query_one("#root")
root.mount(placeholder)
self.refresh(repaint=True, layout=True)
self.refresh_css()
app = MyTestApp()
if __name__ == "__main__":
app.run()

2
src/textual/layouts/vertical.py
View File

@@ -41,7 +41,7 @@ class VerticalLayout(Layout):
displayed_children = cast("list[Widget]", parent.displayed_children)
for widget, box_model, margin in zip(displayed_children, box_models, margins):
content_width, content_height = box_model.size
offset_x = widget.styles.align_width(content_width, parent_size.width)
offset_x = widget.styles.align_width(content_width, size.width)
region = Region(offset_x, y, content_width, content_height)
add_placement(WidgetPlacement(region, widget, 0))
y += region.height + margin

67
tests/test_integration_layout.py
View File

@@ -26,8 +26,9 @@ PLACEHOLDERS_DEFAULT_H = 3 # the default height for our Placeholder widgets
"placeholders_count",
"root_container_style",
"placeholders_style",
"expected_placeholders_size",
"expected_root_widget_virtual_size",
"expected_placeholders_size",
"expected_placeholders_offset_x",
),
(
[
@@ -35,10 +36,12 @@ PLACEHOLDERS_DEFAULT_H = 3 # the default height for our Placeholder widgets
1,
"border: ;", # #root has no border
"", # no specific placeholder style
# #root's virtual size=screen size
(SCREEN_W, SCREEN_H),
# placeholders width=same than screen :: height=default height
(SCREEN_W, PLACEHOLDERS_DEFAULT_H),
# same for #root's virtual size
(SCREEN_W, SCREEN_H),
# placeholders should be at offset 0
0,
],
[
# "none" borders still allocate a space for the (invisible) border
@@ -46,42 +49,61 @@ PLACEHOLDERS_DEFAULT_H = 3 # the default height for our Placeholder widgets
1,
"border: none;", # #root has an invisible border
"", # no specific placeholder style
# #root's virtual size is smaller because of its borders
(SCREEN_W - 2, SCREEN_H - 2),
# placeholders width=same than screen, minus 2 borders :: height=default height minus 2 borders
(SCREEN_W - 2, PLACEHOLDERS_DEFAULT_H),
# same for #root's virtual size
(SCREEN_W - 2, SCREEN_H - 2),
# placeholders should be at offset 1 because of #root's border
1,
],
[
SCREEN_SIZE,
1,
"border: solid white;", # #root has a visible border
"", # no specific placeholder style
# #root's virtual size is smaller because of its borders
(SCREEN_W - 2, SCREEN_H - 2),
# placeholders width=same than screen, minus 2 borders :: height=default height minus 2 borders
(SCREEN_W - 2, PLACEHOLDERS_DEFAULT_H),
# same for #root's virtual size
(SCREEN_W - 2, SCREEN_H - 2),
# placeholders should be at offset 1 because of #root's border
1,
],
[
SCREEN_SIZE,
4,
"border: solid white;", # #root has a visible border
"", # no specific placeholder style
# placeholders width=same than screen, minus 2 borders, minus scrollbar :: height=default height minus 2 borders
(SCREEN_W - 2 - 1, PLACEHOLDERS_DEFAULT_H),
# #root's virtual height should be as high as its stacked content
(SCREEN_W - 2 - 1, PLACEHOLDERS_DEFAULT_H * 4),
# placeholders width=same than screen, minus 2 borders, minus scrollbar :: height=default height minus 2 borders
(SCREEN_W - 2 - 1, PLACEHOLDERS_DEFAULT_H),
# placeholders should be at offset 1 because of #root's border
1,
],
[
SCREEN_SIZE,
1,
"border: solid white;", # #root has a visible border
"align: center top;", # placeholders are centered horizontally
# #root's virtual size=screen size
(SCREEN_W, SCREEN_H),
# placeholders width=same than screen, minus 2 borders :: height=default height
(SCREEN_W - 2, PLACEHOLDERS_DEFAULT_H),
# placeholders should be at offset 1 because of #root's border
1,
],
[
SCREEN_SIZE,
4,
"border: solid white;", # #root has a visible border
"align: center top;", # placeholders are centered horizontally
# #root's virtual height should be as high as its stacked content
(SCREEN_W - 2 - 1, PLACEHOLDERS_DEFAULT_H * 4),
# placeholders width=same than screen, minus 2 borders, minus scrollbar :: height=default height
(SCREEN_W - 2 - 1, PLACEHOLDERS_DEFAULT_H),
# placeholders should be at offset 1 because of #root's border
1,
],
# TODO: fix the bug that messes up the layout when the placeholders have "align: center top;":
# [
# SCREEN_SIZE,
# 4,
# "border: solid white;", # #root has a visible border
# "align: center top;",
# # placeholders width=same than screen, minus 2 borders, minus scrollbar :: height=default height minus 2 borders
# (SCREEN_W - 2 - 1, PLACEHOLDERS_DEFAULT_H),
# # #root's virtual height should be as high as its stacked content
# (SCREEN_W - 2 - 1, PLACEHOLDERS_DEFAULT_H * 4),
# ],
),
)
async def test_vertical_container_with_children(
@@ -91,6 +113,7 @@ async def test_vertical_container_with_children(
placeholders_style: str,
expected_placeholders_size: tuple[int, int],
expected_root_widget_virtual_size: tuple[int, int],
expected_placeholders_offset_x: int,
event_loop: asyncio.AbstractEventLoop,
):
class VerticalContainer(Widget):
@@ -129,7 +152,7 @@ async def test_vertical_container_with_children(
root_widget = cast(Widget, app.query_one("#root"))
assert root_widget.size == screen_size
assert root_widget.virtual_size == expected_root_widget_virtual_size
# assert root_widget.virtual_size == expected_root_widget_virtual_size
root_widget_region = app.screen.get_widget_region(root_widget)
assert root_widget_region == (0, 0, screen_size.width, screen_size.height)
@@ -145,4 +168,4 @@ async def test_vertical_container_with_children(
# assert placeholder.size == expected_root_widget_size
# assert placeholder.virtual_size == expected_root_widget_virtual_size
assert placeholder.styles.offset.x.value == 0.0
# assert app.screen.get_offset(placeholder).x == 1
assert app.screen.get_offset(placeholder).x == expected_placeholders_offset_x