alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Apply suggestions from code review

Browse Source 
Co-authored-by: darrenburns <darrenburns@users.noreply.github.com>
This commit is contained in:
Will McGugan
2022-08-26 10:40:04 +01:00
committed by GitHub
parent 72327d6392
commit 732af87936
4 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/events/descendant_focus.md
View File

@@ -1,6 +1,6 @@
# DescendantFocus # DescendantFocus
The `DescendantFocus` event is sent to a widget when one of its children receives input focus. The `DescendantFocus` event is sent to a widget when one of its descendants receives focus.
- [x] Bubbles - [x] Bubbles

4
docs/events/load.md
View File

@@ -1,8 +1,8 @@
# Load # Load
The `Load` event is sent to the app prior to switching the terminal in to application mode. The `Load` event is sent to the app prior to switching the terminal to application mode.
The load event is typically used to do any setup actions required by the app, that don't change the display. The load event is typically used to do any setup actions required by the app that don't change the display.
- [ ] Bubbles - [ ] Bubbles

2
docs/events/mouse_release.md
View File

@@ -8,4 +8,4 @@ The `MouseRelease` event is sent to a widget when it is no longer receiving mous
| attribute | type | purpose | | attribute | type | purpose |
| ---------------- | ------ | -------------------------------------------- | | ---------------- | ------ | -------------------------------------------- |
| `mouse_position` | Offset | Mouse coordinates when the mouse was release | | `mouse_position` | Offset | Mouse coordinates when the mouse was released |

14
docs/guide/CSS.md
View File

@@ -54,7 +54,7 @@ Header {
The lines inside the curly braces contains CSS _rules_, which consist of a rule name and rule value separated by a colon and ending in a semi-colon. Such rules are typically written one per line, but you could add additional rules as long as they are separated by semi-colons. The lines inside the curly braces contains CSS _rules_, which consist of a rule name and rule value separated by a colon and ending in a semi-colon. Such rules are typically written one per line, but you could add additional rules as long as they are separated by semi-colons.
The first rule in the above example reads `"dock: top;"`. The rule name is `dock` which tells Textual to place the widget on an edge of the screen. The text after the colon is `top` which tells Textual to dock to the _top_ of the screen. Other valid values for dock are "right", "bottom", or "left"; but `top` is naturally appropriate for a header. The first rule in the above example reads `"dock: top;"`. The rule name is `dock` which tells Textual to place the widget on an edge of the screen. The text after the colon is `top` which tells Textual to dock to the _top_ of the screen. Other valid values for `dock` are "right", "bottom", or "left"; but `top` is most appropriate for a header.
You may be able to guess what some of the the other rules do. We will cover those later. You may be able to guess what some of the the other rules do. We will cover those later.
@@ -77,7 +77,7 @@ Let's look at a trivial Textual app.
```{.textual path="docs/examples/guide/dom1.py"} ```{.textual path="docs/examples/guide/dom1.py"}
``` ```
When you run this code you will have an instance of an `ExampleApp` in memory. This app class will also create a `Screen` object. In DOM terms, the Screen is a _child_ of the app. When you run this code you will have an instance of an `ExampleApp` in memory. This app class will also create a `Screen` object. In DOM terms, the `Screen` is a _child_ of `ExampleApp`.
With the above example, the DOM will look like the following: With the above example, the DOM will look like the following:
@@ -169,7 +169,7 @@ It is reasonable to ask why use CSS at all? Python is a powerful and expressive
A major advantage of CSS is that it separates how your app _looks_ from how it _works_. Setting styles in Python can generate a lot of spaghetti code which can make it hard to see the important logic in your application. A major advantage of CSS is that it separates how your app _looks_ from how it _works_. Setting styles in Python can generate a lot of spaghetti code which can make it hard to see the important logic in your application.
A second advantage of CSS is that you can customize builtin and third-part widgets just as easily as you can your own app or widgets. A second advantage of CSS is that you can customize builtin and third-party widgets just as easily as you can your own app or widgets.
Finally, Textual CSS allows you to _live edit_ the styles in your app. If you run your application with the following command, any changes you make to the CSS file will be instantly updated in the terminal: Finally, Textual CSS allows you to _live edit_ the styles in your app. If you run your application with the following command, any changes you make to the CSS file will be instantly updated in the terminal:
@@ -177,7 +177,7 @@ Finally, Textual CSS allows you to _live edit_ the styles in your app. If you ru
textual run my_app.py --dev textual run my_app.py --dev
``` ```
Being able to iterate on the design without restarting the Python code can make it easier and faster to design beautiful interfaces. Being able to iterate on the design without restarting the application makes it easier and faster to design beautiful interfaces.
## Selectors ## Selectors
@@ -270,7 +270,7 @@ To match a Widget with a given class in CSS you can precede the class name with
!!! note !!! note
You can apply a class name to any class, which means that widgets of different types could share classes. You can apply a class name to any widget, which means that widgets of different types could share classes.
Class name selectors may be _chained_ together by appending another full stop and class name. The selector will match a widget that has _all_ of the class names set. For instance, the following sets a red background on widgets that have both `error` _and_ `disabled` class names. Class name selectors may be _chained_ together by appending another full stop and class name. The selector will match a widget that has _all_ of the class names set. For instance, the following sets a red background on widgets that have both `error` _and_ `disabled` class names.
@@ -313,7 +313,7 @@ Button:hover {
The `background: green` is only applied to the Button underneath the mouse cursor. When you move the cursor away from the button it will return to its previous background color. The `background: green` is only applied to the Button underneath the mouse cursor. When you move the cursor away from the button it will return to its previous background color.
Here are some other such pseudo classes: Here are some other pseudo classes:
- `:focus` Matches widgets which have input focus. - `:focus` Matches widgets which have input focus.
- `:focus-within` Matches widgets with a focused a child widget. - `:focus-within` Matches widgets with a focused a child widget.
@@ -324,7 +324,7 @@ More sophisticated selectors can be created by combining simple selectors. The r
### Descendant combinator ### Descendant combinator
If you separate two selectors with a space it will match widgets with the second selector that have a parent that matches the first selector. If you separate two selectors with a space it will match widgets with the second selector that have an ancestor that matches the first selector.
Here's a section of DOM to illustrate this combinator: Here's a section of DOM to illustrate this combinator: