Increase click target of tabs by making underline clickable

This commit is contained in:
Darren Burns
2022-02-17 13:00:12 +00:00
parent 4e61770a7c
commit d1687374b0
3 changed files with 31 additions and 13 deletions

View File

@@ -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}')"},
),
)

View File

@@ -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__":

View File

@@ -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: