Skip to content

Commit

Permalink
refactor style
Browse files Browse the repository at this point in the history
  • Loading branch information
neozhu committed Nov 14, 2024
1 parent 5a72f5b commit 4b213fb
Show file tree
Hide file tree
Showing 15 changed files with 108 additions and 60 deletions.
4 changes: 2 additions & 2 deletions src/Server.UI/Components/Shared/Layout/HeaderMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@
</MudHidden>
<UserMenu OnSettingClick="OnSettingClick"/>
<MudDivider Class="mx-3 my-5" DividerType="DividerType.Middle" Vertical="true" FlexItem="true"></MudDivider>
<MudText Color="@Color.Primary" Typo="Typo.h6">
<b>@L[ApplicationSettings.Company]</b>
<MudText Color="@Color.Primary" Typo="Typo.h5">
@L[ApplicationSettings.Company]
</MudText>
</MudAppBar>

Expand Down
6 changes: 3 additions & 3 deletions src/Server.UI/Components/Shared/Layout/NavigationMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
Color="Color.Primary"
Icon="@Icons.Custom.Brands.MudBlazor"
Size="Size.Large"/>
<MudText Typo="Typo.subtitle2">
<b>@L[ApplicationSettings.AppName]</b>
<MudText Typo="Typo.h6">
@L[ApplicationSettings.AppName]
</MudText>
</MudDrawerHeader>

