fixed underline style stretching on buttons

2025-10-17 02:38:12 +03:00 · 2022-07-09 15:03:36 +01:00
parent f751426ef6
commit f47629623c
7 changed files with 53 additions and 109 deletions
--- a/poetry.lock
+++ b/poetry.lock
@@ -52,7 +52,7 @@ python-versions = ">=3.5"

 [[package]]
 name = "atomicwrites"
-version = "1.4.0"
+version = "1.4.1"
 description = "Atomic file writes."
 category = "dev"
 optional = false
@@ -208,7 +208,7 @@ dev = ["twine", "markdown", "flake8", "wheel"]

 [[package]]
 name = "griffe"
-version = "0.21.0"
+version = "0.22.0"
 description = "Signatures for entire Python programs. Extract the structure, the frame, the skeleton of your project, to generate API documentation or find breaking changes in your API."
 category = "dev"
 optional = false
@@ -345,7 +345,7 @@ mkdocs = ">=1.1"

 [[package]]
 name = "mkdocs-material"
-version = "8.3.8"
+version = "8.3.9"
 description = "Documentation that simply works"
 category = "dev"
 optional = false
@@ -658,16 +658,21 @@ version = "12.4.4"
 description = "Render rich text, tables, progress bars, syntax highlighting, markdown and more to the terminal"
 category = "main"
 optional = false
-python-versions = ">=3.6.3,<4.0.0"
+python-versions = "^3.6.3"
+develop = true

 [package.dependencies]
-commonmark = ">=0.9.0,<0.10.0"
-pygments = ">=2.6.0,<3.0.0"
-typing-extensions = {version = ">=4.0.0,<5.0", markers = "python_version < \"3.9\""}
+commonmark = "^0.9.0"
+pygments = "^2.6.0"
+typing-extensions = {version = ">=4.0.0, <5.0", markers = "python_version < \"3.9\""}

 [package.extras]
 jupyter = ["ipywidgets (>=7.5.1,<8.0.0)"]

+[package.source]
+type = "directory"
+url = "../rich"
+
 [[package]]
 name = "six"
 version = "1.16.0"
@@ -713,7 +718,7 @@ python-versions = ">=3.6"

 [[package]]
 name = "typing-extensions"
-version = "4.2.0"
+version = "4.3.0"
 description = "Backported and Experimental Type Hints for Python 3.7+"
 category = "main"
 optional = false
@@ -721,7 +726,7 @@ python-versions = ">=3.7"

 [[package]]
 name = "virtualenv"
-version = "20.15.0"
+version = "20.15.1"
 description = "Virtual Python Environment builder"
 category = "dev"
 optional = false
@@ -780,7 +785,7 @@ dev = ["aiohttp", "click", "msgpack"]
 [metadata]
 lock-version = "1.1"
 python-versions = "^3.7"
