Skip to content

Commit

Permalink
fix(footer): enable padding between key and description
Browse files Browse the repository at this point in the history
  • Loading branch information
TomJGooding committed Jun 14, 2024
1 parent e9ad400 commit f83a905
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 1 deletion.
6 changes: 5 additions & 1 deletion src/textual/widgets/_footer.py
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ def render(self) -> Text:
key_style = self.get_component_rich_style("footer-key--key")
description_style = self.get_component_rich_style("footer-key--description")
key_display = self.key_display
key_padding = self.get_component_styles("footer-key--key").padding
if self.upper_case_keys:
key_display = key_display.upper()
if self.ctrl_to_caret and key_display.lower().startswith("ctrl+"):
Expand All @@ -94,7 +95,10 @@ def render(self) -> Text:
)
else:
label_text = Text.assemble(
(f" {key_display} ", key_style), (description, description_style), " "
(f" {key_display} ", key_style),
" " * key_padding.right,
(description, description_style),
" ",
)
label_text.stylize_before(self.rich_style)
return label_text
Expand Down
157 changes: 157 additions & 0 deletions tests/snapshot_tests/__snapshots__/test_snapshots.ambr
Original file line number Diff line number Diff line change
Expand Up @@ -20996,6 +20996,163 @@

'''
# ---
# name: test_footer_classic_styling
'''
<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>

@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}

.terminal-1459740668-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}

.terminal-1459740668-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}

.terminal-1459740668-r1 { fill: #e1e1e1 }
.terminal-1459740668-r2 { fill: #c5c8c6 }
.terminal-1459740668-r3 { fill: #dde8f3;font-weight: bold }
.terminal-1459740668-r4 { fill: #ddedf9 }
</style>

<defs>
<clipPath id="terminal-1459740668-clip-terminal">
<rect x="0" y="0" width="975.0" height="584.5999999999999" />
</clipPath>
<clipPath id="terminal-1459740668-line-0">
<rect x="0" y="1.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-1">
<rect x="0" y="25.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-2">
<rect x="0" y="50.3" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-3">
<rect x="0" y="74.7" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-4">
<rect x="0" y="99.1" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-5">
<rect x="0" y="123.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-6">
<rect x="0" y="147.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-7">
<rect x="0" y="172.3" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-8">
<rect x="0" y="196.7" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-9">
<rect x="0" y="221.1" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-10">
<rect x="0" y="245.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-11">
<rect x="0" y="269.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-12">
<rect x="0" y="294.3" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-13">
<rect x="0" y="318.7" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-14">
<rect x="0" y="343.1" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-15">
<rect x="0" y="367.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-16">
<rect x="0" y="391.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-17">
<rect x="0" y="416.3" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-18">
<rect x="0" y="440.7" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-19">
<rect x="0" y="465.1" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-20">
<rect x="0" y="489.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-21">
<rect x="0" y="513.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-1459740668-line-22">
<rect x="0" y="538.3" width="976" height="24.65"/>
</clipPath>
</defs>

<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-1459740668-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">ClassicFooterStylingApp</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>

<g transform="translate(9, 41)" clip-path="url(#terminal-1459740668-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="0" y="562.7" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="97.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="109.8" y="562.7" width="195.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="305" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="317.2" y="562.7" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="414.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="427" y="562.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="475.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="488" y="562.7" width="488" height="24.65" shape-rendering="crispEdges"/>
<g class="terminal-1459740668-matrix">
<text class="terminal-1459740668-r2" x="976" y="20" textLength="12.2" clip-path="url(#terminal-1459740668-line-0)">
</text><text class="terminal-1459740668-r2" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-1459740668-line-1)">
</text><text class="terminal-1459740668-r2" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-1459740668-line-2)">
</text><text class="terminal-1459740668-r2" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-1459740668-line-3)">
</text><text class="terminal-1459740668-r2" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1459740668-line-4)">
</text><text class="terminal-1459740668-r2" x="976" y="142" textLength="12.2" clip-path="url(#terminal-1459740668-line-5)">
</text><text class="terminal-1459740668-r2" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-1459740668-line-6)">
</text><text class="terminal-1459740668-r2" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-1459740668-line-7)">
</text><text class="terminal-1459740668-r2" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-1459740668-line-8)">
</text><text class="terminal-1459740668-r2" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-1459740668-line-9)">
</text><text class="terminal-1459740668-r2" x="976" y="264" textLength="12.2" clip-path="url(#terminal-1459740668-line-10)">
</text><text class="terminal-1459740668-r2" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-1459740668-line-11)">
</text><text class="terminal-1459740668-r2" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-1459740668-line-12)">
</text><text class="terminal-1459740668-r2" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-1459740668-line-13)">
</text><text class="terminal-1459740668-r2" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-1459740668-line-14)">
</text><text class="terminal-1459740668-r2" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1459740668-line-15)">
</text><text class="terminal-1459740668-r2" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-1459740668-line-16)">
</text><text class="terminal-1459740668-r2" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-1459740668-line-17)">
</text><text class="terminal-1459740668-r2" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-1459740668-line-18)">
</text><text class="terminal-1459740668-r2" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-1459740668-line-19)">
</text><text class="terminal-1459740668-r2" x="976" y="508" textLength="12.2" clip-path="url(#terminal-1459740668-line-20)">
</text><text class="terminal-1459740668-r2" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1459740668-line-21)">
</text><text class="terminal-1459740668-r2" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1459740668-line-22)">
</text><text class="terminal-1459740668-r3" x="0" y="581.2" textLength="97.6" clip-path="url(#terminal-1459740668-line-23)">&#160;CTRL+T&#160;</text><text class="terminal-1459740668-r4" x="109.8" y="581.2" textLength="195.2" clip-path="url(#terminal-1459740668-line-23)">Toggle&#160;Dark&#160;mode</text><text class="terminal-1459740668-r3" x="317.2" y="581.2" textLength="97.6" clip-path="url(#terminal-1459740668-line-23)">&#160;CTRL+Q&#160;</text><text class="terminal-1459740668-r4" x="427" y="581.2" textLength="48.8" clip-path="url(#terminal-1459740668-line-23)">Quit</text>
</g>
</g>
</svg>

