Browse Source

fix: update layout and styling for improved user experience across various components

feat/mudblazor
maliming 4 days ago
parent
commit
451ace3bb8
No known key found for this signature in database GPG Key ID: A646B9CB645ECEA4
  1. 2
      modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/MainLayout.razor
  2. 17
      modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureSettingGroup/FeatureSettingManagementComponent.razor
  3. 30
      modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor
  4. 5
      modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/SettingManagement.razor
  5. 16
      modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/TimeZoneSettingGroup/TimeZoneSettingGroupViewComponent.razor
  6. 2
      templates/app-nolayers/aspnet-core/MyCompanyName.MyProjectName.Blazor.Server.Mongo/Components/App.razor
  7. 2
      templates/app-nolayers/aspnet-core/MyCompanyName.MyProjectName.Blazor.Server/Components/App.razor
  8. 2
      templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Components/App.razor
  9. 2
      templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/Components/App.razor
  10. 2
      templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp.Tiered/Components/App.razor
  11. 2
      templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp/Components/App.razor
  12. 12
      templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/App.razor

2
modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.MudBlazorBasicTheme/Themes/Basic/MainLayout.razor

@ -25,7 +25,7 @@
<NavMenu /> <NavMenu />
</MudDrawer> </MudDrawer>
<MudMainContent Class="pt-0"> <MudMainContent>
<MudContainer MaxWidth="MaxWidth.False" Class="pa-4"> <MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
<PageAlert /> <PageAlert />
<LayoutHook Name="@LayoutHooks.Body.First" Layout="@StandardLayouts.Application" /> <LayoutHook Name="@LayoutHooks.Body.First" Layout="@StandardLayouts.Application" />

17
modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureSettingGroup/FeatureSettingManagementComponent.razor

@ -3,16 +3,13 @@
@if (Settings != null && Settings.HasManageHostFeaturesPermission) @if (Settings != null && Settings.HasManageHostFeaturesPermission)
{ {
<MudForm> <MudText Typo="Typo.body1" Class="mb-3">@L["ManageHostFeaturesText"]</MudText>
<MudText Typo="Typo.body1" Class="mb-3">@L["ManageHostFeaturesText"]</MudText> <MudButton Color="Color.Primary"
<MudButton Size="Size.Small" Variant="Variant.Filled"
Color="Color.Primary" StartIcon="@Icons.Material.Filled.Settings"
Variant="Variant.Filled" OnClick="@OnManageHostFeaturesClicked">
StartIcon="@Icons.Material.Filled.Settings" @L["ManageHostFeatures"]
OnClick="@OnManageHostFeaturesClicked"> </MudButton>
@L["ManageHostFeatures"]
</MudButton>
</MudForm>
<FeatureManagementModal @ref="FeatureManagementModal"/> <FeatureManagementModal @ref="FeatureManagementModal"/>
} }

30
modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor

