From d595c55316be53f0864e1b7f0bde2f5e562a8c34 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Wed, 11 Dec 2024 13:47:32 +0330 Subject: [PATCH 01/16] improve AutoLoading of BitButton #9449 --- .../Buttons/BitButton/BitButton.razor.cs | 16 ++++++-- .../Components/Buttons/BitButtonDemo.razor | 10 ++++- .../Components/Buttons/BitButtonDemo.razor.cs | 40 +++++++++++++++++-- .../Buttons/BitButtonDemo.razor.samples.cs | 33 ++++++++++++++- 4 files changed, 90 insertions(+), 9 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs index 5cf6327f0a..236253a48c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs @@ -33,7 +33,7 @@ public partial class BitButton : BitComponentBase [Parameter] public bool AriaHidden { get; set; } /// - /// If true, shows the loading state while the OnClick event is in progress. + /// If true, enters the loading state automatically while awaiting the OnClick event and prevents subsequent clicks by default. /// [Parameter] public bool AutoLoading { get; set; } @@ -134,9 +134,9 @@ public partial class BitButton : BitComponentBase [Parameter] public RenderFragment? LoadingTemplate { get; set; } /// - /// The callback for the click event of the button. + /// The callback for the click event of the button with a bool argument passing the current loading state. /// - [Parameter] public EventCallback OnClick { get; set; } + [Parameter] public EventCallback OnClick { get; set; } /// /// The content of the primary section of the button (alias of the ChildContent). @@ -144,6 +144,11 @@ public partial class BitButton : BitComponentBase [Parameter, ResetClassBuilder] public RenderFragment? PrimaryTemplate { get; set; } + /// + /// Enables re-clicking in loading state when AutoLoading is enabled. + /// + [Parameter] public bool Reclickable { get; set; } + /// /// Reverses the positions of the icon and the main content of the button. /// @@ -306,13 +311,16 @@ private string GetLabelPositionClass() private async Task HandleOnClick(MouseEventArgs e) { if (IsEnabled is false) return; + if (AutoLoading && IsLoading && Reclickable is false) return; + var isLoading = IsLoading; + if (AutoLoading) { if (await AssignIsLoading(true) is false) return; } - await OnClick.InvokeAsync(e); + await OnClick.InvokeAsync(isLoading); await AssignIsLoading(false); } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor index 9911e939d8..5eb638ec00 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor @@ -131,7 +131,15 @@


AutoLoading:

