Skip to content

Commit 4d0b9d7

Browse files
ziaghamziagham
committed
Modernize workflow dialogs and UI styling
- Refactored workflow trigger and configuration dialogs with MudCard layouts, tabs, and improved field variants for better usability and clarity. - Updated trigger type enum from TimeBased to Time for consistency. - Enhanced account menu styling and removed plugin type start icon. - Improved palette sidebar text and table action toolbar CSS. - Removed default Blazor error boundary styling for a cleaner look. - Overall, these changes deliver a more modern and user-friendly interface. #93
1 parent 639e0d4 commit 4d0b9d7

8 files changed

Lines changed: 559 additions & 347 deletions

File tree

‎src/Components/Layout/LoginDisplay.razor‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
<AuthorizeView>
44
<Authorized>
55
<MudMenu StartIcon="@Icons.Material.Filled.AccountCircle"
6+
EndIcon="@Icons.Material.Filled.KeyboardArrowDown"
67
Color="Color.Inherit"
7-
Variant="Variant.Outlined"
8+
Variant="Variant.Text"
89
Label="@context.User.Identity?.Name"
910
AnchorOrigin="Origin.BottomRight"
1011
TransformOrigin="Origin.TopRight"
11-
Class="ml-2 mr-2">
12+
Dense="true"
13+
Class="ml-4 mr-1 account-menu">
1214
<MudMenuItem OnClick="Logout">Log out</MudMenuItem>
1315
</MudMenu>
1416
</Authorized>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
Variant="Variant.Filled"
2929
Margin="Margin.Dense"
3030
Required="true"
31-
StartIcon="@Icons.Material.Filled.Code"
3231
Disabled="@IsProcessing"
3332
Clearable="true" />
3433
</MudCardContent>

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

Lines changed: 136 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -8,93 +8,149 @@
88
@inject IFlowSynxClient FlowSynxClient
99
@inject ISnackbar SnackBar
1010

