mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Release0170 (#2165)
* blog post * blog post * options list * snapshot * words * fix flicker
This commit is contained in:
@@ -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/)
|
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
||||||
and this project adheres to [Semantic Versioning](http://semver.org/).
|
and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||||
|
|
||||||
## Unreleased
|
## [0.17.0] - 2023-03-29
|
||||||
|
|
||||||
### Fixed
|
### Fixed
|
||||||
|
|
||||||
@@ -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
|
- 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
|
- 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.
|
- message_pump.app will now set the active app if it is not already set.
|
||||||
|
- DataTable now has max height set to 100vh
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|
||||||
|
|||||||
307
docs/blog/images/transparent_background.svg
Normal file
307
docs/blog/images/transparent_background.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 134 KiB |
96
docs/blog/posts/release0-17-0.md
Normal file
96
docs/blog/posts/release0-17-0.md
Normal file
@@ -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).
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
[tool.poetry]
|
[tool.poetry]
|
||||||
name = "textual"
|
name = "textual"
|
||||||
version = "0.16.0"
|
version = "0.17.0"
|
||||||
homepage = "https://github.com/Textualize/textual"
|
homepage = "https://github.com/Textualize/textual"
|
||||||
description = "Modern Text User Interface framework"
|
description = "Modern Text User Interface framework"
|
||||||
authors = ["Will McGugan <will@textualize.io>"]
|
authors = ["Will McGugan <will@textualize.io>"]
|
||||||
|
|||||||
@@ -849,6 +849,7 @@ class Compositor:
|
|||||||
"""
|
"""
|
||||||
screen_region = self.size.region
|
screen_region = self.size.region
|
||||||
update_regions = self._dirty_regions.copy()
|
update_regions = self._dirty_regions.copy()
|
||||||
|
self._dirty_regions.clear()
|
||||||
if update_regions:
|
if update_regions:
|
||||||
# Create a crop region that surrounds all updates.
|
# Create a crop region that surrounds all updates.
|
||||||
crop = Region.from_union(update_regions).intersection(screen_region)
|
crop = Region.from_union(update_regions).intersection(screen_region)
|
||||||
|
|||||||
@@ -1599,6 +1599,7 @@ class App(Generic[ReturnType], DOMNode):
|
|||||||
try:
|
try:
|
||||||
await self._dispatch_message(events.Compose())
|
await self._dispatch_message(events.Compose())
|
||||||
await self._dispatch_message(events.Mount())
|
await self._dispatch_message(events.Mount())
|
||||||
|
self.check_idle()
|
||||||
finally:
|
finally:
|
||||||
self._mounted_event.set()
|
self._mounted_event.set()
|
||||||
|
|
||||||
|
|||||||
@@ -437,6 +437,7 @@ class MessagePump(metaclass=MessagePumpMeta):
|
|||||||
try:
|
try:
|
||||||
await self._dispatch_message(events.Compose())
|
await self._dispatch_message(events.Compose())
|
||||||
await self._dispatch_message(events.Mount())
|
await self._dispatch_message(events.Mount())
|
||||||
|
self.check_idle()
|
||||||
self._post_mount()
|
self._post_mount()
|
||||||
except Exception as error:
|
except Exception as error:
|
||||||
self.app._handle_exception(error)
|
self.app._handle_exception(error)
|
||||||
|
|||||||
@@ -382,7 +382,6 @@ class Screen(Widget):
|
|||||||
self._repaint_required = False
|
self._repaint_required = False
|
||||||
|
|
||||||
if self._dirty_widgets:
|
if self._dirty_widgets:
|
||||||
self._on_timer_update()
|
|
||||||
self.update_timer.resume()
|
self.update_timer.resume()
|
||||||
|
|
||||||
# The Screen is idle - a good opportunity to invoke the scheduled callbacks
|
# The Screen is idle - a good opportunity to invoke the scheduled callbacks
|
||||||
|
|||||||
@@ -247,6 +247,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
|
|||||||
background: $surface ;
|
background: $surface ;
|
||||||
color: $text;
|
color: $text;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
max-height: 100vh
|
||||||
}
|
}
|
||||||
DataTable > .datatable--header {
|
DataTable > .datatable--header {
|
||||||
text-style: bold;
|
text-style: bold;
|
||||||
|
|||||||
@@ -176,7 +176,7 @@ class OptionList(ScrollView, can_focus=True):
|
|||||||
}
|
}
|
||||||
|
|
||||||
OptionList > .option-list--separator {
|
OptionList > .option-list--separator {
|
||||||
color: $text-muted;
|
color: $foreground 15%;
|
||||||
}
|
}
|
||||||
|
|
||||||
OptionList > .option-list--option-highlighted {
|
OptionList > .option-list--option-highlighted {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user