@ -54,24 +54,22 @@
</MudGrid> </MudGrid>
</MudForm> </MudForm>
<MudDivider Class="my-3" /> <MudDivider Class="my-3" />
<MudGrid> <div class="d-flex justify-end mt-3">
<MudItem xs="12"> @if (HasSendTestEmailPermission)
@if (HasSendTestEmailPermission) {
{
<MudButton Color="Color.Primary"
Variant="Variant.Outlined"
OnClick="@OpenSendTestEmailDialogAsync"
Class="me-2">
@L["SendTestEmail"]
</MudButton>
}
<MudButton Color="Color.Primary" <MudButton Color="Color.Primary"
Variant="Variant.Filled" Variant="Variant.Outlined"
OnClick="@UpdateSettingsAsync"> OnClick="@OpenSendTestEmailDialogAsync"
@L["Save"] Class="me-2">
@L["SendTestEmail"]
</MudButton> </MudButton>
</MudItem> }
</MudGrid> <MudButton Color="Color.Primary"
Variant="Variant.Filled"
OnClick="@UpdateSettingsAsync">
@L["Save"]
</MudButton>
</div>
@if (HasSendTestEmailPermission) @if (HasSendTestEmailPermission)
{ {

5
modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/SettingManagement.razor

@ -19,11 +19,12 @@
<MudTabs @bind-ActivePanelIndex="@_activeTabIndex" <MudTabs @bind-ActivePanelIndex="@_activeTabIndex"
Variant="Variant.Pills" Variant="Variant.Pills"
Position="Position.Left" Position="Position.Left"
PanelClass="pa-4"> PanelClass="pa-4 overflow-auto"
Style="min-width: 0; overflow: hidden;">
@foreach (var group in SettingComponentCreationContext.Groups) @foreach (var group in SettingComponentCreationContext.Groups)
{ {
<MudTabPanel Text="@group.DisplayName"> <MudTabPanel Text="@group.DisplayName">
<div class="abp-md-form" style="width: 100%"> <div style="width: 100%">
@{ @{
SettingItemRenders.Add(builder => SettingItemRenders.Add(builder =>
{ {

16
modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/TimeZoneSettingGroup/TimeZoneSettingGroupViewComponent.razor

@ -21,14 +21,12 @@
<MudText Typo="Typo.caption" Class="mt-1">@L["TimezoneHelpText"]</MudText> <MudText Typo="Typo.caption" Class="mt-1">@L["TimezoneHelpText"]</MudText>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
<MudGrid> <div class="d-flex justify-end mt-3">
<MudItem xs="12"> <MudButton Color="Color.Primary"
<MudButton Color="Color.Primary" Variant="Variant.Filled"
Variant="Variant.Filled" OnClick="@UpdateSettingsAsync">
OnClick="@UpdateSettingsAsync"> @L["Save"]
@L["Save"] </MudButton>
</MudButton> </div>
</MudItem>
</MudGrid>
</MudForm> </MudForm>
} }

2
templates/app-nolayers/aspnet-core/MyCompanyName.MyProjectName.Blazor.Server.Mongo/Components/App.razor

@ -3,7 +3,6 @@
@using Microsoft.Extensions.Hosting @using Microsoft.Extensions.Hosting
@using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
@inject IHostEnvironment Env @inject IHostEnvironment Env
@{ @{
var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty; var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@ -19,7 +18,6 @@
<base href="/" /> <base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
<AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" /> <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" />
<HeadOutlet @rendermode="InteractiveServer" /> <HeadOutlet @rendermode="InteractiveServer" />

2
templates/app-nolayers/aspnet-core/MyCompanyName.MyProjectName.Blazor.Server/Components/App.razor

@ -3,7 +3,6 @@
@using Microsoft.Extensions.Hosting @using Microsoft.Extensions.Hosting
@using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
@inject IHostEnvironment Env @inject IHostEnvironment Env
@{ @{
var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty; var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@ -19,7 +18,6 @@
<base href="/" /> <base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
<AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" /> <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" />
<HeadOutlet @rendermode="InteractiveServer" /> <HeadOutlet @rendermode="InteractiveServer" />

2
templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Components/App.razor

@ -3,7 +3,6 @@
@using Microsoft.Extensions.Hosting @using Microsoft.Extensions.Hosting
@using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
@inject IHostEnvironment Env @inject IHostEnvironment Env
@{ @{
var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty; var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@ -19,7 +18,6 @@
<base href="/" /> <base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
<AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" /> <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" />
<HeadOutlet @rendermode="InteractiveServer" /> <HeadOutlet @rendermode="InteractiveServer" />

2
templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/Components/App.razor

@ -3,7 +3,6 @@
@using Microsoft.Extensions.Hosting @using Microsoft.Extensions.Hosting
@using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
@inject IHostEnvironment Env @inject IHostEnvironment Env
@{ @{
var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty; var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@ -19,7 +18,6 @@
<base href="/" /> <base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
<AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" /> <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" />
<HeadOutlet @rendermode="InteractiveServer" /> <HeadOutlet @rendermode="InteractiveServer" />

2
templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp.Tiered/Components/App.razor

@ -6,7 +6,6 @@
@using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
@using Volo.Abp.AspNetCore.Components.WebAssembly.WebApp @using Volo.Abp.AspNetCore.Components.WebAssembly.WebApp
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
@inject IHostEnvironment Env @inject IHostEnvironment Env
@{ @{
var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty; var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@ -22,7 +21,6 @@
<base href="/" /> <base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
<AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" WebAssemblyStyleFiles="GlobalStyles" /> <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" WebAssemblyStyleFiles="GlobalStyles" />
<HeadOutlet @rendermode="InteractiveAuto" /> <HeadOutlet @rendermode="InteractiveAuto" />

2
templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp/Components/App.razor

@ -3,7 +3,6 @@
@using Microsoft.Extensions.Hosting @using Microsoft.Extensions.Hosting
@using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling @using Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme.Bundling
@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Bundling
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling
@inject IHostEnvironment Env @inject IHostEnvironment Env
@{ @{
var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty; var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
@ -19,7 +18,6 @@
<base href="/" /> <base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<AbpStyles BundleName="@LeptonXLiteThemeBundles.Styles.Global" />
<AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" WebAssemblyStyleFiles="GlobalStyles" /> <AbpStyles BundleName="@BlazorMudBlazorBasicThemeBundles.Styles.Global" WebAssemblyStyleFiles="GlobalStyles" />
<HeadOutlet @rendermode="InteractiveAuto" /> <HeadOutlet @rendermode="InteractiveAuto" />

12
templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/App.razor

@ -21,14 +21,18 @@
<HeadOutlet @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" /> <HeadOutlet @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
</head> </head>
<body class="abp-application-layout bg-light"> <body>
<script src="_framework/blazor.web.js"></script> <script src="_framework/blazor.web.js"></script>
<div id="ApplicationContainer"> <div id="ApplicationContainer">
<div class="spinner"> <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div class="double-bounce1"></div> <svg width="48" height="48" viewBox="0 0 44 44" stroke="currentColor" style="color: #5c4fd1;">
<div class="double-bounce2"></div> <g fill="none" fill-rule="evenodd" stroke-width="2">
<circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /></circle>
<circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /></circle>
</g>
</svg>
</div> </div>
<Routes @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)"/> <Routes @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)"/>

Loading…
Cancel
Save