- Click me +
+ Click me +
AutoLoading click count: @autoLoadCount
+
+
+
+ Reclickable +
Reclickable AutoLoading click count: @reclickableAutoLoadCount
+
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs index 04aa165f4c..9501fc5042 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs @@ -30,7 +30,7 @@ public partial class BitButtonDemo Name = "AutoLoading", Type = "bool", DefaultValue = "false", - Description = "If true, shows the loading state while the OnClick event is in progress.", + Description = "If true, enters the loading state automatically while awaiting the OnClick event and prevents subsequent clicks by default.", }, new() { @@ -166,16 +166,23 @@ public partial class BitButtonDemo Name = "OnClick", Type = "EventCallback", DefaultValue = "", - Description = "The callback for the click event of the button.", + Description = "The callback for the click event of the button with a bool argument passing the current loading state.", }, new() { Name = "PrimaryTemplate", Type = "RenderFragment?", - DefaultValue="", + DefaultValue = "", Description = "The content of the primary section of the button (alias of the ChildContent).", }, new() + { + Name = "Reclickable", + Type = "bool", + DefaultValue = "false", + Description = "Enables re-clicking in loading state when AutoLoading is enabled.", + }, + new() { Name = "ReversedIcon", Type = "bool", @@ -727,11 +734,38 @@ private async Task LoadingTextClick() textIsLoading = false; } + private int autoLoadCount; private async Task AutoLoadingClick() { + autoLoadCount++; await Task.Delay(3000); } + private int reclickableAutoLoadCount; + private TaskCompletionSource clickTsc = new(); + private CancellationTokenSource delayCts = new(); + private Task AutoLoadingReclick(bool isLoading) + { + if (isLoading) + { + clickTsc.TrySetException(new TaskCanceledException()); + delayCts.Cancel(); + } + + delayCts = new(); + clickTsc = new(); + + reclickableAutoLoadCount++; + + _ = Task.Delay(3000, delayCts.Token).ContinueWith(async delayTask => + { + await delayTask; + clickTsc.TrySetResult(); + }); + + return clickTsc.Task; + } + private async Task LoadingStylesClick() { diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.samples.cs index 053421653b..af7c152547 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.samples.cs @@ -77,7 +77,11 @@ Click me -Click me"; +Click me +
AutoLoading click count: @autoLoadCount
+ +Reclickable +
Reclickable AutoLoading click count: @reclickableAutoLoadCount
"; private readonly string example5CsharpCode = @" private bool fillIsLoading; private bool outlineIsLoading; @@ -104,9 +108,36 @@ private async Task LoadingTextClick() textIsLoading = false; } +private int autoLoadCount; private async Task AutoLoadingClick() { + autoLoadCount++; await Task.Delay(3000); +} + +private int reclickableAutoLoadCount; +private TaskCompletionSource clickTsc = new(); +private CancellationTokenSource delayCts = new(); +private Task AutoLoadingReclick(bool isLoading) +{ + if (isLoading) + { + clickTsc.TrySetException(new TaskCanceledException()); + delayCts.Cancel(); + } + + delayCts = new(); + clickTsc = new(); + + reclickableAutoLoadCount++; + + _ = Task.Delay(3000, delayCts.Token).ContinueWith(async delayTask => + { + await delayTask; + clickTsc.TrySetResult(); + }); + + return clickTsc.Task; }"; private readonly string example6RazorCode = @" From 4050f8b48975d4734f8f2fa67f91c7f10328f9be Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Wed, 11 Dec 2024 14:22:37 +0330 Subject: [PATCH 02/16] add missing autoloading check --- .../Components/Buttons/BitButton/BitButton.razor.cs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs index 236253a48c..b0fe05e744 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs @@ -314,7 +314,7 @@ private async Task HandleOnClick(MouseEventArgs e) if (AutoLoading && IsLoading && Reclickable is false) return; var isLoading = IsLoading; - + if (AutoLoading) { if (await AssignIsLoading(true) is false) return; @@ -322,7 +322,10 @@ private async Task HandleOnClick(MouseEventArgs e) await OnClick.InvokeAsync(isLoading); - await AssignIsLoading(false); + if (AutoLoading) + { + await AssignIsLoading(false); + } } private void OnSetHrefAndRel() From 8b645d9bc4d8ae0c84adcb6227f0038d785488a6 Mon Sep 17 00:00:00 2001 From: ysmoradi Date: Wed, 11 Dec 2024 11:53:23 +0100 Subject: [PATCH 03/16] Fix several small issues in Boilerplate (#9451) --- .../Components/Layout/IdentityHeader.razor | 6 +++--- .../Components/Pages/AppPageBase.cs | 2 +- .../Authorized/Products/AddOrEditProductModal.razor | 1 + .../Pages/Authorized/Settings/ProfileSection.razor | 4 ++-- .../Pages/Authorized/Settings/ProfileSection.razor.cs | 5 +++++ .../Pages/Authorized/Settings/SessionsSection.razor | 5 +++-- .../Pages/Authorized/Settings/TwoFactorSection.razor | 10 +++++----- .../Pages/Identity/Components/SocialRow.razor | 11 +++++++---- .../Components/Pages/Identity/ConfirmPage.razor.cs | 6 ++++-- .../Pages/Identity/SignIn/SignInPanel.razor | 4 ++-- .../Pages/Identity/SignIn/SignInPanel.razor.cs | 3 +++ .../Components/Pages/Identity/SignUp/SignUpPage.razor | 4 ++-- .../Pages/Identity/SignUp/SignUpPage.razor.cs | 11 ++++++++--- .../Components/Pages/NotAuthorizedPage.razor | 3 ++- .../Components/Pages/NotAuthorizedPage.razor.cs | 4 ++-- .../Extensions/NavigationManagerExtensions.cs | 5 +++++ .../Identity/IdentityController.EmailConfirmation.cs | 8 +++++--- .../Identity/IdentityController.PhoneConfirmation.cs | 1 - .../Controllers/Identity/IdentityController.cs | 2 +- .../src/Shared/Dtos/Identity/SignUpRequestDto.cs | 3 +++ 20 files changed, 64 insertions(+), 34 deletions(-) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor index da0914fb06..c3e2454f23 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor @@ -1,13 +1,13 @@ -@inherits AppComponentBase +@inherits AppComponentBase
@if (isCrossLayoutPage is true) { - + @Localizer[nameof(AppStrings.SignUp)] - + @Localizer[nameof(AppStrings.SignIn)] } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs index 1434a202ae..5ea2a4566d 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs @@ -20,7 +20,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { // Because Blazor router doesn't support regex, the '/{culture?}/' captures some irrelevant routes // such as non existing routes like /some-invalid-url, we need to make sure that the first segment of the route is a valid culture name. - NavigationManager.NavigateTo($"{Urls.NotFoundPage}?url={NavigationManager.ToBaseRelativePath(NavigationManager.Uri)}", replace: true); + NavigationManager.NavigateTo($"{Urls.NotFoundPage}?url={NavigationManager.GetCurrentRoute()}", replace: true); } } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Products/AddOrEditProductModal.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Products/AddOrEditProductModal.razor index 6d176d1122..b917047bc6 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Products/AddOrEditProductModal.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Products/AddOrEditProductModal.razor @@ -36,6 +36,7 @@ + @Localizer[nameof(AppStrings.Remove)] } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ProfileSection.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ProfileSection.razor.cs index d2be669f85..6bc1b0e665 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ProfileSection.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ProfileSection.razor.cs @@ -70,6 +70,7 @@ private async Task SaveProfile() private async Task RemoveProfileImage() { if (isSaving || User is null) return; + isSaving = true; try { @@ -83,6 +84,10 @@ private async Task RemoveProfileImage() { SnackBarService.Error(e.Message); } + finally + { + isSaving = false; + } } private async Task HandleOnUploadComplete() diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SessionsSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SessionsSection.razor index aa40f2f5a2..49a04564fd 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SessionsSection.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SessionsSection.razor @@ -52,9 +52,10 @@ CoinColor="@(session.Privileged ? null : BitColor.TertiaryBackground)" ImageUrl="@($"/_content/Boilerplate.Client.Core/images/os/{GetImageUrl(session.DeviceInfo)}")" /> - diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/TwoFactorSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/TwoFactorSection.razor index 4342b07bd7..e3385f513a 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/TwoFactorSection.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/TwoFactorSection.razor @@ -1,4 +1,4 @@ -@inherits AppComponentBase +@inherits AppComponentBase
@@ -48,7 +48,7 @@ Label="@Localizer[nameof(AppStrings.TfaConfigureAutAppVerificationCodeLabel)]" Placeholder="@Localizer[nameof(AppStrings.TfaConfigureAutAppVerificationCodePlaceholder)]" />
- + @Localizer[nameof(AppStrings.TfaConfigureAutAppVerifyButtonText)] @@ -87,7 +87,7 @@ @Localizer[nameof(AppStrings.TfaRecoveryCodesGenerateWraning)] - + @Localizer[nameof(AppStrings.TfaRecoveryCodesGenerateButtonText)] } @@ -128,7 +128,7 @@

@Localizer[nameof(AppStrings.TfaAuthAppWarning)]

- + @Localizer[nameof(AppStrings.TfaAuthAppResetKeyButtonText)] @@ -141,7 +141,7 @@

@Localizer[nameof(AppStrings.TfaDisable2faWarning)]

- + @Localizer[nameof(AppStrings.TfaDisable2faButtonText)] diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/SocialRow.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/SocialRow.razor index 8eb8079a6e..1baba50b61 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/SocialRow.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/SocialRow.razor @@ -1,8 +1,9 @@ -@inherits AppComponentBase +@inherits AppComponentBase
- - - await AuthManager.StoreTokens(signInResponse, true); - NavigationManager.NavigateTo(Urls.HomePage, replace: true); + NavigationManager.NavigateTo(ReturnUrlQueryString ?? Urls.HomePage, replace: true); isEmailConfirmed = true; }); @@ -116,7 +118,7 @@ await WrapRequest(async () => await AuthManager.StoreTokens(signInResponse, true); - NavigationManager.NavigateTo(Urls.HomePage, replace: true); + NavigationManager.NavigateTo(ReturnUrlQueryString ?? Urls.HomePage, replace: true); isPhoneConfirmed = true; }); diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor index b621dbc922..9a31e2fac4 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor @@ -1,4 +1,4 @@ -@inherits AppComponentBase +@inherits AppComponentBase
@@ -78,7 +78,7 @@ @Localizer[nameof(AppStrings.DontHaveAccountMessage)] - @Localizer[nameof(AppStrings.SignUp)] + @Localizer[nameof(AppStrings.SignUp)] diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor.cs index 81ebf4b076..2488018b56 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor.cs @@ -14,6 +14,9 @@ public partial class SignInPanel [Parameter] public EventCallback OnTabChange { get; set; } + [Parameter, SupplyParameterFromQuery(Name = "return-url")] + public string? ReturnUrlQueryString { get; set; } + private const string EmailKey = nameof(EmailKey); private const string PhoneKey = nameof(PhoneKey); diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor index 5fe4d9240f..97eabfb526 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor @@ -76,9 +76,9 @@
@Localizer[nameof(AppStrings.SignInMessageInSignUp)] - @Localizer[nameof(AppStrings.SignIn)] + @Localizer[nameof(AppStrings.SignIn)] @Localizer[nameof(AppStrings.Or)] - + @Localizer[nameof(AppStrings.Confirm)] diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor.cs index 9d3068a43d..436fa869d1 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor.cs @@ -6,15 +6,16 @@ namespace Boilerplate.Client.Core.Components.Pages.Identity.SignUp; public partial class SignUpPage { + [Parameter, SupplyParameterFromQuery(Name = "return-url")] + public string? ReturnUrlQueryString { get; set; } + private bool isWaiting; private readonly SignUpRequestDto signUpModel = new() { UserName = Guid.NewGuid().ToString() }; - [AutoInject] private ILocalHttpServer localHttpServer = default!; [AutoInject] private IIdentityController identityController = default!; [AutoInject] private IExternalNavigationService externalNavigationService = default!; - private async Task DoSignUp() { if (isWaiting) return; @@ -29,6 +30,7 @@ private async Task DoSignUp() signUpModel.GoogleRecaptchaResponse = googleRecaptchaResponse; //#endif + signUpModel.ReturnUrl = ReturnUrlQueryString ?? Urls.HomePage; isWaiting = true; @@ -36,7 +38,10 @@ private async Task DoSignUp() { await identityController.SignUp(signUpModel, CurrentCancellationToken); - var queryParams = new Dictionary(); + var queryParams = new Dictionary + { + { "return-url", ReturnUrlQueryString } + }; if (string.IsNullOrEmpty(signUpModel.Email) is false) { queryParams.Add("email", signUpModel.Email); diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor index 099663cb4d..2a0f1c29e8 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor @@ -31,7 +31,8 @@ else } - @Localizer[nameof(AppStrings.SignInAsDifferentUser)] diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.cs index c9116573b9..f5bd5e5e4b 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.cs @@ -43,7 +43,7 @@ protected override async Task OnAfterFirstRenderAsync() private async Task SignOut() { await AuthManager.SignOut(CurrentCancellationToken); - var returnUrl = ReturnUrl ?? NavigationManager.ToBaseRelativePath(NavigationManager.Uri); + var returnUrl = ReturnUrl ?? NavigationManager.GetCurrentRoute(); NavigationManager.NavigateTo(Urls.SignInPage + (string.IsNullOrEmpty(returnUrl) ? string.Empty : $"?return-url={returnUrl}")); } } @@ -57,7 +57,7 @@ protected override async Task OnAfterFirstRenderAsync() await base.OnAfterFirstRenderAsync(); await AuthManager.SignOut(CurrentCancellationToken); - var returnUrl = ReturnUrl ?? NavigationManager.ToBaseRelativePath(NavigationManager.Uri); + var returnUrl = ReturnUrl ?? NavigationManager.GetCurrentRoute(); NavigationManager.NavigateTo(Urls.SignInPage + (string.IsNullOrEmpty(returnUrl) ? string.Empty : $"?return-url={returnUrl}")); } } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs index 6b7e621f42..1987ae830a 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs @@ -11,4 +11,9 @@ public static string GetUriPath(this NavigationManager navigationManager) { return new Uri(navigationManager.Uri).GetPath(); } + + public static string GetCurrentRoute(this NavigationManager navigationManager) + { + return navigationManager.ToBaseRelativePath(navigationManager.Uri); + } } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.EmailConfirmation.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.EmailConfirmation.cs index bb6150abd9..15e8030ba9 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.EmailConfirmation.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.EmailConfirmation.cs @@ -19,7 +19,7 @@ public async Task SendConfirmEmailToken(SendEmailTokenRequestDto request, Cancel if (await userManager.IsEmailConfirmedAsync(user)) throw new BadRequestException(Localizer[nameof(AppStrings.EmailAlreadyConfirmed)]); - await SendConfirmEmailToken(user, cancellationToken); + await SendConfirmEmailToken(user, returnUrl: null, cancellationToken); } [HttpPost, Produces()] @@ -61,8 +61,10 @@ public async Task ConfirmEmail(ConfirmEmailRequestDto request, CancellationToken } - private async Task SendConfirmEmailToken(User user, CancellationToken cancellationToken) + private async Task SendConfirmEmailToken(User user, string? returnUrl, CancellationToken cancellationToken) { + returnUrl ??= Urls.HomePage; + var resendDelay = (DateTimeOffset.Now - user.EmailTokenRequestedOn) - AppSettings.Identity.EmailTokenLifetime; if (resendDelay < TimeSpan.Zero) @@ -76,7 +78,7 @@ private async Task SendConfirmEmailToken(User user, CancellationToken cancellati var email = user.Email!; var token = await userManager.GenerateUserTokenAsync(user, TokenOptions.DefaultPhoneProvider, FormattableString.Invariant($"VerifyEmail:{email},{user.EmailTokenRequestedOn?.ToUniversalTime()}")); - var link = new Uri(HttpContext.Request.GetWebClientUrl(), $"{Urls.ConfirmPage}?email={Uri.EscapeDataString(email)}&emailToken={Uri.EscapeDataString(token)}&culture={CultureInfo.CurrentUICulture.Name}"); + var link = new Uri(HttpContext.Request.GetWebClientUrl(), $"{Urls.ConfirmPage}?email={Uri.EscapeDataString(email)}&emailToken={Uri.EscapeDataString(token)}&culture={CultureInfo.CurrentUICulture.Name}&return-url={returnUrl}"); await emailService.SendEmailToken(user, email, token, link, cancellationToken); } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.PhoneConfirmation.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.PhoneConfirmation.cs index a1b368ad16..1db25ddd3d 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.PhoneConfirmation.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.PhoneConfirmation.cs @@ -77,7 +77,6 @@ private async Task SendConfirmPhoneToken(User user, CancellationToken cancellati var phoneNumber = user.PhoneNumber!; var token = await userManager.GenerateUserTokenAsync(user, TokenOptions.DefaultPhoneProvider, FormattableString.Invariant($"VerifyPhoneNumber:{phoneNumber},{user.PhoneNumberTokenRequestedOn?.ToUniversalTime()}")); - var link = new Uri(HttpContext.Request.GetWebClientUrl(), $"{Urls.ConfirmPage}?phoneNumber={Uri.EscapeDataString(phoneNumber!)}&phoneToken={Uri.EscapeDataString(token)}&culture={CultureInfo.CurrentUICulture.Name}"); await phoneService.SendSms(Localizer[nameof(AppStrings.ConfirmPhoneTokenSmsText), token], phoneNumber, cancellationToken); } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.cs index 0df4e38872..3edd135389 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.cs @@ -78,7 +78,7 @@ public async Task SignUp(SignUpRequestDto request, CancellationToken cancellatio if (string.IsNullOrEmpty(userToAdd.Email) is false) { - await SendConfirmEmailToken(userToAdd, cancellationToken); + await SendConfirmEmailToken(userToAdd, request.ReturnUrl, cancellationToken); } if (string.IsNullOrEmpty(userToAdd.PhoneNumber) is false) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Identity/SignUpRequestDto.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Identity/SignUpRequestDto.cs index 2e80ee5827..7a0eaadd1b 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Identity/SignUpRequestDto.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Identity/SignUpRequestDto.cs @@ -20,6 +20,9 @@ public partial class SignUpRequestDto : IdentityRequestDto public string? GoogleRecaptchaResponse { get; set; } //#endif + /// / + public string? ReturnUrl { get; set; } = Urls.HomePage; + public override IEnumerable Validate(ValidationContext validationContext) { if (string.IsNullOrEmpty(Email) && string.IsNullOrEmpty(PhoneNumber)) From b634ce010bbc332a3ddccb3ca6d19f83c3053dde Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Wed, 11 Dec 2024 14:25:57 +0330 Subject: [PATCH 04/16] fix review comments --- .../Pages/Components/Buttons/BitButtonDemo.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs index 9501fc5042..f2fd7c3618 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs @@ -164,7 +164,7 @@ public partial class BitButtonDemo new() { Name = "OnClick", - Type = "EventCallback", + Type = "EventCallback", DefaultValue = "", Description = "The callback for the click event of the button with a bool argument passing the current loading state.", }, From e4f6ec2e4b83d7e09ef62cf9ed82d3d0c06ace3e Mon Sep 17 00:00:00 2001 From: ysmoradi Date: Wed, 11 Dec 2024 12:36:37 +0100 Subject: [PATCH 05/16] fix --- .../Components/Layout/IdentityHeader.razor | 4 ++-- .../Boilerplate.Client.Core/Components/Pages/AppPageBase.cs | 2 +- .../Components/Pages/NotAuthorizedPage.razor.cs | 4 ++-- .../Extensions/NavigationManagerExtensions.cs | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor index c3e2454f23..ed9a7dfb0f 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor @@ -4,10 +4,10 @@ @if (isCrossLayoutPage is true) { - + @Localizer[nameof(AppStrings.SignUp)] - + @Localizer[nameof(AppStrings.SignIn)] } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs index 5ea2a4566d..f4d1c3d13a 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs @@ -20,7 +20,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { // Because Blazor router doesn't support regex, the '/{culture?}/' captures some irrelevant routes // such as non existing routes like /some-invalid-url, we need to make sure that the first segment of the route is a valid culture name. - NavigationManager.NavigateTo($"{Urls.NotFoundPage}?url={NavigationManager.GetCurrentRoute()}", replace: true); + NavigationManager.NavigateTo($"{Urls.NotFoundPage}?url={NavigationManager.GetRelativePath()}", replace: true); } } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.cs index f5bd5e5e4b..502604a129 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor.cs @@ -43,7 +43,7 @@ protected override async Task OnAfterFirstRenderAsync() private async Task SignOut() { await AuthManager.SignOut(CurrentCancellationToken); - var returnUrl = ReturnUrl ?? NavigationManager.GetCurrentRoute(); + var returnUrl = ReturnUrl ?? NavigationManager.GetRelativePath(); NavigationManager.NavigateTo(Urls.SignInPage + (string.IsNullOrEmpty(returnUrl) ? string.Empty : $"?return-url={returnUrl}")); } } @@ -57,7 +57,7 @@ protected override async Task OnAfterFirstRenderAsync() await base.OnAfterFirstRenderAsync(); await AuthManager.SignOut(CurrentCancellationToken); - var returnUrl = ReturnUrl ?? NavigationManager.GetCurrentRoute(); + var returnUrl = ReturnUrl ?? NavigationManager.GetRelativePath(); NavigationManager.NavigateTo(Urls.SignInPage + (string.IsNullOrEmpty(returnUrl) ? string.Empty : $"?return-url={returnUrl}")); } } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs index 1987ae830a..f5eb45ced9 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs @@ -12,7 +12,7 @@ public static string GetUriPath(this NavigationManager navigationManager) return new Uri(navigationManager.Uri).GetPath(); } - public static string GetCurrentRoute(this NavigationManager navigationManager) + public static string GetRelativePath(this NavigationManager navigationManager) { return navigationManager.ToBaseRelativePath(navigationManager.Uri); } From f5a0ad623308baccbc7754f8f42a03b70e7eb5c0 Mon Sep 17 00:00:00 2001 From: ysmoradi Date: Wed, 11 Dec 2024 12:43:01 +0100 Subject: [PATCH 06/16] fix --- .../Components/Pages/Authorized/Settings/SessionsSection.razor | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SessionsSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SessionsSection.razor index 49a04564fd..aedc82200b 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SessionsSection.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/SessionsSection.razor @@ -52,8 +52,7 @@ CoinColor="@(session.Privileged ? null : BitColor.TertiaryBackground)" ImageUrl="@($"/_content/Boilerplate.Client.Core/images/os/{GetImageUrl(session.DeviceInfo)}")" /> - From 8e021ce320370ae7e53140b1de4f530568cb6d5b Mon Sep 17 00:00:00 2001 From: ysmoradi Date: Wed, 11 Dec 2024 12:59:32 +0100 Subject: [PATCH 07/16] fix --- .../Components/Pages/Authorized/Todo/TodoPage.razor | 4 ++-- .../Components/Pages/Authorized/Todo/TodoPage.razor.cs | 10 ++++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor index d1df41b853..70d37d6b79 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor @@ -93,7 +93,7 @@ IconName="@BitIconName.Edit" Color="BitColor.SecondaryForeground" Title="@Localizer[nameof(AppStrings.Edit)]" - OnClick="WrapHandled(() => ToggleEditMode(todo))" /> + OnClick="WrapHandled(() => EnterEditMode(todo))" /> + OnClick="WrapHandled(() => LeaveEditMode(todo))"> @Localizer[nameof(AppStrings.Cancel)] diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor.cs index 3459ec3636..b231097715 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor.cs @@ -115,10 +115,16 @@ private void FilterTodoItems(string filter) FilterViewTodoItems(); } - private void ToggleEditMode(TodoItemDto todoItem) + private void EnterEditMode(TodoItemDto todoItem) { + allTodoItems.ForEach(t => t.IsInEditMode = false); underEditTodoItemTitle = todoItem.Title; - todoItem.IsInEditMode = !todoItem.IsInEditMode; + todoItem.IsInEditMode = true; + } + + private void LeaveEditMode(TodoItemDto todoItem) + { + todoItem.IsInEditMode = false; } private async Task AddTodoItem() From 26c35806730a4f83b619c852fe6e50e7946d7491 Mon Sep 17 00:00:00 2001 From: ysmoradi Date: Wed, 11 Dec 2024 13:00:31 +0100 Subject: [PATCH 08/16] fix --- .../Components/Pages/Authorized/Todo/TodoPage.razor | 2 +- .../Components/Pages/Authorized/Todo/TodoPage.razor.cs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor index 70d37d6b79..89853b379c 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor @@ -108,7 +108,7 @@ + OnClick="WrapHandled(() => ExitEditMode(todo))"> @Localizer[nameof(AppStrings.Cancel)] diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor.cs index b231097715..2c0c1e748f 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Authorized/Todo/TodoPage.razor.cs @@ -122,7 +122,7 @@ private void EnterEditMode(TodoItemDto todoItem) todoItem.IsInEditMode = true; } - private void LeaveEditMode(TodoItemDto todoItem) + private void ExitEditMode(TodoItemDto todoItem) { todoItem.IsInEditMode = false; } From 9aebf07f5150a1699d053b022412abf4807c778b Mon Sep 17 00:00:00 2001 From: Yaser Moradi Date: Thu, 12 Dec 2024 09:00:12 +0100 Subject: [PATCH 09/16] feat(templates): Add WithAutomaticReconnect to Boilerplate SignalR configuration #9453 (#9454) --- .../Bit.Boilerplate/.template.config/template.json | 2 +- .../IClientCoreServiceCollectionExtensions.cs | 2 ++ .../Services/SignalRInfiniteRetryPolicy.cs | 11 +++++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/SignalRInfiniteRetryPolicy.cs diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/.template.config/template.json b/src/Templates/Boilerplate/Bit.Boilerplate/.template.config/template.json index e5a6064e42..aa7e5eebd8 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/.template.config/template.json +++ b/src/Templates/Boilerplate/Bit.Boilerplate/.template.config/template.json @@ -437,7 +437,7 @@ "exclude": [ "src/Server/Boilerplate.Server.Api/SignalR/**", "src/Shared/Services/SharedPubSubMessages.cs", - "src/Client/Boilerplate.Client.Core/Services/SignalRInfinitiesRetryPolicy.cs" + "src/Client/Boilerplate.Client.Core/Services/SignalRInfiniteRetryPolicy.cs" ] }, { diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IClientCoreServiceCollectionExtensions.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IClientCoreServiceCollectionExtensions.cs index b00b65b05a..764b689c74 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IClientCoreServiceCollectionExtensions.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IClientCoreServiceCollectionExtensions.cs @@ -136,6 +136,7 @@ public static IServiceCollection AddClientCoreProjectServices(this IServiceColle services.AddTypedHttpClients(); //#if (signalR == true) + services.AddScoped(); services.AddSessioned(sp => { var authManager = sp.GetRequiredService(); @@ -144,6 +145,7 @@ public static IServiceCollection AddClientCoreProjectServices(this IServiceColle var hubConnection = new HubConnectionBuilder() .WithStatefulReconnect() + .WithAutomaticReconnect(sp.GetRequiredService()) .WithUrl(new Uri(absoluteServerAddressProvider.GetAddress(), "app-hub"), options => { options.SkipNegotiation = false; // Required for Azure SignalR. diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/SignalRInfiniteRetryPolicy.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/SignalRInfiniteRetryPolicy.cs new file mode 100644 index 0000000000..9f41cd32f6 --- /dev/null +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/SignalRInfiniteRetryPolicy.cs @@ -0,0 +1,11 @@ +using Microsoft.AspNetCore.SignalR.Client; + +namespace Boilerplate.Client.Core.Services; + +public class SignalRInfiniteRetryPolicy : IRetryPolicy +{ + public TimeSpan? NextRetryDelay(RetryContext retryContext) + { + return TimeSpan.FromSeconds(1); // It's already handled by HttpMessageHandlers/RetryDelegatingHandler during negotiate http request. + } +} From d8d61467223c5d047c3822225a43f86ad896dc7f Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Thu, 12 Dec 2024 11:51:01 +0330 Subject: [PATCH 10/16] 1st commit --- .../Components/ProPanel/BitProPanel.razor | 41 ++ .../Components/ProPanel/BitProPanel.razor.cs | 288 ++++++++++ .../Components/ProPanel/BitProPanel.scss | 83 +++ .../ProPanel/BitProPanelClassStyles.cs | 49 ++ .../Styles/components.scss | 2 +- .../Bit.BlazorUI.Tests.csproj | 3 +- .../Extras/ProPanel/BitProPanelTests.cs | 193 +++++++ .../Surfaces/Panel/BitPanelTests.cs | 90 --- src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj | 8 + .../Components/BitComponentBase.cs | 4 +- .../Progress/Loading/Base/BitLoadingBase.cs | 6 + .../Components/Surfaces/Panel/BitPanel.razor | 48 +- .../Surfaces/Panel/BitPanel.razor.cs | 39 +- .../Components/Surfaces/Panel/BitPanel.scss | 87 +-- .../Surfaces/Panel/BitPanelClassStyles.cs | 30 - .../Extras/ProPanel/BitProPanelDemo.razor | 252 +++++++++ .../Extras/ProPanel/BitProPanelDemo.razor.cs | 523 ++++++++++++++++++ .../ProPanel/BitProPanelDemo.razor.scss | 66 +++ .../Surfaces/Panel/BitPanelDemo.razor | 133 ++--- .../Pages/Home/ComponentsSection.razor | 3 + .../Shared/NavMenu.razor.cs | 1 + .../compilerconfig.json | 10 +- .../Components/Pages/HomePage.razor.cs | 1 + 23 files changed, 1573 insertions(+), 387 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs create mode 100644 src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor new file mode 100644 index 0000000000..d3bf77542e --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor @@ -0,0 +1,41 @@ +@namespace Bit.BlazorUI +@inherits BitComponentBase + + +
+ @if (HeaderTemplate is not null) + { + @HeaderTemplate + } + else if (HeaderText.HasValue()) + { + + } + + @if (ShowCloseButton) + { + + } +
+ +
+ @ChildContent +
+ + @if (FooterTemplate is not null) + { +
+ @FooterTemplate +
+ } + diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs new file mode 100644 index 0000000000..4fa4ca02ff --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs @@ -0,0 +1,288 @@ +namespace Bit.BlazorUI; + +public partial class BitProPanel : BitComponentBase, IAsyncDisposable +{ + private int _offsetTop; + private bool _disposed; + private bool _internalIsOpen; + private string _containerId = default!; + private BitPanel _bitPanel = default!; + + + + [Inject] private IJSRuntime _js { get; set; } = default!; + + + + /// + /// Enables the auto scrollbar toggle behavior of the panel. + /// + [Parameter] public bool AutoToggleScroll { get; set; } + + /// + /// Whether the panel can be dismissed by clicking outside of it on the overlay. + /// + [Parameter] public bool Blocking { get; set; } + + /// + /// The content of the panel. + /// + [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// Custom CSS classes for different parts of the panel. + /// + [Parameter] public BitProPanelClassStyles? Classes { get; set; } + + /// + /// The template used to render the footer section of the panel. + /// + [Parameter] public RenderFragment? FooterTemplate { get; set; } + + /// + /// The template used to render the header section of the panel. + /// + [Parameter] public RenderFragment? HeaderTemplate { get; set; } + + /// + /// The text of the header section of the panel. + /// + [Parameter] public string? HeaderText { get; set; } + + /// + /// Determines the openness of the panel. + /// + [Parameter, TwoWayBound] + public bool IsOpen { get; set; } + + /// + /// Removes the overlay element of the panel. + /// + [Parameter] public bool Modeless { get; set; } + + /// + /// A callback function for when the Panel is dismissed. + /// + [Parameter] public EventCallback OnDismiss { get; set; } + + /// + /// The event callback for when the swipe action starts on the container of the panel. + /// + [Parameter] public EventCallback OnSwipeStart { get; set; } + + /// + /// The event callback for when the swipe action moves on the container of the panel. + /// + [Parameter] public EventCallback OnSwipeMove { get; set; } + + /// + /// The event callback for when the swipe action ends on the container of the panel. + /// + [Parameter] public EventCallback OnSwipeEnd { get; set; } + + /// + /// The position of the panel to show on the screen. + /// + [Parameter] public BitPanelPosition? Position { get; set; } + + /// + /// The value of the height or width (based on the position) of the Panel. + /// + [Parameter] public double? Size { get; set; } + + /// + /// Specifies the element selector for which the Panel disables its scroll if applicable. + /// + [Parameter] public string? ScrollerSelector { get; set; } + + /// + /// Shows the close button of the Panel. + /// + [Parameter] public bool ShowCloseButton { get; set; } + + /// + /// Custom CSS styles for different parts of the panel component. + /// + [Parameter] public BitProPanelClassStyles? Styles { get; set; } + + /// + /// Specifies the id for the aria-describedby attribute of the panel. + /// + [Parameter] public string? SubtitleAriaId { get; set; } + + /// + /// The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m). + /// + [Parameter] public decimal? SwipeTrigger { get; set; } + + /// + /// Specifies the id for the aria-labelledby attribute of the panel. + /// + [Parameter] public string? TitleAriaId { get; set; } + + + + public async Task Open() + { + if (await AssignIsOpen(true) is false) return; + + StateHasChanged(); + } + + public async Task Close() + { + if (await AssignIsOpen(false) is false) return; + + StateHasChanged(); + } + + + + [JSInvokable("OnStart")] + public async Task _OnStart(decimal startX, decimal startY) + { + await OnSwipeStart.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? startX : startY); + } + + [JSInvokable("OnMove")] + public async Task _OnMove(decimal diffX, decimal diffY) + { + await OnSwipeMove.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY); + } + + [JSInvokable("OnEnd")] + public async Task _OnEnd(decimal diffX, decimal diffY) + { + await OnSwipeEnd.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY); + } + + [JSInvokable("OnClose")] + public async Task _OnClose() + { + await ClosePanel(new()); + await InvokeAsync(StateHasChanged); + } + + + + protected override string RootElementClass => "bit-pnl"; + + protected override void RegisterCssClasses() + { + ClassBuilder.Register(() => Classes?.Root); + } + + protected override void RegisterCssStyles() + { + StyleBuilder.Register(() => Styles?.Root); + + StyleBuilder.Register(() => _offsetTop > 0 ? FormattableString.Invariant($"top:{_offsetTop}px") : string.Empty); + } + + protected override Task OnInitializedAsync() + { + _containerId = $"BitPanel-{UniqueId}-container"; + + return base.OnInitializedAsync(); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + var dotnetObj = DotNetObjectReference.Create(_bitPanel); + await _js.BitPanelSetup(_containerId, SwipeTrigger ?? 0.25m, Position ?? BitPanelPosition.End, Dir == BitDir.Rtl, dotnetObj); + } + + if (_internalIsOpen == IsOpen) return; + + _internalIsOpen = IsOpen; + + _offsetTop = 0; + + if (AutoToggleScroll is false) return; + + _offsetTop = await _js.ToggleOverflow(ScrollerSelector ?? "body", IsOpen); + + StyleBuilder.Reset(); + StateHasChanged(); + } + + + + private async Task ClosePanel(MouseEventArgs e) + { + if (IsEnabled is false) return; + + if (await AssignIsOpen(false) is false) return; + + await OnDismiss.InvokeAsync(e); + } + + private async Task OnOverlayClicked(MouseEventArgs e) + { + if (Blocking is true) return; + + await ClosePanel(e); + } + + private async Task OnCloseButtonClicked(MouseEventArgs e) + { + await ClosePanel(e); + } + + private string GetPositionClass() => Position switch + { + BitPanelPosition.Start => "bit-pnl-start", + BitPanelPosition.End => "bit-pnl-end", + BitPanelPosition.Top => "bit-pnl-top", + BitPanelPosition.Bottom => "bit-pnl-bottom", + _ => "bit-pnl-end" + }; + + private string GetPanelStyle() + { + List styles = []; + + if (IsOpen) + { + styles.Add("transform:translate3d(0,0,0);opacity:1"); + } + + if (Size is not null) + { + var prop = Position is BitPanelPosition.Top or BitPanelPosition.Bottom ? "height" : "width"; + styles.Add(FormattableString.Invariant($"{prop}:{Size}px")); + } + + if (Styles?.Container is string containerStyle && containerStyle.HasValue()) + { + styles.Add(containerStyle); + } + + return string.Join(';', styles); + } + + + + public async ValueTask DisposeAsync() + { + await DisposeAsync(true); + GC.SuppressFinalize(this); + } + + protected virtual async ValueTask DisposeAsync(bool disposing) + { + if (_disposed || disposing is false) return; + + try + { + await _js.BitPanelDispose(_containerId); + } + catch (JSDisconnectedException) { } // we can ignore this exception here + + _disposed = true; + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss new file mode 100644 index 0000000000..8ab8754e1c --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss @@ -0,0 +1,83 @@ +.bit-ppl + +.bit-pnl-hcn { + top: 0; + z-index: 1; + display: flex; + position: sticky; + font-weight: 600; + //color: $clr-fg-pri; + align-items: center; + font-size: spacing(2.5); + overflow-wrap: anywhere; + //background-color: $clr-bg-pri; + padding: spacing(2.25) spacing(3) 0; +} + +.bit-pnl-ttl { + width: 100%; + hyphens: auto; + word-break: break-word; + overflow-wrap: break-word; +} + +.bit-pnl-cls { + border: none; + display: flex; + cursor: pointer; + font-weight: 400; + width: spacing(4); + margin-left: auto; + height: spacing(4); + align-self: normal; + text-align: center; + align-items: center; + text-decoration: none; + box-sizing: border-box; + padding: 0 spacing(0.5); + justify-content: center; + font-size: spacing(1.75); + border-radius: spacing(0.25); + background-color: transparent; + //color: $clr-fg-pri; + + span { + height: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + + i { + margin: 0 spacing(0.5); + } + } + + @media (hover: hover) { + &:hover { + //color: $clr-fg-pri-hover; + //background-color: $clr-bg-pri-hover; + } + } + + &:active { + //color: $clr-fg-pri-active; + //background-color: $clr-bg-pri-active; + } +} + +.bit-pnl-bdy { + flex-grow: 1; + overflow-y: auto; + padding-left: spacing(3); + padding-right: spacing(3); + padding-bottom: spacing(2.5); +} + +.bit-pnl-fcn { + bottom: 0; + z-index: 1; + position: sticky; + padding: spacing(2) spacing(3); + //background-color: $clr-bg-pri; +} \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs new file mode 100644 index 0000000000..272b14b6a4 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs @@ -0,0 +1,49 @@ +namespace Bit.BlazorUI; + +public class BitProPanelClassStyles +{ + /// + /// Custom CSS classes/styles for the root element of the BitPanel. + /// + public string? Root { get; set; } + + /// + /// Custom CSS classes/styles for the overlay of the BitPanel. + /// + public string? Overlay { get; set; } + + /// + /// Custom CSS classes/styles for the container of the BitPanel. + /// + public string? Container { get; set; } + + /// + /// Custom CSS classes/styles for the header of the BitPanel. + /// + public string? Header { get; set; } + + /// + /// Custom CSS classes/styles for the header text of the BitPanel. + /// + public string? HeaderText { get; set; } + + /// + /// Custom CSS classes/styles for the close button of the BitPanel. + /// + public string? CloseButton { get; set; } + + /// + /// Custom CSS classes/styles for the close button of the BitPanel. + /// + public string? CloseIcon { get; set; } + + /// + /// Custom CSS classes/styles for the body of the BitPanel. + /// + public string? Body { get; set; } + + /// + /// Custom CSS classes/styles for the footer of the BitPanel. + /// + public string? Footer { get; set; } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss index 0e9f9d3e91..ca46bd9aef 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss @@ -1,4 +1,4 @@ @import "../Components/DataGrid/BitDataGrid.scss"; @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss"; - @import "../Components/PdfReader/BitPdfReader.scss"; +@import "../Components/ProPanel/BitProPanel.scss"; diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj b/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj index 79d9f65d85..a01542257f 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj @@ -24,7 +24,8 @@ - + + diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs new file mode 100644 index 0000000000..b9787b3b4a --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs @@ -0,0 +1,193 @@ +using AngleSharp.Css.Dom; +using Bunit; +using Microsoft.VisualStudio.TestTools.UnitTesting; + +namespace Bit.BlazorUI.Tests.Components.Extras.ProPanel; + +[TestClass] +public class BitProPanelTests : BunitTestContext +{ + private bool isPanelOpen = true; + + [DataTestMethod, + DataRow(false), + DataRow(true) + ] + public void BitProPanelBlockingTest(bool blocking) + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.Blocking, blocking); + parameters.Add(p => p.IsOpen, isPanelOpen); + parameters.Add(p => p.IsOpenChanged, HandleIsOpenChanged); + }); + + var container = com.Find(".bit-pnl-cnt"); + Assert.IsTrue(container.GetStyle().CssText.Contains("opacity: 1")); + + var overlayElement = com.Find(".bit-pnl-ovl"); + overlayElement.Click(); + + container = com.Find(".bit-pnl-cnt"); + if (blocking) + { + Assert.IsTrue(container.GetStyle().CssText.Contains("opacity: 1")); + } + else + { + Assert.AreEqual("", container.GetStyle().CssText); + } + } + + [DataTestMethod, + DataRow(false), + DataRow(true) + ] + public void BitProPanelModelessTest(bool modeless) + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.Modeless, modeless); + parameters.Add(p => p.IsOpen, true); + }); + + var element = com.Find(".bit-pnl"); + Assert.AreEqual(element.Attributes["aria-modal"].Value, (modeless is false).ToString()); + + var elementOverlay = com.FindAll(".bit-pnl-ovl"); + Assert.AreEqual(modeless ? 0 : 1, elementOverlay.Count); + } + + [DataTestMethod, + DataRow(false), + DataRow(true) + ] + public void BitProPanelIsOpenTest(bool isOpen) + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.IsOpen, isOpen); + }); + + var container = com.Find(".bit-pnl-cnt"); + Assert.AreEqual(isOpen, container.GetStyle().CssText.Contains("opacity: 1")); + } + + [TestMethod] + public void BitProPanelContentTest() + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.IsOpen, true); + parameters.AddChildContent("
Test Content
"); + }); + + var elementContent = com.Find(".bit-pnl-bdy"); + + elementContent.MarkupMatches("
Test Content
"); + } + + [TestMethod] + public void BitProPanelFooterContentTest() + { + var footerContent = "
Test Footer Content
"; + + var com = RenderComponent(parameters => + { + parameters.Add(p => p.IsOpen, true); + parameters.Add(p => p.FooterTemplate, footerContent); + }); + + var elementContent = com.Find(".bit-pnl-fcn :first-child"); + + elementContent.MarkupMatches(footerContent); + } + + [TestMethod] + public void BitProPanelHeaderContentTest() + { + const string headerContent = "
Test Header Content
"; + + var com = RenderComponent(parameters => + { + parameters.Add(p => p.IsOpen, true); + parameters.Add(p => p.HeaderTemplate, headerContent); + }); + + var elementContent = com.Find(".bit-pnl-hcn :first-child"); + + elementContent.MarkupMatches(headerContent); + } + + [TestMethod] + public void BitProPanelCloseWhenClickOutOfPanelTest() + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.IsOpen, isPanelOpen); + parameters.Add(p => p.IsOpenChanged, HandleIsOpenChanged); + }); + + var container = com.Find(".bit-pnl-cnt"); + Assert.IsTrue(container.GetStyle().CssText.Contains("opacity: 1")); + + var overlayElement = com.Find(".bit-pnl-ovl"); + overlayElement.Click(); + + container = com.Find(".bit-pnl-cnt"); + Assert.AreEqual("", container.GetStyle().CssText); + } + + [TestMethod] + public void BitProPanelOnDismissShouldWorkCorrect() + { + var isOpen = true; + var currentCount = 0; + var com = RenderComponent(parameters => + { + parameters.Bind(p => p.IsOpen, isOpen, newValue => isOpen = newValue); + parameters.Add(p => p.OnDismiss, () => currentCount++); + }); + + var overlayElement = com.Find(".bit-pnl-ovl"); + + overlayElement.Click(); + + Assert.IsFalse(isOpen); + Assert.AreEqual(1, currentCount); + } + + [DataTestMethod, + DataRow(BitPanelPosition.End), + DataRow(BitPanelPosition.Start), + DataRow(BitPanelPosition.Top), + DataRow(BitPanelPosition.Bottom), + DataRow(null) + ] + public void BitPanelPositionTest(BitPanelPosition? position) + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.IsOpen, true); + if (position.HasValue) + { + parameters.Add(p => p.Position, position.Value); + } + }); + + var PanelElement = com.Find(".bit-pnl-cnt"); + + var positionClass = position switch + { + BitPanelPosition.End => "bit-pnl-end", + BitPanelPosition.Start => "bit-pnl-start", + BitPanelPosition.Top => "bit-pnl-top", + BitPanelPosition.Bottom => "bit-pnl-bottom", + _ => "bit-pnl-end", + }; + + Assert.IsTrue(PanelElement.ClassList.Contains(positionClass)); + } + + private void HandleIsOpenChanged(bool isOpen) => isPanelOpen = isOpen; +} diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs index e7a3a7fbc8..96a9737ef5 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs @@ -73,64 +73,6 @@ public void BitPanelIsOpenTest(bool isOpen) Assert.AreEqual(isOpen, container.GetStyle().CssText.Contains("opacity: 1")); } - [DataTestMethod, - DataRow(null), - DataRow(""), - DataRow("Test-S-A-Id") - ] - public void BitPanelSubtitleAriaIdTest(string subtitleAriaId) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.SubtitleAriaId, subtitleAriaId); - parameters.Add(p => p.IsOpen, true); - }); - - var element = com.Find(".bit-pnl"); - - if (subtitleAriaId == null) - { - Assert.IsFalse(element.HasAttribute("aria-describedby")); - } - else if (subtitleAriaId == string.Empty) - { - Assert.AreEqual(element.Attributes["aria-describedby"].Value, string.Empty); - } - else - { - Assert.AreEqual(element.Attributes["aria-describedby"].Value, subtitleAriaId); - } - } - - [DataTestMethod, - DataRow(null), - DataRow(""), - DataRow("Test-T-A-Id") - ] - public void BitPanelTitleAriaIdTest(string titleAriaId) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.TitleAriaId, titleAriaId); - parameters.Add(p => p.IsOpen, true); - }); - - var element = com.Find(".bit-pnl"); - - if (titleAriaId == null) - { - Assert.IsFalse(element.HasAttribute("aria-labelledby")); - } - else if (titleAriaId == string.Empty) - { - Assert.AreEqual(element.Attributes["aria-labelledby"].Value, string.Empty); - } - else - { - Assert.AreEqual(element.Attributes["aria-labelledby"].Value, titleAriaId); - } - } - [TestMethod] public void BitPanelContentTest() { @@ -145,38 +87,6 @@ public void BitPanelContentTest() elementContent.MarkupMatches("
Test Content
"); } - [TestMethod] - public void BitPanelFooterContentTest() - { - var footerContent = "
Test Footer Content
"; - - var com = RenderComponent(parameters => - { - parameters.Add(p => p.IsOpen, true); - parameters.Add(p => p.FooterTemplate, footerContent); - }); - - var elementContent = com.Find(".bit-pnl-fcn :first-child"); - - elementContent.MarkupMatches(footerContent); - } - - [TestMethod] - public void BitPanelHeaderContentTest() - { - const string headerContent = "
Test Header Content
"; - - var com = RenderComponent(parameters => - { - parameters.Add(p => p.IsOpen, true); - parameters.Add(p => p.HeaderTemplate, headerContent); - }); - - var elementContent = com.Find(".bit-pnl-hcn :first-child"); - - elementContent.MarkupMatches(headerContent); - } - [TestMethod] public void BitPanelCloseWhenClickOutOfPanelTest() { diff --git a/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj b/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj index 9438d817fd..a0231bd04a 100644 --- a/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj +++ b/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj @@ -18,6 +18,14 @@ + + + + + + + + diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs index c30cbcd9ff..746f61ef90 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs @@ -177,9 +177,9 @@ protected override void OnAfterRender(bool firstRender) protected abstract string RootElementClass { get; } - internal ElementClassBuilder ClassBuilder { get; private set; } = new ElementClassBuilder(); + protected ElementClassBuilder ClassBuilder { get; private set; } = new ElementClassBuilder(); - internal ElementStyleBuilder StyleBuilder { get; private set; } = new ElementStyleBuilder(); + protected ElementStyleBuilder StyleBuilder { get; private set; } = new ElementStyleBuilder(); protected virtual void RegisterCssStyles() { } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs b/src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs index c9d9247d69..5b774859de 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs @@ -111,6 +111,12 @@ public override Task SetParametersAsync(ParameterView parameters) + internal new ElementClassBuilder ClassBuilder => base.ClassBuilder; + + internal new ElementStyleBuilder StyleBuilder => base.StyleBuilder; + + + protected override void RegisterCssClasses() { ClassBuilder.Register(() => "bit-ldn"); diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor index c6f1965ebb..7408ff26f8 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor @@ -6,55 +6,19 @@ role="dialog" style="@StyleBuilder.Value" class="@ClassBuilder.Value" - dir="@Dir?.ToString().ToLower()" - aria-labelledby="@TitleAriaId" - aria-describedby="@SubtitleAriaId" - aria-modal="@((Modeless is false).ToString())"> + dir="@Dir?.ToString().ToLower()"> @if (IsOpen && Modeless is false) { -
[Parameter] public BitPanelClassStyles? Classes { get; set; } - /// - /// The template used to render the footer section of the panel. - /// - [Parameter] public RenderFragment? FooterTemplate { get; set; } - - /// - /// The template used to render the header section of the panel. - /// - [Parameter] public RenderFragment? HeaderTemplate { get; set; } - - /// - /// The text of the header section of the panel. - /// - [Parameter] public string? HeaderText { get; set; } - /// /// Determines the openness of the panel. /// @@ -94,31 +79,16 @@ public partial class BitPanel : BitComponentBase, IAsyncDisposable /// [Parameter] public string? ScrollerSelector { get; set; } - /// - /// Shows the close button of the Panel. - /// - [Parameter] public bool ShowCloseButton { get; set; } - /// /// Custom CSS styles for different parts of the panel component. /// [Parameter] public BitPanelClassStyles? Styles { get; set; } - /// - /// Specifies the id for the aria-describedby attribute of the panel. - /// - [Parameter] public string? SubtitleAriaId { get; set; } - /// /// The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m). /// [Parameter] public decimal? SwipeTrigger { get; set; } - /// - /// Specifies the id for the aria-labelledby attribute of the panel. - /// - [Parameter] public string? TitleAriaId { get; set; } - public async Task Open() @@ -140,19 +110,22 @@ public async Task Close() [JSInvokable("OnStart")] public async Task _OnStart(decimal startX, decimal startY) { - await OnSwipeStart.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? startX : startY); + var start = (Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? startX : startY; + await OnSwipeStart.InvokeAsync(start); } [JSInvokable("OnMove")] public async Task _OnMove(decimal diffX, decimal diffY) { - await OnSwipeMove.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY); + var diff = (Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY; + await OnSwipeMove.InvokeAsync(diff); } [JSInvokable("OnEnd")] public async Task _OnEnd(decimal diffX, decimal diffY) { - await OnSwipeEnd.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY); + var diff = (Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY; + await OnSwipeEnd.InvokeAsync(diff); } [JSInvokable("OnClose")] diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss index a1127c1f69..726956c4da 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss @@ -44,89 +44,6 @@ transition: transform 200ms ease-out, opacity 100ms ease-in; } -.bit-pnl-hcn { - top: 0; - z-index: 1; - display: flex; - position: sticky; - font-weight: 600; - color: $clr-fg-pri; - align-items: center; - font-size: spacing(2.5); - overflow-wrap: anywhere; - background-color: $clr-bg-pri; - padding: spacing(2.25) spacing(3) 0; -} - -.bit-pnl-ttl { - width: 100%; - hyphens: auto; - word-break: break-word; - overflow-wrap: break-word; -} - -.bit-pnl-cls { - border: none; - display: flex; - cursor: pointer; - font-weight: 400; - width: spacing(4); - margin-left: auto; - height: spacing(4); - align-self: normal; - text-align: center; - align-items: center; - text-decoration: none; - box-sizing: border-box; - padding: 0 spacing(0.5); - justify-content: center; - font-size: spacing(1.75); - border-radius: spacing(0.25); - background-color: transparent; - color: $clr-fg-pri; - - span { - height: 100%; - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: center; - - i { - margin: 0 spacing(0.5); - } - } - - @media (hover: hover) { - &:hover { - color: $clr-fg-pri-hover; - background-color: $clr-bg-pri-hover; - } - } - - &:active { - color: $clr-fg-pri-active; - background-color: $clr-bg-pri-active; - } -} - -.bit-pnl-bdy { - flex-grow: 1; - overflow-y: auto; - padding-left: spacing(3); - padding-right: spacing(3); - padding-bottom: spacing(2.5); -} - -.bit-pnl-fcn { - bottom: 0; - z-index: 1; - position: sticky; - padding: spacing(2) spacing(3); - background-color: $clr-bg-pri; -} - - .bit-pnl-start { height: 100%; max-width: 85%; @@ -150,9 +67,9 @@ .bit-pnl-top { top: 0; width: 100%; - inset-inline: 0; max-width: 100%; max-height: 85%; + inset-inline: 0; height: fit-content; transform: translateY(-100%); } @@ -161,9 +78,9 @@ bottom: 0; top: unset; width: 100%; - inset-inline: 0; max-width: 100%; max-height: 85%; + inset-inline: 0; height: fit-content; transform: translateY(100%); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelClassStyles.cs index 97b134b402..270ae80e35 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelClassStyles.cs @@ -16,34 +16,4 @@ public class BitPanelClassStyles /// Custom CSS classes/styles for the container of the BitPanel. /// public string? Container { get; set; } - - /// - /// Custom CSS classes/styles for the header of the BitPanel. - /// - public string? Header { get; set; } - - /// - /// Custom CSS classes/styles for the header text of the BitPanel. - /// - public string? HeaderText { get; set; } - - /// - /// Custom CSS classes/styles for the close button of the BitPanel. - /// - public string? CloseButton { get; set; } - - /// - /// Custom CSS classes/styles for the close button of the BitPanel. - /// - public string? CloseIcon { get; set; } - - /// - /// Custom CSS classes/styles for the body of the BitPanel. - /// - public string? Body { get; set; } - - /// - /// Custom CSS classes/styles for the footer of the BitPanel. - /// - public string? Footer { get; set; } } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor new file mode 100644 index 0000000000..9aa0325172 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor @@ -0,0 +1,252 @@ +@page "/components/propanel" + + + +
+ + + + Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. +
+ + + + + + +
HeaderText:

+ Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ +


+
HeaderTemplate:

+ Open Panel + + +
+

BitPanel with custom header content

+ +
+ + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ + + + + + + +
FooterTemplate:

+ Open Panel + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ + + Save + Close + + + + + + + +
BitPanel has some advanced options to be customized.
+

+
ShowCloseButton:

+ Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ +


+
Blocking:

+ Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ +


+
Modeless:

+ Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ +


+
AutoToggleScroll:

+ Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + + + + + +
To set the Panel position on the page you can use the Position parameter.
+

+
+ +
+ Start + End +
+
+ Top + Bottom +
+
+ + + BitPanel with Start position and custom Size. + + + + + BitPanel with End position and custom Size. + + + + + BitPanel with Top position and custom Size. + + + + + BitPanel with Bottom position and custom Size. + + + + + + + +
Explore styling and class customization for BitPanel, including component styles, custom classes, and detailed styles.
+

+
Component's Style & Class:

+ Open Styled panel +

+ Open Classed panel +


+
Styles & Classes:

+ Open panel Styles +

+ Open panel Classes + + + BitPanel with custom style. + + + + BitPanel with custom class: +
Item 1
+
Item 2
+
Item 3
+ + + + BitPanel with Styles to customize its elements. + + + + BitPanel with Classes to customize its elements. + + + + + + +
Use BitPanel in right-to-left (RTL).
+

+
+
+
+ آغاز + پایان +
+
+ + +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
+ + + +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
+ +
+ + + + +
\ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs new file mode 100644 index 0000000000..016524be37 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs @@ -0,0 +1,523 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.ProPanel; + +public partial class BitProPanelDemo +{ + private readonly List componentParameters = + [ + new() + { + Name = "AutoToggleScroll", + Type = "bool", + DefaultValue = "false", + Description = "Enables the auto scrollbar toggle behavior of the panel.", + }, + new() + { + Name = "Blocking", + Type = "bool", + DefaultValue = "false", + Description = "Whether the panel can be dismissed by clicking outside of it on the overlay.", + }, + new() + { + Name = "ChildContent", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The content of the panel.", + }, + new() + { + Name = "Classes", + Type = "BitPanelClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes for different parts of the panel.", + Href = "#class-styles", + LinkType = LinkType.Link, + }, + new() + { + Name = "FooterTemplate", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The template used to render the footer section of the panel.", + }, + new() + { + Name = "HeaderTemplate", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The template used to render the header section of the panel.", + }, + new() + { + Name = "HeaderText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the header section of the panel.", + }, + new() + { + Name = "IsOpen", + Type = "bool", + DefaultValue = "false", + Description = "Determines the openness of the panel.", + }, + new() + { + Name = "Modeless", + Type = "bool", + DefaultValue = "false", + Description = "Removes the overlay element of the panel.", + }, + new() + { + Name = "OnDismiss", + Type = "EventCallback", + Description = "A callback function for when the Panel is dismissed.", + }, + new() + { + Name = "OnSwipeStart", + Type = "EventCallback", + Description = "The event callback for when the swipe action starts on the container of the panel.", + }, + new() + { + Name = "OnSwipeMove", + Type = "EventCallback", + Description = "The event callback for when the swipe action moves on the container of the panel.", + }, + new() + { + Name = "OnSwipeEnd", + Type = "EventCallback", + Description = "The event callback for when the swipe action ends on the container of the panel.", + }, + new() + { + Name = "Position", + Type = "BitPanelPosition?", + DefaultValue = "null", + Description = "The position of the panel to show on the screen.", + Href = "#position-enum", + LinkType = LinkType.Link, + }, + new() + { + Name = "Size", + Type = "double?", + DefaultValue = "null", + Description = "The value of the height or width (based on the position) of the Panel.", + }, + new() + { + Name = "ScrollerSelector", + Type = "string", + DefaultValue = "null", + Description = "Specifies the element selector for which the Panel disables its scroll if applicable.", + }, + new() + { + Name = "ShowCloseButton", + Type = "bool", + DefaultValue = "false", + Description = "Shows the close button of the Panel.", + }, + new() + { + Name = "Styles", + Type = "BitPanelClassStyles?", + DefaultValue = "null", + Description = "Custom CSS styles for different parts of the panel component.", + Href = "#class-styles", + LinkType = LinkType.Link, + }, + new() + { + Name = "SubtitleAriaId", + Type = "string?", + DefaultValue = "null", + Description = "Specifies the id for the aria-describedby attribute of the panel.", + }, + new() + { + Name = "SwipeTrigger", + Type = "decimal?", + DefaultValue = "null", + Description = "The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).", + }, + new() + { + Name = "TitleAriaId", + Type = "string?", + DefaultValue = "null", + Description = "Specifies the id for the aria-labelledby attribute of the panel.", + }, + ]; + + private readonly List componentSubClasses = + [ + new() + { + Id = "class-styles", + Title = "BitPanelClassStyles", + Parameters = + [ + new() + { + Name = "Root", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the root element of the BitPanel." + }, + new() + { + Name = "Overlay", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the overlay of the BitPanel." + }, + new() + { + Name = "Container", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the container of the BitPanel." + }, + new() + { + Name = "Header", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the header of the BitPanel." + }, + new() + { + Name = "HeaderText", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the header text of the BitPanel." + }, + new() + { + Name = "CloseButton", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the close button of the BitPanel." + }, + new() + { + Name = "CloseIcon", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the close icon of the BitPanel." + }, + new() + { + Name = "Body", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the body of the BitPanel." + }, + new() + { + Name = "Footer", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the footer of the BitPanel." + } + ] + } + ]; + + private readonly List componentSubEnums = + [ + new() + { + Id = "position-enum", + Name = "BitPanelPosition", + Description = "", + Items = + [ + new() { Name = "Start", Value = "0" }, + new() { Name = "End", Value = "1" }, + new() { Name = "Top", Value = "2" }, + new() { Name = "Bottom", Value = "3" } + ] + } + ]; + + + + private bool isBasicPanelOpen; + + private bool isPanelWithHeaderTextOpen; + private bool isPanelWithCustomHeaderOpen; + + private bool isPanelWithFooterOpen; + + private bool isBlockingPanelOpen; + private bool isModelessPanelOpen; + private bool isAutoToggleScrollPanelOpen; + private BitProPanel bitPanelRef = default!; + + private double customPanelSize = 300; + private bool isOpenInPositionStart; + private bool isOpenPositionEnd; + private bool isOpenInPositionTop; + private bool isOpenInPositionBottom; + + private bool isStyledPanelOpen; + private bool isClassedPanelOpen; + private bool isPanelStylesOpen; + private bool isPanelClassesOpen; + + private bool isRtlPanelOpenStart; + private bool isRtlPanelOpenEnd; + + + + private readonly string example1RazorCode = @" + isBasicPanelOpen = true"">Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. +
+"; + private readonly string example1CsharpCode = @" +private bool isBasicPanelOpen;"; + + private readonly string example2RazorCode = @" + isPanelWithHeaderTextOpen = true"">Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ + + isPanelWithCustomHeaderOpen = true"">Open Panel + + +
+

BitPanel with custom header content

+ +
+ + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ +"; + private readonly string example2CsharpCode = @" +private bool isPanelWithHeaderTextOpen; +private bool isPanelWithCustomHeaderOpen;"; + + private readonly string example3RazorCode = @" + isPanelWithFooterOpen = true"">Open Panel + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +

+ + + isPanelWithFooterOpen = false"">Save + isPanelWithFooterOpen = false"">Close + +"; + private readonly string example3CsharpCode = @" +private bool isPanelWithFooterOpen;"; + + private readonly string example4RazorCode = @" + bitPanelRef.Open()"">Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + + isBlockingPanelOpen = true"">Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + + isModelessPanelOpen = true"">Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + + isAutoToggleScrollPanelOpen = true"">Open Panel + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+"; + private readonly string example4CsharpCode = @" +private bool isBlockingPanelOpen; +private bool isModelessPanelOpen; +private bool isAutoToggleScrollPanelOpen; +private BitPanel bitPanelRef = default!;"; + + private readonly string example5RazorCode = @" + + + isOpenInPositionStart = true"">Start + isOpenPositionEnd = true"">End + isOpenInPositionTop = true"">Top + isOpenInPositionBottom = true"">Bottom + + + BitPanel with Start position and custom Size. + + + + + BitPanel with End position and custom Size. + + + + + BitPanel with Top position and custom Size. + + + + + BitPanel with Bottom position and custom Size. + +"; + private readonly string example5CsharpCode = @" +private double customPanelSize = 300; +private bool isOpenInPositionStart; +private bool isOpenPositionEnd; +private bool isOpenInPositionTop; +private bool isOpenInPositionBottom;"; + + private readonly string example6RazorCode = @" + + + + isStyledPanelOpen = true"">Open Styled panel + isClassedPanelOpen = true"">Open Classed panel + + isPanelStylesOpen = true"">Open panel Styles + isPanelClassesOpen = true"">Open panel Classes + BitPanel with custom style. + + BitPanel with custom class: +
Item 1
+
Item 2
+
Item 3
+ + BitPanel with Styles to customize its elements. + + BitPanel with Classes to customize its elements. +"; + private readonly string example6CsharpCode = @" +private bool isStyledPanelOpen; +private bool isClassedPanelOpen; +private bool isPanelStylesOpen; +private bool isPanelClassesOpen;"; + + private readonly string example7RazorCode = @" + isRtlPanelOpenStart = true"">آغاز + isRtlPanelOpenEnd = true"">پایان + + +

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +

+ + + +

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +

+"; + private readonly string example7CsharpCode = @" +private bool isRtlPanelOpenStart; +private bool isRtlPanelOpenEnd;"; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss new file mode 100644 index 0000000000..a54db15c4f --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss @@ -0,0 +1,66 @@ +@import '../../../../Styles/abstracts/functions'; + +.btn-container { + display: flex; + gap: rem2(16px); + flex-flow: column; + max-width: max-content; +} + +.position-btn { + gap: rem2(16px); + display: flex; + flex-flow: column nowrap; + + div { + display: flex; + justify-content: space-between; + } +} + +::deep { + .header-margin, + .custom-header { + margin-top: var(--bit-status-bar-height); + + @supports (-webkit-touch-callout: none) { + margin-top: env(safe-area-inset-top); + } + } + + .footer-margin { + @supports (-webkit-touch-callout: none) { + margin-top: env(safe-area-inset-bottom); + } + } + + .custom-class { + .item { + width: 3rem; + height: 3rem; + margin: 0.5rem; + border-radius: 0.5rem; + background-color: brown; + } + } + + .custom-container { + border: 0.25rem solid #0054C6; + border-end-start-radius: 1rem; + border-start-start-radius: 1rem; + } + + .custom-overlay { + background-color: #ffbd5a66; + } + + .custom-header { + padding-bottom: 1.25rem; + background-color: tomato; + } + + .custom-body { + padding-top: 1.25rem; + background-color: lightseagreen; + } +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor index e282901360..25254f0a4c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor @@ -24,91 +24,15 @@ - - -
HeaderText:

- Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut - turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, - ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. - Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. - Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend - efficitur. -
- -


-
HeaderTemplate:

- Open Panel - - -
-

BitPanel with custom header content

- -
- - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut - turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, - ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. - Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. - Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend - efficitur. -
- - - - - - - -
FooterTemplate:

- Open Panel - - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut - turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, - ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. - Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. - Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend - efficitur. -
- - - Save - Close - - - - -
BitPanel has some advanced options to be customized.


-
ShowCloseButton:

- Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- -


Blocking:

Open Panel - +
+

Blocking

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. @@ -117,8 +41,9 @@


Modeless:

Open Panel - +
+

Modeless

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. @@ -127,8 +52,9 @@


AutoToggleScroll:

Open Panel - +
+

AutoToggleScroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. @@ -153,12 +79,16 @@
- + BitPanel with Start position and custom Size. - + BitPanel with End position and custom Size. @@ -168,7 +98,9 @@ - + BitPanel with Bottom position and custom Size. @@ -181,35 +113,30 @@

Component's Style & Class:

Open Styled panel -

- Open Classed panel -


-
Styles & Classes:

- Open panel Styles -

- Open panel Classes - BitPanel with custom style. - +

+ Open Classed panel BitPanel with custom class:
Item 1
Item 2
Item 3
 - - +



+
Styles & Classes:

+ Open panel Styles + BitPanel with Styles to customize its elements. - +

+ Open panel Classes + Overlay = "custom-overlay" })"> BitPanel with Classes to customize its elements. @@ -227,7 +154,9 @@
- +
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. @@ -236,7 +165,9 @@
- +
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor index bec34a5508..b3e28e6a15 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor @@ -253,6 +253,9 @@ PdfReader + + ProPanel + ModalService diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs index d1277d3a9f..84b6f10f89 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs @@ -156,6 +156,7 @@ public partial class NavMenu : IDisposable new() { Text = "DataGrid", Url = "/components/datagrid", AdditionalUrls = ["/components/data-grid"] }, new() { Text = "Chart", Url = "/components/chart" }, new() { Text = "PdfReader", Url = "/components/pdfreader" }, + new() { Text = "ProPanel", Url = "/components/propanel" }, new() { Text = "Services", diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json index 1ea4c0c110..d9e1a8c69c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json @@ -71,6 +71,12 @@ "minify": { "enabled": false }, "options": { "sourceMap": false } }, + { + "outputFile": "Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.css", + "inputFile": "Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss", + "minify": { "enabled": false }, + "options": { "sourceMap": false } + }, { "outputFile": "Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.css", "inputFile": "Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.scss", @@ -306,8 +312,8 @@ "options": { "sourceMap": false } }, { - "outputFile": "Pages/Components/Progress/ProgressBar/BitProgressDemo.razor.css", - "inputFile": "Pages/Components/Progress/ProgressBar/BitProgressDemo.razor.scss", + "outputFile": "Pages/Components/Progress/Progress/BitProgressDemo.razor.css", + "inputFile": "Pages/Components/Progress/Progress/BitProgressDemo.razor.scss", "minify": { "enabled": false }, "options": { "sourceMap": false } }, diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs index b2846c7c99..fb032adacb 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs @@ -19,6 +19,7 @@ public partial class HomePage protected override async Task OnInitAsync() { + var name = typeof(BitButton).AssemblyQualifiedName; await base.OnInitAsync(); // If required, you should typically manage the authorization header for external APIs in **AuthDelegatingHandler.cs** From 226f88b793e4293cf28534fdb383d5ae753e304d Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Thu, 12 Dec 2024 15:26:24 +0330 Subject: [PATCH 11/16] fix panel demo --- .../Components/Surfaces/Panel/BitPanel.razor | 4 +- .../Surfaces/Panel/BitPanel.razor.cs | 37 +- .../Components/Surfaces/Panel/BitPanel.scss | 16 +- .../Surfaces/Panel/BitPanelDemo.razor | 82 +++-- .../Surfaces/Panel/BitPanelDemo.razor.cs | 337 +++++------------- .../Surfaces/Panel/BitPanelDemo.razor.scss | 31 +- 6 files changed, 168 insertions(+), 339 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor index 7408ff26f8..cd189aa5fb 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor @@ -17,8 +17,8 @@ }
+ style="@GetContainerCssStyles()" + class="@GetContainerCssClasses()"> @ChildContent
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs index 0e26cf36ec..413724831c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs @@ -200,21 +200,7 @@ private async Task OnOverlayClicked(MouseEventArgs e) await ClosePanel(e); } - private async Task OnCloseButtonClicked(MouseEventArgs e) - { - await ClosePanel(e); - } - - private string GetPositionClass() => Position switch - { - BitPanelPosition.Start => "bit-pnl-start", - BitPanelPosition.End => "bit-pnl-end", - BitPanelPosition.Top => "bit-pnl-top", - BitPanelPosition.Bottom => "bit-pnl-bottom", - _ => "bit-pnl-end" - }; - - private string GetPanelStyle() + private string GetContainerCssStyles() { List styles = []; @@ -237,6 +223,27 @@ private string GetPanelStyle() return string.Join(';', styles); } + private string GetContainerCssClasses() + { + List classes = ["bit-pnl-cnt"]; + + classes.Add(Position switch + { + BitPanelPosition.Start => "bit-pnl-start", + BitPanelPosition.End => "bit-pnl-end", + BitPanelPosition.Top => "bit-pnl-top", + BitPanelPosition.Bottom => "bit-pnl-bottom", + _ => "bit-pnl-end" + }); + + if (Classes?.Container is string containerClass && containerClass.HasValue()) + { + classes.Add(containerClass); + } + + return string.Join(' ', classes); + } + public async ValueTask DisposeAsync() diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss index 726956c4da..a8a70f87d7 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss @@ -1,10 +1,6 @@ @import "../../../Styles/functions.scss"; .bit-pnl { - inset: 0; - width: 100%; - height: 100%; - display: flex; font-weight: 400; font-size: spacing(2); z-index: $zindex-modal; @@ -17,30 +13,20 @@ } .bit-pnl-ovl { - top: 0; - left: 0; + inset: 0; width: 100%; height: 100%; - cursor: pointer; position: fixed; - pointer-events: auto; z-index: $zindex-overlay; - background: $clr-bg-overlay; } .bit-pnl-cnt { opacity: 0; - flex-grow: 1; - display: flex; - outline: none; - overflow: auto; position: fixed; box-sizing: border-box; - flex-direction: column; z-index: $zindex-callout; background-color: $clr-bg-pri; box-shadow: $box-shadow-callout; - border-radius: 0 0 spacing(0.25) spacing(0.25); transition: transform 200ms ease-out, opacity 100ms ease-in; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor index 25254f0a4c..3f0816d062 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor @@ -14,7 +14,7 @@ Open Panel -
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut @@ -24,36 +24,42 @@ - +
BitPanel has some advanced options to be customized.


Blocking:

Open Panel - -
+ +

Blocking

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ Close



Modeless:

Open Panel - -
+ +

Modeless

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ Close



AutoToggleScroll:

Open Panel -
+

AutoToggleScroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor @@ -63,7 +69,7 @@ - +
To set the Panel position on the page you can use the Position parameter.


@@ -82,54 +88,66 @@ - BitPanel with Start position and custom Size. - +
+ BitPanel with Start position and custom Size. + +
- BitPanel with End position and custom Size. - +
+ BitPanel with End position and custom Size. + +
- BitPanel with Top position and custom Size. - +
+ BitPanel with Top position and custom Size. + +
- BitPanel with Bottom position and custom Size. - +
+ BitPanel with Bottom position and custom Size. + +
- +
Explore styling and class customization for BitPanel, including component styles, custom classes, and detailed styles.


Component's Style & Class:

Open Styled panel - BitPanel with custom style. +
+ BitPanel with custom style. +


Open Classed panel - BitPanel with custom class: -
Item 1
-
Item 2
-
Item 3
+
+ BitPanel with custom class: +
Item 1
+
Item 2
+
Item 3
+




Styles & Classes:

Open panel Styles + Container = "padding: 1rem; box-shadow: 0 0 1rem tomato;" })"> BitPanel with Styles to customize its elements.

@@ -142,7 +160,7 @@ - +
Use BitPanel in right-to-left (RTL).


@@ -157,7 +175,7 @@ -
+
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. @@ -168,7 +186,7 @@ -
+
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs index f1d64e297e..5e241942f6 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs @@ -35,27 +35,6 @@ public partial class BitPanelDemo LinkType = LinkType.Link, }, new() - { - Name = "FooterTemplate", - Type = "RenderFragment?", - DefaultValue = "null", - Description = "The template used to render the footer section of the panel.", - }, - new() - { - Name = "HeaderTemplate", - Type = "RenderFragment?", - DefaultValue = "null", - Description = "The template used to render the header section of the panel.", - }, - new() - { - Name = "HeaderText", - Type = "string?", - DefaultValue = "null", - Description = "The text of the header section of the panel.", - }, - new() { Name = "IsOpen", Type = "bool", @@ -117,13 +96,6 @@ public partial class BitPanelDemo Description = "Specifies the element selector for which the Panel disables its scroll if applicable.", }, new() - { - Name = "ShowCloseButton", - Type = "bool", - DefaultValue = "false", - Description = "Shows the close button of the Panel.", - }, - new() { Name = "Styles", Type = "BitPanelClassStyles?", @@ -133,26 +105,12 @@ public partial class BitPanelDemo LinkType = LinkType.Link, }, new() - { - Name = "SubtitleAriaId", - Type = "string?", - DefaultValue = "null", - Description = "Specifies the id for the aria-describedby attribute of the panel.", - }, - new() { Name = "SwipeTrigger", Type = "decimal?", DefaultValue = "null", Description = "The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).", }, - new() - { - Name = "TitleAriaId", - Type = "string?", - DefaultValue = "null", - Description = "Specifies the id for the aria-labelledby attribute of the panel.", - }, ]; private readonly List componentSubClasses = @@ -183,48 +141,6 @@ public partial class BitPanelDemo Type = "string?", DefaultValue = "null", Description = "Custom CSS classes/styles for the container of the BitPanel." - }, - new() - { - Name = "Header", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the header of the BitPanel." - }, - new() - { - Name = "HeaderText", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the header text of the BitPanel." - }, - new() - { - Name = "CloseButton", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the close button of the BitPanel." - }, - new() - { - Name = "CloseIcon", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the close icon of the BitPanel." - }, - new() - { - Name = "Body", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the body of the BitPanel." - }, - new() - { - Name = "Footer", - Type = "string?", - DefaultValue = "null", - Description = "Custom CSS classes/styles for the footer of the BitPanel." } ] } @@ -251,15 +167,11 @@ public partial class BitPanelDemo private bool isBasicPanelOpen; - private bool isPanelWithHeaderTextOpen; - private bool isPanelWithCustomHeaderOpen; - - private bool isPanelWithFooterOpen; - private bool isBlockingPanelOpen; + private BitPanel blockingPanelRef = default!; private bool isModelessPanelOpen; + private BitPanel modelessPanelRef = default!; private bool isAutoToggleScrollPanelOpen; - private BitPanel bitPanelRef = default!; private double customPanelSize = 300; private bool isOpenInPositionStart; @@ -280,7 +192,7 @@ public partial class BitPanelDemo private readonly string example1RazorCode = @" isBasicPanelOpen = true"">Open Panel -
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut @@ -291,111 +203,49 @@ public partial class BitPanelDemo private bool isBasicPanelOpen;"; private readonly string example2RazorCode = @" - isPanelWithHeaderTextOpen = true"">Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut - turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, - ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. - Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. - Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend - efficitur. -
- - - isPanelWithCustomHeaderOpen = true"">Open Panel - - -
-

BitPanel with custom header content

- -
- - -
+ isBlockingPanelOpen = true"">Open Panel + +
+

Blocking

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut - turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, - ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. - Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. - Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend - efficitur. + sagittis nunc, ut interdum ipsum vestibulum non.
- -"; - private readonly string example2CsharpCode = @" -private bool isPanelWithHeaderTextOpen; -private bool isPanelWithCustomHeaderOpen;"; - - private readonly string example3RazorCode = @" - isPanelWithFooterOpen = true"">Open Panel - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut - turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, - ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. - Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. - Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend - efficitur. -

- - - isPanelWithFooterOpen = false"">Save - isPanelWithFooterOpen = false"">Close - -"; - private readonly string example3CsharpCode = @" -private bool isPanelWithFooterOpen;"; - - private readonly string example4RazorCode = @" - bitPanelRef.Open()"">Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- - - isBlockingPanelOpen = true"">Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. + blockingPanelRef.Close()"">Close
isModelessPanelOpen = true"">Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. + +
+

Modeless

+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ modelessPanelRef.Close()"">Close
isAutoToggleScrollPanelOpen = true"">Open Panel - -
+ +
+

AutoToggleScroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non.
"; - private readonly string example4CsharpCode = @" + private readonly string example2CsharpCode = @" private bool isBlockingPanelOpen; +private BitPanel blockingPanelRef = default!; private bool isModelessPanelOpen; -private bool isAutoToggleScrollPanelOpen; -private BitPanel bitPanelRef = default!;"; +private BitPanel modelessPanelRef = default!; +private bool isAutoToggleScrollPanelOpen;"; - private readonly string example5RazorCode = @" + private readonly string example3RazorCode = @" isOpenInPositionStart = true"">Start @@ -403,121 +253,108 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. isOpenInPositionTop = true"">Top isOpenInPositionBottom = true"">Bottom - - BitPanel with Start position and custom Size. - + +
+ BitPanel with Start position and custom Size. + +
- - BitPanel with End position and custom Size. - + +
+ BitPanel with End position and custom Size. + +
- BitPanel with Top position and custom Size. - +
+ BitPanel with Top position and custom Size. + +
- - BitPanel with Bottom position and custom Size. - + +
+ BitPanel with Bottom position and custom Size. + +
"; - private readonly string example5CsharpCode = @" + private readonly string example3CsharpCode = @" private double customPanelSize = 300; private bool isOpenInPositionStart; private bool isOpenPositionEnd; private bool isOpenInPositionTop; private bool isOpenInPositionBottom;"; - private readonly string example6RazorCode = @" - - - + private readonly string example4RazorCode = @" isStyledPanelOpen = true"">Open Styled panel - isClassedPanelOpen = true"">Open Classed panel - - isPanelStylesOpen = true"">Open panel Styles - isPanelClassesOpen = true"">Open panel Classes - BitPanel with custom style. - + BitPanel with custom style. +
+ + isClassedPanelOpen = true"">Open Classed panel - BitPanel with custom class: -
Item 1
-
Item 2
-
Item 3
- + BitPanel with custom class: +
Item 1
+
Item 2
+
Item 3
+
+ - + isPanelStylesOpen = true"">Open panel Styles + BitPanel with Styles to customize its elements. - + isPanelClassesOpen = true"">Open panel Classes + Overlay = ""custom-overlay"" })""> BitPanel with Classes to customize its elements. "; - private readonly string example6CsharpCode = @" + private readonly string example4CsharpCode = @" private bool isStyledPanelOpen; private bool isClassedPanelOpen; private bool isPanelStylesOpen; private bool isPanelClassesOpen;"; - private readonly string example7RazorCode = @" + private readonly string example5RazorCode = @" isRtlPanelOpenStart = true"">آغاز isRtlPanelOpenEnd = true"">پایان - -

