Skip to content

Commit 0ec0f70

Browse files
ziaghamziagham
committed
Modernize UI: nav, FABs, designer, plugin cards
- Redesign sidebar navigation with grouped sections and improved icons - Replace MudButton actions with MudFab for modern, consistent toolbars - Overhaul workflow designer: floating plugin palette, new app bar, task highlighting, and gradient backgrounds - Refactor plugin list to card-based grid with search, loading, and empty states - Improve UI consistency: icons, colors, spacing, rounded corners, and hover effects - Update WorkflowService sample data for clarity - Show operation name in workflow node templates for better context #92
1 parent f6a9f52 commit 0ec0f70

12 files changed

Lines changed: 333 additions & 178 deletions

File tree

‎src/Components/Layout/HeaderTitle.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
@if (!string.IsNullOrWhiteSpace(Description))
2323
{
24-
<MudText Typo="Typo.body2" Class="gray-subtitle">
24+
<MudText Typo="Typo.body2" Style="@($"color:{Colors.Gray.Default};")">
2525
@Description
2626
</MudText>
2727
}

‎src/Components/Layout/NavMenu.razor‎

Lines changed: 61 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,66 @@
1-
<MudNavMenu Dense="true">
1+
<MudNavMenu Class="px-2 pt-2">
2+
3+
<!-- Main -->
24
<MudNavLink Href="/"
35
Match="NavLinkMatch.All"
4-
Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
5-
<MudDivider />
6-
<MudNavLink Href="/plugins"
7-
Match="NavLinkMatch.Prefix"
8-
Icon="@Icons.Material.Filled.GridView">Plugins</MudNavLink>
9-
<MudDivider />
10-
<MudNavLink Href="/workflows"
11-
Match="NavLinkMatch.Prefix"
12-
Icon="@Icons.Material.Filled.ListAlt">Workflows</MudNavLink>
13-
<MudDivider />
14-
<MudNavLink Href="/logs"
15-
Match="NavLinkMatch.Prefix"
16-
Icon="@Icons.Material.Filled.ReceiptLong">Logs</MudNavLink>
17-
<MudDivider />
18-
<MudNavLink Href="/health"
19-
Match="NavLinkMatch.Prefix"
20-
Icon="@Icons.Material.Filled.MonitorHeart">Health</MudNavLink>
21-
<MudDivider />
22-
<MudNavLink Href="/version"
23-
Match="NavLinkMatch.Prefix"
24-
Icon="@Icons.Material.Filled.Info">Version</MudNavLink>
6+
Icon="@Icons.Material.Filled.Home"
7+
IconColor="Color.Primary"
8+
Class="nav-item">
9+
Home
10+
</MudNavLink>
11+
12+
<MudDivider Class="my-1" />
13+
14+
<!-- Core -->
15+
<MudNavGroup Title="Core"
16+
Icon="@Icons.Material.Filled.Dashboard"
17+
Expanded="true">
18+
19+
<MudNavLink Href="/plugins"
20+
Match="NavLinkMatch.Prefix"
21+
Icon="@Icons.Material.Filled.Extension"
22+
Class="nav-item">
23+
Plugins
24+
</MudNavLink>
25+
26+
<MudNavLink Href="/workflows"
27+
Match="NavLinkMatch.Prefix"
28+
Icon="@Icons.Material.Filled.AccountTree"
29+
Class="nav-item">
30+
Workflows
31+
</MudNavLink>
32+
33+
<MudNavLink Href="/logs"
34+
Match="NavLinkMatch.Prefix"
35+
Icon="@Icons.Material.Filled.ReceiptLong"
36+
Class="nav-item">
37+
Logs
38+
</MudNavLink>
39+
40+
</MudNavGroup>
41+
42+
<MudDivider Class="my-1" />
43+
44+
<!-- System -->
45+
<MudNavGroup Title="System"
46+
Icon="@Icons.Material.Filled.Settings">
47+
48+
<MudNavLink Href="/health"
49+
Match="NavLinkMatch.Prefix"
50+
Icon="@Icons.Material.Filled.MonitorHeart"
51+
Class="nav-item">
52+
Health
53+
</MudNavLink>
54+
55+
<MudNavLink Href="/version"
56+
Match="NavLinkMatch.Prefix"
57+
Icon="@Icons.Material.Filled.Info"
58+
Class="nav-item">
59+
Version
60+
</MudNavLink>
61+
62+
</MudNavGroup>
63+
2564
</MudNavMenu>
2665

