Skip to content

Commit 266b6d7

Browse files
msynkmsynk
committed
improve MainLayout in Boilerplate #10976 
1 parent 2651572 commit 266b6d7

File tree

15 files changed

+329
-181
lines changed

15 files changed

+329
-181
lines changed

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/ProductImage.razor‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,4 @@
22
<img style="width:100%;height:auto;display:block;"
33
src="@(Src ?? $"_content/Boilerplate.Client.Core/images/car_placeholder_{((CurrentTheme ?? AppThemeType.Dark).ToString().ToLower())}.png")" />
44
@* src="@(Src ?? $"_content/Boilerplate.Client.Core/images/car_placeholder.png")" /> *@
5-
</div>
6-
7-
@code {
8-
[CascadingParameter(Name = Parameters.CurrentTheme)]
9-
public AppThemeType? CurrentTheme { get; set; }
10-
11-
[Parameter] public string? Src { get; set; }
12-
[Parameter] public string? Width { get; set; }
13-
[Parameter] public string? Class { get; set; }
14-
}
5+
</div>

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/ProductImage.razor.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace Boilerplate.Client.Core.Components.Common;
2+
3+
public partial class ProductImage
4+
{
5+
[CascadingParameter] public AppThemeType? CurrentTheme { get; set; }
6+
7+
[Parameter] public string? Src { get; set; }
8+
[Parameter] public string? Width { get; set; }
9+
[Parameter] public string? Class { get; set; }
10+
}

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppAiChatPanel.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
Variant="BitVariant.Outline"
1414
OnClick="() => isOpen = true"
1515
FloatPosition="BitPosition.BottomRight"
16-
IconUrl="@($"_content/Boilerplate.Client.Core/images/icons/ai-icon-{CurrentTheme?.ToString().ToLower()}.png")" />
16+
IconUrl="@(CurrentTheme.HasValue ? $"_content/Boilerplate.Client.Core/images/icons/ai-icon-{CurrentTheme?.ToString().ToLower()}.png" : null)" />
1717

