Skip to content

Commit c8f1b7b

Browse files
neozhuneozhu
committed
Update MudFileUpload and modernize theme/colors
Refactored MudFileUpload usage to use CustomContent and SelectedTemplate per MudBlazor recommendations. Updated UserPreference and Theme to use Tailwind-inspired color palettes and improved typography for a more modern, accessible UI. Moved file list display into SelectedTemplate in ProductFormDialog.
1 parent 21457a0 commit c8f1b7b

File tree

11 files changed

+111
-83
lines changed

11 files changed

+111
-83
lines changed

‎src/Server.UI/Pages/Contacts/Contacts.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,14 @@
7676
{
7777
<MudMenuItem>
7878
<MudFileUpload T="IBrowserFile" FilesChanged="OnImportData" Accept=".xlsx">
79-
<ActivatorContent>
79+
<CustomContent>
8080
<MudButton Class="pa-0 ma-0" Style="font-weight:400;text-transform:none;"
8181
Variant="Variant.Text"
8282
Disabled="@_uploading">
8383
@ConstantString.Import
8484
</MudButton>
85-
</ActivatorContent>
85+
</CustomContent>
86+
<SelectedTemplate />
8687
</MudFileUpload>
8788
</MudMenuItem>
8889
}

‎src/Server.UI/Pages/Documents/Components/UploadFilesFormDialog.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,14 @@
4040

4141
<MudButton Variant="Variant.Filled" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.Clear" Disabled="@(!_uploadedFiles.Any())" OnClick="Clear">@ConstantString.Clear</MudButton>
4242
<MudFileUpload @ref="@_fileUpload" T="IReadOnlyList<IBrowserFile>" Accept=".jpg, .jpeg, .png, .webp" FilesChanged="LoadFiles">
43-
<ActivatorContent>
43+
<CustomContent>
4444
<MudLoadingButton Loading="@_uploading" Variant="Variant.Filled"
4545
StartIcon="@Icons.Material.Filled.AttachFile"
4646
>
4747
@L["Choose files"]
4848
</MudLoadingButton>
49-
</ActivatorContent>
49+
</CustomContent>
50+
<SelectedTemplate />
5051
</MudFileUpload>
5152

5253
<MudLoadingButton Loading="@_processing" Disabled="@(!_uploadedFiles.Any())" Variant="Variant.Filled" OnClick="Submit">@ConstantString.Submit</MudLoadingButton>

‎src/Server.UI/Pages/Identity/Roles/Roles.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,14 @@
7878
{
7979
<MudMenuItem>
8080
<MudFileUpload T="IBrowserFile" FilesChanged="OnImportData" Accept=".xlsx">
81-
<ActivatorContent>
81+
<CustomContent>
8282
<MudButton Class="pa-0 ma-0" Style="font-weight:400;text-transform:none;"
8383
Variant="Variant.Text"
8484
Disabled="@_uploading">
8585
@ConstantString.Import
8686
</MudButton>
87-
</ActivatorContent>
87+
</CustomContent>
88+
<SelectedTemplate />
8889
</MudFileUpload>
8990
</MudMenuItem>
9091
}

‎src/Server.UI/Pages/Identity/Users/Components/UserForm.razor‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,11 @@
3535
}
3636
<MudTooltip Text="@L["Click upload a image"]">
3737
<MudFileUpload T="IBrowserFile" Accept=".jpg, .jpeg, .png, .webp" FilesChanged="UploadPhoto" Style="margin-top:-10px;margin-left:-15px">
38-
<ActivatorContent>
38+
<CustomContent>
3939
<MudIconButton Icon="@Icons.Material.Filled.PhotoCamera">
4040
</MudIconButton>
41-
</ActivatorContent>
41+
</CustomContent>
42+
<SelectedTemplate/>
4243
</MudFileUpload>
4344
</MudTooltip>
4445

@@ -48,6 +49,8 @@
4849
<MultiTenantAutocomplete For="@(() => Model.Tenant)"
4950
T="TenantDto"
5051
Label="@L[Model.GetMemberDescription(x=>x.Tenant)]"
52+
53+
5154
Required="true"
5255
ValueChanged="@(x=>TenantChanged(x))"
5356
Value="@Model.Tenant">

