[ENHANCEMENT] individual control over x/y planes when using CSS transition

[epi052]

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.

it would be nice to have individual control over x/y planes when using CSS transition

current: When the sidebar is visible, the bottom bar has to traverse the x and y planes to arrive at its destination.
desired: When the sidebar is visible, set the bottom bar's offset-x without animation and offset-y with animation, such that it appears to rise directly up into its proper spot.
proposed: transition: offset|offset-x|offset-y

Feel free to add screenshots and/or videos. These can be very helpful!

bottom bar coming in from the left and bottom
https://user-images.githubusercontent.com/43392618/200075288-dba77a71-66fb-4d44-8d63-26f4b8f51646.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()

[davep]

If I'm correctly understanding what you're trying to do here, this approach would appear to achieve the effect you're after:

from textual.app import App, ComposeResult
from textual.widgets import Header, Static, Footer
from textual.containers import Container

class Issue1122( App[ None ] ):

    TITLE = "Test Issue 1122"

    BINDINGS = [
        ( "s", "toggle( 'side' )", "Sidebar" ),
        ( "b", "toggle( 'bottom' )", "Bottombar" ),
    ]

    CSS = """

    #Screen {
        layout: grid;
        grid-size: 2 5;
    }

    #main-pane {
        layout: grid;
        grid-size: 2;
    }

    .main {
        column-span: 1;
    }

    .box {
        height: 100%;
        border: round white;
        transition: offset 500ms in_out_cubic;
    }

    #sidebar {
        display: none;
        border: round yellow;
        dock: left;
        max-width: 33%;
        offset-x: -100%;
    }

    #sidebar.shown {
        display: block;
        offset-x: 0;
    }

    #bottombar {
        display: none;
        border: round red;
        dock: bottom;
        max-height: 33%;
        offset-y: 100%
    }

    #bottombar.shown {
        display: block;
        offset-y: 0;
    }
    """

    def compose(self) -> ComposeResult:
        yield Header()
        yield Container(
            Container(
                Container(
                    Static( classes="main box", id="left-main" ),
                    Static( classes="main box", id="right-main" ),
                    id="main-pane"
                ),
                Static( classes="box", id="bottombar" ),
                id="right-pane"
            ),
            Static( classes="box", id="sidebar" )
        )
        yield Footer()

    def action_toggle( self, bar: str ) -> None:
        self.query_one( f"#{bar}bar" ).toggle_class( "shown" )

if __name__ == "__main__":
    Issue1122().run()

I'll address it there, but this does still show the issue raised in #1124, which I suspect is, if not a bug, an enhancement we'll need to look at.

[epi052]

yup, this is exactly what i was trying to do!

If I understand your fixes, it's less about the CSS and more about structuring the containers to achieve the result?

Thank you!

[davep]

If I understand your fixes, it's less about the CSS and more about structuring the containers to achieve the result?

Yup, turned out to be more about that really, especially for the bottom bar. Don't tell Will I said this but I think the Textual mantra is often going to be "not working? Throw another div Container at at". ;-)

Glad it delivered what you're after; so I'll close this one.

[github-actions]

Did we solve your problem?

Glad we could help!

[davep]

PS: Also want to highlight the use of toggle_class -- that'll save you a wee bit of code.

[epi052]

tyty, i definitely noticed, lol. Also, the Containers remove a lot of little manual tweaks i was doing in css, like margin-bottom: 1 etc... really appreciate the help!