1818
<BitProPanel ShowCloseButton
1919
@bind-IsOpen="isOpen"
@@ -39,7 +39,7 @@
3939
<Body>
4040
<BitStack Class="body">
4141
<BitScrollablePane FullSize
42-
AutoScroll
42+
AutoScroll
4343
Class="scr-container"
4444
ScrollbarWidth="BitScrollbarWidth.Thin">
4545
<BitStack>

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppAiChatPanel.razor.cs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ public partial class AppAiChatPanel
1010
{
1111
[CascadingParameter] public BitDir? CurrentDir { get; set; }
1212

13-
[CascadingParameter(Name = Parameters.CurrentTheme)]
14-
public AppThemeType? CurrentTheme { get; set; }
13+
[CascadingParameter] public AppThemeType? CurrentTheme { get; set; }
1514

1615

1716
[AutoInject] private HubConnection hubConnection = default!;

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppShell.razor‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@*+:cnd:noEmit*@
2+
@inherits AppComponentBase
3+
4+
<BitAppShell PersistScroll>
5+
<main class="@GetMainCssClass()">
6+
<div class="main-container">
7+
@if (IsIdentityPage is not true)
8+
{
9+
<BitNavPanel @bind-IsOpen="isNavPanelOpen"
10+
@bind-IsToggled="isNavPanelToggled"
11+
IconNavUrl="/"
12+
Class="nav-panel"
13+
Items="NavPanelItems"
14+
Accent="BitColor.SecondaryBackground"
15+
IconUrl="_content/Boilerplate.Client.Core/images/bit-logo.svg">
16+
<Footer>
17+
<BitStack Class="footer-stack">
18+
<AuthorizeView>
19+
<NotAuthorized>
20+
<BitActionButton IconOnly="isNavPanelToggled"
21+
IconName="@BitIconName.Signin"
22+
Href="@($"{Urls.SignInPage}?return-url={Uri.EscapeDataString(NavigationManager.GetRelativePath())}")">
23+
@(isNavPanelToggled ? "" : Localizer[nameof(AppStrings.SignIn)])
24+
</BitActionButton>
25+
<BitActionButton IconOnly="isNavPanelToggled"
26+
IconName="@BitIconName.UserWindow"
27+
OnClick="ModalSignIn">
28+
@(isNavPanelToggled ? "" : Localizer[nameof(AppStrings.SignInByModal)])
29+
</BitActionButton>
30+
<BitActionButton IconOnly="isNavPanelToggled"
31+
IconName="@BitIconName.AddFriend"
32+
Href="@($"{Urls.SignUpPage}?return-url={Uri.EscapeDataString(NavigationManager.GetRelativePath())}")">
33+
@(isNavPanelToggled ? "" : Localizer[nameof(AppStrings.SignUp)])
34+
</BitActionButton>
35+
</NotAuthorized>
36+
</AuthorizeView>
37+
@if (isNavPanelToggled is false)
38+
{
39+
<BitActionButton Class="app-version" OnClick="WrapHandled(UpdateApp)">
40+
<BitText Typography="BitTypography.Caption2">@TelemetryContext.AppVersion</BitText>
41+
</BitActionButton>
42+
}
43+
</BitStack>
44+
</Footer>
45+
</BitNavPanel>
46+
}
47+
48+
<div class="main-body">
49+
@if (IsIdentityPage is true)
50+
{
51+
<IdentityHeader />
52+
}
53+
54+
@if (IsIdentityPage is false)
55+
{
56+
<Header />
57+
}
58+
59+
<div class="body">
60+
@ChildContent
61+
</div>
62+
63+
@if (IsIdentityPage is true)
64+
{
65+
<div class="panel">
66+
<BitImage Width="70%" Src="_content/Boilerplate.Client.Core/images/identitylayout-image.webp" />
67+
</div>
68+
}
69+
</div>
70+
</div>
71+
72+
@if (IsIdentityPage is false or null)
73+
{
74+
<NavBar />
75+
}
76+
</main>
77+
</BitAppShell>

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppShell.razor.cs‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
//+:cnd:noEmit
2+
using Microsoft.AspNetCore.Components.Routing;
3+
4+
namespace Boilerplate.Client.Core.Components.Layout;
5+
6+
public partial class AppShell
7+
{
8+
[Parameter] public bool? IsIdentityPage { get; set; }
9+
[Parameter] public RenderFragment? ChildContent { get; set; }
10+
[Parameter] public List<BitNavItem> NavPanelItems { get; set; } = [];
11+
[Parameter] public bool IsNavPanelOpen { get; set; }
12+
13+
[AutoInject] private IAppUpdateService appUpdateService = default!;
14+
[AutoInject] private SignInModalService signInModalService = default!;
15+
16+
17+
private bool isNavPanelOpen;
18+
private bool isNavPanelToggled;
19+
private readonly List<Action> unsubscribers = [];
20+
21+
22+
protected override async Task OnInitAsync()
23+
{
24+
NavigationManager.LocationChanged += NavigationManager_LocationChanged;
25+
26+
unsubscribers.Add(PubSubService.Subscribe(ClientPubSubMessages.OPEN_NAV_PANEL, async _ =>
27+
{
28+
isNavPanelOpen = true;
29+
isNavPanelToggled = false;
30+
StateHasChanged();
31+
}));
32+
33+
unsubscribers.Add(PubSubService.Subscribe(ClientPubSubMessages.CLOSE_NAV_PANEL, async _ =>
34+
{
35+
isNavPanelOpen = false;
36+
isNavPanelToggled = false;
37+
StateHasChanged();
38+
}));
39+
}
40+
41+
42+
private string GetMainCssClass()
43+
{
44+
return IsIdentityPage is true ? "identity"
45+
: IsIdentityPage is false ? "non-identity"
46+
: string.Empty;
47+
}
48+
49+
private async Task ModalSignIn()
50+
{
51+
await signInModalService.SignIn();
52+
}
53+
54+
private async Task UpdateApp()
55+
{
56+
await appUpdateService.ForceUpdate();
57+
}
58+
59+
private void NavigationManager_LocationChanged(object? sender, LocationChangedEventArgs e)
60+
{
61+
// The sign-in and sign-up buttons href are bound to NavigationManager.GetRelativePath().
62+
// To ensure the bound values update with each route change, it's necessary to call StateHasChanged on location changes.
63+
StateHasChanged();
64+
}
65+
66+
protected override async ValueTask DisposeAsync(bool disposing)
67+
{
68+
if (disposing is false) return;
69+
70+
unsubscribers.ForEach(us => us.Invoke());
71+
72+
await base.DisposeAsync(disposing);
73+
}
74+
}

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppShell.razor.scss‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@import '../../Styles/abstracts/_media-queries.scss';
2+
@import '../../Styles/abstracts/_bit-css-variables.scss';
3+
4+
main {
5+
width: 100%;
6+
min-height: 100%;
7+
8+
@include lt-md {
9+
height: unset;
10+
min-height: $bit-env-height-available;
11+
}
12+
13+
.main-container {
14+
display: flex;
15+
}
16+
17+
.main-body {
18+
display: flex;
19+
width: calc(100% - 280px);
20+
21+
@include lt-md {
22+
width: 100%;
23+
}
24+
}
25+
26+
&.identity {
27+
.main-container {
28+
width: 100%;
29+
height: 100%;
30+
flex-direction: column;
31+
}
32+
33+
.main-body {
34+
width: auto;
35+
flex-grow: 1;
36+
flex-direction: row;
37+
}
38+
39+
.body {
40+
width: 30%;
41+
padding: 4rem;
42+
min-width: 35rem;
43+
padding-top: 5rem;
44+
background-color: $bit-color-background-secondary;
45+
border-inline-end: 1px solid $bit-color-border-secondary;
46+
47+
@include lt-md {
48+
width: 100%;
49+
border: none;
50+
min-width: unset;
51+
padding-inline: 1rem;
52+
background-color: $bit-color-background-primary;
53+
}
54+
}
55+
56+
.panel {
57+
width: 70%;
58+
height: 100%;
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
63+
@include lt-md {
64+
display: none;
65+
}
66+
}
67+
}
68+
69+
&.non-identity {
70+
.main-container {
71+
width: auto;
72+
height: auto;
73+
flex-direction: row;
74+
}
75+
76+
.main-body {
77+
flex-grow: 1;
78+
flex-direction: column;
79+
80+
@include lt-md {
81+
gap: 1rem;
82+
}
83+
84+
@include lt-sm {
85+
gap: 0;
86+
}
87+
}
88+
89+
.body {
90+
width: 100%;
91+
height: 100%;
92+
padding: 1rem;
93+
background-color: $bit-color-background-primary;
94+
95+
@include lt-md {
96+
height: unset;
97+
padding-bottom: 4.5rem;
98+
}
99+
}
100+
}
101+
}
102+
103+
::deep {
104+
.validation-message {
105+
font-size: 12px;
106+
text-align: start;
107+
line-height: 16px;
108+
color: $bit-color-error;
109+
}
110+
111+
.nav-panel {
112+
width: 280px;
113+
114+
@include lt-md {
115+
width: 210px;
116+
}
117+
}
118+
119+
.footer-stack {
120+
position: relative;
121+
}
122+
123+
.app-version {
124+
position: absolute;
125+
inset-block-end: 0;
126+
inset-inline-end: 0;
127+
}
128+
}

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header/AppMenu.razor.cs‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@ public partial class AppMenu
88
{
99
[CascadingParameter] public BitDir? CurrentDir { get; set; }
1010

11-
[CascadingParameter(Name = Parameters.CurrentTheme)]
12-
public AppThemeType? CurrentTheme { get; set; }
11+
[CascadingParameter] public UserDto? CurrentUser { get; set; }
1312

14-
[CascadingParameter(Name = Parameters.CurrentUser)]
15-
public UserDto? CurrentUser { get; set; }
13+
[CascadingParameter] public AppThemeType? CurrentTheme { get; set; }
1614

1715

1816
[AutoInject] private Cookie cookie = default!;

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header/IdentityHeader.razor.cs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ public partial class IdentityHeader : AppComponentBase
44
{
55
[CascadingParameter] public BitDir? CurrentDir { get; set; }
66

7-
[CascadingParameter(Name = Parameters.CurrentTheme)]
8-
public AppThemeType? CurrentTheme { get; set; }
7+
[CascadingParameter] public AppThemeType? CurrentTheme { get; set; }
98

109

1110
[AutoInject] private History history = default!;

0 commit comments

Comments
 (0)