'''
# ---
# name: test_footer_render
'''
<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
Expand Down
47 changes: 47 additions & 0 deletions tests/snapshot_tests/snapshot_apps/footer_classic_styling.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
from textual.app import App, ComposeResult
from textual.widgets import Footer


class ClassicFooterStylingApp(App):
"""
This app attempts to replicate the styling of the classic footer in
Textual before v0.63.0, in particular the distinct background color
for the binding keys and padding between the key and binding description.
Regression test for https://github.com/Textualize/textual/issues/4557
"""

CSS = """
Footer {
background: $accent;
FooterKey {
background: $accent;
color: $text;
.footer-key--key {
background: $accent-darken-2;
color: $text;
padding-right: 1;
}
}
}
"""

BINDINGS = [
("ctrl+t", "app.toggle_dark", "Toggle Dark mode"),
("ctrl+q", "quit", "Quit"),
]

def compose(self) -> ComposeResult:
yield Footer()

def on_mount(self) -> None:
footer = self.query_one(Footer)
footer.upper_case_keys = True
footer.ctrl_to_caret = False


if __name__ == "__main__":
app = ClassicFooterStylingApp()
app.run()
5 changes: 5 additions & 0 deletions tests/snapshot_tests/test_snapshots.py
Original file line number Diff line number Diff line change
Expand Up @@ -1288,3 +1288,8 @@ def test_hatch(snap_compare):
def test_rules(snap_compare):
"""Test rules."""
assert snap_compare(SNAPSHOT_APPS_DIR / "rules.py")


def test_footer_classic_styling(snap_compare):
"""Regression test for https://github.com/Textualize/textual/issues/4557"""
assert snap_compare(SNAPSHOT_APPS_DIR / "footer_classic_styling.py")

0 comments on commit f83a905

Please sign in to comment.