Thank you for the information. I'll go with your suggestion for now.
I just updated to the latest ABP CLI version:
dotnet tool update -g Volo.Abp.Cli --version 6.0.0-rc.5
Tool 'volo.abp.cli' was successfully updated from version '6.0.0-rc.4' to version '6.0.0-rc.5'.
Logged into my commercial license and ran the command:
abp get-source Volo.Abp.LeptonXTheme.Pro
Got the following error:
[10:11:14 INF] ABP CLI (https://abp.io) [10:11:14 INF] Version 6.0.0-rc.5 (Prerelease) [10:11:15 INF] Output folder: C:\Users\ZhengLai\source\repos\leptonX [10:11:15 INF] Downloading source code of Volo.Abp.LeptonXTheme.Pro [10:11:15 INF] Version: Latest [10:11:15 INF] Output folder: C:\Users\ZhengLai\source\repos\leptonX Error occured while getting the latest version from https://abp.io/api/download/module/get-version/ : Remote server returns '403-Forbidden'. Message: volosoft/lepton repository has no release yet! [10:11:17 WRN] The remote service is currently unavailable, please specify the version. [10:11:17 WRN] [10:11:17 WRN] Find the following template in your cache directory: [10:11:17 WRN] Template Name Version [10:11:17 WRN] app 4.4.3 [10:11:17 WRN] app pro-4.4.4 [10:11:17 WRN] app pro-5.1.2 [10:11:17 WRN] app pro-5.2.1 [10:11:17 WRN] [10:11:17 WRN] Use command: abp new Acme.BookStore -v version
I've logged in with enterprise license but I currently cannot download the LeptonX theme source code with any of the following commands as per the docs: abp get-source Volo.Abp.LeptonXTheme.Pro abp get-source Volo.Abp.LeptonXTheme abp get-source Volo.LeptonXTheme.Pro abp get-source Volo.LeptonTheme
abp get-source Volo.Abp.LeptonXTheme.Pro specified in the docs has been giving me the following error for a few days now:
[15:45:45 INF] Downloading source code of Volo.Abp.LeptonXTheme.Pro
[15:45:45 INF] Version: Latest
[15:45:45 INF] Output folder: C:\Users...\source\repos\leptonX
Error occured while getting the latest version from https://abp.io/api/download/module/get-version/ : Remote server returns '403-Forbidden'. Message: volosoft/lepton repository has no release yet!
[15:45:46 WRN] The remote service is currently unavailable, please specify the version.
I tried specifying the version number as follows as well but it says that the module was not found:
abp get-source Volo.Abp.LeptonXTheme.Pro --version 1.0.0-rc.4
I tried specifying all older version but it says that the version was not found.
The only thing that worked was downloading the Lepton theme with version specified as follows:
abp get-source Volo.LeptonTheme --version 5.1.1
But I need the LeptonX source code.
Hi, do you have examples of other organizations that are currently using LeptonX theme on their live website? My project's stakeholders want some reassurance before making the decision to upgrade from Lepton theme to LeptonX theme.
For LeptonX Theme for Angular UI, is it possible to have the main header toolbar at the top while keeping the main menu in the left sidebar (to mimic the old Lepton Theme layout)? I'm expecting this configuration to be straight forward as users upgrading from Lepton to LeptonX theme should be able to keep the same desktop layout for navigation.
The LeptonX documentation for Angular UI does not have any details on this configuration and I currently cannot get the source code with abp get-source Volo.Abp.LeptonXTheme.Pro due to the following error:
Error occured while getting the latest version from https://abp.io/api/download/module/get-version/ : Remote server returns '403-Forbidden'. Message: volosoft/lepton repository has no release yet!
Thank you for all the information! I have a better understanding now and I've decided to go forward with using Vue 3 (without build tools) with ABP MVC UI.
Hi,
I examined the Forms module but I couldn't find any dependencies for build tools, are you able to confirm if you are not using any build tools for bundling or compiling the Vue code (.js component files)? https://v2.vuejs.org/v2/guide/deployment.html#Without-Build-Tools
Also, since Vue 3 is backwards compatible with Vue 2, do you think I can replace the @abp/vue standard package (which uses Vue 2) with the Vue 3 official package (since I want to use Vue 3 in my application), and still have the ABP Forms module still working?
If not, what's the likelihood of the Forms module upgrading to Vue 3 within the next 2 years?
For the latest version of ABP:
I see that the commercial Forms module uses Vue 2.6, so I was wondering if ABP Framework with MVC supports all of Vue's features and plugins, and even Vue 3, out-of-the-box? Does this require additional configuration? If so, what is the bundler that ABP Framework with MVC is using and how do we configure it to use all Vue features or Vue 3 along with other third party libraries?
Regards, Zheng
The docs show localization examples using json files, however, Telerik UI for Blazor provides localization in resx files. Is it recommended to manually convert these resx files to json to be used in ABP or can we also use resx files for localization in ABP?
I'm trying to override the MainHeader component in LeptonTheme to add conditional logic for rendering the MainSidebar and I'm looking for the best approach to use.
One approach I've tried is downloading the LeptonTheme module source code, customizing it and including it in my solution. However, we don't want to use this approach as we use are using a private NuGet feed and the cycle for customizing UI, packaging, deploying and verifying it in our application is too long.
The second approach I'm trying is overriding the MainHeader Razor component and its code-behind file using this documentation: https://docs.abp.io/en/abp/latest/UI/Blazor/Customization-Overriding-Components#example-replacing-with-the-code-behind-file. I've copied the code from the LeptonTheme MainHeader Razor compoonent and code-behind file into a MyMainHeader component in my application and added the isSidebarNavRendered flag (set within OnLocationChanged method) to conditionally render the sidebar in the Razor component. Is this the right way to override the LeptonTheme components or is there a better way?
Below is the file structure within my Blazor project and the code-behind file for my custom MyMainHeader component:
using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Routing;
using Volo.Abp.AspNetCore.Components.Web;
using Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ApplicationLayout.Navigation;
using Volo.Abp.LeptonTheme.Management;
using Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ApplicationLayout.MainHeader;
using Volo.Abp.DependencyInjection;
namespace MyOrg.MyApp.Blazor.Components.ApplicationLayout.MyMainHeader
{
[ExposeServices(typeof(MainHeader))]
[Dependency(ReplaceServices = true)]
public partial class MyMainHeader
{
//public bool IsToolbarNavShown { get; set; }
//public bool IsSidebarNavShown { get; set; }
public bool isSidebarNavRendered { get; set; }
[Inject]
private NavigationManager NavigationManager { get; set; }
//[Inject]
//protected MainMenuProvider MainMenuProvider { get; set; }
[Inject]
private IAbpUtilsService UtilsService { get; set; }
//protected MenuViewModel Menu { get; set; }
protected override async Task OnInitializedAsync()
{
Menu = await MainMenuProvider.GetMenuAsync();
await SetBodyClassesAsync();
Menu.StateChanged += RefreshMenu;
NavigationManager.LocationChanged += OnLocationChanged;
}
private void OnLocationChanged(object sender, LocationChangedEventArgs e)
{
Console.WriteLine(NavigationManager.Uri);
if (NavigationManager.Uri == "https://localhost:44313/" || NavigationManager.Uri == "https://localhost:44313/Account/SecurityLogs")
{
Console.WriteLine("Hide Sidebar!!!");
isSidebarNavRendered = false;
}
else
{
Console.WriteLine("Show Sidebar!!!");
isSidebarNavRendered = true;
}
IsSidebarNavShown = false;
}
private void ToggleToolbarNav()
{
IsToolbarNavShown = !IsToolbarNavShown;
}
private void ToggleSidebarNav()
{
IsSidebarNavShown = !IsSidebarNavShown;
}
private async Task SetBodyClassesAsync()
{
//TODO: Does setting body classes so frequently effects performance?
if (Menu.Placement == MenuPlacement.Top)
{
await UtilsService.AddClassToTagAsync("body", "lp-topmenu");
}
else if (isSidebarNavRendered)
{
if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
{
await UtilsService.AddClassToTagAsync("body", "lp-closed");
await UtilsService.RemoveClassFromTagAsync("body", "lp-opened-sidebar");
await UtilsService.RemoveClassFromTagAsync("body", "lp-body-fixed");
}
else
{
await UtilsService.RemoveClassFromTagAsync("body", "lp-closed");
await UtilsService.AddClassToTagAsync("body", "lp-opened-sidebar");
await UtilsService.AddClassToTagAsync("body", "lp-body-fixed");
}
}
}
//public void Dispose()
//{
// Menu.StateChanged -= RefreshMenu;
// NavigationManager.LocationChanged -= OnLocationChanged;
//}
private async Task ToggleNavbarStatusAsync()
{
Menu.ToggleNavbarStatus();
await SetBodyClassesAsync();
}
private async Task OnNavBarMouseOverAsync()
{
//TODO: MOUSEOVER IS NOT PERFORMANT, WE SHOULD USE MOUSEENTER/MOUSELEAVE
if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
{
if (await UtilsService.HasClassOnTagAsync("body", "lp-closed"))
{
await UtilsService.AddClassToTagAsync("body", "lp-extended");
}
}
}
private async Task OnNavbarMouseOutAsync()
{
if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
{
if (await UtilsService.HasClassOnTagAsync("body", "lp-closed"))
{
await UtilsService.RemoveClassFromTagAsync("body", "lp-extended");
}
}
}
private void RefreshMenu(object sender, EventArgs e)
{
InvokeAsync(StateHasChanged);
}
}
}
The other thing is that the OnLocationChanged method seems to only be called when going to the home page, but not when going to any other page.