From 2cd8295325e17ef796b3b821355802e21aeb78fc Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Wed, 29 Mar 2023 16:29:28 +0100 Subject: [PATCH] Release0170 (#2165) * blog post * blog post * options list * snapshot * words * fix flicker --- CHANGELOG.md | 3 +- docs/blog/images/transparent_background.svg | 307 +++++ docs/blog/posts/release0-17-0.md | 96 ++ pyproject.toml | 2 +- src/textual/_compositor.py | 1 + src/textual/app.py | 1 + src/textual/message_pump.py | 1 + src/textual/screen.py | 1 - src/textual/widgets/_data_table.py | 1 + src/textual/widgets/_option_list.py | 2 +- .../__snapshots__/test_snapshots.ambr | 1136 +++++++++-------- 11 files changed, 993 insertions(+), 558 deletions(-) create mode 100644 docs/blog/images/transparent_background.svg create mode 100644 docs/blog/posts/release0-17-0.md diff --git a/CHANGELOG.md b/CHANGELOG.md index c6ac7ca1b..e29a53bbb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 @@ -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 diff --git a/docs/blog/images/transparent_background.svg b/docs/blog/images/transparent_background.svg new file mode 100644 index 000000000..5a60f97f0 --- /dev/null +++ b/docs/blog/images/transparent_background.svg @@ -0,0 +1,307 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + DialogApp + + + + + + + + + + I must not fear. +Fear is the mind-killer. +Fear is the little-death that brings total obliteration. +I will face my fear. +I will permit it to pass over me and through me. +And when it has gone past, I will turn the inner eye to see its path. +Where the fear has gone█▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█ +Fear is the mind-killer██ +Fear is the little-deat██ +I will face my fear.█━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━█ +I will permit it to pas██ +And when it has gone pa█Good for natural breaks in the content, that don't require another█ +Where the fear has gone█header.█ +Fear is the mind-killer██▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█ +Fear is the little-deat█▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█ +I will face my fear.█▎▋█▋█ +I will permit it to pas█▎Lists▋█▋█ +And when it has gone pa█▎▋▂▂█▋█ +Where the fear has gone█▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔█▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▂▂█ +Fear is the mind-killer█ 1. Lists can be ordered█down widgets.█ +Fear is the little-deat█ 2. Lists can be unordered██ +I will face my fear.█● I must not fear.█▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█ +I will permit it to pas█▪ Fear is the mind-killer.▄▄█▋█ +And when it has gone pa█‣ Fear is the little-death that brings total obliteration.█▋█▀▀▀▀█ +Where the fear has gone█• I will face my fear.█▋██ +Fear is the mind-killer█⭑ I will permit it to pass over me and through me.█▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔██ +Fear is the little-deat█▪ And when it has gone past, I will turn the inner eye to ███ +I will face my fear.█see its path.███ +I will permit it to pas█● Where the fear has gone there will be nothing. Only I will ██▂▂█ +And when it has gone pa█remain.███ +Where the fear has gone████ +Fear is the mind-killer█Longer list███ +Fear is the little-deat█▔▔▔▔▔▔▔▔▔▔▔███ +I will face my fear.█  1. Duke Leto I Atreides, head of House Atreides███ +I will permit it to pas█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█ headings.██ +And when it has gone past, I will turn the inner███ +Where the fear has gone there will be nothing. O█This is H5██ +Fear is the mind-killer.███ +Fear is the little-death that brings total oblit█Header level 5 content.██ +I will face my fear.███ +I will permit it to pass over me and through me.█This is H6██ +And when it has gone past, I will turn the inner█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██ +Where the fear has gone there will be nothing. Only I█This is H4█ +Fear is the mind-killer.██ +Fear is the little-death that brings total obliterati█Header level 4 content. Drilling down in to finer headings.█ +I will face my fear.██ +I will permit it to pass over me and through me.█This is H5█ +And when it has gone past, I will turn the inner eye ██ +Where the fear has gone there will be nothing. Only I█Header level 5 content.█ +Fear is the mind-killer.██ +Fear is the little-death that brings total obliterati█This is H6█ +I will face my fear.█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█ +I will permit it to pass over me and through me. +And when it has gone past, I will turn the inner eye to see its path. +Where the fear has gone there will be nothing. Only I will remain.I must not fear. +Fear is the mind-killer. + + + diff --git a/docs/blog/posts/release0-17-0.md b/docs/blog/posts/release0-17-0.md new file mode 100644 index 000000000..0abd84c4e --- /dev/null +++ b/docs/blog/posts/release0-17-0.md @@ -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? + + + +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. + + +
+ --8<-- "docs/images/screens/pop_screen.excalidraw.svg" +
+ + +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: + +
+--8<-- "docs/blog/images/transparent_background.svg" +
+ +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). diff --git a/pyproject.toml b/pyproject.toml index 175eacb0d..eace3103b 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -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 "] diff --git a/src/textual/_compositor.py b/src/textual/_compositor.py index addec6ea8..ce0cb59ab 100644 --- a/src/textual/_compositor.py +++ b/src/textual/_compositor.py @@ -849,6 +849,7 @@ class Compositor: """ 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) diff --git a/src/textual/app.py b/src/textual/app.py index 85695409e..52e631416 100644 --- a/src/textual/app.py +++ b/src/textual/app.py @@ -1599,6 +1599,7 @@ class App(Generic[ReturnType], DOMNode): try: await self._dispatch_message(events.Compose()) await self._dispatch_message(events.Mount()) + self.check_idle() finally: self._mounted_event.set() diff --git a/src/textual/message_pump.py b/src/textual/message_pump.py index baa7b5b62..7e5acf84c 100644 --- a/src/textual/message_pump.py +++ b/src/textual/message_pump.py @@ -437,6 +437,7 @@ class MessagePump(metaclass=MessagePumpMeta): 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) diff --git a/src/textual/screen.py b/src/textual/screen.py index 7bca52268..cb769a498 100644 --- a/src/textual/screen.py +++ b/src/textual/screen.py @@ -382,7 +382,6 @@ class Screen(Widget): 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 diff --git a/src/textual/widgets/_data_table.py b/src/textual/widgets/_data_table.py index 0ec6a23a6..23cc42459 100644 --- a/src/textual/widgets/_data_table.py +++ b/src/textual/widgets/_data_table.py @@ -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; diff --git a/src/textual/widgets/_option_list.py b/src/textual/widgets/_option_list.py index 21f357ef8..fe3d4d31c 100644 --- a/src/textual/widgets/_option_list.py +++ b/src/textual/widgets/_option_list.py @@ -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 { diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr index 589be45f8..1ed1df73c 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr +++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr @@ -183,199 +183,202 @@ font-weight: 700; } - .terminal-1817785991-matrix { + .terminal-3056812568-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1817785991-title { + .terminal-3056812568-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1817785991-r1 { fill: #c5c8c6 } - .terminal-1817785991-r2 { fill: #e3e3e3 } - .terminal-1817785991-r3 { fill: #004578 } - .terminal-1817785991-r4 { fill: #e1e1e1 } - .terminal-1817785991-r5 { fill: #632ca6 } + .terminal-3056812568-r1 { fill: #c5c8c6 } + .terminal-3056812568-r2 { fill: #e3e3e3 } + .terminal-3056812568-r3 { fill: #004578 } + .terminal-3056812568-r4 { fill: #e1e1e1 } + .terminal-3056812568-r5 { fill: #632ca6 } + .terminal-3056812568-r6 { fill: #dde6ed;font-weight: bold } + .terminal-3056812568-r7 { fill: #14191f } + .terminal-3056812568-r8 { fill: #23568b } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - MyApp + MyApp - - - - ⭘MyApp - ╭──────────────────╮╭──────────────────────────────────────────────────────────────────────────────────────────────────╮ - │ok││test│ - │╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍││╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍│ - │││╭╮╭╮╭╮╭╮│ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - ││││││││││││ - │││╰╯╰╯╰╯╰╯│ - ╰──────────────────╯╰──────────────────────────────────────────────────────────────────────────────────────────────────╯ + + + + ⭘MyApp + ╭──────────────────╮╭──────────────────────────────────────────────────────────────────────────────────────────────────╮ + │ok││test│ + │╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍││╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍│ + │││╭─ 0 ──────────────────────────────────────╮╭─ 1 ──────────────────────────────────────╮╭─ 2 ─────│ + │││││││││ + ││││ Foo       Bar         Baz              ││ Foo       Bar         Baz              ││ Foo     │ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY▁▁││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY▁▁││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + ││││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH  0123456789  IJKLMNOPQRSTUVWXY││ ABCDEFGH│ + │││╰──────────────────────────────────────────╯╰──────────────────────────────────────────╯╰─────────│ + │││▋│ + ╰──────────────────╯╰──────────────────────────────────────────────────────────────────────────────────────────────────╯ @@ -5942,139 +5945,141 @@ font-weight: 700; } - .terminal-2701996076-matrix { + .terminal-3573285936-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-2701996076-title { + .terminal-3573285936-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-2701996076-r1 { fill: #c5c8c6 } - .terminal-2701996076-r2 { fill: #e8e0e7 } - .terminal-2701996076-r3 { fill: #ddedf9 } - .terminal-2701996076-r4 { fill: #eae3e5 } - .terminal-2701996076-r5 { fill: #ede6e6 } - .terminal-2701996076-r6 { fill: #efe9e4 } - .terminal-2701996076-r7 { fill: #e4eee8 } - .terminal-2701996076-r8 { fill: #e2edeb } - .terminal-2701996076-r9 { fill: #dfebed } + .terminal-3573285936-r1 { fill: #c5c8c6 } + .terminal-3573285936-r2 { fill: #e8e0e7 } + .terminal-3573285936-r3 { fill: #ddedf9 } + .terminal-3573285936-r4 { fill: #eae3e5 } + .terminal-3573285936-r5 { fill: #ede6e6 } + .terminal-3573285936-r6 { fill: #efe9e4 } + .terminal-3573285936-r7 { fill: #efeedf } + .terminal-3573285936-r8 { fill: #e9eee5 } + .terminal-3573285936-r9 { fill: #e4eee8 } + .terminal-3573285936-r10 { fill: #e2edeb } + .terminal-3573285936-r11 { fill: #dfebed } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - HeightComparisonApp + HeightComparisonApp - - - - #cells· - · - · - #percent· - • - · - #w· - · - · - • - #h· - · - #auto· - · - #fr1• - · - · - · - · - #fr2• - · - · - · - · + + + + #cells· + · + · + #percent· + • + · + #w· + · + · + • + #h· + · + · + · + #vw• + · + · + · + #vh· + • + #auto· + #fr1· + #fr2· + · @@ -11964,139 +11969,141 @@ font-weight: 700; } - .terminal-3285483541-matrix { + .terminal-1938916138-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-3285483541-title { + .terminal-1938916138-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-3285483541-r1 { fill: #c5c8c6 } - .terminal-3285483541-r2 { fill: #e8e0e7 } - .terminal-3285483541-r3 { fill: #eae3e5 } - .terminal-3285483541-r4 { fill: #ede6e6 } - .terminal-3285483541-r5 { fill: #efe9e4 } - .terminal-3285483541-r6 { fill: #e4eee8 } - .terminal-3285483541-r7 { fill: #e2edeb } - .terminal-3285483541-r8 { fill: #dfebed } - .terminal-3285483541-r9 { fill: #ddedf9 } + .terminal-1938916138-r1 { fill: #c5c8c6 } + .terminal-1938916138-r2 { fill: #e8e0e7 } + .terminal-1938916138-r3 { fill: #eae3e5 } + .terminal-1938916138-r4 { fill: #ede6e6 } + .terminal-1938916138-r5 { fill: #efe9e4 } + .terminal-1938916138-r6 { fill: #efeedf } + .terminal-1938916138-r7 { fill: #e9eee5 } + .terminal-1938916138-r8 { fill: #e4eee8 } + .terminal-1938916138-r9 { fill: #e2edeb } + .terminal-1938916138-r10 { fill: #dfebed } + .terminal-1938916138-r11 { fill: #ddedf9 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - HeightComparisonApp + HeightComparisonApp - - - - - - - - - - - - - - - #cells#percent#w#h#auto#fr1#fr3 - - - - - - - - - - - - ····•····•····•····•····•····•····•····•····•····•····•····•····•····•····•····• + + + + + + + + + + + + + + + #cells#percent#w#h#vw#vh#auto#fr1#fr3 + + + + + + + + + + + + ····•····•····•····•····•····•····•····•····•····•····•····•····•····•····•····• @@ -12126,131 +12133,137 @@ font-weight: 700; } - .terminal-1523559455-matrix { + .terminal-1071832686-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1523559455-title { + .terminal-1071832686-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1523559455-r1 { fill: #e1e1e1 } - .terminal-1523559455-r2 { fill: #c5c8c6 } + .terminal-1071832686-r1 { fill: #dde6ed;font-weight: bold } + .terminal-1071832686-r2 { fill: #1e1201;font-weight: bold } + .terminal-1071832686-r3 { fill: #dde6ed } + .terminal-1071832686-r4 { fill: #c5c8c6 } + .terminal-1071832686-r5 { fill: #dfe4e7 } + .terminal-1071832686-r6 { fill: #1e1405 } + .terminal-1071832686-r7 { fill: #e1e1e1 } + .terminal-1071832686-r8 { fill: #211505 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  4     Joseph Schooling      Singapore      50.39  +  2     Michael Phelps        United States  51.14  +  5     Chad le Clos          South Africa   51.14  +  6     László Cseh           Hungary        51.14  +  3     Li Zhuhao             China          51.26  +  8     Mehdy Metella         France         51.58  +  7     Tom Shields           United States  51.73  +  1     Aleksandr Sadovnikov  Russia         51.84  + + + + + + + + + + + + + + @@ -12281,131 +12294,135 @@ font-weight: 700; } - .terminal-1523559455-matrix { + .terminal-1710966859-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1523559455-title { + .terminal-1710966859-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1523559455-r1 { fill: #e1e1e1 } - .terminal-1523559455-r2 { fill: #c5c8c6 } + .terminal-1710966859-r1 { fill: #dde6ed;font-weight: bold } + .terminal-1710966859-r2 { fill: #dde6ed } + .terminal-1710966859-r3 { fill: #c5c8c6 } + .terminal-1710966859-r4 { fill: #1e1405 } + .terminal-1710966859-r5 { fill: #dfe4e7 } + .terminal-1710966859-r6 { fill: #e1e1e1 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  0  5     Chad le Clos          South Africa   51.14  +  1  4     Joseph Schooling      Singapore      50.39  +  2  2     Michael Phelps        United States  51.14  +  3  6     László Cseh           Hungary        51.14  +  4  3     Li Zhuhao             China          51.26  +  5  8     Mehdy Metella         France         51.58  +  6  7     Tom Shields           United States  51.73  +  7  10    Darren Burns          Scotland       51.84  +  8  1     Aleksandr Sadovnikov  Russia         51.84  + + + + + + + + + + + + + @@ -12436,131 +12453,134 @@ font-weight: 700; } - .terminal-1523559455-matrix { + .terminal-2311386745-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1523559455-title { + .terminal-2311386745-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1523559455-r1 { fill: #e1e1e1 } - .terminal-1523559455-r2 { fill: #c5c8c6 } + .terminal-2311386745-r1 { fill: #dde6ed;font-weight: bold } + .terminal-2311386745-r2 { fill: #dde6ed } + .terminal-2311386745-r3 { fill: #c5c8c6 } + .terminal-2311386745-r4 { fill: #e1e1e1 } + .terminal-2311386745-r5 { fill: #211505 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  4     Joseph Schooling      Singapore      50.39  +  2     Michael Phelps        United States  51.14  +  5     Chad le Clos          South Africa   51.14  +  6     László Cseh           Hungary        51.14  +  3     Li Zhuhao             China          51.26  +  8     Mehdy Metella         France         51.58  +  7     Tom Shields           United States  51.73  +  1     Aleksandr Sadovnikov  Russia         51.84  +  10    Darren Burns          Scotland       51.84  + + + + + + + + + + + + + @@ -12591,131 +12611,136 @@ font-weight: 700; } - .terminal-1523559455-matrix { + .terminal-3008422431-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1523559455-title { + .terminal-3008422431-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1523559455-r1 { fill: #e1e1e1 } - .terminal-1523559455-r2 { fill: #c5c8c6 } + .terminal-3008422431-r1 { fill: #dde6ed;font-weight: bold } + .terminal-3008422431-r2 { fill: #dde6ed } + .terminal-3008422431-r3 { fill: #c5c8c6 } + .terminal-3008422431-r4 { fill: #dfe4e7 } + .terminal-3008422431-r5 { fill: #e1e1e1 } + .terminal-3008422431-r6 { fill: #1e1405 } + .terminal-3008422431-r7 { fill: #211505 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  4     Joseph Schooling      Singapore      50.39  +  2     Michael Phelps        United States  51.14  +  5     Chad le Clos          South Africa   51.14  +  6     László Cseh           Hungary        51.14  +  3     Li Zhuhao             China          51.26  +  8     Mehdy Metella         France         51.58  +  7     Tom Shields           United States  51.73  +  1     Aleksandr Sadovnikov  Russia         51.84  + + + + + + + + + + + + + + @@ -12746,131 +12771,134 @@ font-weight: 700; } - .terminal-1523559455-matrix { + .terminal-2683041401-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1523559455-title { + .terminal-2683041401-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1523559455-r1 { fill: #e1e1e1 } - .terminal-1523559455-r2 { fill: #c5c8c6 } + .terminal-2683041401-r1 { fill: #dde6ed;font-weight: bold } + .terminal-2683041401-r2 { fill: #dde6ed } + .terminal-2683041401-r3 { fill: #c5c8c6 } + .terminal-2683041401-r4 { fill: #e1e1e1 } + .terminal-2683041401-r5 { fill: #211505 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  4     Joseph Schooling      Singapore      50.39  +  2     Michael Phelps        United States  51.14  +  5     Chad le Clos          South Africa   51.14  +  6     László Cseh           Hungary        51.14  +  3     Li Zhuhao             China          51.26  +  8     Mehdy Metella         France         51.58  +  7     Tom Shields           United States  51.73  +  1     Aleksandr Sadovnikov  Russia         51.84  +  10    Darren Burns          Scotland       51.84  + + + + + + + + + + + + + @@ -17418,139 +17446,139 @@ font-weight: 700; } - .terminal-3158408545-matrix { + .terminal-1041266590-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-3158408545-title { + .terminal-1041266590-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-3158408545-r1 { fill: #c5c8c6 } - .terminal-3158408545-r2 { fill: #e3e3e3 } - .terminal-3158408545-r3 { fill: #e1e1e1 } - .terminal-3158408545-r4 { fill: #004578 } - .terminal-3158408545-r5 { fill: #e0e8ee;font-weight: bold } - .terminal-3158408545-r6 { fill: #e2e3e3 } - .terminal-3158408545-r7 { fill: #a7a9ab } - .terminal-3158408545-r8 { fill: #777a7e } - .terminal-3158408545-r9 { fill: #14191f } - .terminal-3158408545-r10 { fill: #ddedf9 } + .terminal-1041266590-r1 { fill: #c5c8c6 } + .terminal-1041266590-r2 { fill: #e3e3e3 } + .terminal-1041266590-r3 { fill: #e1e1e1 } + .terminal-1041266590-r4 { fill: #004578 } + .terminal-1041266590-r5 { fill: #e0e8ee;font-weight: bold } + .terminal-1041266590-r6 { fill: #e2e3e3 } + .terminal-1041266590-r7 { fill: #42464b } + .terminal-1041266590-r8 { fill: #777a7e } + .terminal-1041266590-r9 { fill: #14191f } + .terminal-1041266590-r10 { fill: #ddedf9 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - OptionListApp + OptionListApp - + - - ⭘OptionListApp - - - - ╭──────────────────────────────────────────────────────╮ - │Aerilon│ - │Aquaria│ - │────────────────────────────────────────────────────│ - │Canceron│ - │Caprica│ - │────────────────────────────────────────────────────│ - │Gemenon│ - │────────────────────────────────────────────────────│ - │Leonis│ - │Libran│ - │────────────────────────────────────────────────────▅▅│ - │Picon│ - │────────────────────────────────────────────────────│ - │Sagittaron│ - ╰──────────────────────────────────────────────────────╯ - - - + + ⭘OptionListApp + + + + ╭──────────────────────────────────────────────────────╮ + │Aerilon│ + │Aquaria│ + │────────────────────────────────────────────────────│ + │Canceron│ + │Caprica│ + │────────────────────────────────────────────────────│ + │Gemenon│ + │────────────────────────────────────────────────────│ + │Leonis│ + │Libran│ + │────────────────────────────────────────────────────▅▅│ + │Picon│ + │────────────────────────────────────────────────────│ + │Sagittaron│ + ╰──────────────────────────────────────────────────────╯ + + +