Expand All @@ -26,7 +26,7 @@
@if (section is not null)
{
<div class="@(LayoutService.IsRTL ? "mr-6" : "ml-6") my-3">
<MudText Typo="Typo.caption">
<MudText Typo="Typo.subtitle1">
<b>
@(L[section.Title])
</b>
Expand Down
66 changes: 50 additions & 16 deletions src/Server.UI/Components/Shared/Themes/ThemesMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,12 @@
FullWidth="true"
OnClick="@(() => UpdateThemePrimaryColor(color))">
<ChildContent>
<div class="@(color == UserPreferences.DarkPrimaryColor ? "oval oval-selected" : "oval")"
<div class="@(color == UserPreferences.DarkPrimaryColor ? "color-square color-square-selected" : "color-square")"
style="@($"background: {color};")">
@if (color == UserPreferences.DarkPrimaryColor)
{
<MudIcon Size="Size.Large" Icon="@Icons.Material.Outlined.Check" Class="check-icon" />
}
</div>
</ChildContent>
</MudButton>
Expand All @@ -100,8 +104,12 @@
FullWidth="true"
OnClick="@(() => UpdateThemePrimaryColor(color))">
<ChildContent>
<div class="@(color == UserPreferences.PrimaryColor ? "oval oval-selected" : "oval")"
<div class="@(color == UserPreferences.PrimaryColor ? "color-square color-square-selected" : "color-square")"
style="@($"background: {color};")">
@if (color == UserPreferences.PrimaryColor)
{
<MudIcon Size="Size.Large" Icon="@Icons.Material.Outlined.Check" Class="check-icon" />
}
</div>
</ChildContent>
</MudButton>
Expand Down Expand Up @@ -154,33 +162,59 @@
height: 64px;
}
.oval {
width: 25px;
height: 15px;
border-radius: 50%;
transform: rotate(120deg);
transition: transform 0.3s, box-shadow 0.3s;
.color-square {
width: 35px;
height: 35px;
border-radius: 4px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.oval-selected {
transform: rotate(0deg);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 为选中的颜色添加阴影 */
.color-square-selected {
width: 35px;
height: 35px;
border-radius: 4px;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
.color-button {
height: 50px;
height: 60px;
border: 1px solid var(--mud-palette-table-lines);
transition: border 0.3s, transform 0.3s;
transition: border 0.3s, transform 0.3s, box-shadow 0.3s;
cursor: pointer;
padding: 5px;
background-color: var(--mud-palette-surface);
border-radius: 8px;
}
.color-button:hover {
transform: scale(1.1);
}
.color-button:hover {
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.color-button-selected {
border: 2px solid var(--mud-palette-primary);
}
.color-button-selected:hover {
transform: scale(1.08);
}
.check-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFFFFF;
pointer-events: none;
}
</style>

@code
Expand Down
2 changes: 1 addition & 1 deletion src/Server.UI/Pages/Contacts/Contacts.razor
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.Window" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@Title</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@Title</MudText>
<MudEnumSelect Style="min-width:120px" TEnum="ContactListView" ValueChanged="OnChangedListView" Value="Query.ListView" Dense="true" Label="@L["List View"]">
</MudEnumSelect>
</MudStack>
Expand Down
2 changes: 1 addition & 1 deletion src/Server.UI/Pages/Documents/Documents.razor
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.Window" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@L[_currentDto.GetClassDescription()]</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@L[_currentDto.GetClassDescription()]</MudText>
<MudEnumSelect Style="min-width:120px" TEnum="DocumentListView" ValueChanged="OnChangedListView" Value="Query.ListView" Dense="true" Label="@L["List View"]">
</MudEnumSelect>
</MudStack>
Expand Down
2 changes: 1 addition & 1 deletion src/Server.UI/Pages/Identity/Roles/Roles.razor
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.Groups" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@Title</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@Title</MudText>
<MudSelect T="string" Style="min-width:120px" ValueChanged="OnChangedListView" Value="@_selectedTenantId" Dense="true" Label="@L["List View"]">
<MudSelectItem T="string" Value="@(" ")">@L["ALL"]</MudSelectItem>
@foreach (var item in TenantsService.DataSource)
Expand Down
2 changes: 1 addition & 1 deletion src/Server.UI/Pages/Identity/Users/Users.razor
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.SwitchAccount" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@Title</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@Title</MudText>
<MudSelect T="string" Style="min-width:120px" ValueChanged="OnChangedListView" Value="@_selectedTenantId" Dense="true" Label="@L["List View"]">
<MudSelectItem T="string" Value="@(" ")">@L["ALL"]</MudSelectItem>
@foreach (var item in TenantsService.DataSource)
Expand Down
2 changes: 1 addition & 1 deletion src/Server.UI/Pages/PicklistSets/PicklistSets.razor
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.ViewList" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@Title</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@Title</MudText>
<MudEnumSelect Style="min-width:120px" TEnum="PickListView" ValueChanged="OnChangedListView" Value="Query.ListView" Dense="true" Label="@L["List View"]">
</MudEnumSelect>
</MudStack>
Expand Down
4 changes: 3 additions & 1 deletion src/Server.UI/Pages/Products/Products.razor
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.QrCodeScanner" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@L[_currentDto.GetClassDescription()]</MudText>
<MudText Typo="Typo.caption">caption</MudText>
<MudText Typo="Typo.overline">overline</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@L[_currentDto.GetClassDescription()]</MudText>
<MudEnumSelect Style="min-width:120px" TEnum="ProductListView" ValueChanged="OnChangedListView" Value="Query.ListView" Dense="true" Label="@L["List View"]">
</MudEnumSelect>
</MudStack>
Expand Down
2 changes: 1 addition & 1 deletion src/Server.UI/Pages/SystemManagement/AuditTrails.razor
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.ReceiptLong" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@Title</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@Title</MudText>
<MudEnumSelect Style="min-width:120px" TEnum="AuditTrailListView" ValueChanged="OnChangedListView" Value="Query.ListView" Dense="true" Label="@L["List View"]">
</MudEnumSelect>
</MudStack>
Expand Down
2 changes: 1 addition & 1 deletion src/Server.UI/Pages/SystemManagement/Logs.razor
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.BarChart" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@Title</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@Title</MudText>
<MudEnumSelect Style="min-width:120px" TEnum="LogListView" ValueChanged="OnChangedListView" Value="Query.ListView" Dense="true" Label="@L["List View"]">
</MudEnumSelect>
</MudStack>
Expand Down
2 changes: 1 addition & 1 deletion src/Server.UI/Pages/Tenants/Tenants.razor
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<MudStack Row AlignItems="AlignItems.Start">
<MudIcon Icon="@Icons.Material.Filled.Domain" Size="Size.Large" />
<MudStack Spacing="0">
<MudText Typo="Typo.caption" Class="mb-2">@Title</MudText>
<MudText Typo="Typo.subtitle2" Class="mb-2">@Title</MudText>

</MudStack>
</MudStack>
Expand Down
11 changes: 10 additions & 1 deletion src/Server.UI/Services/Layout/LayoutService.cs
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@ public async Task ApplyUserPreferences(bool isDarkModeDefaultTheme)
CurrentTheme.Typography.Button.FontSize =
UserPreferences.ButtonFontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.Button.LineHeight = UserPreferences.ButtonLineHeight.ToString();
CurrentTheme.Typography.H5.FontSize =
UserPreferences.H5FontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.H6.FontSize =
UserPreferences.H6FontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.Body1.FontSize =
UserPreferences.Body1FontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";

Expand All @@ -95,6 +99,7 @@ public async Task ApplyUserPreferences(bool isDarkModeDefaultTheme)
CurrentTheme.Typography.Caption.LineHeight = UserPreferences.CaptionLineHeight.ToString();
CurrentTheme.Typography.Overline.FontSize =
UserPreferences.OverlineFontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.Overline.LineHeight = UserPreferences.OverlineLineHeight.ToString();
CurrentTheme.Typography.Subtitle1.FontSize =
UserPreferences.Subtitle1FontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.Subtitle2.FontSize =
Expand Down Expand Up @@ -259,7 +264,10 @@ public async Task UpdateUserPreferences(UserPreference preferences)
CurrentTheme.Typography.Button.LineHeight = UserPreferences.ButtonLineHeight.ToString();
CurrentTheme.Typography.Body1.FontSize =
UserPreferences.Body1FontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";

CurrentTheme.Typography.H5.FontSize =
UserPreferences.H5FontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.H6.FontSize =
UserPreferences.H6FontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.Body1.LineHeight = UserPreferences.Body1LineHeight.ToString();
CurrentTheme.Typography.Body1.LetterSpacing = UserPreferences.Body1LetterSpacing.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.Body2.FontSize =
Expand All @@ -272,6 +280,7 @@ public async Task UpdateUserPreferences(UserPreference preferences)
CurrentTheme.Typography.Caption.LineHeight = UserPreferences.CaptionLineHeight.ToString();
CurrentTheme.Typography.Overline.FontSize =
UserPreferences.OverlineFontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.Overline.LineHeight = UserPreferences.OverlineLineHeight.ToString();
CurrentTheme.Typography.Subtitle1.FontSize =
UserPreferences.Subtitle1FontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";
CurrentTheme.Typography.Subtitle2.FontSize =
Expand Down
15 changes: 9 additions & 6 deletions src/Server.UI/Services/UserPreferences/UserPreference.cs
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,24 @@ public class UserPreference
public string SecondaryColor { get; set; } = "#ff4081ff";
public double BorderRadius { get; set; } = 4;
public double DefaultFontSize { get; set; } = 0.8125;
public double LineHeight => Math.Min(1.7, Math.Max(1.3, 1.5 * (DefaultFontSize / 0.875)));
public double LineHeight => Math.Min(1.7, Math.Max(1.3, 1.43 * (DefaultFontSize / 0.875)));
public double LetterSpacing => 0.00938 * (DefaultFontSize / 0.875);

public double H6FontSize => DefaultFontSize + 0.185;
public double H5FontSize => DefaultFontSize + 0.435;
public double Body1FontSize => DefaultFontSize + 0.0625;
public double Body1LineHeight => LineHeight;
public double Body1LetterSpacing => LetterSpacing;
public double Body2FontSize => DefaultFontSize - 0.0625;
public double Body2LineHeight => LineHeight;
public double Body2LetterSpacing => LetterSpacing;
public double ButtonFontSize => DefaultFontSize;
public double ButtonLineHeight => 1.75 * (DefaultFontSize / 0.875);
public double CaptionFontSize => DefaultFontSize + 0.0625;
public double CaptionLineHeight => Math.Min(1.8, Math.Max(1.4, 1.66 * (DefaultFontSize / 0.75)));
public double OverlineFontSize => DefaultFontSize - 0.0625;
public double Subtitle1FontSize => DefaultFontSize + 0.1875;
public double ButtonLineHeight => Math.Min(2.15, Math.Max(1.5, 1.75 * (DefaultFontSize / 0.875)));
public double CaptionFontSize => DefaultFontSize - 0.1875;
public double CaptionLineHeight => Math.Min(1.8, Math.Max(1.3, 1.4 * (DefaultFontSize / 0.625)));
public double OverlineFontSize => DefaultFontSize - 0.1875;
public double OverlineLineHeight => Math.Min(2.0, Math.Max(1.5, 1.6 * (DefaultFontSize / 0.625)));
public double Subtitle1FontSize => DefaultFontSize + 0.125;
public double Subtitle2FontSize => DefaultFontSize - 0.0625;
public DarkLightMode DarkLightTheme { get; set; }

Expand Down
46 changes: 23 additions & 23 deletions src/Server.UI/Themes/Theme.cs
Original file line number Diff line number Diff line change
Expand Up @@ -89,44 +89,44 @@ public static MudTheme ApplicationTheme()
},
H1 = new H1Typography
{
FontSize = "3.5rem",
FontSize = "2.2rem",
FontWeight = "700",
LineHeight = "1.167",
LineHeight = "2.8",
LetterSpacing = "-.01562em"
},
H2 = new H2Typography
{
FontSize = "3rem",
FontWeight = "300",
LineHeight = "1.2",
FontSize = "2rem",
FontWeight = "600",
LineHeight = "2.5",
LetterSpacing = "-.00833em"
},
H3 = new H3Typography
{
FontSize = "2rem",
FontSize = "1.75rem",
FontWeight = "600",
LineHeight = "1.167",
LineHeight = "2.23",
LetterSpacing = "0"
},
H4 = new H4Typography
{
FontSize = "1.5rem",
FontWeight = "400",
LineHeight = "1.235",
FontWeight = "500",
LineHeight = "2",
LetterSpacing = ".00735em"
},
H5 = new H5Typography
{
FontSize = "1.25rem",
FontWeight = "400",
LineHeight = "1.3",
FontWeight = "500",
LineHeight = "1.8",
LetterSpacing = "0"
},
H6 = new H6Typography
{
FontSize = "1.125rem",
FontWeight = "600",
LineHeight = "1.5",
FontSize = "1rem",
FontWeight = "400",
LineHeight = "1.6",
LetterSpacing = ".0075em"
},
Button = new ButtonTypography
Expand All @@ -139,15 +139,15 @@ public static MudTheme ApplicationTheme()
},
Subtitle1 = new Subtitle1Typography
{
FontSize = ".8125rem",
FontSize = ".875rem",
FontWeight = "400",
LineHeight = "1.5",
LetterSpacing = "normal",
FontFamily = ["Public Sans", "Roboto", "Arial", "sans-serif"]
},
Subtitle2 = new Subtitle2Typography
{
FontSize = ".875rem",
FontSize = ".8125rem",
FontWeight = "500",
LineHeight = "1.57",
LetterSpacing = ".00714em"
Expand All @@ -161,23 +161,23 @@ public static MudTheme ApplicationTheme()
},
Body2 = new Body2Typography
{
FontSize = ".8125rem",
FontWeight = "400",
FontSize = ".75rem",
FontWeight = "300",
LineHeight = "1.43",
LetterSpacing = ".01071em"
},
Caption = new CaptionTypography
{
FontSize = ".75rem",
FontSize = "0.625rem",
FontWeight = "400",
LineHeight = "1.66",
LineHeight = "1.5",
LetterSpacing = ".03333em"
},
Overline = new OverlineTypography
{
FontSize = ".75rem",
FontWeight = "400",
LineHeight = "2.5",
FontSize = "0.625rem",
FontWeight = "300",
LineHeight = "2",
LetterSpacing = ".08333em"
}
},
Expand Down

0 comments on commit 4b213fb

Please sign in to comment.