Hi, there was a problem in breadcrumbs, we just fixed it and it'll be available in the next version (2.4) of LeptonX
Hi phil@travelengine.com.au
Yes, there was a confusing implementation for BrandingProvider. We've just made some changes and improved it. It'll work same as documentation says in the next release of LeptonX.
It seems working, If it meets your requirements that is acceptable.
Bu if you don't want to customize the theme source code, you can use the original JS file and customize loading CSS logic.
(function () {
window.initLeptonX = function (layout = currentLayout) {
currentLayout = layout;
// 👇 This event will be called when user interacts a theme change button.
leptonx.CSSLoadEvent.on(event => {
// 👇 You can even customize here according to your requirements.
loadThemeCSS('bootstrap', event, 'bootstrap-');
loadThemeCSS('color', event, '');
});
leptonx.init.run();
}
function isAlreadyLoaded(id) {
return document.querySelector(`link[id^="lpx-theme-${id}-"]`)?.id;
}
function loadThemeCSS(key, event, cssPrefix) {
const newThemeId = createId(event.detail.theme, key);
const previousThemeId = createId(event.detail.previousTheme, key);
const loadedCSS = isAlreadyLoaded(key);
if (newThemeId !== loadedCSS) {
leptonx.replaceStyleWith(
createStyleUrl(cssPrefix + event.detail.theme),
newThemeId,
previousThemeId || loadedCSS
);
}
}
function createId(theme, type) {
return theme && `lpx-theme-${type}-${theme}`;
}
leptonx.CSSLoadEvent.on(event => {
loadThemeCSS('bootstrap', event, 'bootstrap-');
loadThemeCSS('color', event, '');
});
function createStyleUrl(theme, type) {
if (isRtl()) {
theme = theme + '.rtl';
}
if (type) {
return `/Themes/LeptonX/Global/${currentLayout}/css/${type}-${theme}.css`;
}
return `/Themes/LeptonX/Global/${currentLayout}/css/${theme}.css`;
}
function isRtl() {
return document.documentElement.getAttribute('dir') === 'rtl';
}
})();
Hello kfrancis Let me check this out. Probably some APIs or XAML extensions might be changed that we used.
By default, it's not possible with an option or configuration but you can try the following approach:
There is a section in the layout like below
<head>
@await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Application)
<title>@title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="description" content="@ViewBag.MetaDescription" />
<link rel="icon" href="~/favicon.svg" type="image/svg+xml">
<!-- 👇 You can customize this section in cshtml 👇 -->
<link href="~/Themes/LeptonX/Global/side-menu/css/bootstrap-@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-bootstrap-@selectedStyle" />
<link href="~/Themes/LeptonX/Global/side-menu/css/@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-color-@selectedStyle" />
<abp-style-bundle name="@LeptonXThemeBundles.Styles.Global" />
You can access the entire page code by downloading LeptonX source code
Hi Enisn, We use ABP 7.3, and we manually setup lepton in 2.3 instead of 2.4-preview.
We try to understand why being up to date on a stable version we end up with a preview.
By putting the lepton manually in 2.3 it works.
ABP Framework/Commercial & LeptonX are different products and they have different versions & release cycles and pipleines. And LeptonX depends on ABP, so we can't publish it before ABP is released. ABP templates are shipped with ABP release, so the templates includes 2.3.*-* version pattern to make the build successful, because LeptonX stable version isn't available when the ABP is released.
So, this is the main reason why templates can't know the latest version of LeptonX, and it references the latest stable or premium version of a specific major version
Hi,
LeptonX 2.3 packages for ABP 7.3
If you use ABP 2.2, you should use LeptonX v2.2.x
Can you try with 2.2.2 LeptonX version?
As a second approach, you can replace LeptonXStyleProvider implementation in your application instead customizing application layout.
[Dependency(ReplaceServices = true)]
[ExposeServices(typeof(LeptonXStyleProvider))]
public class MyLeptonXStyleProvider : LeptonXStyleProvider
{
public ICurrentTenant CurrentTenant { get; }
public MyLeptonXStyleProvider(
IHttpContextAccessor httpContextAccessor,
IOptions<LeptonXThemeOptions> leptonXThemeOption,
ICurrentTenant currentTenant) : base(httpContextAccessor, leptonXThemeOption)
{
CurrentTenant = currentTenant;
}
public override async Task<string> GetSelectedStyleAsync()
{
if (CurrentTenant.Name == "Volosoft")
{
return "blue"; // It'll load blue.css (don't use '.css' extension here)
}
return await base.GetSelectedStyleAsync();
}
}
Make sure cookies are deleted, otherwise the client will load the last css after JS is initialized. To disable JavaScript style loading by overriding the Themes\LeptonX\Global\scripts\style-initializer.js file with the following customized version:
(function () {
window.initLeptonX = function (layout) {
leptonx.init.run();
}
})();
It can be placed under wwwroot
Hi, it's not provided by default and and LeptonXThemeOptions is not a tenant-specific option. You can implement something different to make tenant-specific styles.
There is a section in the layout like below
<head>
@await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Application)
<title>@title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="description" content="@ViewBag.MetaDescription" />
<link rel="icon" href="~/favicon.svg" type="image/svg+xml">
<!-- 👇 You can customize this section in cshtml 👇 -->
<link href="~/Themes/LeptonX/Global/side-menu/css/bootstrap-@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-bootstrap-@selectedStyle" />
<link href="~/Themes/LeptonX/Global/side-menu/css/@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-color-@selectedStyle" />
<abp-style-bundle name="@LeptonXThemeBundles.Styles.Global" />
You can access the entire page code by downloading LeptonX source code
Thanks for your detailed explanation, I'm creating another internal issue for the angular version, we'll fix it in next releases