mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Increase click target of tabs by making underline clickable
This commit is contained in:
@@ -80,7 +80,7 @@ class TabHeadersRenderable:
|
||||
style=Style(
|
||||
color="#f0f0f0",
|
||||
bgcolor="#262626",
|
||||
meta={"@click": f"activate_tab('{tab.name}')"},
|
||||
meta={"@click": f"range_clicked('{tab.name}')"},
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ from __future__ import annotations
|
||||
|
||||
from rich.console import ConsoleOptions, Console, RenderResult
|
||||
from rich.segment import Segment
|
||||
from rich.style import StyleType
|
||||
from rich.style import StyleType, Style
|
||||
from rich.text import Text
|
||||
|
||||
|
||||
@@ -46,9 +46,11 @@ class UnderlineBar:
|
||||
start = max(start, 0)
|
||||
end = min(end, width)
|
||||
|
||||
output_bar = Text("", end="")
|
||||
|
||||
if start == end == 0 or end < 0 or start > end:
|
||||
yield Segment(bar * width, style=background_style)
|
||||
return
|
||||
output_bar.append(Text(bar * width, style=background_style, end=""))
|
||||
return output_bar
|
||||
|
||||
# Round start and end to nearest half
|
||||
start = round(start * 2) / 2
|
||||
@@ -59,23 +61,39 @@ class UnderlineBar:
|
||||
half_end = end - int(end) > 0
|
||||
|
||||
# Initial non-highlighted portion of bar
|
||||
yield Segment(bar * (int(start - 0.5)), style=background_style)
|
||||
output_bar.append(
|
||||
Text(bar * (int(start - 0.5)), style=background_style, end="")
|
||||
)
|
||||
if not half_start and start > 0:
|
||||
yield Segment(half_bar_right, style=background_style)
|
||||
output_bar.append(Text(half_bar_right, style=background_style, end=""))
|
||||
|
||||
# The highlighted portion
|
||||
bar_width = int(end) - int(start)
|
||||
if half_start:
|
||||
yield Segment(half_bar_left + bar * (bar_width - 1), style=highlight_style)
|
||||
output_bar.append(
|
||||
Text(
|
||||
half_bar_left + bar * (bar_width - 1), style=highlight_style, end=""
|
||||
)
|
||||
)
|
||||
else:
|
||||
yield Segment(bar * bar_width, style=highlight_style)
|
||||
output_bar.append(Text(bar * bar_width, style=highlight_style, end=""))
|
||||
if half_end:
|
||||
yield Segment(half_bar_right, style=highlight_style)
|
||||
output_bar.append(Text(half_bar_right, style=highlight_style, end=""))
|
||||
|
||||
# The non-highlighted tail
|
||||
if not half_end and end - width != 0:
|
||||
yield Segment(half_bar_left, style=background_style)
|
||||
yield Segment(bar * (int(width) - int(end) - 1), style=background_style)
|
||||
output_bar.append(Text(half_bar_left, style=background_style, end=""))
|
||||
output_bar.append(
|
||||
Text(bar * (int(width) - int(end) - 1), style=background_style, end="")
|
||||
)
|
||||
|
||||
# Fire actions when certain ranges are clicked (e.g. for tabs)
|
||||
for range_name, (start, end) in self.clickable_ranges.items():
|
||||
output_bar.apply_meta(
|
||||
{"@click": f"range_clicked('{range_name}')"}, start, end
|
||||
)
|
||||
|
||||
yield output_bar
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
||||
@@ -140,7 +140,7 @@ class TabsRenderable:
|
||||
f"{pad}{tab.label}{pad}",
|
||||
end="",
|
||||
style=inactive_tab_style
|
||||
+ Style.from_meta({"@click": f"activate_tab('{tab.name}')"}),
|
||||
+ Style.from_meta({"@click": f"range_clicked('{tab.name}')"}),
|
||||
)
|
||||
dimmed_tab_content = Opacity(
|
||||
tab_content, opacity=self.inactive_text_opacity
|
||||
@@ -189,7 +189,7 @@ class Tabs(Widget):
|
||||
self._used = False
|
||||
self.tab_padding = tab_padding
|
||||
|
||||
def action_activate_tab(self, target_tab_name: str) -> None:
|
||||
def action_range_clicked(self, target_tab_name: str) -> None:
|
||||
self.active_tab_name = target_tab_name
|
||||
|
||||
def watch_active_tab_name(self, tab_name: str) -> None:
|
||||
|
||||
Reference in New Issue
Block a user