-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* blog post * blog post * options list * snapshot * words * fix flicker
- Loading branch information
1 parent
0be094c
commit 2cd8295
Showing
11 changed files
with
993 additions
and
558 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
--- | ||
draft: false | ||
date: 2023-03-29 | ||
categories: | ||
- Release | ||
title: "Textual 0.17.0 adds translucent screens and Option List" | ||
authors: | ||
- willmcgugan | ||
--- | ||
|
||
# Textual 0.17.0 adds translucent screens and Option List | ||
|
||
This is a surprisingly large release, given it has been just 7 days since the last version (and we were down a developer for most of that time). | ||
|
||
What's new in this release? | ||
|
||
<!-- more --> | ||
|
||
There are two new notable features I want to cover. The first is a compositor effect. | ||
|
||
## Translucent screens | ||
|
||
Textual has a concept of "screens" which you can think of as independent UI modes, each with their own user interface and logic. | ||
The App class keeps a stack of these screens so you can switch to a new screen and later return to the previous screen. | ||
|
||
!!! tip inline end "Screens" | ||
|
||
See the [guide](../../guide/screens.md) to learn more about the screens API. | ||
|
||
<a href="/guide/screens"> | ||
<div class="excalidraw"> | ||
--8<-- "docs/images/screens/pop_screen.excalidraw.svg" | ||
</div> | ||
</a> | ||
|
||
Screens can be used to build modal dialogs by *pushing* a screen with controls / buttons, and *popping* the screen when the user has finished with it. | ||
The problem with this approach is that there was nothing to indicate to the user that the original screen was still there, and could be returned to. | ||
|
||
In this release we have added alpha support to the Screen's background color which allows the screen underneath to show through, typically blended with a little color. | ||
Applying this to a screen makes it clear than the user can return to the previous screen when they have finished interacting with the modal. | ||
|
||
Here's how you can enable this effect with CSS: | ||
|
||
```sass hl_lines="3" | ||
DialogScreen { | ||
align: center middle; | ||
background: $primary 30%; | ||
} | ||
``` | ||
|
||
Setting the background to `$primary` will make the background blue (with the default theme). | ||
The addition of `30%` sets the alpha so that it will be blended with the background. | ||
Here's the kind of effect this creates: | ||
|
||
<div> | ||
--8<-- "docs/blog/images/transparent_background.svg" | ||
</div> | ||
|
||
There are 4 screens in the above screenshot, one for the base screen and one for each of the three dialogs. | ||
Note how each screen modifies the color of the screen below, but leaves everything visible. | ||
|
||
See the [docs on screen opacity](../../guide/screens.md#screen-opacity) if you want to add this to your apps. | ||
|
||
## Option list | ||
|
||
Textual has had a [ListView](../../widgets/list_view.md) widget for a while, which is an excellent way of navigating a list of items (actually other widgets). In this release we've added an [OptionList](../../widgets/option_list.md) which is similar in appearance, but uses the [line api](../../guide/widgets.md#line-api) under the hood. The Line API makes it more efficient when you approach thousands of items. | ||
|
||
```{.textual path="docs/examples/widgets/option_list_strings.py"} | ||
``` | ||
|
||
The Options List accepts [Rich](https://github.com/Textualize/rich/) *renderable*, which means that anything Rich can render may be displayed in a list. Here's an Option List of tables: | ||
|
||
```{.textual path="docs/examples/widgets/option_list_tables.py" columns="100" lines="32"} | ||
``` | ||
|
||
We plan to build on the `OptionList` widget to implement drop-downs, menus, check lists, etc. | ||
But it is still very useful as it is, and you can add it to apps now. | ||
|
||
## What else? | ||
|
||
There are a number of fixes regarding refreshing in this release. If you had issues with parts of the screen not updating, the new version should resolve it. | ||
|
||
There's also a new logging handler, and a "thick" border type. | ||
|
||
See [release notes](https://github.com/Textualize/textual/releases/tag/v0.17.0) for the full details. | ||
|
||
|
||
## Next week | ||
|
||
Next week we plan to take a break from building Textual to *building apps* with Textual. | ||
We do this now and again to give us an opportunity to step back and understand things from the perspective of a developer using Textual. | ||
We will hopefully have something interesting to show from the exercise, and new Open Source apps to share. | ||
|
||
## Join us | ||
|
||
If you want to talk about this update or anything else Textual related, join us on our [Discord server](https://discord.gg/Enf6Z3qhVr). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1,136 changes: 582 additions & 554 deletions
1,136
tests/snapshot_tests/__snapshots__/test_snapshots.ambr
Large diffs are not rendered by default.
Oops, something went wrong.