Skip to content

Commit

Permalink
Release0170 (#2165)
Browse files Browse the repository at this point in the history
* blog post

* blog post

* options list

* snapshot

* words

* fix flicker
  • Loading branch information
willmcgugan authored Mar 29, 2023
1 parent 0be094c commit 2cd8295
Show file tree
Hide file tree
Showing 11 changed files with 993 additions and 558 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).

## Unreleased
## [0.17.0] - 2023-03-29

### Fixed

Expand Down Expand Up @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Screens with alpha in their background color will now blend with the background. https://github.com/Textualize/textual/pull/2139
- Added "thick" border style. https://github.com/Textualize/textual/pull/2139
- message_pump.app will now set the active app if it is not already set.
- DataTable now has max height set to 100vh

### Added

Expand Down
307 changes: 307 additions & 0 deletions docs/blog/images/transparent_background.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
96 changes: 96 additions & 0 deletions docs/blog/posts/release0-17-0.md
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).
2 changes: 1 addition & 1 deletion pyproject.toml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[tool.poetry]
name = "textual"
version = "0.16.0"
version = "0.17.0"
homepage = "https://github.com/Textualize/textual"
description = "Modern Text User Interface framework"
authors = ["Will McGugan <will@textualize.io>"]
Expand Down
1 change: 1 addition & 0 deletions src/textual/_compositor.py
Original file line number Diff line number Diff line change
Expand Up @@ -849,6 +849,7 @@ def render_partial_update(self) -> ChopsUpdate | None:
"""
screen_region = self.size.region
update_regions = self._dirty_regions.copy()
self._dirty_regions.clear()
if update_regions:
# Create a crop region that surrounds all updates.
crop = Region.from_union(update_regions).intersection(screen_region)
Expand Down
1 change: 1 addition & 0 deletions src/textual/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -1599,6 +1599,7 @@ async def invoke_ready_callback() -> None:
try:
await self._dispatch_message(events.Compose())
await self._dispatch_message(events.Mount())
self.check_idle()
finally:
self._mounted_event.set()

Expand Down
1 change: 1 addition & 0 deletions src/textual/message_pump.py
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,7 @@ async def _pre_process(self) -> None:
try:
await self._dispatch_message(events.Compose())
await self._dispatch_message(events.Mount())
self.check_idle()
self._post_mount()
except Exception as error:
self.app._handle_exception(error)
Expand Down
1 change: 0 additions & 1 deletion src/textual/screen.py
Original file line number Diff line number Diff line change
Expand Up @@ -382,7 +382,6 @@ async def _on_idle(self, event: events.Idle) -> None:
self._repaint_required = False

if self._dirty_widgets:
self._on_timer_update()
self.update_timer.resume()

# The Screen is idle - a good opportunity to invoke the scheduled callbacks
Expand Down
1 change: 1 addition & 0 deletions src/textual/widgets/_data_table.py
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
background: $surface ;
color: $text;
height: auto;
max-height: 100vh
}
DataTable > .datatable--header {
text-style: bold;
Expand Down
2 changes: 1 addition & 1 deletion src/textual/widgets/_option_list.py
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ class OptionList(ScrollView, can_focus=True):
}
OptionList > .option-list--separator {
color: $text-muted;
color: $foreground 15%;
}
OptionList > .option-list--option-highlighted {
Expand Down
1,136 changes: 582 additions & 554 deletions tests/snapshot_tests/__snapshots__/test_snapshots.ambr

Large diffs are not rendered by default.

0 comments on commit 2cd8295

Please sign in to comment.