TSA/chapter-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor InteractiveChip component for improved control visibility on touch devices

Browse Source 
This commit enhances the InteractiveChip component by adjusting the visibility logic for control content based on device type. Controls are now displayed on touch devices when the AlwaysShowControls parameter is true or when the chip is touched, while hover-based visibility is maintained for desktop devices. These changes improve user interaction and accessibility across different platforms, contributing to a more responsive UI.
This commit is contained in:
James Kolpack
2026-01-17 11:42:28 -05:00
parent 84b31800ad
commit 7679a458e0
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Shared/Components/InteractiveChip.razor
+15 -12
View File
@@ -19,18 +19,21 @@
@ChildContent
@if (ControlContent != null)
{
@* Always show controls on mobile/touch devices *@
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
@ControlContent
</MudHidden>
@* Show on hover for desktop devices *@
<MudHidden Breakpoint="Breakpoint.MdAndUp">
@if (_isHovered || AlwaysShowControls || _isTouched)
{
@ControlContent
}
</MudHidden>
}
@* Show on touch for mobile/touch devices (below Md) *@
<MudHidden Breakpoint="Breakpoint.MdAndUp">
@if (_isTouched || AlwaysShowControls)
{
@ControlContent
}
</MudHidden>
@* Show on hover for desktop devices (MdAndUp) *@
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
@if (_isHovered || AlwaysShowControls)
{
@ControlContent
}
</MudHidden>
}
</MudStack>
</MudChip>
</MudStack>