Description
Please give a brief but clear explanation of what the issue is. Let us know what the behaviour you expect is, and what is actually happening. Let us know what operating system you are running on, and what terminal you are using.
In the example code, the white boxes are in a Grid layout. When the sidebar comes out, the boxes in the grid 'snap' to their new position based on the adjustment needed due to the sidebar. However, the sidebar uses transition to ease into its position.
The difference in movement types isn't a problem necessarily, but it's not cohesive either.
desired: ability to apply the same animation to how the grid positions itself
desired: the right edge of the sidebar and left edge of the left-most white box move together at the same speed
Feel free to add screenshots and/or videos. These can be very helpful!
vokoscreenNG-2022-11-04_16-07-22.mp4
If you can, include a complete working example that demonstrates the bug. Please check it can run without modifications.
class Demo(App):
TITLE = "Demonstration"
BINDINGS = [
("s", "toggle_sidebar", "Sidebar"),
("b", "toggle_bottombar", "Bottombar"),
]
CSS = """
Screen {
layout: grid;
grid-size: 2 5;
}
.box {
height: 100%;
border: round white;
}
#left-main {
row-span: 5;
}
#right-main {
row-span: 5;
}
#sidebar {
display: none;
offset-x: -100%;
}
Demo.-show-sidebar #sidebar {
display: block;
dock: left;
border: round yellow;
height: 100%;
max-width: 33%;
margin-bottom: 1;
transition: offset 500ms in_out_cubic;
offset-x: 0;
}
#bottombar {
display: none;
offset-y: 100%;
}
Demo.-show-bottombar #bottombar {
display: block;
dock: bottom;
border: round red;
max-height: 33%;
width: 100%;
margin-bottom: 1;
transition: offset 500ms in_out_cubic;
offset-y: 0;
}
Demo.-show-sidebar.-show-bottombar #bottombar {
offset-x: 47%;
width: 68%;
}
"""
def compose(self) -> ComposeResult:
# yield Header()
yield Static(classes="box", id="left-main")
yield Static(classes="box", id="right-main")
yield Static(classes="box", id="sidebar")
yield Static(classes="box", id="bottombar")
yield Footer()
def action_toggle_sidebar(self) -> None:
if "-show-sidebar" in self.classes:
self.remove_class("-show-sidebar")
else:
self.add_class("-show-sidebar")
def action_toggle_bottombar(self) -> None:
if "-show-bottombar" in self.classes:
self.remove_class("-show-bottombar")
else:
self.add_class("-show-bottombar")
if __name__ == "__main__":
Demo().run()