‎src/Server.UI/Pages/Identity/Users/Profile.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,11 @@ else
5858

5959
<MudTooltip Text="@L["Click upload a image"]">
6060
<MudFileUpload T="IBrowserFile" Accept=".jpg, .jpeg, .png, .webp" FilesChanged="UploadPhoto" Style="margin-top:-10px;margin-left:-15px">
61-
<ActivatorContent>
61+
<CustomContent>
6262
<MudIconButton Icon="@Icons.Material.Filled.PhotoCamera">
6363
</MudIconButton>
64-
</ActivatorContent>
64+
</CustomContent>
65+
<SelectedTemplate />
6566
</MudFileUpload>
6667
</MudTooltip>
6768

‎src/Server.UI/Pages/Identity/Users/Users.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,14 @@
100100
{
101101
<MudMenuItem>
102102
<MudFileUpload T="IBrowserFile" FilesChanged="OnImportData" Accept=".xlsx">
103-
<ActivatorContent>
103+
<CustomContent>
104104
<MudButton Class="pa-0 ma-0" Style="font-weight:400;text-transform:none;"
105105
Variant="Variant.Text"
106106
Disabled="@_uploading">
107107
@ConstantString.Import
108108
</MudButton>
109-
</ActivatorContent>
109+
</CustomContent>
110+
<SelectedTemplate />
110111
</MudFileUpload>
111112
</MudMenuItem>
112113
}

‎src/Server.UI/Pages/PicklistSets/PicklistSets.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,14 @@
7575
{
7676
<MudMenuItem>
7777
<MudFileUpload T="IBrowserFile" FilesChanged="OnImportData" Accept=".xlsx">
78-
<ActivatorContent>
78+
<CustomContent>
7979
<MudButton Class="pa-0 ma-0" Style="font-weight:400;text-transform:none;"
8080
Variant="Variant.Text"
8181
Disabled="@_uploading">
8282
@ConstantString.Import
8383
</MudButton>
84-
</ActivatorContent>
84+
</CustomContent>
85+
<SelectedTemplate />
8586
</MudFileUpload>
8687
</MudMenuItem>
8788
}

‎src/Server.UI/Pages/Products/Components/ProductFormDialog.razor‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -80,31 +80,33 @@
8080
@ondragleave="@ClearDragClass"
8181
@ondragend="@ClearDragClass"
8282
AppendMultipleFiles>
83-
<ActivatorContent>
83+
<CustomContent>
8484
<MudPaper Class="@_dragClass" Style="width:260px;height:70px;">
8585
<MudLoadingButton Loading="@_uploading" Disabled="@_uploading" Variant="Variant.Text" Class="align-self-center" Style="text-transform:none"
8686
StartIcon="@Icons.Material.Filled.CloudUpload">
8787
@L["choose image or pdf"]
8888
</MudLoadingButton>
8989
</MudPaper>
90-
</ActivatorContent>
91-
90+
</CustomContent>
91+
<SelectedTemplate>
92+
@if (Model.Pictures is not null)
93+
{
94+
<MudSimpleTable Hover Dense Elevation="0">
95+
<tbody>
96+
@foreach (var dto in Model.Pictures)
97+
{
98+
<tr @onclick="() => OnDownloadFile(dto.Url)" style="cursor:pointer">
99+
<td><Thumbnail FileName="@dto.Name" FileUrl="@dto.Url"> </Thumbnail></td>
100+
<td><FileSizeFormatter FileSizeInBytes="@dto.Size"></FileSizeFormatter></td>
101+
<td style="width:50px"><MudIconButton Icon="@Icons.Material.Outlined.Delete" Color="Color.Error" title="@ConstantString.Delete" OnClick="@(() => DeleteImage(dto))"></MudIconButton></td>
102+
</tr>
103+
}
104+
</tbody>
105+
</MudSimpleTable>
106+
}
107+
</SelectedTemplate>
92108
</MudFileUpload>
93-
@if (Model.Pictures is not null)
94-
{
95-
<MudSimpleTable Hover Dense Elevation="0">
96-
<tbody>
97-
@foreach (var dto in Model.Pictures)
98-
{
99-
<tr @onclick="()=>OnDownloadFile(dto.Url)" style="cursor:pointer">
100-
<td><Thumbnail FileName="@dto.Name" FileUrl="@dto.Url"> </Thumbnail></td>
101-
<td><FileSizeFormatter FileSizeInBytes="@dto.Size"></FileSizeFormatter></td>
102-
<td style="width:50px"><MudIconButton Icon="@Icons.Material.Outlined.Delete" Color="Color.Error" title="@ConstantString.Delete" OnClick="@(()=>DeleteImage(dto))"></MudIconButton></td>
103-
</tr>
104-
}
105-
</tbody>
106-
</MudSimpleTable>
107-
}
109+
108110
</MudStack>
109111
</MudItem>
110112
</MudGrid>

