fix(footer): enable spacing between key and description

[TomJGooding]

This is my (second) attempt to fix #4557. It isn't pretty but I'm still not sure how this should be implemented. Perhaps I'm missing something obvious, but the fact that the Footer currently uses 'raw' spaces suggests adding padding might not be so simple?

Please review the following checklist.

• Docstrings on all new or modified functions / classes
• Updated documentation
• Updated CHANGELOG.md (where appropriate)

[TomJGooding]

I'm actually now wondering if this whole section should be adapted for CSS styling with padding and margins:

textual/src/textual/widgets/_footer.py

Lines 91 to 98 in e9ad400

	if self.compact:
	label_text = Text.assemble(
	(key_display, key_style), " ", (description, description_style)
	)
	else:
	label_text = Text.assemble(
	(f" {key_display} ", key_style), (description, description_style), " "
	)

Maybe something like this. Rather than hardcoding f" {key_display} " on line 97, instead this could be defined using padding. The added space after the description could be defined using margin.

What do you think?

        label_text = Text.assemble(
            # Key display (with padding)
            (" " * key_padding.left, key_style),
            (key_display, key_style),
            (" " * key_padding.right, key_style),
            # Add spacing to right of the key
            (" " * key_margin.right),
            # Description display
            (description, description_style),
            # Add spacing to right of the description
            (" " * description_margin.right),
        )

[willmcgugan]

Seems reasonable. Although one thing to be aware of is that margins overlap. So the space between key and description should be the maximum of the two margins.

[TomJGooding]

I had forgotten you can't 'fine-tune' the padding/margin styles which might complicate things.

• Are inherited multi-part styles working as intended? #3945

For example, if the current margin was defined in the Footer DEFAULT_CSS like this:

.footer-key--description {
    margin-right: 1;
}

And you tried to also add space between key and description in your CSS like this:

.footer-key--description {
    margin-left: 1;
}

This apparently causes all the individual margin values to reset, so the space to the right of the description is lost. You would also need to explicitly set the margin-right again in your CSS, which I worry would cause confusion.

[TomJGooding]

Sorry also just to note after diving deeper into this: I spotted the 'default' footer uses a raw space after the description, whereas in the 'compact' style instead uses the grid gutter.

textual/src/textual/widgets/_footer.py

Lines 123 to 125 in 4a40027

	&.-compact {
	grid-gutter: 1;
	}

This could be simplified to always use the grid gutter, but I'm conscious this would cause snapshots tests to fail, especially after the recent spate of other changes in Textual.

[TomJGooding]

I've gone ahead and changed that hardcoded space to the grid-gutter. This caused multiple snapshot tests to fail despite no visual changes (example below) so I updated the snapshots.

[TomJGooding]

I've reverted the commit that updated the snapshot tests. I wanted to check if #4675 might account now for these changes but unfortunately not.

[darrenburns]

There seems to be a bit of a rendering glitch when toggling the compact reactive in this PR.

If you press c in example below, you should see it.

Example

"""
Code browser example.

Run with:

    python code_browser.py PATH
"""

import sys

from rich.syntax import Syntax
from rich.traceback import Traceback

from textual.app import App, ComposeResult
from textual.containers import Container, VerticalScroll
from textual.reactive import var
from textual.widgets import DirectoryTree, Footer, Header, Static


class CodeBrowser(App):
    """Textual code browser app."""

    CSS_PATH = "code_browser.tcss"
    BINDINGS = [
        ("f", "toggle_files", "Toggle Files"),
        ("q", "quit", "Quit"),
        ("c", "toggle_compact", "Toggle Compact"),
    ]

    show_tree = var(True)

    def watch_show_tree(self, show_tree: bool) -> None:
        """Called when show_tree is modified."""
        self.set_class(show_tree, "-show-tree")

    def compose(self) -> ComposeResult:
        """Compose our UI."""
        path = "./" if len(sys.argv) < 2 else sys.argv[1]
        yield Header()
        with Container():
            yield DirectoryTree(path, id="tree-view")
            with VerticalScroll(id="code-view"):
                yield Static(id="code", expand=True)
        footer = Footer()
        footer.compact = True
        yield footer

    def on_mount(self) -> None:
        self.query_one(DirectoryTree).focus()

    def on_directory_tree_file_selected(
        self, event: DirectoryTree.FileSelected
    ) -> None:
        """Called when the user click a file in the directory tree."""
        event.stop()
        code_view = self.query_one("#code", Static)
        try:
            syntax = Syntax.from_path(
                str(event.path),
                line_numbers=True,
                word_wrap=False,
                indent_guides=True,
                theme="github-dark",
            )
        except Exception:
            code_view.update(Traceback(theme="github-dark", width=None))
            self.sub_title = "ERROR"
        else:
            code_view.update(syntax)
            self.query_one("#code-view").scroll_home(animate=False)
            self.sub_title = str(event.path)

    def action_toggle_files(self) -> None:
        """Called in response to key binding."""
        self.show_tree = not self.show_tree

    def action_toggle_compact(self) -> None:
        """Called in response to key binding."""
        self.query_one(Footer).compact = not self.query_one(Footer).compact


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

[darrenburns]

Seems like there's a rendering issue - see my other comment. Would be good to investigate this before merging.

[TomJGooding]

Good catch, thanks Darren! I might be wrong but is the fix as simple as adding layout=True to the reactive?

Let me know and I'm happy to add a snapshot test for this and update!

[darrenburns]

@TomJGooding Sadly that doesn't seem to fix it 😢

[TomJGooding]

Sorry to clarify, I mean the compact reactive in the FooterKey(not the Footer). This seems to fix the example above from a quick test.

[darrenburns]

That does seem to fix it, yes!

The only final thing I'd say is we'd probably want to have the spacing at each side when you cursor over be equal, as it looks like there's enough space for that.

From the CSS, I can't see why this isn't happening, to be honest. Is there an auto width issue here or am I just misreading it (highly likely!)?

Edit: never mind, I was misreading :)

[TomJGooding]

Thanks Darren, good catch again as I hadn't spotted I'd changed the hover styling.

I expect that is why the "the 'default' footer uses a raw space after the description, whereas in the 'compact' style instead uses the grid gutter" then!

[darrenburns]

Yeah I'm guessing that's why. I tried playing around with the CSS for a few minutes and seem to get every combination of spacing apart from the one I'm aiming for 😂

[TomJGooding]

Thanks again Darren for catching these issues, in hindsight I probably should have added more snapshot tests before making changes.

I will double-check with a fresh head tomorrow, but hopefully these are resolved with my latest commits.

[darrenburns]

Looks good, thanks!