-content-hash = "8ce8d66466dad1b984673595ebd0cc7bc0d28c7a672269e9b5620c242d87d9ad"
+content-hash = "08c432accbe56db11ca9b2d69c2b4e15967e1a0142d4508f245715cae6f3d239"

 [metadata.files]
 aiohttp = [
@@ -869,10 +874,7 @@ asynctest = [
    {file = "asynctest-0.13.0-py3-none-any.whl", hash = "sha256:5da6118a7e6d6b54d83a8f7197769d046922a44d2a99c21382f0a6e4fadae676"},
    {file = "asynctest-0.13.0.tar.gz", hash = "sha256:c27862842d15d83e6a34eb0b2866c323880eb3a75e4485b079ea11748fd77fac"},
 ]
-atomicwrites = [
-    {file = "atomicwrites-1.4.0-py2.py3-none-any.whl", hash = "sha256:6d1784dea7c0c8d4a5172b6c620f40b6e4cbfdf96d783691f2e1302a7b88e197"},
-    {file = "atomicwrites-1.4.0.tar.gz", hash = "sha256:ae70396ad1a434f9c7046fd2dd196fc04b12f9e91ffb859164193be8b6168a7a"},
-]
+atomicwrites = []
 attrs = [
    {file = "attrs-21.4.0-py2.py3-none-any.whl", hash = "sha256:2d27e3784d7a565d36ab851fe94887c5eccd6a463168875832a1be79c82828b4"},
    {file = "attrs-21.4.0.tar.gz", hash = "sha256:626ba8234211db98e869df76230a137c4c40a12d72445c45d5f5b716f076e2fd"},
@@ -1042,10 +1044,7 @@ ghp-import = [
    {file = "ghp-import-2.1.0.tar.gz", hash = "sha256:9c535c4c61193c2df8871222567d7fd7e5014d835f97dc7b7439069e2413d343"},
    {file = "ghp_import-2.1.0-py3-none-any.whl", hash = "sha256:8337dd7b50877f163d4c0289bc1f1c7f127550241988d568c1db512c4324a619"},
 ]
-griffe = [
-    {file = "griffe-0.21.0-py3-none-any.whl", hash = "sha256:e9fb5eeb7c721e1d84804452bdc742bd57b120b13aba663157668ae2d217088a"},
-    {file = "griffe-0.21.0.tar.gz", hash = "sha256:61ab3bc02b09afeb489f1aef44c646a09f1837d9cdf15943ac6021903a4d3984"},
-]
+griffe = []
 identify = [
    {file = "identify-2.5.1-py2.py3-none-any.whl", hash = "sha256:0dca2ea3e4381c435ef9c33ba100a78a9b40c0bab11189c7cf121f75815efeaa"},
    {file = "identify-2.5.1.tar.gz", hash = "sha256:3d11b16f3fe19f52039fb7e39c9c884b21cb1b586988114fbe42671f03de3e82"},
@@ -1124,10 +1123,7 @@ mkdocs-autorefs = [
    {file = "mkdocs-autorefs-0.4.1.tar.gz", hash = "sha256:70748a7bd025f9ecd6d6feeba8ba63f8e891a1af55f48e366d6d6e78493aba84"},
    {file = "mkdocs_autorefs-0.4.1-py3-none-any.whl", hash = "sha256:a2248a9501b29dc0cc8ba4c09f4f47ff121945f6ce33d760f145d6f89d313f5b"},
 ]
-mkdocs-material = [
-    {file = "mkdocs-material-8.3.8.tar.gz", hash = "sha256:b9cd305c3c29ef758931dae06e4aea0ca9f8bcc8ac6b2d45f10f932a015d6b83"},
-    {file = "mkdocs_material-8.3.8-py2.py3-none-any.whl", hash = "sha256:949c75fa934d4b9ecc7b519964e58f0c9fc29f2ceb04736c85809cdbc403dfb5"},
-]
+mkdocs-material = []
 mkdocs-material-extensions = [
    {file = "mkdocs-material-extensions-1.0.3.tar.gz", hash = "sha256:bfd24dfdef7b41c312ede42648f9eb83476ea168ec163b613f9abd12bbfddba2"},
    {file = "mkdocs_material_extensions-1.0.3-py3-none-any.whl", hash = "sha256:a82b70e533ce060b2a5d9eb2bc2e1be201cf61f901f93704b4acf6e3d5983a44"},
@@ -1384,10 +1380,7 @@ pyyaml-env-tag = [
    {file = "pyyaml_env_tag-0.1-py3-none-any.whl", hash = "sha256:af31106dec8a4d68c60207c1886031cbf839b68aa7abccdb19868200532c2069"},
    {file = "pyyaml_env_tag-0.1.tar.gz", hash = "sha256:70092675bda14fdec33b31ba77e7543de9ddc88f2e5b99160396572d11525bdb"},
 ]
-rich = [
-    {file = "rich-12.4.4-py3-none-any.whl", hash = "sha256:d2bbd99c320a2532ac71ff6a3164867884357da3e3301f0240090c5d2fdac7ec"},
-    {file = "rich-12.4.4.tar.gz", hash = "sha256:4c586de507202505346f3e32d1363eb9ed6932f0c2f63184dea88983ff4971e2"},
-]
+rich = []
 six = [
    {file = "six-1.16.0-py2.py3-none-any.whl", hash = "sha256:8abb2f1d86890a2dfb989f9a77cfcfd3e47c2a354b01111771326f8aa26e0254"},
    {file = "six-1.16.0.tar.gz", hash = "sha256:1e61c37477a1626458e36f7b1d82aa5c9b094fa4802892072e49de9c60c4c926"},
@@ -1468,14 +1461,8 @@ typed-ast = [
    {file = "typed_ast-1.5.4-cp39-cp39-win_amd64.whl", hash = "sha256:0fdbcf2fef0ca421a3f5912555804296f0b0960f0418c440f5d6d3abb549f3e1"},
    {file = "typed_ast-1.5.4.tar.gz", hash = "sha256:39e21ceb7388e4bb37f4c679d72707ed46c2fbf2a5609b8b8ebc4b067d977df2"},
 ]
-typing-extensions = [
-    {file = "typing_extensions-4.2.0-py3-none-any.whl", hash = "sha256:6657594ee297170d19f67d55c05852a874e7eb634f4f753dbd667855e07c1708"},
-    {file = "typing_extensions-4.2.0.tar.gz", hash = "sha256:f1c24655a0da0d1b67f07e17a5e6b2a105894e6824b92096378bb3668ef02376"},
-]
-virtualenv = [
-    {file = "virtualenv-20.15.0-py2.py3-none-any.whl", hash = "sha256:804cce4de5b8a322f099897e308eecc8f6e2951f1a8e7e2b3598dff865f01336"},
-    {file = "virtualenv-20.15.0.tar.gz", hash = "sha256:4c44b1d77ca81f8368e2d7414f9b20c428ad16b343ac6d226206c5b84e2b4fcc"},
-]
+typing-extensions = []
+virtualenv = []
 watchdog = [
    {file = "watchdog-2.1.9-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:a735a990a1095f75ca4f36ea2ef2752c99e6ee997c46b0de507ba40a09bf7330"},
    {file = "watchdog-2.1.9-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:6b17d302850c8d412784d9246cfe8d7e3af6bcd45f958abb2d08a6f8bedf695d"},
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -22,8 +22,8 @@ textual = "textual.cli.cli:run"

 [tool.poetry.dependencies]
 python = "^3.7"
-rich = "^12.4.3"
-#rich = {path="../rich", develop=true}
+#rich = "^12.4.3"
+rich = {path="../rich", develop=true}
 importlib-metadata = "^4.11.3"
 typing-extensions = { version = "^4.0.0", python = "<3.8" }

--- a/reference/box.monopic
+++ b/reference/box.monopic
--- a/sandbox/buttons.css
+++ b/sandbox/buttons.css
@@ -1,5 +1,4 @@
 Button {
-    padding-left: 1;
-    padding-right: 1;
-    width:30;
+    
+    width:100%;
 }
--- a/src/textual/_segment_tools.py
+++ b/src/textual/_segment_tools.py
@@ -10,6 +10,7 @@ from rich.segment import Segment
 from rich.style import Style

 from ._cells import cell_len
+from ._types import Lines


 def line_crop(
--- a/src/textual/widget.py
+++ b/src/textual/widget.py
@@ -16,9 +16,10 @@ import rich.repr
 from rich.align import Align
 from rich.console import Console, RenderableType
 from rich.measure import Measurement
-from rich.padding import Padding
+
 from rich.segment import Segment
 from rich.style import Style
+from rich.styled import Styled

 from . import errors, events, messages
 from ._animator import BoundAnimator
@@ -878,53 +879,6 @@ class Widget(DOMNode):
    def watch(self, attribute_name, callback: Callable[[Any], Awaitable[None]]) -> None:
        watch(self, attribute_name, callback)

-    def _style_renderable(self, renderable: RenderableType) -> RenderableType:
-        """Applies CSS styles to a renderable by wrapping it in another renderable.
-
-        Args:
-            renderable (RenderableType): Renderable to apply styles to.
-
-        Returns:
-            RenderableType: An updated renderable.
-        """
-        (base_background, base_color), (background, color) = self.colors
-        styles = self.styles
-
-        content_align = (styles.content_align_horizontal, styles.content_align_vertical)
-        if content_align != ("left", "top"):
-            horizontal, vertical = content_align
-            renderable = Align(renderable, horizontal, vertical=vertical)
-
-        renderable = Padding(
-            renderable,
-            styles.padding,
-            style=Style.from_color(color.rich_color, background.rich_color),
-        )
-
-        if styles.border:
-            renderable = Border(
-                renderable,
-                styles.border,
-                inner_color=background,
-                outer_color=base_background,
-            )
-
-        if styles.outline:
-            renderable = Border(
-                renderable,
-                styles.outline,
-                inner_color=styles.background,
-                outer_color=base_background,
-                outline=True,
-            )
-
-        if styles.tint.a != 0:
-            renderable = Tint(renderable, styles.tint)
-        if styles.opacity != 1.0:
-            renderable = Opacity(renderable, opacity=styles.opacity)
-
-        return renderable
-
    def render_styled(self) -> RenderableType:
        """Applies style attributes to the default renderable.

@@ -934,6 +888,9 @@ class Widget(DOMNode):

        renderable = self.render()
        styles = self.styles
+        rich_style = self.rich_style
+        if rich_style:
+            renderable = Styled(renderable, rich_style)
        content_align = (styles.content_align_horizontal, styles.content_align_vertical)
        if content_align != ("left", "top"):
            horizontal, vertical = content_align
@@ -980,7 +937,7 @@ class Widget(DOMNode):
        options = self.console.options.update_dimensions(width, height).update(
            highlight=False
        )
-        lines = self.console.render_lines(renderable, options, style=self.rich_style)
+        lines = self.console.render_lines(renderable, options)
        self._render_cache = RenderCache(self.size, lines)
        self._dirty_regions.clear()

--- a/src/textual/widgets/_button.py
+++ b/src/textual/widgets/_button.py
@@ -42,22 +42,26 @@ class Button(Widget, can_focus=True):
        border-bottom: tall $primary-darken-3;

        content-align: center middle;
-        margin: 1 0;
-        align: center middle;
+        
        text-style: bold;
+      
+    }

-        transition: background 0.1;/* for "active" effect */
+    Button:focus {
+        text-style: bold underline;
    }

    Button:hover {
+        border-top: tall $primary-lighten-1;
        background: $primary-darken-2;
        color: $text-primary-darken-2;       
    }

    Button.-active {
-        background: $primary-lighten-1;
+        background: $primary;
        border-bottom: tall $primary-lighten-2;
-        border-top: tall $primary-darken-3;
+        border-top: tall $primary-darken-2;
+        opacity:0.8;
    }

    .-dark-mode Button {
@@ -72,9 +76,9 @@ class Button(Widget, can_focus=True):
    }

    .-dark-mode Button.-active {
-        background: $primary-lighten-3;
+        background: $primary;
        border-bottom: tall $primary-lighten-2;
-        border-top: tall $primary-darken-3;
+        border-top: tall $primary-darken-2;
    }

    /* Success variant */
@@ -93,9 +97,9 @@ class Button(Widget, can_focus=True):
    }

    Button.-success.-active {
-        background: $success-lighten-1;
+        background: $success;
        border-bottom: tall $success-lighten-2;
-        border-top: tall $success-darken-3;
+        border-top: tall $success-darken-2;
    }

    .-dark-mode Button.-success {
@@ -114,9 +118,9 @@ class Button(Widget, can_focus=True):
    }

    .-dark-mode Button.-success.-active {
-        background: $success-lighten-1;
+        background: $success;
        border-bottom: tall $success-lighten-2;
-        border-top: tall $success-darken-3;
+        border-top: tall $success-darken-2;
    }

    /* Warning variant */
@@ -134,9 +138,9 @@ class Button(Widget, can_focus=True):
    }

    Button.-warning.-active {
-        background: $warning-lighten-2;
+        background: $warning;
        border-bottom: tall $warning-lighten-2;
-        border-top: tall $warning-darken-3;
+        border-top: tall $warning-darken-2;
    }

    .-dark-mode Button.-warning {
@@ -151,9 +155,7 @@ class Button(Widget, can_focus=True):
        
    }

-    .-dark-mode Button.-warning.-active {
-        background: $warning-lighten-1;
-    }
+   

    /* Error variant */
    Button.-error {
@@ -171,9 +173,9 @@ class Button(Widget, can_focus=True):
    }

    Button.-error.-active {
-        background: $error-lighten-2;
+        background: $error;
        border-bottom: tall $error-lighten-2;
-        border-top: tall $error-darken-3;
+        border-top: tall $error-darken-2;
    }

    .-dark-mode Button.-error {
@@ -189,9 +191,7 @@ class Button(Widget, can_focus=True):
       
    }

-    .-dark-mode Button.-error.-active {
-        background: $error-lighten-1;
-    }
+   

    App.-show-focus Button:focus {
        tint: $accent 20%;