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

Enhance UI with MudTooltip for action buttons across various components

Browse Source 
This commit adds MudTooltip components to action buttons in the Calendar, Events, Students, and Teams features, improving user experience by providing contextual information on button actions. The changes ensure that users receive helpful hints when hovering over buttons, enhancing accessibility and usability throughout the application.
This commit is contained in:
James Kolpack
2026-01-17 10:41:46 -05:00
parent e6eb35ee67
commit b4c11cd0a6
12 changed files with 128 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebApp/Components/Features/Calendar/Index.razor
+6 -2
View File
@@ -12,9 +12,13 @@
<PageHeader Title="Event Calendar" Description="View competition schedules and event occurrences" Icon="@AppIcons.EventCalendar"> <PageHeader Title="Event Calendar" Description="View competition schedules and event occurrences" Icon="@AppIcons.EventCalendar">
<ActionButtons> <ActionButtons>
<MudButton StartIcon="@Icons.Material.Filled.ImportExport" Href="calendar/event-occurrences/import" Variant="Variant.Filled" Color="Color.Primary">Import</MudButton> <MudTooltip Text="Import">
<MudButton StartIcon="@Icons.Material.Filled.ImportExport" Href="calendar/event-occurrences/import" Variant="Variant.Filled" Color="Color.Primary">Import</MudButton>
</MudTooltip>
<AuthorizeView Roles="@AuthRoles.Administrator"> <AuthorizeView Roles="@AuthRoles.Administrator">
<MudButton StartIcon="@Icons.Material.Filled.AdminPanelSettings" Href="calendar/admin" Variant="Variant.Outlined" Color="Color.Default">Admin</MudButton> <MudTooltip Text="Admin">
<MudButton StartIcon="@Icons.Material.Filled.AdminPanelSettings" Href="calendar/admin" Variant="Variant.Outlined" Color="Color.Default">Admin</MudButton>
</MudTooltip>
</AuthorizeView> </AuthorizeView>
<PageNoteButton PageIdentifier="Event Calendar" /> <PageNoteButton PageIdentifier="Event Calendar" />
</ActionButtons> </ActionButtons>
WebApp/Components/Features/Events/Details.razor
+8 -4
View File
@@ -19,10 +19,14 @@
BackButtonUrl="@(ReturnUrl ?? "/events")"> BackButtonUrl="@(ReturnUrl ?? "/events")">
<ActionButtons> <ActionButtons>
<div class="no-print"> <div class="no-print">
<MudButton StartIcon="@Icons.Material.Filled.Print" <MudTooltip Text="Print">
OnClick="PrintPage" <MudButton StartIcon="@Icons.Material.Filled.Print"
Variant="Variant.Outlined">Print</MudButton> OnClick="PrintPage"
<MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/events/edit?id={eventdefinition.Id}&returnUrl={ReturnUrl ?? "/events"}")" Variant="Variant.Outlined">Edit</MudButton> Variant="Variant.Outlined">Print</MudButton>
</MudTooltip>
<MudTooltip Text="Edit">
<MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/events/edit?id={eventdefinition.Id}&returnUrl={ReturnUrl ?? "/events"}")" Variant="Variant.Outlined">Edit</MudButton>
</MudTooltip>
</div> </div>
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Features/Events/Index.razor
+9 -3
View File
@@ -10,9 +10,15 @@
<PageHeader Title="Events"> <PageHeader Title="Events">
<ActionButtons> <ActionButtons>
<MudButton StartIcon="@Icons.Material.Filled.Create" Href="events/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton> <MudTooltip Text="Create New">
<MudButton StartIcon="@Icons.Material.Filled.Print" Href="events/printout" Variant="Variant.Outlined">Printable Descriptions</MudButton> <MudButton StartIcon="@Icons.Material.Filled.Create" Href="events/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.AccountTree" Href="events/career-mapping" Variant="Variant.Outlined">Career Mapping</MudButton> </MudTooltip>
<MudTooltip Text="Printable Descriptions">
<MudButton StartIcon="@Icons.Material.Filled.Print" Href="events/printout" Variant="Variant.Outlined">Printable Descriptions</MudButton>
</MudTooltip>
<MudTooltip Text="Career Mapping">
<MudButton StartIcon="@Icons.Material.Filled.AccountTree" Href="events/career-mapping" Variant="Variant.Outlined">Career Mapping</MudButton>
</MudTooltip>
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Features/Students/Details.razor
+8 -4
View File
@@ -18,10 +18,14 @@
BackButtonUrl="@(ReturnUrl ?? "/students")"> BackButtonUrl="@(ReturnUrl ?? "/students")">
<ActionButtons> <ActionButtons>
<div class="no-print"> <div class="no-print">
<MudButton StartIcon="@Icons.Material.Filled.Print" <MudTooltip Text="Print">
OnClick="PrintPage" <MudButton StartIcon="@Icons.Material.Filled.Print"
Variant="Variant.Outlined">Print</MudButton> OnClick="PrintPage"
<MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}&returnUrl={ReturnUrl ?? "/students"}")" Variant="Variant.Outlined">Edit</MudButton> Variant="Variant.Outlined">Print</MudButton>
</MudTooltip>
<MudTooltip Text="Edit">
<MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}&returnUrl={ReturnUrl ?? "/students"}")" Variant="Variant.Outlined">Edit</MudButton>
</MudTooltip>
</div> </div>
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Features/Students/EventRankingEdit.razor
+8 -6
View File
@@ -22,12 +22,14 @@ else
ShowBackButton="true" ShowBackButton="true"
BackButtonUrl="/students/event-ranking"> BackButtonUrl="/students/event-ranking">
<ActionButtons> <ActionButtons>
<MudButton StartIcon="@Icons.Material.Filled.Save" <MudTooltip Text="Save Rankings">
OnClick="Save" <MudButton StartIcon="@Icons.Material.Filled.Save"
Color="Color.Primary" OnClick="Save"
Variant="Variant.Filled"> Color="Color.Primary"
Save Rankings Variant="Variant.Filled">
</MudButton> Save Rankings
</MudButton>
</MudTooltip>
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Features/Students/Index.razor
+9 -3
View File
@@ -10,9 +10,15 @@
<PageHeader Title="Students"> <PageHeader Title="Students">
<ActionButtons> <ActionButtons>
<MudButton StartIcon="@Icons.Material.Filled.Create" Href="students/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton> <MudTooltip Text="Create New">
<MudButton StartIcon="@AppIcons.EventRank" Href="students/event-ranking" Variant="Variant.Outlined">Event Rankings</MudButton> <MudButton StartIcon="@Icons.Material.Filled.Create" Href="students/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
<MudButton StartIcon="@AppIcons.Registration" Href="students/teams" Variant="Variant.Outlined">Registration</MudButton> </MudTooltip>
<MudTooltip Text="Event Rankings">
<MudButton StartIcon="@AppIcons.EventRank" Href="students/event-ranking" Variant="Variant.Outlined">Event Rankings</MudButton>
</MudTooltip>
<MudTooltip Text="Registration">
<MudButton StartIcon="@AppIcons.Registration" Href="students/teams" Variant="Variant.Outlined">Registration</MudButton>
</MudTooltip>
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Features/Students/Registration.razor
+8 -6
View File
@@ -11,12 +11,14 @@
<PageHeader Title="Registration" Icon="@AppIcons.Registration"> <PageHeader Title="Registration" Icon="@AppIcons.Registration">
<ActionButtons> <ActionButtons>
<MudButton StartIcon="@Icons.Material.Filled.FilterAlt" <MudTooltip Text="@(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")">
Variant="@(_showRegionalOnly ? Variant.Filled : Variant.Outlined)" <MudButton StartIcon="@Icons.Material.Filled.FilterAlt"
Color="Color.Primary" Variant="@(_showRegionalOnly ? Variant.Filled : Variant.Outlined)"
OnClick="ToggleRegionalFilter"> Color="Color.Primary"
@(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only") OnClick="ToggleRegionalFilter">
</MudButton> @(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")
</MudButton>
</MudTooltip>
<PageNoteButton PageIdentifier="Registration" /> <PageNoteButton PageIdentifier="Registration" />
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Features/Teams/Assignment.razor
+5 -3
View File
@@ -15,9 +15,11 @@
Title="Assignment" Title="Assignment"
Description="Optimized team assignments based on the student event rankings"> Description="Optimized team assignments based on the student event rankings">
<ActionButtons> <ActionButtons>
<MudButton StartIcon="@Icons.Material.Filled.Edit" Href="students/event-ranking" Variant="Variant.Outlined"> <MudTooltip Text="Edit Student Event Rankings">
Edit Student Event Rankings <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="students/event-ranking" Variant="Variant.Outlined">
</MudButton> Edit Student Event Rankings
</MudButton>
</MudTooltip>
<PageNoteButton PageIdentifier="Team Assignment" /> <PageNoteButton PageIdentifier="Team Assignment" />
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Features/Teams/Details.razor
+10 -6
View File
@@ -19,12 +19,16 @@
BackButtonUrl="@(ReturnUrl ?? "/teams")"> BackButtonUrl="@(ReturnUrl ?? "/teams")">
<ActionButtons> <ActionButtons>
<div class="no-print"> <div class="no-print">
<MudButton StartIcon="@Icons.Material.Filled.Print" <MudTooltip Text="Print">
OnClick="PrintPage" <MudButton StartIcon="@Icons.Material.Filled.Print"
Variant="Variant.Outlined">Print</MudButton> OnClick="PrintPage"
<MudButton StartIcon="@Icons.Material.Filled.Edit" Variant="Variant.Outlined">Print</MudButton>
Href="@($"/teams/edit?id={Team.Id}&returnUrl={ReturnUrl ?? "/teams"}")" </MudTooltip>
Variant="Variant.Outlined">Edit</MudButton> <MudTooltip Text="Edit">
<MudButton StartIcon="@Icons.Material.Filled.Edit"
Href="@($"/teams/edit?id={Team.Id}&returnUrl={ReturnUrl ?? "/teams"}")"
Variant="Variant.Outlined">Edit</MudButton>
</MudTooltip>
</div> </div>
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Features/Teams/Index.razor
+17 -9
View File
@@ -10,15 +10,23 @@
<PageHeader Title="Teams"> <PageHeader Title="Teams">
<ActionButtons> <ActionButtons>
<MudButton StartIcon="@Icons.Material.Filled.Create" Href="teams/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton> <MudTooltip Text="Create New">
<MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/printout" Variant="Variant.Outlined">Printout</MudButton> <MudButton StartIcon="@Icons.Material.Filled.Create" Href="teams/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/handout" Variant="Variant.Outlined">Handout</MudButton> </MudTooltip>
<MudButton StartIcon="@Icons.Material.Filled.FilterAlt" <MudTooltip Text="Printout">
Variant="@(_showRegionalOnly ? Variant.Filled : Variant.Outlined)" <MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/printout" Variant="Variant.Outlined">Printout</MudButton>
Color="Color.Primary" </MudTooltip>
OnClick="ToggleRegionalFilter"> <MudTooltip Text="Handout">
@(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only") <MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/handout" Variant="Variant.Outlined">Handout</MudButton>
</MudButton> </MudTooltip>
<MudTooltip Text="@(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")">
<MudButton StartIcon="@Icons.Material.Filled.FilterAlt"
Variant="@(_showRegionalOnly ? Variant.Filled : Variant.Outlined)"
Color="Color.Primary"
OnClick="ToggleRegionalFilter">
@(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")
</MudButton>
</MudTooltip>
<PageNoteButton PageIdentifier="Teams" /> <PageNoteButton PageIdentifier="Teams" />
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/Components/Pages/Notes.razor
+16 -12
View File
@@ -11,18 +11,22 @@
<PageHeader Title="Notes"> <PageHeader Title="Notes">
<ActionButtons> <ActionButtons>
<MudButton StartIcon="@(_showRemoved ? Icons.Material.Filled.List : Icons.Material.Filled.DeleteOutline)" <MudTooltip Text="@(_showRemoved ? "Show Active" : "Show Removed")">
OnClick="ToggleRemovedFilter" <MudButton StartIcon="@(_showRemoved ? Icons.Material.Filled.List : Icons.Material.Filled.DeleteOutline)"
Variant="Variant.Outlined" OnClick="ToggleRemovedFilter"
Color="@(_showRemoved ? Color.Warning : Color.Default)"> Variant="Variant.Outlined"
@(_showRemoved ? "Show Active" : "Show Removed") Color="@(_showRemoved ? Color.Warning : Color.Default)">
</MudButton> @(_showRemoved ? "Show Active" : "Show Removed")
<MudButton StartIcon="@Icons.Material.Filled.Add" </MudButton>
OnClick="OpenCreateDialog" </MudTooltip>
Variant="Variant.Filled" <MudTooltip Text="Create Note">
Color="Color.Primary"> <MudButton StartIcon="@Icons.Material.Filled.Add"
Create Note OnClick="OpenCreateDialog"
</MudButton> Variant="Variant.Filled"
Color="Color.Primary">
Create Note
</MudButton>
</MudTooltip>
</ActionButtons> </ActionButtons>
</PageHeader> </PageHeader>
WebApp/wwwroot/app.css
+24 -1
View File
@@ -61,8 +61,31 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.page-header-actions { .page-header-actions {
width: 100%; justify-content: flex-end;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-left: auto;
}
/* Hide button text on small screens by setting font-size to 0 */
.page-header-actions .mud-button {
min-width: auto;
padding-left: 12px;
padding-right: 12px;
font-size: 0;
}
/* Restore icon size - MudBlazor uses material-icons font */
.page-header-actions .mud-button .mud-icon-root {
font-size: 1.5rem !important;
display: inline-flex !important;
}
.page-header-actions .mud-button .mud-icon-root .mud-icon,
.page-header-actions .mud-button .mud-icon-root .material-icons {
font-size: 1.5rem !important;
width: 1.5rem !important;
height: 1.5rem !important;
line-height: 1.5rem !important;
} }
.page-header > div > div:first-of-type { .page-header > div > div:first-of-type {