11-
<MudDialog>
12-
<TitleContent>
13-
<MudText Typo="Typo.h6">
14-
<MudIcon Icon="@Icons.Material.Filled.Add" Class="mr-3 mb-n1" /> Add workflow trigger
15-
</MudText>
16-
</TitleContent>
11+
<MudDialog MaxWidth="MaxWidth.Medium"
12+
FullWidth="true"
13+
DisableBackdropClick="@IsProcessing"
14+
CloseOnEscapeKey="false">
15+
1716
<DialogContent>
18-
<MudGrid>
19-
<MudItem xs="12" md="12">
20-
<MudSelect T="string"
21-
Label="Trigger Type"
22-
For="@(() => AddWorkflowTriggerRequest.Type)"
23-
@bind-Value="AddWorkflowTriggerRequest.Type"
24-
Variant="Variant.Text"
25-
Margin="Margin.Dense"
26-
Clearable="false"
27-
OpenIcon="@Icons.Material.Filled.ArrowDropDown"
28-
CloseIcon="@Icons.Material.Filled.ArrowDropUp"
29-
HelperText="Enter the type of workflow trigger">
30-
@foreach (var triggerType in Enum.GetValues<WorkflowTriggerType>())
31-
{
32-
<MudSelectItem Value="@triggerType.ToString().ToLower()">@triggerType</MudSelectItem>
33-
}
34-
</MudSelect>
35-
</MudItem>
36-
<MudItem xs="12">
37-
<MudSwitch @bind-Value="AddWorkflowTriggerRequest.Status"
38-
Converter="_statusConverter"
39-
Label="Active"
40-
Color="Color.Primary" />
41-
</MudItem>
42-
<MudItem xs="12" md="12">
43-
<MudText Typo="Typo.h6" Color="Color.Primary">Properties</MudText>
44-
<MudTable Items="Properties" Hover="true" Breakpoint="Breakpoint.Sm" Dense="true">
17+
18+
<MudCard Elevation="0" Class="rounded-xl">
19+
20+
<!-- Body -->
21+
<MudCardContent Class="pt-4">
22+
23+
<!-- Trigger basics -->
24+
<MudGrid Spacing="3">
25+
26+
<MudItem xs="12" md="6">
27+
<MudSelect T="string"
28+
Label="Trigger Type"
29+
@bind-Value="AddWorkflowTriggerRequest.Type"
30+
Variant="Variant.Filled"
31+
StartIcon="@Icons.Material.Filled.Category"
32+
Disabled="@IsProcessing">
33+
@foreach (var triggerType in Enum.GetValues<WorkflowTriggerType>())
34+
{
35+
<MudSelectItem Value="@triggerType.ToString()">
36+
@triggerType
37+
</MudSelectItem>
38+
}
39+
</MudSelect>
40+
</MudItem>
41+
42+
<MudItem xs="12" md="6" Class="d-flex align-center">
43+
<MudSwitch @bind-Value="AddWorkflowTriggerRequest.Status"
44+
Converter="_statusConverter"
45+
Color="Color.Primary"
46+
Label="Trigger Active"
47+
Disabled="@IsProcessing" />
48+
</MudItem>
49+
50+
</MudGrid>
51+
52+
<MudDivider Class="my-4" />
53+
54+
<!-- Properties -->
55+
<MudText Typo="Typo.h6" Class="mb-2">
56+
Trigger Properties
57+
</MudText>
58+
59+
<MudText Typo="Typo.body2" Color="Color.Secondary" Class="mb-3">
60+
Define key–value parameters used by the trigger.
61+
</MudText>
62+
63+
<MudTable Items="Properties"
64+
Dense="true"
65+
Hover="true"
66+
Breakpoint="Breakpoint.Sm">
67+
4568
<ToolBarContent>
46-
<MudButton DisableElevation
47-
Variant="Variant.Outlined"
48-
Color="Color.Default"
49-
Size="@Size.Small"
50-
Class="size-small-button"
51-
OnClick="AddProperty">Add properties</MudButton>
69+
<MudButton Variant="Variant.Text"
70+
Color="Color.Primary"
71+
StartIcon="@Icons.Material.Filled.Add"
72+
Disabled="@IsProcessing"
73+
OnClick="AddProperty">
74+
Add Property
75+
</MudButton>
5276
</ToolBarContent>
77+
5378
<HeaderContent>
5479
<MudTh>Key</MudTh>
5580
<MudTh>Value</MudTh>
5681
<MudTh></MudTh>
5782
</HeaderContent>
83+
5884
<RowTemplate>
5985
<MudTd>
60-
<MudTextField For="@(() => context.Key)"
61-
@bind-Value="context.Key"
62-
Variant="Variant.Text"
63-
Margin="Margin.Dense" />
86+
<MudTextField @bind-Value="context.Key"
87+
Variant="Variant.Filled"
88+
Placeholder="Key"
89+
Margin="Margin.Dense"
90+
Disabled="@IsProcessing" />
6491
</MudTd>
92+
6593
<MudTd>
66-
<MudTextField For="@(() => context.Value)"
67-
@bind-Value="context.Value"
68-
Variant="Variant.Text"
69-
Margin="Margin.Dense" />
94+
<MudTextField @bind-Value="context.Value"
95+
Variant="Variant.Filled"
96+
Placeholder="Value"
97+
Margin="Margin.Dense"
98+
Disabled="@IsProcessing" />
7099
</MudTd>
100+
71101
<MudTd>
72102
<MudIconButton Icon="@Icons.Material.Filled.Delete"
73-
Variant="Variant.Text"
74103
Color="Color.Error"
75-
Size="Size.Small"
76-
OnClick="@(() => DeleteProperty(context.Id))"></MudIconButton>
104+
Disabled="@IsProcessing"
105+
OnClick="@(() => DeleteProperty(context.Id))" />
77106
</MudTd>
78107
</RowTemplate>
108+
<NoRecordsContent>
109+
<MudText>No properties defined.</MudText>
110+
</NoRecordsContent>
111+
<LoadingContent>
112+
<MudText>Loading...</MudText>
113+
</LoadingContent>
79114
</MudTable>
80-
</MudItem>
81-
</MudGrid>
115+
116+
</MudCardContent>
117+
118+
<!-- Footer -->
119+
<MudDivider />
120+
121+
<MudCardActions Class="pa-4 d-flex justify-end gap-2">
122+
123+
<MudButton Variant="Variant.Text"
124+
Color="Color.Default"
125+
Disabled="@IsProcessing"
126+
OnClick="Cancel">
127+
Cancel
128+
</MudButton>
129+
130+
<MudButton Variant="Variant.Filled"
131+
Color="Color.Primary"
132+
Disabled="@IsProcessing"
133+
OnClick="Add"
134+
StartIcon="@Icons.Material.Filled.Add">
135+
136+
@if (IsProcessing)
137+
{
138+
<MudProgressCircular Indeterminate="true"
139+
Size="Size.Small"
140+
Class="mr-2" />
141+
<span>Adding…</span>
142+
}
143+
else
144+
{
145+
<span>Add Trigger</span>
146+
}
147+
</MudButton>
148+
149+
</MudCardActions>
150+
151+
</MudCard>
152+
82153
</DialogContent>
83-
<DialogActions>
84-
<MudButton DisableElevation Variant="Variant.Outlined"
85-
StartIcon="@Icons.Material.Filled.Close"
86-
Color="Color.Default"
87-
Disabled="@IsProcessing"
88-
Size="Size.Small"
89-
OnClick="Cancel">Cancel</MudButton>
90-
91-
<MudButton DisableElevation Variant="Variant.Filled"
92-
StartIcon="@Icons.Material.Filled.Add"
93-
Color="Color.Primary"
94-
Disabled="@IsProcessing"
95-
Size="Size.Small"
96-
OnClick="Add">@(IsProcessing ? "Adding..." : "Add")</MudButton>
97-
</DialogActions>
98154
</MudDialog>
99155