‎src/Server.UI/Pages/Products/Products.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,15 @@
8383
{
8484
<MudMenuItem>
8585
<MudFileUpload T="IBrowserFile" FilesChanged="OnImportData" Accept=".xlsx">
86-
<ActivatorContent>
86+
<CustomContent>
8787
<MudButton Class="pa-0 ma-0" Style="font-weight:400;text-transform:none;"
8888
Variant="Variant.Text"
8989
Disabled="@_uploading"
9090
>
9191
@ConstantString.Import
9292
</MudButton>
93-
</ActivatorContent>
93+
</CustomContent>
94+
<SelectedTemplate />
9495
</MudFileUpload>
9596
</MudMenuItem>
9697
}

‎src/Server.UI/Services/UserPreferences/UserPreference.cs‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,26 @@ namespace CleanArchitecture.Blazor.Server.UI.Services.UserPreferences;
88

99
public class UserPreference
1010
{
11+
// List of available primary colors (Updated to Tailwind 600 scale for better white text contrast)
1112
public static readonly List<string> PrimaryColors = new()
1213
{
13-
"#2d4275", // 蓝色
14-
"#6A1B9A", // 深紫色
15-
"#4CAF50" , // 绿色
16-
"#FF9800", // 橙色
17-
"#F44336", // 红色
18-
"#FF69B4" // 粉色
14+
"#0f172a", // Slate-900
15+
"#2563eb", // Blue-600
16+
"#7c3aed", // Violet-600
17+
"#059669", // Emerald-600
18+
"#ea580c", // Orange-600
19+
"#e11d48", // Rose-600
1920
};
2021

22+
// List of available dark primary colors (Tailwind 500 scale or White)
2123
public static readonly List<string> DarkPrimaryColors = new()
2224
{
23-
"#0077b6", // 蓝色的暗色调
24-
"#a541be", // 深紫色的暗色调
25-
"#388E3C", // 绿色的暗色调
26-
"#FB8C00", // 橙色的暗色调
27-
"#ca322d", // 红色的暗色调
28-
"#cf2d86", // 粉色的暗色调
25+
"#fafafa", // Zinc-50
26+
"#3b82f6", // Blue-500
27+
"#8b5cf6", // Violet-500
28+
"#10b981", // Emerald-500
29+
"#f97316", // Orange-500
30+
"#f43f5e", // Rose-500
2931
};
3032

3133
/// <summary>
@@ -38,8 +40,8 @@ public class UserPreference
3840
/// </summary>
3941
public bool IsDarkMode { get; set; }
4042

41-
public string PrimaryColor { get; set; } = "#2d4275";
42-
public string DarkPrimaryColor { get; set; } = "#8b9ac6";
43+
public string PrimaryColor { get; set; } = "#0f172a";
44+
public string DarkPrimaryColor { get; set; } = "#fafafa";
4345
public string PrimaryDarken => AdjustBrightness(PrimaryColor, 0.8);
4446
public string PrimaryLighten => AdjustBrightness(PrimaryColor, 0.7);
4547
public string SecondaryColor { get; set; } = "#ff4081ff";

0 commit comments

Comments
 (0)