Skip to content
This repository was archived by the owner on Jun 19, 2026. It is now read-only.

Commit f9a96d5

Browse files
ziaghamziagham
committed
Modernize workflow UI: new action bars, cards, styling
Revamp workflow designer and management UI with floating action bars, modernized plugin cards, and improved tab navigation. Update global styles for a cleaner, more contemporary look, including new fonts, rounded elements, and glass effects. Enhance usability with tooltips, visual indicators, and better spacing. Remove unused authentication package. #92
1 parent 0ec0f70 commit f9a96d5

9 files changed

Lines changed: 359 additions & 262 deletions

File tree

‎src/Components/Pages/Triggers/WorkflowTriggers.razor‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,18 @@
1818
Striped="false"
1919
@ref="_table" LoadingProgressColor="Color.Primary">
2020
<ToolBarContent>
21-
<MudButton DisableElevation Variant="Variant.Outlined" Color="Color.Default" Size="@Size.Small"
22-
StartIcon="@Icons.Material.Filled.Add" class="mr-1" OnClick="AddTrigger">Add trigger</MudButton>
23-
<MudButton DisableElevation Variant="Variant.Outlined" OnClick="Refresh" Size="@Size.Small"
24-
StartIcon="@Icons.Material.Filled.Refresh" Color="Color.Default">Refresh</MudButton>
21+
<MudFab StartIcon="@Icons.Material.Filled.Add"
22+
Color="Color.Primary"
23+
Size="Size.Medium"
24+
Label="Add Trigger"
25+
OnClick="AddTrigger" />
26+
27+
<MudFab Color="Color.Surface"
28+
Size="@Size.Small"
29+
StartIcon="@Icons.Material.Filled.Refresh"
30+
Label="Refresh"
31+
class="ml-2"
32+
OnClick="Refresh" />
2533
</ToolBarContent>
2634
<HeaderContent>
2735
<MudTh>Status</MudTh>

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

Lines changed: 78 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -11,48 +11,71 @@
1111
@inject NavigationManager Navigation
1212

1313
<PageTitle>FlowSynx add workflow</PageTitle>
14-
<HeaderTitle
15-
Title="Workflow designer"
16-
Description="A visual interface to create, edit, and manage workflow."
17-
Icon="@Icons.Material.Filled.DesignServices"
18-
IconColor="Color.Primary"
19-
IconSize="Size.Large" />
20-
21-
<MudTabs Outlined="true" Position="Position.Top" Rounded="true" Border="true"
22-
ApplyEffectsToContainer="true" Class="mb-4">
23-
<MudTabPanel Text="Designer" Icon="@Icons.Material.Filled.DesignServices">
24-
<MudToolBar Dense="true" Gutters="false" Class="toolbar">
25-
<MudTooltip Text="Save workflow">
26-
<MudFab StartIcon="@Icons.Material.Filled.Save"
27-
Color="Color.Primary"
28-
Size="Size.Medium"
29-
Label="Save"
30-
Disabled="@IsProcessing"
31-
OnClick="Save" />
32-
</MudTooltip>
33-
<MudTooltip Text="@(CurrentView == View.Code ? "Switch to Designer" : "Switch to JSON")">
34-
<MudIconButton Variant="Variant.Text"
35-
Size="@Size.Medium"
36-
Color="Color.Default"
37-
Disabled="@IsProcessing"
38-
Icon="@(CurrentView == View.Code ? Icons.Material.Filled.DesignServices : Icons.Material.Filled.Code)"
39-
OnClick="ToggleCodeDesigner">
40-
</MudIconButton>
41-
</MudTooltip>
42-
@if (CurrentView == View.Designer)
43-
{
44-
<MudTooltip Text="Configure workflow">
45-
<MudIconButton Variant="Variant.Text"
46-
Size="@Size.Medium"
47-
Color="Color.Default"
48-
Disabled="@IsProcessing"
49-
Icon="@Icons.Material.Filled.Settings"
50-
OnClick="ConfigureWorkflow">
51-
</MudIconButton>
52-
</MudTooltip>
53-
}
54-
</MudToolBar>
55-
@RenderCurrentView()
14+
<HeaderTitle Title="Workflow designer"
15+
Description="A visual interface to create, edit, and manage workflow."
16+
Icon="@Icons.Material.Filled.DesignServices"
17+
IconColor="Color.Primary"
18+
IconSize="Size.Large" />
19+
20+
<MudTabs Position="Position.Top"
21+
Rounded="true"
22+
Class="modern-tabs full-height-tabs mb-4">
23+
24+
<MudTabPanel Text="Designer" Icon="@Icons.Material.Filled.AccountTree" Class="full-height-panel">
25+
<MudStack Class="panel-root">
26+
27+
<!-- Floating Action Bar -->
28+
<MudPaper Elevation="2" Class="action-bar glass">
29+
<MudStack Row AlignItems="AlignItems.Center" Spacing="1">
30+
31+
<MudTooltip Text="Save workflow">
32+
<MudIconButton Icon="@Icons.Material.Filled.Save"
33+
Color="Color.Primary"
34+
Disabled="@IsProcessing"
35+
Size="Size.Medium"
36+
OnClick="Save" />
37+
</MudTooltip>
38+
39+
<MudDivider Vertical />
40+
41+
<MudTooltip Text="@(CurrentView == View.Code ? "Switch to Designer" : "Switch to JSON")">
42+
<MudIconButton Icon="@(CurrentView == View.Code
43+
? Icons.Material.Filled.DesignServices
44+
: Icons.Material.Filled.Code)"
45+
Color="Color.Default"
46+
Disabled="@IsProcessing"
47+
Size="Size.Medium"
48+
OnClick="ToggleCodeDesigner" />
49+
</MudTooltip>
50+
51+
@if (CurrentView == View.Designer)
52+
{
53+
<MudTooltip Text="Configure workflow">
54+
<MudIconButton Icon="@Icons.Material.Filled.Settings"
55+
Color="Color.Default"
56+
Disabled="@IsProcessing"
57+
Size="Size.Medium"
58+
OnClick="ConfigureWorkflow" />
59+
</MudTooltip>
60+
}
61+
62+
<MudSpacer />
63+
64+
<!-- View Indicator -->
65+
<MudChip T="string" Color="Color.Primary"
66+
Variant="Variant.Outlined"
67+
StartIcon="@(CurrentView == View.Code ? Icons.Material.Filled.Code : Icons.Material.Filled.DesignServices)">
68+
@(CurrentView == View.Code ? "JSON" : "Designer")
69+
</MudChip>
70+
</MudStack>
71+
</MudPaper>
72+
73+
<!-- Content -->
74+
<MudPaper Class="designer-content" Elevation="1">
75+
@RenderCurrentView()
76+
</MudPaper>
77+
78+
</MudStack>
5679
</MudTabPanel>
5780
</MudTabs>
5881

