diff --git a/docs/examples/widgets/footer.py b/docs/examples/widgets/footer.py new file mode 100644 index 000000000..47d9c9aa6 --- /dev/null +++ b/docs/examples/widgets/footer.py @@ -0,0 +1,15 @@ +from textual.app import App, ComposeResult +from textual.binding import Binding +from textual.widgets import Footer + + +class FooterApp(App): + BINDINGS = [Binding(key="q", action="quit", description="Quit the app")] + + def compose(self) -> ComposeResult: + yield Footer() + + +if __name__ == "__main__": + app = FooterApp() + app.run() diff --git a/docs/reference/footer.md b/docs/reference/footer.md new file mode 100644 index 000000000..604c2ef6a --- /dev/null +++ b/docs/reference/footer.md @@ -0,0 +1 @@ +::: textual.widgets.Footer diff --git a/docs/widgets/button.md b/docs/widgets/button.md index 44f9cfb2d..2b1008e85 100644 --- a/docs/widgets/button.md +++ b/docs/widgets/button.md @@ -38,11 +38,11 @@ Clicking any of the non-disabled buttons in the example app below will result in | `variant` | `str` | `"default"` | Semantic styling variant. One of `default`, `primary`, `success`, `warning`, `error`. | | `disabled` | `bool` | `False` | Whether the button is disabled or not. Disabled buttons cannot be focused or clicked, and are styled in a way that suggests this. | -## Events +## Messages ### Pressed -The `Button.Pressed` event is sent when the button is pressed. +The `Button.Pressed` message is sent when the button is pressed. - [x] Bubbles diff --git a/docs/widgets/footer.md b/docs/widgets/footer.md index 571fbcaac..788c8e8ab 100644 --- a/docs/widgets/footer.md +++ b/docs/widgets/footer.md @@ -1 +1,41 @@ # Footer + +## Description + +A simple footer widget which is docked to the bottom of its parent container. Displays +available keybindings for the currently focused widget. + +## Example + +The example below shows an app with a single keybinding that contains only a `Footer` +widget. Notice how the `Footer` automatically displays the keybind. + +=== "Output" + + ```{.textual path="docs/examples/widgets/footer.py"} + ``` + +=== "button.py" + + ```python + --8<-- "docs/examples/widgets/footer.py" + ``` + +## Reactive Attributes + +| Name | Type | Default | Description | +|-----------------|-------|---------|-----------------------------------------------------------------------------------------------------------| +| `highlight_key` | `str` | `None` | Stores the currently highlighted key. This is typically the key the cursor is hovered over in the footer. | + +## Messages + +This widget sends no messages. + +## Additional Notes + +* You can prevent keybindings from appearing in the footer by setting the `show` argument of the `Binding` to `False`. +* You can customize the text that appears for the key itself in the footer using the `key_display` argument of `Binding`. + +## See Also + +* [Footer](../reference/footer.md) code reference diff --git a/mkdocs.yml b/mkdocs.yml index 2a9a020a8..f0f47ce7e 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -51,7 +51,7 @@ nav: - "events/screen_suspend.md" - "events/show.md" - Styles: - - "styles/index.md" + - "styles/index.md" - "styles/align.md" - "styles/background.md" - "styles/border.md" @@ -100,6 +100,7 @@ nav: - "reference/containers.md" - "reference/dom_node.md" - "reference/events.md" + - "reference/footer.md" - "reference/geometry.md" - "reference/index.md" - "reference/message_pump.md" diff --git a/sandbox/darren/file_search.py b/sandbox/darren/file_search.py index ab93b29fb..da25f983a 100644 --- a/sandbox/darren/file_search.py +++ b/sandbox/darren/file_search.py @@ -11,7 +11,7 @@ from textual.app import App from textual.geometry import Size from textual.reactive import Reactive from textual.widget import Widget -from textual.widgets.text_input import TextInput, TextWidgetBase +from textual.widgets._input import Input def get_files() -> list[Path]: @@ -53,12 +53,12 @@ class FileSearchApp(App): def on_mount(self) -> None: self.file_table = FileTable(id="file_table", files=list(Path.cwd().iterdir())) - self.search_bar = TextInput(placeholder="Search for files...") - self.search_bar.focus() - self.mount(file_table_wrapper=Widget(self.file_table)) + self.search_bar = Input(placeholder="Search for files...") + # self.search_bar.focus() self.mount(search_bar=self.search_bar) + self.mount(file_table_wrapper=Widget(self.file_table)) - def on_text_input_changed(self, event: TextInput.Changed) -> None: + def on_input_changed(self, event: Input.Changed) -> None: self.file_table.filter = event.value diff --git a/sandbox/darren/file_search.scss b/sandbox/darren/file_search.scss index 6b8839216..b1d95cea6 100644 --- a/sandbox/darren/file_search.scss +++ b/sandbox/darren/file_search.scss @@ -1,12 +1,8 @@ Screen { - - + } #file_table_wrapper { - dock: bottom; - height: auto; - overflow: auto auto; scrollbar-color: $accent-darken-1; } @@ -15,7 +11,5 @@ Screen { } #search_bar { - dock: bottom; - background: $accent; height: 1; } diff --git a/src/textual/widgets/_footer.py b/src/textual/widgets/_footer.py index 59deb955c..26534a4e9 100644 --- a/src/textual/widgets/_footer.py +++ b/src/textual/widgets/_footer.py @@ -20,18 +20,18 @@ class Footer(Widget): dock: bottom; height: 1; } - Footer > .footer--highlight { - background: $accent-darken-1; + Footer > .footer--highlight { + background: $accent-darken-1; } - Footer > .footer--highlight-key { - background: $secondary; - text-style: bold; + Footer > .footer--highlight-key { + background: $secondary; + text-style: bold; } Footer > .footer--key { - text-style: bold; - background: $accent-darken-2; + text-style: bold; + background: $accent-darken-2; } """ @@ -65,7 +65,7 @@ class Footer(Widget): self.highlight_key = event.style.meta.get("key") async def on_leave(self, event: events.Leave) -> None: - """Clear any highlight when the mouse leave the widget""" + """Clear any highlight when the mouse leaves the widget""" self.highlight_key = None def __rich_repr__(self) -> rich.repr.Result: diff --git a/src/textual/widgets/_input.py b/src/textual/widgets/_input.py index bf3db3725..ef8bb88cc 100644 --- a/src/textual/widgets/_input.py +++ b/src/textual/widgets/_input.py @@ -56,7 +56,7 @@ class Input(Widget, can_focus=True): DEFAULT_CSS = """ Input { background: $boost; - color: $text; + color: $text; padding: 0 2; border: tall $background; width: 100%; @@ -82,9 +82,9 @@ class Input(Widget, can_focus=True): Binding("left", "cursor_left", "cursor left"), Binding("right", "cursor_right", "cursor right"), Binding("backspace", "delete_left", "delete left"), - Binding("home", "home", "Home"), - Binding("end", "end", "Home"), - Binding("ctrl+d", "delete_right", "Delete"), + Binding("home", "home", "home"), + Binding("end", "end", "end"), + Binding("ctrl+d", "delete_right", "delete right"), ] COMPONENT_CLASSES = {"input--cursor", "input--placeholder"}