diff --git a/docs/styles/text_opacity.md b/docs/styles/text_opacity.md index e69de29bb..6604b0a24 100644 --- a/docs/styles/text_opacity.md +++ b/docs/styles/text_opacity.md @@ -0,0 +1,53 @@ +# Text-opacity + +The `text-opacity` blends the color of the text in a widget with the color of the background. + +## Syntax + +``` +text-opacity: ; +``` + +### Values + +As a fractional property, `text-opacity` can be set to either a float (between 0 and 1), +or a percentage, e.g. `45%`. +Float values will be clamped between 0 and 1. +Percentage values will be clamped between 0% and 100%. + +## Example + +This example shows, from top to bottom, increase opacity values. + +=== "text_opacity.py" + + ```python + --8<-- "docs/examples/styles/text_opacity.py" + ``` + +=== "text_opacity.css" + + ```css + --8<-- "docs/examples/styles/text_opacity.css" + ``` + +=== "Output" + + ```{.textual path="docs/examples/styles/text_opacity.py"} + ``` + +## CSS + +```sass +/* Set the text to be "half-faded" against the background of the widget */ +Widget { + text-opacity: 50%; +} +``` + +## Python + +```python +# Set the text to be "half-faded" against the background of the widget +widget.styles.text_opacity = "50%" +``` diff --git a/sandbox/darren/basic.css b/sandbox/darren/basic.css new file mode 100644 index 000000000..b04a978cb --- /dev/null +++ b/sandbox/darren/basic.css @@ -0,0 +1,252 @@ +/* CSS file for basic.py */ + + + + * { + transition: color 300ms linear, background 300ms linear; +} + + +*:hover { + /* tint: 30% red; + /* outline: heavy red; */ +} + +App > Screen { + + background: $surface; + color: $text-surface; + layers: base sidebar; + + color: $text-background; + background: $background; + layout: vertical; + + overflow: hidden; + +} + +#tree-container { + overflow-y: auto; + height: 20; + margin: 1 2; + background: $panel; + padding: 1 2; +} + +DirectoryTree { + padding: 0 1; + height: auto; + +} + + + + +DataTable { + /*border:heavy red;*/ + /* tint: 10% green; */ + /* opacity: 50%; */ + padding: 1; + margin: 1 2; + height: 24; +} + +#sidebar { + color: $text-panel; + background: $panel; + dock: left; + width: 30; + margin-bottom: 1; + offset-x: -100%; + transition: offset 500ms in_out_cubic 2s; + layer: sidebar; +} + +#sidebar.-active { + offset-x: 0; +} + +#sidebar .title { + height: 1; + background: $primary-background-darken-1; + color: $text-primary-background-darken-1; + border-right: wide $background; + content-align: center middle; +} + +#sidebar .user { + height: 8; + background: $panel-darken-1; + color: $text-panel-darken-1; + border-right: wide $background; + content-align: center middle; +} + +#sidebar .content { + background: $panel-darken-2; + color: $text-surface; + border-right: wide $background; + content-align: center middle; +} + + + + +Tweet { + height:12; + width: 100%; + + + background: $panel; + color: $text-panel; + layout: vertical; + /* border: outer $primary; */ + padding: 1; + border: wide $panel; + overflow: auto; + /* scrollbar-gutter: stable; */ + align-horizontal: center; + box-sizing: border-box; +} + + +.scrollable { + overflow-x: auto; + overflow-y: scroll; + margin: 1 2; + height: 24; + align-horizontal: center; + layout: vertical; +} + +.code { + height: auto; + +} + + +TweetHeader { + height:1; + background: $accent; + color: $text-accent +} + +TweetBody { + width: 100%; + background: $panel; + color: $text-panel; + height: auto; + padding: 0 1 0 0; +} + +Tweet.scroll-horizontal TweetBody { + width: 350; +} + +.button { + background: $accent; + color: $text-accent; + width:20; + height: 3; + /* border-top: hidden $accent-darken-3; */ + border: tall $accent-darken-2; + /* border-left: tall $accent-darken-1; */ + + + /* padding: 1 0 0 0 ; */ + + transition: background 400ms in_out_cubic, color 400ms in_out_cubic; + +} + +.button:hover { + background: $accent-lighten-1; + color: $text-accent-lighten-1; + width: 20; + height: 3; + border: tall $accent-darken-1; + /* border-left: tall $accent-darken-3; */ + + + + +} + +#footer { + color: $text-accent; + background: $accent; + height: 1; + + content-align: center middle; + dock:bottom; +} + + +#sidebar .content { + layout: vertical +} + +OptionItem { + height: 3; + background: $panel; + border-right: wide $background; + border-left: blank; + content-align: center middle; +} + +OptionItem:hover { + height: 3; + color: $text-primary; + background: $primary-darken-1; + /* border-top: hkey $accent2-darken-3; + border-bottom: hkey $accent2-darken-3; */ + text-style: bold; + border-left: outer $secondary-darken-2; +} + +Error { + width: 100%; + height:3; + background: $error; + color: $text-error; + border-top: tall $error-darken-2; + border-bottom: tall $error-darken-2; + + padding: 0; + text-style: bold; + align-horizontal: center; +} + +Warning { + width: 100%; + height:3; + background: $warning; + color: $text-warning-fade-1; + border-top: tall $warning-darken-2; + border-bottom: tall $warning-darken-2; + + text-style: bold; + align-horizontal: center; +} + +Success { + width: 100%; + + height:auto; + box-sizing: border-box; + background: $success; + color: $text-success-fade-1; + + border-top: hkey $success-darken-2; + border-bottom: hkey $success-darken-2; + + text-style: bold ; + + align-horizontal: center; +} + + +.horizontal { + layout: horizontal +} diff --git a/sandbox/darren/basic.py b/sandbox/darren/basic.py new file mode 100644 index 000000000..061609238 --- /dev/null +++ b/sandbox/darren/basic.py @@ -0,0 +1,235 @@ +from rich.console import RenderableType + +from rich.syntax import Syntax +from rich.text import Text + +from textual.app import App, ComposeResult +from textual.reactive import Reactive +from textual.widget import Widget +from textual.widgets import Static, DataTable, DirectoryTree, Header, Footer +from textual.layout import Container + +CODE = ''' +from __future__ import annotations + +from typing import Iterable, TypeVar + +T = TypeVar("T") + + +def loop_first(values: Iterable[T]) -> Iterable[tuple[bool, T]]: + """Iterate and generate a tuple with a flag for first value.""" + iter_values = iter(values) + try: + value = next(iter_values) + except StopIteration: + return + yield True, value + for value in iter_values: + yield False, value + + +def loop_last(values: Iterable[T]) -> Iterable[tuple[bool, T]]: + """Iterate and generate a tuple with a flag for last value.""" + iter_values = iter(values) + try: + previous_value = next(iter_values) + except StopIteration: + return + for value in iter_values: + yield False, previous_value + previous_value = value + yield True, previous_value + + +def loop_first_last(values: Iterable[T]) -> Iterable[tuple[bool, bool, T]]: + """Iterate and generate a tuple with a flag for first and last value.""" + iter_values = iter(values) + try: + previous_value = next(iter_values) + except StopIteration: + return + first = True + for value in iter_values: + yield first, False, previous_value + first = False + previous_value = value + yield first, True, previous_value +''' + + +lorem_short = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit liber a a a, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum.""" +lorem = ( + lorem_short + + """ In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """ +) + +lorem_short_text = Text.from_markup(lorem_short) +lorem_long_text = Text.from_markup(lorem * 2) + + +class TweetHeader(Widget): + def render(self) -> RenderableType: + return Text("Lorem Impsum", justify="center") + + +class TweetBody(Widget): + short_lorem = Reactive(False) + + def render(self) -> Text: + return lorem_short_text if self.short_lorem else lorem_long_text + + +class Tweet(Widget): + pass + + +class OptionItem(Widget): + def render(self) -> Text: + return Text("Option") + + +class Error(Widget): + def render(self) -> Text: + return Text("This is an error message", justify="center") + + +class Warning(Widget): + def render(self) -> Text: + return Text("This is a warning message", justify="center") + + +class Success(Widget): + def render(self) -> Text: + return Text("This is a success message", justify="center") + + +class BasicApp(App, css_path="basic.css"): + """A basic app demonstrating CSS""" + + def on_load(self): + """Bind keys here.""" + self.bind("s", "toggle_class('#sidebar', '-active')", description="Sidebar") + self.bind("d", "toggle_dark", description="Dark mode") + self.bind("q", "quit", description="Quit") + self.bind("f", "query_test", description="Query test") + + def compose(self): + yield Header() + + table = DataTable() + self.scroll_to_target = Tweet(TweetBody()) + + yield Container( + Tweet(TweetBody()), + Widget( + Static( + Syntax(CODE, "python", line_numbers=True, indent_guides=True), + classes="code", + ), + classes="scrollable", + ), + table, + Widget(DirectoryTree("~/code/textual"), id="tree-container"), + Error(), + Tweet(TweetBody(), classes="scrollbar-size-custom"), + Warning(), + Tweet(TweetBody(), classes="scroll-horizontal"), + Success(), + Tweet(TweetBody(), classes="scroll-horizontal"), + Tweet(TweetBody(), classes="scroll-horizontal"), + Tweet(TweetBody(), classes="scroll-horizontal"), + Tweet(TweetBody(), classes="scroll-horizontal"), + Tweet(TweetBody(), classes="scroll-horizontal"), + ) + yield Widget( + Widget(classes="title"), + Widget(classes="user"), + OptionItem(), + OptionItem(), + OptionItem(), + Widget(classes="content"), + id="sidebar", + ) + yield Footer() + + table.add_column("Foo", width=20) + table.add_column("Bar", width=20) + table.add_column("Baz", width=20) + table.add_column("Foo", width=20) + table.add_column("Bar", width=20) + table.add_column("Baz", width=20) + table.zebra_stripes = True + for n in range(100): + table.add_row(*[f"Cell ([b]{n}[/b], {col})" for col in range(6)]) + + def on_mount(self): + self.sub_title = "Widget demo" + + async def on_key(self, event) -> None: + await self.dispatch_key(event) + + def action_toggle_dark(self): + self.dark = not self.dark + + def action_query_test(self): + query = self.query("Tweet") + self.log(query) + self.log(query.nodes) + self.log(query) + self.log(query.nodes) + + query.set_styles("outline: outer red;") + + query = query.exclude(".scroll-horizontal") + self.log(query) + self.log(query.nodes) + + # query = query.filter(".rubbish") + # self.log(query) + # self.log(query.first()) + + async def key_q(self): + await self.shutdown() + + def key_x(self): + self.panic(self.tree) + + def key_escape(self): + self.app.bell() + + def key_t(self): + # Pressing "t" toggles the content of the TweetBody widget, from a long "Lorem ipsum..." to a shorter one. + tweet_body = self.query("TweetBody").first() + tweet_body.short_lorem = not tweet_body.short_lorem + + def key_v(self): + self.get_child(id="content").scroll_to_widget(self.scroll_to_target) + + def key_space(self): + self.bell() + + +app = BasicApp() + +if __name__ == "__main__": + app.run() + + # from textual.geometry import Region + # from textual.color import Color + + # print(Region.intersection.cache_info()) + # print(Region.overlaps.cache_info()) + # print(Region.union.cache_info()) + # print(Region.split_vertical.cache_info()) + # print(Region.__contains__.cache_info()) + # from textual.css.scalar import Scalar + + # print(Scalar.resolve_dimension.cache_info()) + + # from rich.style import Style + # from rich.cells import cached_cell_len + + # print(Style._add.cache_info()) + + # print(cached_cell_len.cache_info()) diff --git a/sandbox/darren/just_a_box.css b/sandbox/darren/just_a_box.css index cd30ae532..49502bd64 100644 --- a/sandbox/darren/just_a_box.css +++ b/sandbox/darren/just_a_box.css @@ -2,6 +2,20 @@ Screen { background: lightcoral; } +#sidebar { + color: $text-panel; + background: $panel; + dock: left; + width: 30; + offset-x: -100%; + transition: offset 500ms in_out_cubic 2s; + layer: sidebar; +} + +#sidebar.-active { + offset-x: 0; +} + .box1 { background: orangered; height: 12; diff --git a/sandbox/darren/just_a_box.py b/sandbox/darren/just_a_box.py index b40132db9..ad10b1b75 100644 --- a/sandbox/darren/just_a_box.py +++ b/sandbox/darren/just_a_box.py @@ -20,19 +20,22 @@ class Box(Widget, can_focus=True): class JustABox(App): + def on_load(self): + self.bind("s", "toggle_class('#sidebar', '-active')", description="Sidebar") + def compose(self) -> ComposeResult: self.box = Box(classes="box1") yield self.box yield Box(classes="box2") + yield Widget(id="sidebar") def key_a(self): - # self.box.styles.display = "none" - # self.box.styles.visibility = "hidden" self.animator.animate( self.box.styles, "text_opacity", value=0.0, duration=2.0, + delay=2.0, on_complete=self.box.remove, ) diff --git a/src/textual/_animator.py b/src/textual/_animator.py index f20d5a650..2467b0efe 100644 --- a/src/textual/_animator.py +++ b/src/textual/_animator.py @@ -1,23 +1,25 @@ from __future__ import annotations -from abc import ABC, abstractmethod import asyncio import sys -from typing import Any, Callable, TypeVar - +from abc import ABC, abstractmethod from dataclasses import dataclass +from functools import partial +from typing import Any, Callable, TypeVar, TYPE_CHECKING from . import _clock from ._callback import invoke from ._easing import DEFAULT_EASING, EASING +from ._types import CallbackType from .timer import Timer -from ._types import MessageTarget, CallbackType if sys.version_info >= (3, 8): from typing import Protocol, runtime_checkable else: # pragma: no cover from typing_extensions import Protocol, runtime_checkable +if TYPE_CHECKING: + from textual.app import App EasingFunction = Callable[[float], float] @@ -31,7 +33,6 @@ class Animatable(Protocol): class Animation(ABC): - on_complete: CallbackType | None = None """Callback to run after animation completes""" @@ -64,7 +65,6 @@ class SimpleAnimation(Animation): on_complete: CallbackType | None = None def __call__(self, time: float) -> bool: - if self.duration == 0: setattr(self.obj, self.attribute, self.final_value) return True @@ -122,6 +122,7 @@ class BoundAnimator: final_value: object = ..., duration: float | None = None, speed: float | None = None, + delay: float = 0.0, easing: EasingFunction | str = DEFAULT_EASING, on_complete: CallbackType | None = None, ) -> None: @@ -133,6 +134,7 @@ class BoundAnimator: final_value=final_value, duration=duration, speed=speed, + delay=delay, easing=easing_function, on_complete=on_complete, ) @@ -141,13 +143,13 @@ class BoundAnimator: class Animator: """An object to manage updates to a given attribute over a period of time.""" - def __init__(self, target: MessageTarget, frames_per_second: int = 60) -> None: + def __init__(self, app: App, frames_per_second: int = 60) -> None: self._animations: dict[tuple[object, str], Animation] = {} - self.target = target + self.app = app self._timer = Timer( - target, + app, 1 / frames_per_second, - target, + app, name="Animator", callback=self, pause=True, @@ -179,6 +181,7 @@ class Animator: duration: float | None = None, speed: float | None = None, easing: EasingFunction | str = DEFAULT_EASING, + delay: float = 0.0, on_complete: CallbackType | None = None, ) -> None: """Animate an attribute to a new value. @@ -191,8 +194,49 @@ class Animator: duration (float | None, optional): The duration of the animation, or ``None`` to use speed. Defaults to ``None``. speed (float | None, optional): The speed of the animation. Defaults to None. easing (EasingFunction | str, optional): An easing function. Defaults to DEFAULT_EASING. + delay (float, optional): Number of seconds to delay the start of the animation by. Defaults to 0. + on_complete (CallbackType | None, optional): Callback to run after the animation completes. """ + animate_callback = partial( + self._animate, + obj, + attribute, + value, + final_value=final_value, + duration=duration, + speed=speed, + easing=easing, + on_complete=on_complete, + ) + if delay: + self.app.set_timer(delay, animate_callback) + else: + animate_callback() + def _animate( + self, + obj: object, + attribute: str, + value: Any, + *, + final_value: object = ..., + duration: float | None = None, + speed: float | None = None, + easing: EasingFunction | str = DEFAULT_EASING, + on_complete: CallbackType | None = None, + ): + """Animate an attribute to a new value. + + Args: + obj (object): The object containing the attribute. + attribute (str): The name of the attribute. + value (Any): The destination value of the attribute. + final_value (Any, optional): The final value, or ellipsis if it is the same as ``value``. Defaults to .... + duration (float | None, optional): The duration of the animation, or ``None`` to use speed. Defaults to ``None``. + speed (float | None, optional): The speed of the animation. Defaults to None. + easing (EasingFunction | str, optional): An easing function. Defaults to DEFAULT_EASING. + on_complete (CallbackType | None, optional): Callback to run after the animation completes. + """ if not hasattr(obj, attribute): raise AttributeError( f"Can't animate attribute {attribute!r} on {obj!r}; attribute does not exist" @@ -203,6 +247,7 @@ class Animator: if final_value is ...: final_value = value + start_time = self._get_time() animation_key = (id(obj), attribute) diff --git a/src/textual/css/scalar_animation.py b/src/textual/css/scalar_animation.py index aa81ec805..c584ef692 100644 --- a/src/textual/css/scalar_animation.py +++ b/src/textual/css/scalar_animation.py @@ -1,13 +1,12 @@ from __future__ import annotations -from typing import TYPE_CHECKING, Callable +from typing import TYPE_CHECKING +from .scalar import ScalarOffset +from .._animator import Animation +from .._animator import EasingFunction from .._types import CallbackType from ..geometry import Offset -from .._animator import Animation -from .scalar import ScalarOffset -from .._animator import EasingFunction - if TYPE_CHECKING: from ..widget import Widget @@ -52,7 +51,6 @@ class ScalarAnimation(Animation): self.duration = duration def __call__(self, time: float) -> bool: - factor = min(1.0, (time - self.start_time) / self.duration) eased_factor = self.easing(factor) diff --git a/src/textual/css/stylesheet.py b/src/textual/css/stylesheet.py index 849688c42..388c44501 100644 --- a/src/textual/css/stylesheet.py +++ b/src/textual/css/stylesheet.py @@ -2,6 +2,7 @@ from __future__ import annotations import os from collections import defaultdict +from functools import partial from operator import itemgetter from pathlib import Path, PurePath from typing import Iterable, NamedTuple, cast @@ -445,13 +446,14 @@ class Stylesheet: if is_animatable(key) and new_render_value != old_render_value: transition = new_styles.get_transition(key) if transition is not None: - duration, easing, _delay = transition + duration, easing, delay = transition node.app.animator.animate( node.styles.base, key, new_render_value, final_value=new_value, duration=duration, + delay=delay, easing=easing, ) continue diff --git a/src/textual/widget.py b/src/textual/widget.py index 0a0d357ac..3f0e2f2bb 100644 --- a/src/textual/widget.py +++ b/src/textual/widget.py @@ -1210,16 +1210,19 @@ class Widget(DOMNode): RenderableType: A new renderable. """ + text_justify = ( + _get_rich_justify(self.styles.text_align) + if self.styles.has_rule("text_align") + else None + ) if isinstance(renderable, str): - justify = _get_rich_justify(self.styles.text_align) - renderable = Text.from_markup(renderable, justify=justify) + renderable = Text.from_markup(renderable, justify=text_justify) rich_style = self.rich_style if isinstance(renderable, Text): renderable.stylize(rich_style) - if not renderable.justify: - justify = _get_rich_justify(self.styles.text_align) - renderable.justify = justify + if text_justify is not None and renderable.justify is None: + renderable.justify = text_justify else: renderable = Styled(renderable, rich_style) diff --git a/tests/css/test_parse.py b/tests/css/test_parse.py index 7be18b4c7..3a9e43181 100644 --- a/tests/css/test_parse.py +++ b/tests/css/test_parse.py @@ -1039,8 +1039,9 @@ class TestParseTransition: def test_various_duration_formats(self, duration, parsed_duration): easing = "in_out_cubic" transition_property = "offset" + delay = duration css = f"""#some-widget {{ - transition: {transition_property} {duration} {easing} {duration}; + transition: {transition_property} {duration} {easing} {delay}; }} """ stylesheet = Stylesheet()