@@ -159,24 +182,24 @@
159182
private async Task ConfigureWorkflow()
160183
{
161184
var options = new DialogOptions
162-
{
163-
CloseButton = false,
164-
MaxWidth = MaxWidth.Small,
165-
BackdropClick = false,
166-
CloseOnEscapeKey = false,
167-
BackgroundClass = "blur-dialog-background"
168-
};
169-
170-
var parameters = new DialogParameters
171185
{
172-
{
173-
"Config", new WorkflowViewModel
174-
{
186+
CloseButton = false,
187+
MaxWidth = MaxWidth.Small,
188+
BackdropClick = false,
189+
CloseOnEscapeKey = false,
190+
BackgroundClass = "blur-dialog-background"
191+
};
192+
193+
var parameters = new DialogParameters
194+
{
195+
{
196+
"Config", new WorkflowViewModel
197+
{
175198
Schema = WorkflowContainer.Schema,
176199
Name = WorkflowContainer.Workflow.Name,
177200
Description = WorkflowContainer.Workflow.Description,
178201
Configuration = WorkflowContainer.Workflow.Configuration
179-
}
202+
}
180203
}
181204
};
182205

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

Lines changed: 101 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -20,74 +20,112 @@
2020
IconColor="Color.Primary"
2121
IconSize="Size.Large" />
2222

23-
<MudTabs Outlined="true"
24-
Position="Position.Top"
23+
<MudTabs Position="Position.Top"
2524
Rounded="true"
26-
Border="true"
27-
ApplyEffectsToContainer="true"
28-
Class="mb-4">
29-
<MudTabPanel Text="Designer" Icon="@Icons.Material.Filled.DesignServices" Disabled="@IsProcessing">
30-
<MudToolBar Dense="true" Gutters="false" Class="toolbar">
31-
<MudTooltip Text="Save workflow">
32-
<MudButton Variant="Variant.Filled"
33-
Size="@Size.Medium"
34-
Color="Color.Primary"
35-
StartIcon="@Icons.Material.Filled.Save"
36-
Disabled="@IsProcessing"
37-
OnClick="Save">
38-
Save
39-
</MudButton>
40-
</MudTooltip>
41-
<MudTooltip Text="@(CurrentView == View.Code ? "Switch to Designer" : "Switch to JSON")">
42-
<MudIconButton Variant="Variant.Text"
43-
Size="@Size.Medium"
44-
Color="Color.Default"
45-
Disabled="@IsProcessing"
46-
Icon="@(CurrentView == View.Code ? Icons.Material.Filled.DesignServices : Icons.Material.Filled.Code)"
47-
OnClick="ToggleCodeDesigner">
48-
</MudIconButton>
49-
</MudTooltip>
50-
@if (CurrentView == View.Designer)
51-
{
52-
<MudTooltip Text="Configure workflow">
53-
<MudIconButton Variant="Variant.Text"
54-
Size="@Size.Medium"
55-
Color="Color.Default"
56-
Disabled="@IsProcessing"
57-
Icon="@Icons.Material.Filled.Settings"
58-
OnClick="ConfigureWorkflow">
59-
</MudIconButton>
25+
Class="modern-tabs mb-4">
26+
27+
28+
<!-- DESIGNER TAB -->
29+
<MudTabPanel Text="Designer"
30+
Icon="@Icons.Material.Filled.AccountTree"
31+
Disabled="@IsProcessing">
32+
33+
34+
<!-- Floating Action Bar -->
35+
<MudPaper Elevation="2" Class="action-bar glass">
36+
<MudStack Row AlignItems="AlignItems.Center" Spacing="1">
37+
38+
39+
<!-- Primary: Save -->
40+
<MudTooltip Text="Save workflow">
41+
<MudIconButton Icon="@Icons.Material.Filled.Save"
42+
Color="Color.Primary"
43+
Disabled="@IsProcessing"
44+
Size="Size.Medium"
45+
OnClick="Save" />
6046
</MudTooltip>
61-
}
62-
<MudSpacer />
63-
<MudTooltip Text="Delete workflow">
64-
<MudButton Variant="Variant.Filled"
65-
Size="@Size.Medium"
66-
Color="Color.Error"
67-
Disabled="@IsProcessing"
68-
StartIcon="@Icons.Material.Filled.Delete"
69-
Class="mr-1"
70-
OnClick="DeleteWorkflow">
71-
Delete
72-
</MudButton>
73-
</MudTooltip>
74-
<MudTooltip Text="Execute workflow">
75-
<MudButton Variant="Variant.Filled"
76-
Size="@Size.Medium"
77-
Color="Color.Primary"
78-
Disabled="@IsProcessing"
79-
StartIcon="@Icons.Material.Filled.PlayArrow"
80-
OnClick="ExecuteWorkflow">
81-
Execute
82-
</MudButton>
83-
</MudTooltip>
84-
</MudToolBar>
85-
@RenderCurrentView()
47+
48+
49+
<MudDivider Vertical Class="mx-1" />
50+
51+
52+
<!-- Toggle View -->
53+
<MudTooltip Text="@(CurrentView == View.Code ? "Switch to Designer" : "Switch to JSON")">
54+
<MudIconButton Icon="@(CurrentView == View.Code
55+
? Icons.Material.Filled.DesignServices
56+
: Icons.Material.Filled.Code)"
57+
Color="Color.Default"
58+
Disabled="@IsProcessing"
59+
Size="Size.Medium"
60+
OnClick="ToggleCodeDesigner" />
61+
</MudTooltip>
62+
63+
64+
<!-- Configure -->
65+
@if (CurrentView == View.Designer)
66+
{
67+
<MudTooltip Text="Configure workflow">
68+
<MudIconButton Icon="@Icons.Material.Filled.Settings"
69+
Color="Color.Default"
70+
Disabled="@IsProcessing"
71+
Size="Size.Medium"
72+
OnClick="ConfigureWorkflow" />
73+
</MudTooltip>
74+
}
75+
76+
77+
<MudSpacer />
78+
79+
80+
<!-- Destructive & Run Actions (Grouped Right) -->
81+
<MudStack Row Spacing="0">
82+
<MudTooltip Text="Delete workflow">
83+
<MudIconButton Icon="@Icons.Material.Filled.Delete"
84+
Color="Color.Error"
85+
Disabled="@IsProcessing"
86+
Size="Size.Medium"
87+
OnClick="DeleteWorkflow" />
88+
</MudTooltip>
89+
90+
91+
<MudTooltip Text="Execute workflow">
92+
<MudIconButton Icon="@Icons.Material.Filled.PlayArrow"
93+
Color="Color.Success"
94+
Disabled="@IsProcessing"
95+
Size="Size.Medium"
96+
OnClick="ExecuteWorkflow" />
97+
</MudTooltip>
98+
</MudStack>
99+
100+
<!-- View Indicator -->
101+
<MudChip T="string" Color="Color.Primary"
102+
Variant="Variant.Outlined"
103+
StartIcon="@(CurrentView == View.Code ? Icons.Material.Filled.Code : Icons.Material.Filled.DesignServices)">
104+
@(CurrentView == View.Code ? "JSON" : "Designer")
105+
</MudChip>
106+
</MudStack>
107+
</MudPaper>
108+
109+
110+
<!-- Content -->
111+
<MudPaper Class="designer-content" Elevation="1">
112+
@RenderCurrentView()
113+
</MudPaper>
86114
</MudTabPanel>
87-
<MudTabPanel Text="Executions" Icon="@Icons.Material.Filled.PlayArrow" Disabled="@IsProcessing">
115+
116+
117+
<!-- EXECUTIONS TAB -->
118+
<MudTabPanel Text="Executions"
119+
Icon="@Icons.Material.Filled.PlayArrow"
120+
Disabled="@IsProcessing">
88121
<WorkflowExecutions WorkflowId="@id" />
89122
</MudTabPanel>
90-
<MudTabPanel Text="Triggers" Icon="@Icons.Material.Filled.Bolt" Disabled="@IsProcessing">
123+
124+
125+
<!-- TRIGGERS TAB -->
126+
<MudTabPanel Text="Triggers"
127+
Icon="@Icons.Material.Filled.Bolt"
128+
Disabled="@IsProcessing">
91129
<WorkflowTriggers WorkflowId="@id" />
92130
</MudTabPanel>
93131
</MudTabs>

0 commit comments

Comments
 (0)