2766
@code {

‎src/Components/Pages/AllLogs/Logs.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,11 @@
6363
</MudItem>
6464

6565
<MudItem xs="12" sm="6" md="6">
66-
<MudButton Variant="Variant.Filled"
67-
OnClick="ApplyFilters"
68-
Size="Size.Small"
69-
StartIcon="@Icons.Material.Filled.Search"
70-
Color="Color.Primary">Search</MudButton>
66+
<MudFab Color="Color.Primary"
67+
Size="@Size.Small"
68+
StartIcon="@Icons.Material.Filled.Search"
69+
Label="Search"
70+
OnClick="ApplyFilters" />
7171
</MudItem>
7272
</MudGrid>
7373
</MudForm>

‎src/Components/Pages/Health/Health.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@
3030
LoadingProgressColor="Color.Primary"
3131
RowClassFunc="GetRowClass">
3232
<ToolBarContent>
33-
<MudButton Variant="Variant.Outlined"
34-
Color="Color.Default"
35-
OnClick="RefreshAsync"
36-
StartIcon="@Icons.Material.Filled.Refresh"
37-
Size="@Size.Small">Refresh</MudButton>
33+
<MudFab Color="Color.Surface"
34+
Size="@Size.Small"
35+
StartIcon="@Icons.Material.Filled.Refresh"
36+
Label="Refresh"
37+
OnClick="RefreshAsync" />
3838
</ToolBarContent>
3939
<HeaderContent>
4040
<MudTh>Component</MudTh>

‎src/Components/Pages/Plugins/Plugins.razor‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<HeaderTitle
1515
Title="Managing plugins"
1616
Description="This section enumerates all plugins currently installed and available within the FlowSynx system. Each entry includes the plugin name, version, type, and a brief description of its functionality."
17-
Icon="@Icons.Material.Filled.GridView"
17+
Icon="@Icons.Material.Filled.Extension"
1818
IconColor="Color.Primary"
1919
IconSize="Size.Large" />
2020

@@ -26,10 +26,18 @@
2626
Striped="false"
2727
@ref="_table" LoadingProgressColor="Color.Primary">
2828
<ToolBarContent>
29-
<MudButton DisableElevation Variant="Variant.Outlined" Color="Color.Default" Size="@Size.Small"
30-
StartIcon="@Icons.Material.Filled.Add" class="mr-1" OnClick="InstallPlugin">Install</MudButton>
31-
<MudButton DisableElevation Variant="Variant.Outlined" OnClick="Refresh" Size="@Size.Small"
32-
StartIcon="@Icons.Material.Filled.Refresh" Color="Color.Default">Refresh</MudButton>
29+
<MudFab Color="Color.Primary"
30+
Size="@Size.Small"
31+
StartIcon="@Icons.Material.Filled.Add"
32+
Label="Install"
33+
OnClick="InstallPlugin" />
34+
35+
<MudFab Color="Color.Surface"
36+
Size="@Size.Small"
37+
StartIcon="@Icons.Material.Filled.Refresh"
38+
class="ml-2"
39+
Label="Refresh"
40+
OnClick="Refresh" />
3341
</ToolBarContent>
3442
<HeaderContent>
3543
<MudTh>Type</MudTh>

‎src/Components/Pages/Workflows/AddWorkflow.razor‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,12 @@
2323
<MudTabPanel Text="Designer" Icon="@Icons.Material.Filled.DesignServices">
2424
<MudToolBar Dense="true" Gutters="false" Class="toolbar">
2525
<MudTooltip Text="Save workflow">
26-
<MudButton Variant="Variant.Filled"
27-
Size="@Size.Medium"
28-
Color="Color.Primary"
29-
StartIcon="@Icons.Material.Filled.Save"
30-
Disabled="@IsProcessing"
31-
OnClick="Save">
32-
Save
33-
</MudButton>
26+
<MudFab StartIcon="@Icons.Material.Filled.Save"
27+
Color="Color.Primary"
28+
Size="Size.Medium"
29+
Label="Save"
30+
Disabled="@IsProcessing"
31+
OnClick="Save" />
3432
</MudTooltip>
3533
<MudTooltip Text="@(CurrentView == View.Code ? "Switch to Designer" : "Switch to JSON")">
3634
<MudIconButton Variant="Variant.Text"

0 commit comments

Comments
 (0)