+ +

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -

- - - -

+

+ +
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -

+
"; - private readonly string example7CsharpCode = @" + private readonly string example5CsharpCode = @" private bool isRtlPanelOpenStart; private bool isRtlPanelOpenEnd;"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.scss index a54db15c4f..99ecfa183f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.scss @@ -1,5 +1,10 @@ @import '../../../../Styles/abstracts/functions'; +.panel-body { + width: 300px; + padding: 1rem; +} + .btn-container { display: flex; gap: rem2(16px); @@ -19,21 +24,6 @@ } ::deep { - .header-margin, - .custom-header { - margin-top: var(--bit-status-bar-height); - - @supports (-webkit-touch-callout: none) { - margin-top: env(safe-area-inset-top); - } - } - - .footer-margin { - @supports (-webkit-touch-callout: none) { - margin-top: env(safe-area-inset-bottom); - } - } - .custom-class { .item { width: 3rem; @@ -45,6 +35,7 @@ } .custom-container { + padding: 1rem; border: 0.25rem solid #0054C6; border-end-start-radius: 1rem; border-start-start-radius: 1rem; @@ -53,14 +44,4 @@ .custom-overlay { background-color: #ffbd5a66; } - - .custom-header { - padding-bottom: 1.25rem; - background-color: tomato; - } - - .custom-body { - padding-top: 1.25rem; - background-color: lightseagreen; - } } From d9e66ab6bb0f1d6852a423e9f0129684a8186671 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Thu, 12 Dec 2024 20:48:03 +0330 Subject: [PATCH 12/16] fix propanel --- .../Components/ProPanel/BitProPanel.razor | 77 ++-- .../Components/ProPanel/BitProPanel.razor.cs | 177 +-------- .../Components/ProPanel/BitProPanel.scss | 82 ++--- .../ProPanel/BitProPanelClassStyles.cs | 36 +- .../Styles/bit.blazorui.extras.scss | 4 +- .../Extras/ProPanel/BitProPanelTests.cs | 4 +- src/BlazorUI/Bit.BlazorUI/Styles/general.scss | 5 +- .../Extras/ProPanel/BitProPanelDemo.razor | 210 ++++++----- .../Extras/ProPanel/BitProPanelDemo.razor.cs | 338 ++++++++++-------- 9 files changed, 414 insertions(+), 519 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor index d3bf77542e..1ea2b42858 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor @@ -1,41 +1,58 @@ @namespace Bit.BlazorUI @inherits BitComponentBase - -
- @if (HeaderTemplate is not null) - { - @HeaderTemplate - } - else if (HeaderText.HasValue()) - { - - } + + @if (Header is not null || ShowCloseButton) + { +
+ @if (Header is not null) + { +
+ @Header +
+ } - @if (ShowCloseButton) - { - - } -
+ @if (ShowCloseButton) + { + + } +
+ } -
- @ChildContent +
+ @(Body ?? ChildContent)
- @if (FooterTemplate is not null) + @if (Footer is not null) { -
- @FooterTemplate +
+ @Footer
} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs index 4fa4ca02ff..446b5441e4 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs @@ -1,24 +1,17 @@ namespace Bit.BlazorUI; -public partial class BitProPanel : BitComponentBase, IAsyncDisposable +public partial class BitProPanel : BitComponentBase { - private int _offsetTop; - private bool _disposed; - private bool _internalIsOpen; - private string _containerId = default!; - private BitPanel _bitPanel = default!; - - - - [Inject] private IJSRuntime _js { get; set; } = default!; - - - /// /// Enables the auto scrollbar toggle behavior of the panel. /// [Parameter] public bool AutoToggleScroll { get; set; } + /// + /// The alias of the ChildContent. + /// + [Parameter] public RenderFragment? Body { get; set; } + /// /// Whether the panel can be dismissed by clicking outside of it on the overlay. /// @@ -37,17 +30,12 @@ public partial class BitProPanel : BitComponentBase, IAsyncDisposable /// /// The template used to render the footer section of the panel. /// - [Parameter] public RenderFragment? FooterTemplate { get; set; } + [Parameter] public RenderFragment? Footer { get; set; } /// /// The template used to render the header section of the panel. /// - [Parameter] public RenderFragment? HeaderTemplate { get; set; } - - /// - /// The text of the header section of the panel. - /// - [Parameter] public string? HeaderText { get; set; } + [Parameter] public RenderFragment? Header { get; set; } /// /// Determines the openness of the panel. @@ -55,6 +43,11 @@ public partial class BitProPanel : BitComponentBase, IAsyncDisposable [Parameter, TwoWayBound] public bool IsOpen { get; set; } + /// + /// Renders the overlay in full mode that gives it an opaque background. + /// + [Parameter] public bool ModeFull { get; set; } + /// /// Removes the overlay element of the panel. /// @@ -105,21 +98,11 @@ public partial class BitProPanel : BitComponentBase, IAsyncDisposable /// [Parameter] public BitProPanelClassStyles? Styles { get; set; } - /// - /// Specifies the id for the aria-describedby attribute of the panel. - /// - [Parameter] public string? SubtitleAriaId { get; set; } - /// /// The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m). /// [Parameter] public decimal? SwipeTrigger { get; set; } - /// - /// Specifies the id for the aria-labelledby attribute of the panel. - /// - [Parameter] public string? TitleAriaId { get; set; } - public async Task Open() @@ -138,76 +121,11 @@ public async Task Close() - [JSInvokable("OnStart")] - public async Task _OnStart(decimal startX, decimal startY) - { - await OnSwipeStart.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? startX : startY); - } - - [JSInvokable("OnMove")] - public async Task _OnMove(decimal diffX, decimal diffY) - { - await OnSwipeMove.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY); - } - - [JSInvokable("OnEnd")] - public async Task _OnEnd(decimal diffX, decimal diffY) - { - await OnSwipeEnd.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY); - } - - [JSInvokable("OnClose")] - public async Task _OnClose() - { - await ClosePanel(new()); - await InvokeAsync(StateHasChanged); - } - - - - protected override string RootElementClass => "bit-pnl"; + protected override string RootElementClass => "bit-ppl"; protected override void RegisterCssClasses() { - ClassBuilder.Register(() => Classes?.Root); - } - - protected override void RegisterCssStyles() - { - StyleBuilder.Register(() => Styles?.Root); - - StyleBuilder.Register(() => _offsetTop > 0 ? FormattableString.Invariant($"top:{_offsetTop}px") : string.Empty); - } - - protected override Task OnInitializedAsync() - { - _containerId = $"BitPanel-{UniqueId}-container"; - - return base.OnInitializedAsync(); - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await base.OnAfterRenderAsync(firstRender); - - if (firstRender) - { - var dotnetObj = DotNetObjectReference.Create(_bitPanel); - await _js.BitPanelSetup(_containerId, SwipeTrigger ?? 0.25m, Position ?? BitPanelPosition.End, Dir == BitDir.Rtl, dotnetObj); - } - - if (_internalIsOpen == IsOpen) return; - - _internalIsOpen = IsOpen; - - _offsetTop = 0; - - if (AutoToggleScroll is false) return; - - _offsetTop = await _js.ToggleOverflow(ScrollerSelector ?? "body", IsOpen); - - StyleBuilder.Reset(); - StateHasChanged(); + ClassBuilder.Register(() => ModeFull ? "bit-ppl-mfl" : string.Empty); } @@ -220,69 +138,4 @@ private async Task ClosePanel(MouseEventArgs e) await OnDismiss.InvokeAsync(e); } - - private async Task OnOverlayClicked(MouseEventArgs e) - { - if (Blocking is true) return; - - await ClosePanel(e); - } - - private async Task OnCloseButtonClicked(MouseEventArgs e) - { - await ClosePanel(e); - } - - private string GetPositionClass() => Position switch - { - BitPanelPosition.Start => "bit-pnl-start", - BitPanelPosition.End => "bit-pnl-end", - BitPanelPosition.Top => "bit-pnl-top", - BitPanelPosition.Bottom => "bit-pnl-bottom", - _ => "bit-pnl-end" - }; - - private string GetPanelStyle() - { - List styles = []; - - if (IsOpen) - { - styles.Add("transform:translate3d(0,0,0);opacity:1"); - } - - if (Size is not null) - { - var prop = Position is BitPanelPosition.Top or BitPanelPosition.Bottom ? "height" : "width"; - styles.Add(FormattableString.Invariant($"{prop}:{Size}px")); - } - - if (Styles?.Container is string containerStyle && containerStyle.HasValue()) - { - styles.Add(containerStyle); - } - - return string.Join(';', styles); - } - - - - public async ValueTask DisposeAsync() - { - await DisposeAsync(true); - GC.SuppressFinalize(this); - } - - protected virtual async ValueTask DisposeAsync(bool disposing) - { - if (_disposed || disposing is false) return; - - try - { - await _js.BitPanelDispose(_containerId); - } - catch (JSDisconnectedException) { } // we can ignore this exception here - - _disposed = true; - } } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss index 8ab8754e1c..66cfd27e26 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss @@ -1,83 +1,71 @@ -.bit-ppl +@import '../../../Bit.BlazorUI/Styles/functions.scss'; -.bit-pnl-hcn { +.bit-ppl { + .bit-pnl-cnt { + display: flex; + flex-direction: column; + } +} + +.bit-ppl-mfl { + .bit-pnl.ovl { + background-color: $clr-bg-overlay; + } +} + +.bit-ppl-hcn { top: 0; z-index: 1; display: flex; position: sticky; font-weight: 600; - //color: $clr-fg-pri; - align-items: center; + color: $clr-fg-pri; font-size: spacing(2.5); overflow-wrap: anywhere; - //background-color: $clr-bg-pri; - padding: spacing(2.25) spacing(3) 0; + background-color: $clr-bg-pri; + padding: spacing(2) spacing(2) 0; } -.bit-pnl-ttl { - width: 100%; - hyphens: auto; - word-break: break-word; - overflow-wrap: break-word; +.bit-ppl-hdr { + flex-grow: 1; + display: flex; + align-items: center; } -.bit-pnl-cls { - border: none; +.bit-ppl-cls { display: flex; cursor: pointer; - font-weight: 400; - width: spacing(4); - margin-left: auto; - height: spacing(4); - align-self: normal; - text-align: center; + width: spacing(5); + height: spacing(5); align-items: center; - text-decoration: none; - box-sizing: border-box; - padding: 0 spacing(0.5); justify-content: center; font-size: spacing(1.75); border-radius: spacing(0.25); background-color: transparent; - //color: $clr-fg-pri; - - span { - height: 100%; - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: center; - - i { - margin: 0 spacing(0.5); - } - } @media (hover: hover) { &:hover { - //color: $clr-fg-pri-hover; - //background-color: $clr-bg-pri-hover; + color: $clr-fg-pri-hover; + background-color: $clr-bg-pri-hover; } } &:active { - //color: $clr-fg-pri-active; - //background-color: $clr-bg-pri-active; + color: $clr-fg-pri-active; + background-color: $clr-bg-pri-active; } } -.bit-pnl-bdy { +.bit-ppl-bdy { flex-grow: 1; overflow-y: auto; - padding-left: spacing(3); - padding-right: spacing(3); - padding-bottom: spacing(2.5); + padding: spacing(2); } -.bit-pnl-fcn { +.bit-ppl-fcn { bottom: 0; z-index: 1; position: sticky; - padding: spacing(2) spacing(3); - //background-color: $clr-bg-pri; -} \ No newline at end of file + background-color: $clr-bg-pri; + padding: 0 spacing(2) spacing(2) spacing(2); +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs index 272b14b6a4..988043b1ce 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs @@ -1,49 +1,35 @@ -namespace Bit.BlazorUI; + +namespace Bit.BlazorUI; -public class BitProPanelClassStyles +public class BitProPanelClassStyles : BitPanelClassStyles { /// - /// Custom CSS classes/styles for the root element of the BitPanel. + /// Custom CSS classes/styles for the header container of the BitProPanel. /// - public string? Root { get; set; } + public string? HeaderContainer { get; set; } /// - /// Custom CSS classes/styles for the overlay of the BitPanel. - /// - public string? Overlay { get; set; } - - /// - /// Custom CSS classes/styles for the container of the BitPanel. - /// - public string? Container { get; set; } - - /// - /// Custom CSS classes/styles for the header of the BitPanel. + /// Custom CSS classes/styles for the header of the BitProPanel. /// public string? Header { get; set; } /// - /// Custom CSS classes/styles for the header text of the BitPanel. - /// - public string? HeaderText { get; set; } - - /// - /// Custom CSS classes/styles for the close button of the BitPanel. + /// Custom CSS classes/styles for the close button of the BitProPanel. /// public string? CloseButton { get; set; } /// - /// Custom CSS classes/styles for the close button of the BitPanel. + /// Custom CSS classes/styles for the close button of the BitProPanel. /// public string? CloseIcon { get; set; } /// - /// Custom CSS classes/styles for the body of the BitPanel. + /// Custom CSS classes/styles for the body of the BitProPanel. /// public string? Body { get; set; } /// - /// Custom CSS classes/styles for the footer of the BitPanel. + /// Custom CSS classes/styles for the footer of the BitProPanel. /// - public string? Footer { get; set; } + public string? FooterContainer { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss index 66554e8edc..4d58f1782c 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss @@ -1,2 +1,2 @@ -@import "fabric.mdl2.bit.blazoui.extras.scss"; -@import "components.scss"; +@import "components.scss"; +@import "fabric.mdl2.bit.blazoui.extras.scss"; diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs index b9787b3b4a..4efde4b438 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs @@ -95,7 +95,7 @@ public void BitProPanelFooterContentTest() var com = RenderComponent(parameters => { parameters.Add(p => p.IsOpen, true); - parameters.Add(p => p.FooterTemplate, footerContent); + parameters.Add(p => p.Footer, footerContent); }); var elementContent = com.Find(".bit-pnl-fcn :first-child"); @@ -111,7 +111,7 @@ public void BitProPanelHeaderContentTest() var com = RenderComponent(parameters => { parameters.Add(p => p.IsOpen, true); - parameters.Add(p => p.HeaderTemplate, headerContent); + parameters.Add(p => p.Header, headerContent); }); var elementContent = com.Find(".bit-pnl-hcn :first-child"); diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI/Styles/general.scss index c6f0337ba9..09ae31d958 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/general.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/general.scss @@ -1,9 +1,8 @@ @import "functions.scss"; -@import "fabric.mdl2.bit.blazoui.scss"; -@import "theme-variables.scss"; -@import "components.scss"; @import "bit-css.scss"; +@import "components.scss"; +@import "fabric.mdl2.bit.blazoui.scss"; button { border: none; diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor index 9aa0325172..cf9aa944a5 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor @@ -6,7 +6,7 @@
@@ -24,33 +24,17 @@ - + -
HeaderText:

- Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut - turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, - ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. - Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. - Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend - efficitur. -
- -


-
HeaderTemplate:

- Open Panel - - -
-

BitPanel with custom header content

+ Open Panel with Header + +
+
+
BitPanel with header content
- - +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor @@ -61,17 +45,12 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur.
- + - - - - - -
FooterTemplate:

- Open Panel +

+ Open Panel with Footer - +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor @@ -82,42 +61,61 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur.
- - + +
Save - Close - + Close +
- +
BitPanel has some advanced options to be customized.


ShowCloseButton:

Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
+ +
ShowCloseButton
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+


Blocking:

Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
+ +
Blocking
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+


Modeless:

Open Panel - + +
Modeless
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + +


+
ModeFull:

+ Open Panel +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor @@ -134,10 +132,23 @@ sagittis nunc, ut interdum ipsum vestibulum non.
+


+
AutoToggleScroll:

+ Open Panel + +
AutoToggleScroll
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + - +
To set the Panel position on the page you can use the Position parameter.


@@ -175,47 +186,58 @@ - +
Explore styling and class customization for BitPanel, including component styles, custom classes, and detailed styles.


Component's Style & Class:

Open Styled panel + +
Style
+ + BitPanel with custom style. + +

Open Classed panel + +
Class
+ + BitPanel with custom class: +
Item 1
+
Item 2
+
Item 3
+ +


Styles & Classes:

Open panel Styles + +
Styles
+ + BitPanel with + Styles to customize its elements. + +

Open panel Classes - - - BitPanel with custom style. - - - - BitPanel with custom class: -
Item 1
-
Item 2
-
Item 3
- - - - BitPanel with Styles to customize its elements. - - - BitPanel with Classes to customize its elements. + Classes="@(new() { Container = "custom-container", + Overlay = "custom-overlay", + Body = "custom-body", + Header = "custom-header" })"> +
Classes
+ + BitPanel with + Classes to customize its elements. + - +
Use BitPanel in right-to-left (RTL).


@@ -227,22 +249,28 @@
- -
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. - کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. - در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -
+ +
سرصفحه ی آغاز
+ +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
+ - -
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. - کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. - در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -
+ +
سرصفحه ی پایان
+ +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
+
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs index 016524be37..1e21fba3f1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs @@ -12,6 +12,13 @@ public partial class BitProPanelDemo Description = "Enables the auto scrollbar toggle behavior of the panel.", }, new() + { + Name = "Body", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The alias of the ChildContent.", + }, + new() { Name = "Blocking", Type = "bool", @@ -28,7 +35,7 @@ public partial class BitProPanelDemo new() { Name = "Classes", - Type = "BitPanelClassStyles?", + Type = "BitProPanelClassStyles?", DefaultValue = "null", Description = "Custom CSS classes for different parts of the panel.", Href = "#class-styles", @@ -36,31 +43,31 @@ public partial class BitProPanelDemo }, new() { - Name = "FooterTemplate", + Name = "Footer", Type = "RenderFragment?", DefaultValue = "null", Description = "The template used to render the footer section of the panel.", }, new() { - Name = "HeaderTemplate", + Name = "Header", Type = "RenderFragment?", DefaultValue = "null", Description = "The template used to render the header section of the panel.", }, new() { - Name = "HeaderText", - Type = "string?", - DefaultValue = "null", - Description = "The text of the header section of the panel.", + Name = "IsOpen", + Type = "bool", + DefaultValue = "false", + Description = "Determines the openness of the panel.", }, new() { - Name = "IsOpen", + Name = "ModeFull", Type = "bool", DefaultValue = "false", - Description = "Determines the openness of the panel.", + Description = "Renders the overlay in full mode that gives it an opaque background.", }, new() { @@ -126,33 +133,19 @@ public partial class BitProPanelDemo new() { Name = "Styles", - Type = "BitPanelClassStyles?", + Type = "BitProPanelClassStyles?", DefaultValue = "null", Description = "Custom CSS styles for different parts of the panel component.", Href = "#class-styles", LinkType = LinkType.Link, }, new() - { - Name = "SubtitleAriaId", - Type = "string?", - DefaultValue = "null", - Description = "Specifies the id for the aria-describedby attribute of the panel.", - }, - new() { Name = "SwipeTrigger", Type = "decimal?", DefaultValue = "null", Description = "The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).", }, - new() - { - Name = "TitleAriaId", - Type = "string?", - DefaultValue = "null", - Description = "Specifies the id for the aria-labelledby attribute of the panel.", - }, ]; private readonly List componentSubClasses = @@ -160,7 +153,7 @@ public partial class BitProPanelDemo new() { Id = "class-styles", - Title = "BitPanelClassStyles", + Title = "BitProPanelClassStyles", Parameters = [ new() @@ -168,63 +161,63 @@ public partial class BitProPanelDemo Name = "Root", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the root element of the BitPanel." + Description = "Custom CSS classes/styles for the root element of the BitProPanel." }, new() { Name = "Overlay", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the overlay of the BitPanel." + Description = "Custom CSS classes/styles for the overlay of the BitProPanel." }, new() { Name = "Container", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the container of the BitPanel." + Description = "Custom CSS classes/styles for the container of the BitProPanel." }, new() { - Name = "Header", + Name = "HeaderContainer", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the header of the BitPanel." + Description = "Custom CSS classes/styles for the header container of the BitProPanel." }, new() { - Name = "HeaderText", + Name = "Header", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the header text of the BitPanel." + Description = "Custom CSS classes/styles for the header of the BitProPanel." }, new() { Name = "CloseButton", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the close button of the BitPanel." + Description = "Custom CSS classes/styles for the close button of the BitProPanel." }, new() { Name = "CloseIcon", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the close icon of the BitPanel." + Description = "Custom CSS classes/styles for the close icon of the BitProPanel." }, new() { Name = "Body", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the body of the BitPanel." + Description = "Custom CSS classes/styles for the body of the BitProPanel." }, new() { Name = "Footer", Type = "string?", DefaultValue = "null", - Description = "Custom CSS classes/styles for the footer of the BitPanel." + Description = "Custom CSS classes/styles for the footer container of the BitProPanel." } ] } @@ -251,13 +244,12 @@ public partial class BitProPanelDemo private bool isBasicPanelOpen; - private bool isPanelWithHeaderTextOpen; - private bool isPanelWithCustomHeaderOpen; - + private bool isPanelWithHeaderOpen; private bool isPanelWithFooterOpen; private bool isBlockingPanelOpen; private bool isModelessPanelOpen; + private bool isModeFullPanelOpen; private bool isAutoToggleScrollPanelOpen; private BitProPanel bitPanelRef = default!; @@ -279,41 +271,27 @@ public partial class BitProPanelDemo private readonly string example1RazorCode = @" isBasicPanelOpen = true"">Open Panel - +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis.
-"; +"; private readonly string example1CsharpCode = @" private bool isBasicPanelOpen;"; private readonly string example2RazorCode = @" - isPanelWithHeaderTextOpen = true"">Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut - turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, - ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. - Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. - Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend - efficitur. -
- - - isPanelWithCustomHeaderOpen = true"">Open Panel - - -
-

BitPanel with custom header content

+ isPanelWithHeaderOpen = true"">Open Panel with Header + +
+
+
BitPanel with header content
- - +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor @@ -324,17 +302,13 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur.
- -"; - private readonly string example2CsharpCode = @" -private bool isPanelWithHeaderTextOpen; -private bool isPanelWithCustomHeaderOpen;"; + + - private readonly string example3RazorCode = @" - isPanelWithFooterOpen = true"">Open Panel - - -

+ isPanelWithFooterOpen = true"">Open Panel with Footer + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut @@ -343,59 +317,91 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur. -

- - +
+ +
isPanelWithFooterOpen = false"">Save - isPanelWithFooterOpen = false"">Close - -"; - private readonly string example3CsharpCode = @" + isPanelWithFooterOpen = false"" Variant=""BitVariant.Outline"">Close +
+"; + private readonly string example2CsharpCode = @" +private bool isPanelWithHeaderOpen; private bool isPanelWithFooterOpen;"; - private readonly string example4RazorCode = @" + private readonly string example3RazorCode = @" bitPanelRef.Open()"">Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + +
ShowCloseButton
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + isBlockingPanelOpen = true"">Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + +
Blocking
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + isModelessPanelOpen = true"">Open Panel - + +
Modeless
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ + + + isModeFullPanelOpen = true"">Open Panel +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non.
- + isAutoToggleScrollPanelOpen = true"">Open Panel - +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non.
-"; - private readonly string example4CsharpCode = @" + + + isAutoToggleScrollPanelOpen = true"">Open Panel + +
AutoToggleScroll
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ +"; + private readonly string example3CsharpCode = @" private bool isBlockingPanelOpen; private bool isModelessPanelOpen; +private bool isModeFullPanelOpen; private bool isAutoToggleScrollPanelOpen; -private BitPanel bitPanelRef = default!;"; +private BitProPanel bitPanelRef = default!;"; - private readonly string example5RazorCode = @" + private readonly string example4RazorCode = @" isOpenInPositionStart = true"">Start @@ -403,33 +409,33 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. isOpenInPositionTop = true"">Top isOpenInPositionBottom = true"">Bottom - + BitPanel with Start position and custom Size. - + - + BitPanel with End position and custom Size. - + - + BitPanel with Top position and custom Size. - + - + BitPanel with Bottom position and custom Size. -"; - private readonly string example5CsharpCode = @" +"; + private readonly string example4CsharpCode = @" private double customPanelSize = 300; private bool isOpenInPositionStart; private bool isOpenPositionEnd; private bool isOpenInPositionTop; private bool isOpenInPositionBottom;"; - private readonly string example6RazorCode = @" + private readonly string example5RazorCode = @" - isStyledPanelOpen = true"">Open Styled panel + +
Style
+ + BitPanel with custom style. + + + isClassedPanelOpen = true"">Open Classed panel + +
Class
+ + BitPanel with custom class: +
Item 1
+
Item 2
+
Item 3
+ + isPanelStylesOpen = true"">Open panel Styles - isPanelClassesOpen = true"">Open panel Classes - BitPanel with custom style. - - BitPanel with custom class: -
Item 1
-
Item 2
-
Item 3
- - BitPanel with Styles to customize its elements. - - BitPanel with Classes to customize its elements. -"; - private readonly string example6CsharpCode = @" + +
Styles
+ + BitPanel with + Styles to customize its elements. + + + + isPanelClassesOpen = true"">Open panel Classes + +
Classes
+ + BitPanel with + Classes to customize its elements. + +"; + private readonly string example5CsharpCode = @" private bool isStyledPanelOpen; private bool isClassedPanelOpen; private bool isPanelStylesOpen; private bool isPanelClassesOpen;"; - private readonly string example7RazorCode = @" + private readonly string example6RazorCode = @" isRtlPanelOpenStart = true"">آغاز isRtlPanelOpenEnd = true"">پایان - -

- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. - کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. - در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -

- - - -

- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. - کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. - در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -

-"; - private readonly string example7CsharpCode = @" + +
سرصفحه ی آغاز
+ +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
+ + + + +
سرصفحه ی پایان
+ +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
+ +"; + private readonly string example6CsharpCode = @" private bool isRtlPanelOpenStart; private bool isRtlPanelOpenEnd;"; } From 33e8aa1191a83b4f57951960fd89c176fc6b94eb Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Thu, 12 Dec 2024 21:03:29 +0330 Subject: [PATCH 13/16] fix stuff --- .../Components/ProPanel/BitProPanelClassStyles.cs | 3 +-- .../Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs index 988043b1ce..44b2749f33 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs @@ -1,5 +1,4 @@ - -namespace Bit.BlazorUI; +namespace Bit.BlazorUI; public class BitProPanelClassStyles : BitPanelClassStyles { diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs index fb032adacb..b2846c7c99 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs @@ -19,7 +19,6 @@ public partial class HomePage protected override async Task OnInitAsync() { - var name = typeof(BitButton).AssemblyQualifiedName; await base.OnInitAsync(); // If required, you should typically manage the authorization header for external APIs in **AuthDelegatingHandler.cs** From d310565e0f47362d4a84395ab3ed03dbf6537542 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Fri, 13 Dec 2024 11:54:02 +0330 Subject: [PATCH 14/16] fix tests --- .../Extras/ProPanel/BitProPanelTests.cs | 149 +----------------- .../Surfaces/Panel/BitPanelTests.cs | 7 +- .../Extras/ProPanel/BitProPanelDemo.razor | 23 +-- .../Extras/ProPanel/BitProPanelDemo.razor.cs | 28 ++-- .../Surfaces/Panel/BitPanelDemo.razor | 4 +- .../Surfaces/Panel/BitPanelDemo.razor.cs | 6 +- 6 files changed, 36 insertions(+), 181 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs index 4efde4b438..be0b2ba6e8 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs @@ -1,5 +1,4 @@ -using AngleSharp.Css.Dom; -using Bunit; +using Bunit; using Microsoft.VisualStudio.TestTools.UnitTesting; namespace Bit.BlazorUI.Tests.Components.Extras.ProPanel; @@ -7,72 +6,6 @@ namespace Bit.BlazorUI.Tests.Components.Extras.ProPanel; [TestClass] public class BitProPanelTests : BunitTestContext { - private bool isPanelOpen = true; - - [DataTestMethod, - DataRow(false), - DataRow(true) - ] - public void BitProPanelBlockingTest(bool blocking) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.Blocking, blocking); - parameters.Add(p => p.IsOpen, isPanelOpen); - parameters.Add(p => p.IsOpenChanged, HandleIsOpenChanged); - }); - - var container = com.Find(".bit-pnl-cnt"); - Assert.IsTrue(container.GetStyle().CssText.Contains("opacity: 1")); - - var overlayElement = com.Find(".bit-pnl-ovl"); - overlayElement.Click(); - - container = com.Find(".bit-pnl-cnt"); - if (blocking) - { - Assert.IsTrue(container.GetStyle().CssText.Contains("opacity: 1")); - } - else - { - Assert.AreEqual("", container.GetStyle().CssText); - } - } - - [DataTestMethod, - DataRow(false), - DataRow(true) - ] - public void BitProPanelModelessTest(bool modeless) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.Modeless, modeless); - parameters.Add(p => p.IsOpen, true); - }); - - var element = com.Find(".bit-pnl"); - Assert.AreEqual(element.Attributes["aria-modal"].Value, (modeless is false).ToString()); - - var elementOverlay = com.FindAll(".bit-pnl-ovl"); - Assert.AreEqual(modeless ? 0 : 1, elementOverlay.Count); - } - - [DataTestMethod, - DataRow(false), - DataRow(true) - ] - public void BitProPanelIsOpenTest(bool isOpen) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.IsOpen, isOpen); - }); - - var container = com.Find(".bit-pnl-cnt"); - Assert.AreEqual(isOpen, container.GetStyle().CssText.Contains("opacity: 1")); - } - [TestMethod] public void BitProPanelContentTest() { @@ -82,9 +15,9 @@ public void BitProPanelContentTest() parameters.AddChildContent("
Test Content
"); }); - var elementContent = com.Find(".bit-pnl-bdy"); + var elementContent = com.Find(".bit-ppl-bdy"); - elementContent.MarkupMatches("
Test Content
"); + elementContent.MarkupMatches("
Test Content
"); } [TestMethod] @@ -98,7 +31,7 @@ public void BitProPanelFooterContentTest() parameters.Add(p => p.Footer, footerContent); }); - var elementContent = com.Find(".bit-pnl-fcn :first-child"); + var elementContent = com.Find(".bit-ppl-fcn :first-child"); elementContent.MarkupMatches(footerContent); } @@ -114,80 +47,8 @@ public void BitProPanelHeaderContentTest() parameters.Add(p => p.Header, headerContent); }); - var elementContent = com.Find(".bit-pnl-hcn :first-child"); + var elementContent = com.Find(".bit-ppl-hcn :first-child :first-child"); elementContent.MarkupMatches(headerContent); } - - [TestMethod] - public void BitProPanelCloseWhenClickOutOfPanelTest() - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.IsOpen, isPanelOpen); - parameters.Add(p => p.IsOpenChanged, HandleIsOpenChanged); - }); - - var container = com.Find(".bit-pnl-cnt"); - Assert.IsTrue(container.GetStyle().CssText.Contains("opacity: 1")); - - var overlayElement = com.Find(".bit-pnl-ovl"); - overlayElement.Click(); - - container = com.Find(".bit-pnl-cnt"); - Assert.AreEqual("", container.GetStyle().CssText); - } - - [TestMethod] - public void BitProPanelOnDismissShouldWorkCorrect() - { - var isOpen = true; - var currentCount = 0; - var com = RenderComponent(parameters => - { - parameters.Bind(p => p.IsOpen, isOpen, newValue => isOpen = newValue); - parameters.Add(p => p.OnDismiss, () => currentCount++); - }); - - var overlayElement = com.Find(".bit-pnl-ovl"); - - overlayElement.Click(); - - Assert.IsFalse(isOpen); - Assert.AreEqual(1, currentCount); - } - - [DataTestMethod, - DataRow(BitPanelPosition.End), - DataRow(BitPanelPosition.Start), - DataRow(BitPanelPosition.Top), - DataRow(BitPanelPosition.Bottom), - DataRow(null) - ] - public void BitPanelPositionTest(BitPanelPosition? position) - { - var com = RenderComponent(parameters => - { - parameters.Add(p => p.IsOpen, true); - if (position.HasValue) - { - parameters.Add(p => p.Position, position.Value); - } - }); - - var PanelElement = com.Find(".bit-pnl-cnt"); - - var positionClass = position switch - { - BitPanelPosition.End => "bit-pnl-end", - BitPanelPosition.Start => "bit-pnl-start", - BitPanelPosition.Top => "bit-pnl-top", - BitPanelPosition.Bottom => "bit-pnl-bottom", - _ => "bit-pnl-end", - }; - - Assert.IsTrue(PanelElement.ClassList.Contains(positionClass)); - } - - private void HandleIsOpenChanged(bool isOpen) => isPanelOpen = isOpen; } diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs index 96a9737ef5..5477856812 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs @@ -51,9 +51,6 @@ public void BitPanelModelessTest(bool modeless) parameters.Add(p => p.IsOpen, true); }); - var element = com.Find(".bit-pnl"); - Assert.AreEqual(element.Attributes["aria-modal"].Value, (modeless is false).ToString()); - var elementOverlay = com.FindAll(".bit-pnl-ovl"); Assert.AreEqual(modeless ? 0 : 1, elementOverlay.Count); } @@ -82,9 +79,9 @@ public void BitPanelContentTest() parameters.AddChildContent("
Test Content
"); }); - var elementContent = com.Find(".bit-pnl-bdy"); + var elementContent = com.Find(".bit-pnl-cnt"); - elementContent.MarkupMatches("
Test Content
"); + elementContent.MarkupMatches("
Test Content
"); } [TestMethod] diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor index cf9aa944a5..af9e77b1b1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor @@ -116,21 +116,14 @@
ModeFull:

Open Panel -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- -


-
AutoToggleScroll:

- Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
+
ModeFull
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+


AutoToggleScroll:

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs index 1e21fba3f1..3780e68edc 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs @@ -367,20 +367,26 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. isModeFullPanelOpen = true"">Open Panel -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
+
ModeFull
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ isAutoToggleScrollPanelOpen = true"">Open Panel - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
+ +
AutoToggleScroll
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
+ isAutoToggleScrollPanelOpen = true"">Open Panel diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor index 3f0816d062..adda9f235c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor @@ -30,7 +30,7 @@

Blocking:

Open Panel - +

Blocking

@@ -38,7 +38,7 @@ amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non.
- Close + Close



diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs index 5e241942f6..ac7c61e7c0 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs @@ -168,7 +168,6 @@ public partial class BitPanelDemo private bool isBasicPanelOpen; private bool isBlockingPanelOpen; - private BitPanel blockingPanelRef = default!; private bool isModelessPanelOpen; private BitPanel modelessPanelRef = default!; private bool isAutoToggleScrollPanelOpen; @@ -204,7 +203,7 @@ public partial class BitPanelDemo private readonly string example2RazorCode = @" isBlockingPanelOpen = true"">Open Panel - +

Blocking

@@ -212,7 +211,7 @@ public partial class BitPanelDemo amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non.
- blockingPanelRef.Close()"">Close + isBlockingPanelOpen = false"">Close
@@ -240,7 +239,6 @@ public partial class BitPanelDemo "; private readonly string example2CsharpCode = @" private bool isBlockingPanelOpen; -private BitPanel blockingPanelRef = default!; private bool isModelessPanelOpen; private BitPanel modelessPanelRef = default!; private bool isAutoToggleScrollPanelOpen;"; From 06fbdf55dfa35c6fe674c069d7244d7537921bc4 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sat, 14 Dec 2024 13:47:21 +0330 Subject: [PATCH 15/16] unify swipes --- .../Inputs/Dropdown/BitDropdown.razor.cs | 2 +- .../BitCircularTimePicker.razor.cs | 2 +- .../DatePicker/BitDatePicker.razor.cs | 2 +- .../BitDateRangePicker.razor.cs | 2 +- .../TimePicker/BitTimePicker.razor.cs | 2 +- .../Navs/DropMenu/BitDropMenu.razor.cs | 2 +- .../Surfaces/Panel/BitPanel.razor.cs | 4 +- .../Components/Surfaces/Panel/BitPanel.ts | 193 ------------------ .../Panel/BitPanelJsRuntimeExtensions.cs | 19 -- .../JsInterop/SwipesJsRuntimeExtensions.cs | 13 +- .../Extensions/JsInterop/SwipesPosition.cs | 9 - src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts | 9 +- .../Extras/ProPanel/BitProPanelDemo.razor | 55 +++-- 13 files changed, 46 insertions(+), 268 deletions(-) delete mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.ts delete mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelJsRuntimeExtensions.cs delete mode 100644 src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesPosition.cs diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs index a228db8891..addc3d92be 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs @@ -852,7 +852,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender is false) return; if (Responsive is false) return; - await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.End, Dir is BitDir.Rtl, _dotnetObj); + await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.End, Dir is BitDir.Rtl, _dotnetObj); } protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? parsingErrorMessage) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs index d7d3197c5b..31936c2e66 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs @@ -307,7 +307,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender is false) return; - await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.Top, Dir is BitDir.Rtl, _dotnetObj); + await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, _dotnetObj); _pointerUpAbortControllerId = await _js.BitCircularTimePickerRegisterPointerUp(_dotnetObj, nameof(_HandlePointerUp)); _pointerMoveAbortControllerId = await _js.BitCircularTimePickerRegisterPointerMove(_dotnetObj, nameof(_HandlePointerMove)); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs index a43798701a..35b8b01462 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs @@ -530,7 +530,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender is false) return; if (Responsive is false) return; - await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.Top, Dir is BitDir.Rtl, _dotnetObj); + await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, _dotnetObj); } protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out DateTimeOffset? result, [NotNullWhen(false)] out string? validationErrorMessage) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs index 77abb1fe3f..a64044a39c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs @@ -593,7 +593,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender is false) return; if (Responsive is false) return; - await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.Top, Dir is BitDir.Rtl, _dotnetObj); + await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, _dotnetObj); } protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out BitDateRangePickerValue? result, [NotNullWhen(false)] out string? validationErrorMessage) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs index 7c19c82d49..d554b0d9ee 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs @@ -345,7 +345,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender is false) return; if (Responsive is false) return; - await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.Top, Dir is BitDir.Rtl, _dotnetObj); + await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, _dotnetObj); } protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TimeSpan? result, [NotNullWhen(false)] out string? validationErrorMessage) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs index 2a426aa349..48f83584e7 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs @@ -150,7 +150,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender is false) return; if (Responsive is false) return; - await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.End, Dir is BitDir.Rtl, _dotnetObj); + await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.End, Dir is BitDir.Rtl, _dotnetObj); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs index 413724831c..6f6863e164 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs @@ -165,7 +165,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender) { var dotnetObj = DotNetObjectReference.Create(this); - await _js.BitPanelSetup(_containerId, SwipeTrigger ?? 0.25m, Position ?? BitPanelPosition.End, Dir == BitDir.Rtl, dotnetObj); + await _js.SwipesSetup(_containerId, SwipeTrigger ?? 0.25m, Position ?? BitPanelPosition.End, Dir == BitDir.Rtl, dotnetObj, false); } if (_internalIsOpen == IsOpen) return; @@ -258,7 +258,7 @@ protected virtual async ValueTask DisposeAsync(bool disposing) try { - await _js.BitPanelDispose(_containerId); + await _js.SwipesDispose(_containerId); } catch (JSDisconnectedException) { } // we can ignore this exception here diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.ts b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.ts deleted file mode 100644 index b478a2e469..0000000000 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.ts +++ /dev/null @@ -1,193 +0,0 @@ -namespace BitBlazorUI { - export class Panel { - private static _panels: BitPanel[] = []; - - public static setup( - id: string, - trigger: number, - position: BitPanelPosition, - isRtl: boolean, - dotnetObj: DotNetObject) { - const element = document.getElementById(id); - if (!element) return; - const bcr = element.getBoundingClientRect(); - - let diffX = 0; - let diffY = 0; - let startX = -1; - let startY = -1; - let originalTransform: string; - const isTouchDevice = Utils.isTouchDevice(); - - const getX = (e: TouchEvent | PointerEvent) => isTouchDevice ? (e as TouchEvent).touches[0].screenX : (e as PointerEvent).screenX; - const getY = (e: TouchEvent | PointerEvent) => isTouchDevice ? (e as TouchEvent).touches[0].screenY : (e as PointerEvent).screenY; - - const onStart = async (e: TouchEvent | PointerEvent): Promise => { - startX = getX(e); - startY = getY(e); - - element.style.transitionDuration = '0s'; - originalTransform = element.style.transform; - - await dotnetObj.invokeMethodAsync('OnStart', startX, startY); - }; - - const onMove = async (e: TouchEvent | PointerEvent): Promise => { - if (startX === -1 || startY === -1) return; - - diffX = getX(e) - startX; - diffY = getY(e) - startY; - - if (e.cancelable) { - e.preventDefault(); - e.stopPropagation(); - } - - if ((!isRtl && position === BitPanelPosition.Start) || (isRtl && position === BitPanelPosition.End)) { - if (diffX < 0) { - element.style.transform = `translateX(${diffX}px)`; - } else { - element.style.transform = originalTransform; - } - } - - if ((!isRtl && position === BitPanelPosition.End) || (isRtl && position === BitPanelPosition.Start)) { - if (diffX > 0) { - element.style.transform = `translateX(${diffX}px)`; - } else { - element.style.transform = originalTransform; - } - } - - if (position === BitPanelPosition.Top) { - if (diffY < 0) { - element.style.transform = `translateY(${diffY}px)`; - } else { - element.style.transform = originalTransform; - } - } - - if (position === BitPanelPosition.Bottom) { - if (diffY > 0) { - element.style.transform = `translateY(${diffY}px)`; - } else { - element.style.transform = originalTransform; - } - } - - await dotnetObj.invokeMethodAsync('OnMove', diffX, diffY); - }; - - const onEnd = async (e: TouchEvent | PointerEvent): Promise => { - if (startX === -1 || startY === -1) return; - - startX = startY = -1; - - element.style.transitionDuration = ''; - try { - if (((!isRtl && position === BitPanelPosition.Start) || (isRtl && position === BitPanelPosition.End)) && diffX < 0) { - if ((Math.abs(diffX) / bcr.width) > trigger) { - return await dotnetObj.invokeMethodAsync('OnClose'); - } - } - - if (((!isRtl && position === BitPanelPosition.End) || (isRtl && position === BitPanelPosition.Start)) && diffX > 0) { - if ((diffX / bcr.width) > trigger) { - return await dotnetObj.invokeMethodAsync('OnClose'); - } - } - - if (position === BitPanelPosition.Top && diffY < 0) { - if ((Math.abs(diffY) / bcr.height) > trigger) { - return await dotnetObj.invokeMethodAsync('OnClose'); - } - } - - if (position === BitPanelPosition.Bottom && diffY > 0) { - if ((diffY / bcr.height) > trigger) { - return await dotnetObj.invokeMethodAsync('OnClose'); - } - } - - element.style.transform = originalTransform; - } finally { - await dotnetObj.invokeMethodAsync('OnEnd', diffX, diffY); - diffX = diffY = 0; - } - }; - - const onLeave = (e: PointerEvent) => { - dotnetObj.invokeMethodAsync('OnEnd', diffX, diffY); - - startX = startY = -1; - diffX = diffY = 0; - element.style.transitionDuration = ''; - element.style.transform = originalTransform; - } - - if (isTouchDevice) { - element.addEventListener('touchstart', onStart); - element.addEventListener('touchmove', onMove); - element.addEventListener('touchend', onEnd); - } else { - element.addEventListener('pointerdown', onStart); - element.addEventListener('pointermove', onMove); - element.addEventListener('pointerup', onEnd); - element.addEventListener('pointerleave', onEnd, false); - } - - const panel = new BitPanel(id, element, trigger, dotnetObj); - panel.setDisposer(() => { - if (isTouchDevice) { - element.removeEventListener('touchstart', onStart); - element.removeEventListener('touchmove', onMove); - element.removeEventListener('touchend', onEnd); - } else { - element.removeEventListener('pointerdown', onStart); - element.removeEventListener('pointermove', onMove); - element.removeEventListener('pointerup', onEnd); - element.removeEventListener('pointerleave', onEnd, false); - } - }); - Panel._panels.push(panel); - } - - public static dispose(id: string) { - const panel = Panel._panels.find(r => r.id === id); - if (!panel) return; - - Panel._panels = Panel._panels.filter(r => r.id !== id); - panel.dispose(); - } - } - - class BitPanel { - id: string; - element: HTMLElement; - trigger: number; - dotnetObj: DotNetObject; - disposer: () => void = () => { }; - - constructor(id: string, element: HTMLElement, trigger: number, dotnetObj: DotNetObject) { - this.id = id; - this.element = element; - this.trigger = trigger; - this.dotnetObj = dotnetObj; - } - public setDisposer(disposer: () => void) { - this.disposer = disposer; - } - - public dispose() { - this.disposer(); - this.dotnetObj.dispose(); - } - } - - enum BitPanelPosition { - Start = 0, - End = 1, - Top = 2, - Bottom = 3, - } -} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelJsRuntimeExtensions.cs deleted file mode 100644 index a067205ae3..0000000000 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelJsRuntimeExtensions.cs +++ /dev/null @@ -1,19 +0,0 @@ -namespace Bit.BlazorUI; - -internal static class BitPanelJsRuntimeExtensions -{ - internal static ValueTask BitPanelSetup(this IJSRuntime js, - string id, - decimal trigger, - BitPanelPosition position, - bool isRtl, - DotNetObjectReference? dotnetObjectReference) - { - return js.InvokeVoid("BitBlazorUI.Panel.setup", id, trigger, position, isRtl, dotnetObjectReference); - } - - internal static ValueTask BitPanelDispose(this IJSRuntime jsRuntime, string id) - { - return jsRuntime.InvokeVoid("BitBlazorUI.Panel.dispose", id); - } -} diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs index c3e313efdf..d0dce6f787 100644 --- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs +++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs @@ -5,13 +5,14 @@ namespace Bit.BlazorUI; internal static class SwipesJsRuntimeExtensions { internal static ValueTask SwipesSetup<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] T>(this IJSRuntime js, - string id, - decimal trigger, - SwipesPosition position, - bool isRtl, - DotNetObjectReference? dotnetObj) where T : class + string id, + decimal trigger, + BitPanelPosition position, + bool isRtl, + DotNetObjectReference? dotnetObj, + bool isResponsive = true) where T : class { - return js.InvokeVoid("BitBlazorUI.Swipes.setup", id, trigger, position, isRtl, dotnetObj); + return js.InvokeVoid("BitBlazorUI.Swipes.setup", id, trigger, position, isRtl, dotnetObj, isResponsive); } internal static ValueTask SwipesDispose(this IJSRuntime jsRuntime, string id) diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesPosition.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesPosition.cs deleted file mode 100644 index b72a92bf13..0000000000 --- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesPosition.cs +++ /dev/null @@ -1,9 +0,0 @@ -namespace Bit.BlazorUI; - -public enum SwipesPosition -{ - Start, - End, - Top, - Bottom, -} diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts index edd97dfc03..ea6fa55872 100644 --- a/src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts +++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts @@ -7,9 +7,12 @@ trigger: number, position: BitSwipePosition, isRtl: boolean, - dotnetObj: DotNetObject) { - const windowWidth = window.innerWidth; - if (windowWidth >= Utils.MAX_MOBILE_WIDTH) return; + dotnetObj: DotNetObject, + isResponsive: boolean) { + if (isResponsive) { + const windowWidth = window.innerWidth; + if (windowWidth >= Utils.MAX_MOBILE_WIDTH) return; + } const element = document.getElementById(id); if (!element) return; diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor index af9e77b1b1..8753636af9 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor @@ -6,13 +6,13 @@
- Open Panel + Open ProPanel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit @@ -26,11 +26,11 @@ - Open Panel with Header + Open ProPanel with Header
-
BitPanel with header content
+
BitProPanel with Header
@@ -48,7 +48,7 @@

- Open Panel with Footer + Open ProPanel with Footer
@@ -72,10 +72,9 @@ -
BitPanel has some advanced options to be customized.
+
BitProPanel has some advanced options to be customized.


-
ShowCloseButton:

- Open Panel + Open ProPanel with ShowCloseButton
ShowCloseButton
@@ -87,8 +86,7 @@


-
Blocking:

- Open Panel + Open ProPanel with Blocking
Blocking
@@ -100,8 +98,7 @@


-
Modeless:

- Open Panel + Open ProPanel with Modeless
Modeless
@@ -113,8 +110,7 @@


-
ModeFull:

- Open Panel + Open ProPanel with ModeFull
ModeFull
@@ -126,8 +122,7 @@


-
AutoToggleScroll:

- Open Panel + Open ProPanel with AutoToggleScroll
AutoToggleScroll
@@ -158,22 +153,22 @@
- BitPanel with Start position and custom Size. + BitProPanel with Start position and custom Size. - BitPanel with End position and custom Size. + BitProPanel with End position and custom Size. - BitPanel with Top position and custom Size. + BitProPanel with Top position and custom Size. - BitPanel with Bottom position and custom Size. + BitProPanel with Bottom position and custom Size. @@ -181,22 +176,22 @@ -
Explore styling and class customization for BitPanel, including component styles, custom classes, and detailed styles.
+
Explore styling and class customization for BitProPanel, including component styles, custom classes, and detailed styles.


Component's Style & Class:

- Open Styled panel + Open Styled ProPanel
Style
- BitPanel with custom style. + BitProPanel with custom style.

- Open Classed panel + Open Classed ProPanel
Class
- BitPanel with custom class: + BitProPanel with custom class:
Item 1
Item 2
Item 3
@@ -204,18 +199,18 @@


Styles & Classes:

- Open panel Styles + Open ProPanel Styles
Styles
- BitPanel with + BitProPanel with Styles to customize its elements.

- Open panel Classes + Open ProPanel Classes
Classes
- BitPanel with + BitProPanel with Classes to customize its elements. @@ -232,7 +227,7 @@ -
Use BitPanel in right-to-left (RTL).
+
Use BitProPanel in right-to-left (RTL).


From 48c7b3b6f4e80acf6559ddc748658e8418d5a1f6 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sat, 14 Dec 2024 15:28:00 +0330 Subject: [PATCH 16/16] fix demo --- .../Components/ProPanel/BitProPanel.razor | 22 +- .../Components/ProPanel/BitProPanel.razor.cs | 10 + .../Components/ProPanel/BitProPanel.scss | 4 +- .../ProPanel/BitProPanelClassStyles.cs | 2 +- .../{Surfaces/Panel => }/BitPanelPosition.cs | 0 .../Extras/ProPanel/BitProPanelDemo.razor | 300 +++++++------ .../Extras/ProPanel/BitProPanelDemo.razor.cs | 420 ++++++++++-------- .../ProPanel/BitProPanelDemo.razor.scss | 38 +- 8 files changed, 466 insertions(+), 330 deletions(-) rename src/BlazorUI/Bit.BlazorUI/Components/{Surfaces/Panel => }/BitPanelPosition.cs (100%) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor index 1ea2b42858..b461e34683 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor @@ -4,7 +4,7 @@ - @if (Header is not null || ShowCloseButton) + @if (Header is not null || HeaderText is not null || ShowCloseButton) { -
+
@if (Header is not null) {
@Header
} + else if (HeaderText is not null) + { +
+ @HeaderText +
+ } @if (ShowCloseButton) { @@ -51,8 +57,14 @@ @if (Footer is not null) { -
+
@Footer
} + else if (FooterText is not null) + { +
+ @FooterText +
+ } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs index 446b5441e4..cc7b077732 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs @@ -32,11 +32,21 @@ public partial class BitProPanel : BitComponentBase /// [Parameter] public RenderFragment? Footer { get; set; } + /// + /// The text of the footer section of the panel. + /// + [Parameter] public string? FooterText { get; set; } + /// /// The template used to render the header section of the panel. /// [Parameter] public RenderFragment? Header { get; set; } + /// + /// The text of the header section of the panel. + /// + [Parameter] public string? HeaderText { get; set; } + /// /// Determines the openness of the panel. /// diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss index 66cfd27e26..db747ffc91 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss @@ -8,7 +8,7 @@ } .bit-ppl-mfl { - .bit-pnl.ovl { + .bit-pnl-ovl { background-color: $clr-bg-overlay; } } @@ -20,7 +20,6 @@ position: sticky; font-weight: 600; color: $clr-fg-pri; - font-size: spacing(2.5); overflow-wrap: anywhere; background-color: $clr-bg-pri; padding: spacing(2) spacing(2) 0; @@ -30,6 +29,7 @@ flex-grow: 1; display: flex; align-items: center; + font-size: spacing(2.5); } .bit-ppl-cls { diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs index 44b2749f33..0ce332226a 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs @@ -30,5 +30,5 @@ public class BitProPanelClassStyles : BitPanelClassStyles /// /// Custom CSS classes/styles for the footer of the BitProPanel. /// - public string? FooterContainer { get; set; } + public string? Footer { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelPosition.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitPanelPosition.cs similarity index 100% rename from src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelPosition.cs rename to src/BlazorUI/Bit.BlazorUI/Components/BitPanelPosition.cs diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor index 8753636af9..afd142cdd1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor @@ -12,8 +12,8 @@ ComponentSubEnums="componentSubEnums"> - Open ProPanel - + Open ProPanel +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor @@ -26,8 +26,22 @@ - Open ProPanel with Header - + Open ProPanel with HeaderText + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ +
+ Open ProPanel with Header +
BitProPanel with Header
@@ -47,9 +61,23 @@
-

- Open ProPanel with Footer - +


+ Open ProPanel with FooterText + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ +
+ Open ProPanel with Footer +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit @@ -63,8 +91,9 @@
- Save - Close +

BitProPanel with Footer

+ Save + Close
@@ -74,64 +103,49 @@
BitProPanel has some advanced options to be customized.


- Open ProPanel with ShowCloseButton - -
ShowCloseButton
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + Open ProPanel with ShowCloseButton + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +



- Open ProPanel with Blocking - -
Blocking
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + Open ProPanel with Blocking + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +



- Open ProPanel with Modeless - -
Modeless
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + Open ProPanel with Modeless + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +



- Open ProPanel with ModeFull - -
ModeFull
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + Open ProPanel with ModeFull + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +



- Open ProPanel with AutoToggleScroll - -
AutoToggleScroll
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + Open ProPanel with AutoToggleScroll + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
@@ -141,35 +155,63 @@
To set the Panel position on the page you can use the Position parameter.


- +
- Start - End + Start + End
- Top - Bottom + Top + Bottom
- + BitProPanel with Start position and custom Size. - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. - + BitProPanel with End position and custom Size. - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. - + BitProPanel with Top position and custom Size. - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. - + BitProPanel with Bottom position and custom Size. - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. @@ -179,48 +221,58 @@
Explore styling and class customization for BitProPanel, including component styles, custom classes, and detailed styles.


Component's Style & Class:

- Open Styled ProPanel - -
Style
- - BitProPanel with custom style. - + Open Styled ProPanel + + BitProPanel with custom style.

- Open Classed ProPanel - -
Class
- - BitProPanel with custom class: -
Item 1
-
Item 2
-
Item 3
- + Open Classed ProPanel + + BitProPanel with custom class: +
Item 1
+
Item 2
+
Item 3
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. +



Styles & Classes:

- Open ProPanel Styles - Open ProPanel Styles + -
Styles
- - BitProPanel with - Styles to customize its elements. - + BitProPanel with Styles to customize its elements. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. +


- Open ProPanel Classes - Open ProPanel Classes + -
Classes
- - BitProPanel with - Classes to customize its elements. - + Footer = "custom-footer" })"> + BitProPanel with Classes to customize its elements. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. +
@@ -232,33 +284,33 @@
- آغاز - پایان + آغاز + پایان
- -
سرصفحه ی آغاز
- -
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. - کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. - در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -
- + +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
- -
سرصفحه ی پایان
- -
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. - کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. - در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -
- + +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs index 3780e68edc..7cac770d07 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs @@ -49,6 +49,13 @@ public partial class BitProPanelDemo Description = "The template used to render the footer section of the panel.", }, new() + { + Name = "FooterText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the footer section of the panel.", + }, + new() { Name = "Header", Type = "RenderFragment?", @@ -56,6 +63,13 @@ public partial class BitProPanelDemo Description = "The template used to render the header section of the panel.", }, new() + { + Name = "HeaderText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the header section of the panel.", + }, + new() { Name = "IsOpen", Type = "bool", @@ -242,36 +256,38 @@ public partial class BitProPanelDemo - private bool isBasicPanelOpen; + private bool isBasicProPanelOpen; - private bool isPanelWithHeaderOpen; - private bool isPanelWithFooterOpen; + private bool isProPanelWithHeaderTextOpen; + private bool isProPanelWithHeaderOpen; + private bool isProPanelWithFooterTextOpen; + private bool isProPanelWithFooterOpen; - private bool isBlockingPanelOpen; - private bool isModelessPanelOpen; - private bool isModeFullPanelOpen; - private bool isAutoToggleScrollPanelOpen; - private BitProPanel bitPanelRef = default!; + private bool isBlockingProPanelOpen; + private bool isModelessProPanelOpen; + private bool isModeFullProPanelOpen; + private bool isAutoToggleScrollProPanelOpen; + private BitProPanel bitProPanelRef = default!; - private double customPanelSize = 300; - private bool isOpenInPositionStart; - private bool isOpenPositionEnd; - private bool isOpenInPositionTop; - private bool isOpenInPositionBottom; + private double customProPanelSize = 300; + private bool isStartProPanelOpen; + private bool isEndProPanelOpen; + private bool isTopProPanelOpen; + private bool isBottomProPanelOpen; - private bool isStyledPanelOpen; - private bool isClassedPanelOpen; - private bool isPanelStylesOpen; - private bool isPanelClassesOpen; + private bool isStyledProPanelOpen; + private bool isClassedProPanelOpen; + private bool isProPanelStylesOpen; + private bool isProPanelClassesOpen; - private bool isRtlPanelOpenStart; - private bool isRtlPanelOpenEnd; + private bool isRtlProPanelOpenStart; + private bool isRtlProPanelOpenEnd; private readonly string example1RazorCode = @" - isBasicPanelOpen = true"">Open Panel - + isBasicProPanelOpen = true"">Open ProPanel +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor @@ -280,14 +296,28 @@ public partial class BitProPanelDemo
"; private readonly string example1CsharpCode = @" -private bool isBasicPanelOpen;"; +private bool isBasicProPanelOpen;"; private readonly string example2RazorCode = @" - isPanelWithHeaderOpen = true"">Open Panel with Header - + isProPanelWithHeaderTextOpen = true"">Open ProPanel with HeaderText + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ + + isProPanelWithHeaderOpen = true"">Open ProPanel with Header +
-
BitPanel with header content
+
BitProPanel with Header
@@ -305,8 +335,23 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. - isPanelWithFooterOpen = true"">Open Panel with Footer - + + isProPanelWithFooterTextOpen = true"">Open ProPanel with FooterText + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, + ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. + Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. + Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend + efficitur. +
+ + + isProPanelWithFooterOpen = true"">Open ProPanel with Footer +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit @@ -320,119 +365,125 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
- isPanelWithFooterOpen = false"">Save - isPanelWithFooterOpen = false"" Variant=""BitVariant.Outline"">Close +

BitProPanel with Footer

+ isProPanelWithFooterOpen = false"">Save + isProPanelWithFooterOpen = false"" Variant=""BitVariant.Outline"">Close
"; private readonly string example2CsharpCode = @" -private bool isPanelWithHeaderOpen; -private bool isPanelWithFooterOpen;"; +private bool isProPanelWithHeaderTextOpen; +private bool isProPanelWithHeaderOpen; +private bool isProPanelWithFooterTextOpen; +private bool isProPanelWithFooterOpen;"; private readonly string example3RazorCode = @" - bitPanelRef.Open()"">Open Panel - -
ShowCloseButton
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- - - - isBlockingPanelOpen = true"">Open Panel - -
Blocking
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + bitProPanelRef.Open()"">Open ProPanel with ShowCloseButton + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
- isModelessPanelOpen = true"">Open Panel - -
Modeless
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + isBlockingProPanelOpen = true"">Open ProPanel with Blocking + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
- isModeFullPanelOpen = true"">Open Panel - -
ModeFull
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + isModelessProPanelOpen = true"">Open ProPanel with Modeless + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
- isAutoToggleScrollPanelOpen = true"">Open Panel - -
AutoToggleScroll
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + isModeFullProPanelOpen = true"">Open ProPanel with ModeFull + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
- isAutoToggleScrollPanelOpen = true"">Open Panel - -
AutoToggleScroll
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit - amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor - sagittis nunc, ut interdum ipsum vestibulum non. -
- + isAutoToggleScrollProPanelOpen = true"">Open ProPanel with AutoToggleScroll + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. +
"; private readonly string example3CsharpCode = @" -private bool isBlockingPanelOpen; -private bool isModelessPanelOpen; -private bool isModeFullPanelOpen; -private bool isAutoToggleScrollPanelOpen; -private BitProPanel bitPanelRef = default!;"; +private bool isBlockingProPanelOpen; +private bool isModelessProPanelOpen; +private bool isModeFullProPanelOpen; +private bool isAutoToggleScrollProPanelOpen; +private BitProPanel bitProPanelRef = default!;"; private readonly string example4RazorCode = @" - + + + isStartProPanelOpen = true"">Start + isEndProPanelOpen = true"">End - isOpenInPositionStart = true"">Start - isOpenPositionEnd = true"">End - isOpenInPositionTop = true"">Top - isOpenInPositionBottom = true"">Bottom + isTopProPanelOpen = true"">Top + isBottomProPanelOpen = true"">Bottom - - BitPanel with Start position and custom Size. - + + + BitProPanel with Start position and custom Size. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. - - BitPanel with End position and custom Size. - + + BitProPanel with End position and custom Size. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. - - BitPanel with Top position and custom Size. - + + BitProPanel with Top position and custom Size. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. - - BitPanel with Bottom position and custom Size. - + + BitProPanel with Bottom position and custom Size. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. "; private readonly string example4CsharpCode = @" private double customPanelSize = 300; @@ -444,8 +495,8 @@ BitPanel with Bottom position and custom Size. private readonly string example5RazorCode = @" - isStyledPanelOpen = true"">Open Styled panel - -
Style
- - BitPanel with custom style. - + isStyledProPanelOpen = true"">Open Styled ProPanel + + BitProPanel with custom style. - isClassedPanelOpen = true"">Open Classed panel - -
Class
- - BitPanel with custom class: -
Item 1
-
Item 2
-
Item 3
- + isClassedProPanelOpen = true"">Open Classed ProPanel + + BitProPanel with custom class: +
Item 1
+
Item 2
+
Item 3
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. +
- isPanelStylesOpen = true"">Open panel Styles - isProPanelStylesOpen = true"">Open ProPanel Styles + -
Styles
- - BitPanel with - Styles to customize its elements. - + BitProPanel with Styles to customize its elements. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. +
- isPanelClassesOpen = true"">Open panel Classes - isProPanelClassesOpen = true"">Open ProPanel Classes + -
Classes
- - BitPanel with - Classes to customize its elements. - + Footer = ""custom-footer"" })""> + BitProPanel with Classes to customize its elements. +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit + amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor + sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut + turpis. +
"; private readonly string example5CsharpCode = @" private bool isStyledPanelOpen; @@ -524,30 +593,29 @@ BitPanel with isRtlPanelOpenStart = true"">آغاز isRtlPanelOpenEnd = true"">پایان - -
سرصفحه ی آغاز
- -
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. - کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. - در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -
- - - - -
سرصفحه ی پایان
- -
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. - چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. - کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. - در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -
- + +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
+ +
+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. + چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. + کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. + در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. +
"; private readonly string example6CsharpCode = @" -private bool isRtlPanelOpenStart; -private bool isRtlPanelOpenEnd;"; +private bool isRtlProPanelOpenStart; +private bool isRtlProPanelOpenEnd;"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss index a54db15c4f..2fd279810f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss @@ -19,25 +19,10 @@ } ::deep { - .header-margin, - .custom-header { - margin-top: var(--bit-status-bar-height); - - @supports (-webkit-touch-callout: none) { - margin-top: env(safe-area-inset-top); - } - } - - .footer-margin { - @supports (-webkit-touch-callout: none) { - margin-top: env(safe-area-inset-bottom); - } - } - .custom-class { .item { - width: 3rem; - height: 3rem; + color: black; + padding: 1rem; margin: 0.5rem; border-radius: 0.5rem; background-color: brown; @@ -46,21 +31,30 @@ .custom-container { border: 0.25rem solid #0054C6; - border-end-start-radius: 1rem; - border-start-start-radius: 1rem; } .custom-overlay { background-color: #ffbd5a66; } - .custom-header { - padding-bottom: 1.25rem; + .custom-header-container { + padding: 1.5rem; background-color: tomato; } + .custom-header { + font-size: 2rem; + } + .custom-body { - padding-top: 1.25rem; + color: black; background-color: lightseagreen; } + + .custom-footer { + color: brown; + padding: 1.5rem; + font-size: 1.5rem; + background-color: tomato; + } }