100156
@code {
@@ -107,20 +163,20 @@
107163
private bool IsProcessing = false;
108164
private List<TempKeyValue> Properties = new List<TempKeyValue>();
109165
private AddWorkflowTriggerRequest AddWorkflowTriggerRequest = new()
110-
{
111-
WorkflowId = Guid.Empty,
112-
Status = WorkflowTriggerStatus.Active.ToString(),
113-
Type = WorkflowTriggerType.TimeBased.ToString(),
114-
Properties = new()
115-
};
166+
{
167+
WorkflowId = Guid.Empty,
168+
Status = WorkflowTriggerStatus.Active.ToString(),
169+
Type = WorkflowTriggerType.Time.ToString(),
170+
Properties = new()
171+
};
116172

117173
private readonly MudBlazor.Converter<string, bool?> _statusConverter = new()
118-
{
119-
SetFunc = status => status == WorkflowTriggerStatus.Active.ToString(),
120-
GetFunc = isActive => isActive == true ?
121-
WorkflowTriggerStatus.Active.ToString() :
122-
WorkflowTriggerStatus.DeActive.ToString()
123-
};
174+
{
175+
SetFunc = status => status == WorkflowTriggerStatus.Active.ToString(),
176+
GetFunc = isActive => isActive == true ?
177+
WorkflowTriggerStatus.Active.ToString() :
178+
WorkflowTriggerStatus.DeActive.ToString()
179+
};
124180

125181
private void Cancel()
126182
{
@@ -224,7 +280,7 @@
224280

225281
private enum WorkflowTriggerType
226282
{
227-
TimeBased
283+
Time
228284
}
229285

230286
private enum WorkflowTriggerStatus

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

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,72 @@
66
@inject IFlowSynxClient FlowSynxClient
77
@inject ISnackbar SnackBar
88

9-
<MudDialog>
10-
<TitleContent>
11-
<MudText Typo="Typo.h6">
12-
<MudIcon Icon="@Icons.Material.Filled.DeleteForever" Class="mr-3 mb-n1" /> Delete workflow trigger
13-
</MudText>
14-
</TitleContent>
9+
<MudDialog MaxWidth="MaxWidth.Small"
10+
FullWidth="true"
11+
DisableBackdropClick="@IsProcessing"
12+
CloseOnEscapeKey="false">
13+
1514
<DialogContent>
16-
<MudText>
17-
<strong>Are you sure you want to delete this workflow trigger?</strong>
18-
<br /><br />
19-
<strong>Trigger Type:</strong> @TriggerType
20-
</MudText>
15+
16+
<MudCard Elevation="0" Class="rounded-xl">
17+
18+
<!-- Body -->
19+
<MudCardContent Class="pt-4">
20+
21+
<MudAlert Severity="Severity.Warning"
22+
Variant="Variant.Outlined"
23+
Dense="true"
24+
Class="mb-4">
25+
<MudText Typo="Typo.body1"><b>This action cannot be undone.</b></MudText>
26+
<MudText Typo="Typo.subtitle2">Any schedules, events, or executions associated with this trigger will stop immediately.</MudText>
27+
</MudAlert>
28+
29+
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
30+
<MudText Typo="Typo.subtitle2" Class="mb-1">
31+
You are about to delete the following trigger:
32+
</MudText>
33+
34+
<MudText Typo="Typo.h6">@TriggerType</MudText>
35+
</MudPaper>
36+
37+
</MudCardContent>
38+
39+
<!-- Footer -->
40+
<MudDivider />
41+
42+
<MudCardActions Class="pa-4 d-flex justify-end gap-2">
43+
44+
<MudButton Variant="Variant.Text"
45+
Color="Color.Default"
46+
Disabled="@IsProcessing"
47+
OnClick="Cancel">
48+
Cancel
49+
</MudButton>
50+
51+
<MudButton Variant="Variant.Filled"
52+
Color="Color.Error"
53+
Disabled="@IsProcessing"
54+
OnClick="Delete"
55+
StartIcon="@Icons.Material.Filled.DeleteForever">
56+
57+
@if (IsProcessing)
58+
{
59+
<MudProgressCircular Indeterminate="true"
60+
Size="Size.Small"
61+
Class="mr-2" />
62+
<span>Deleting...</span>
63+
}
64+
else
65+
{
66+
<span>Delete Trigger</span>
67+
}
68+
</MudButton>
69+
70+
</MudCardActions>
71+
72+
</MudCard>
73+
2174
</DialogContent>
22-
<DialogActions>
23-
<MudButton Variant="Variant.Outlined"
24-
StartIcon="@Icons.Material.Filled.Close"
25-
Color="Color.Default"
26-
Disabled="@IsProcessing"
27-
Size="Size.Small"
28-
OnClick="Cancel">Cancel</MudButton>
29-
30-
<MudButton Color="Color.Error"
31-
StartIcon="@Icons.Material.Filled.DeleteForever"
32-
Variant="Variant.Filled"
33-
Disabled="@IsProcessing"
34-
Size="Size.Small"
35-
OnClick="Delete">@(IsProcessing ? "Deleting..." : "Delete")</MudButton>
36-
</DialogActions>
3775
</MudDialog>
3876

3977
@code {

0 commit comments

Comments
 (0)