Open Closed

How to configure LeptonX theme appearance without having to make you own version of it just for simple changes? #7452


User avatar
0
improwise created
  • ABP Framework version: v8.2.0
  • UI Type: MAUI BLaxor / Blazor WASM / Blazor Server

The LeptonX is good but it also feel a bit "bloated" out of the box, especially if you want to design something for a smaller screen like a MAUI Blazor app. We are now wondering how we can make it less complicated without having to start implementing our own custom version of it just for some small changes. We fully accept that if we actually want to make design changes, we might need to override the theme components, and we probably will, but ideally it should not be needed for configuration changes. If not for any other reason in order to more easily update to newer versions of ABP which might contain theme changes.

  1. How can you hide language, container width and appearance menus, both in Main Header Toolbar (General Settings) and in MobileNavBar (MobileGeneralSettings)? Looking into the files for LeptonX, there seem to be switches like" @if (HasMultipleStyles)" and "@if (HasContainerWidth)" but we have not been able where to control/change those. Unlike previous Lepton theme, even if you disable all languages but one, the language menu still seem to render in LeptonX but with only one choice available (the enabled language).

  2. How can you specify theme, container width and appearance either in code or settings (appsettings or similar) for Leptonx so you can control it but not allowing users to modify it?

  3. For the MobileNavBar, is there a way to hide the "Settings" or at least move it in under the user menu so that "slot" in the tab bar can instead be used for something more useful, like navigating to a page just like Home/Dashboard? With only fem slots available, 4 including the hamburger menu, it seems like a waste to dedicate one of them to Settings that you might change once or twice (or never)

  4. How come the MobileNavBar can't be controlled like the normal main menu? Seems like the only way is to hardcode items using options.MobileMenuSelector = items => items.Where(...) which isn't ideal for various reasons.

  5. How can you control/change the number of items for MobileMenuSelector ? 2 seems to be default but have found not documentation on how to change that.

  6. Is the a way to make the hamburger menu a bit less "in your face" and perhaps also move it to be far right instead of in center which is a very odd location?

We have tried to find documentation to answer the questions above but have not been able to do so besides "make your own version of the theme" which does not seem reasonable for changes like the ones we are looking for here.

Thanks.


7 Answer(s)
  • User Avatar
    0
    improwise created

    This can be found in the Volosoft source code but the GitHub issue is private so don't know status:

    // TODO: Enable it after resolution of https://github.com/volosoft/lepton/issues/670 // HasMultipleStyles = !ThemeOptions.Value.Styles.IsNullOrEmpty() && ThemeOptions.Value.Styles.Count > 1; HasMultipleStyles = true;

    Also, even if you do something like this, the Appearance menu will show up with one item just like the Language menu will do with only one language:

            options.DefaultStyle = LeptonXStyleNames.Light;
    		options.Styles.Remove(LeptonXStyleNames.Dark);
    		options.Styles.Remove(LeptonXStyleNames.Dim);
    		options.Styles.Remove(LeptonXStyleNames.System);
    
  • User Avatar
    0
    improwise created

    Seems like this is the answer to question 5:

    SelectedMenuItems = Options.Value.MobileMenuSelector(menu.Items.AsReadOnly()).Take(2).ToList();

  • User Avatar
    0
    improwise created

    Still waiting for a response here...

  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    How can you hide language, container width and appearance menus, both in Main Header Toolbar (General Settings) and in MobileNavBar (MobileGeneralSettings)? Looking into the files for LeptonX, there seem to be switches like" @if (HasMultipleStyles)" and "@if (HasContainerWidth)" but we have not been able where to control/change those. Unlike previous Lepton theme, even if you disable all languages but one, the language menu still seem to render in LeptonX but with only one choice available (the enabled language).

    You can create the following component in your application:

    using Microsoft.AspNetCore.Components.Rendering;
    using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
    using Volo.Abp.DependencyInjection;
    
    namespace LeptonXDemoApp.Blazor.Components;
    
    [Dependency(ReplaceServices = true)]
    [ExposeServices(typeof(GeneralSettings), typeof(EmptyGeneralSettings))]
    public class EmptyGeneralSettings : GeneralSettings
    {
    
        protected override void BuildRenderTree(RenderTreeBuilder __builder)
        {
            __builder.OpenElement(0, "div");
            __builder.AddAttribute(1, "class", "empty-general-settings");
            __builder.CloseElement();
        }
    }
    

    How can you specify theme, container width and appearance either in code or settings (appsettings or similar) for Leptonx so you can control it but not allowing users to modify it?

    You can create the following script in wwwroot/globa.js

    $(function () {
    
        const currentInitLeptonX = window.initLeptonX;
        window.initLeptonX = function (layout, defaultStyle = "dim") {
    
            currentInitLeptonX(layout, defaultStyle);
    
            leptonx.globalConfig.defaultSettings =
            {
                appearance: "dark",
                containerWidth: 'full',
            };
    
            leptonx.init.run();
        }
    });
    

    And add it to the bundle configuration: (Configure both for Blazor Server)

    
    // For Blazor Server
    options.ScriptBundles.Configure(
        LeptonXThemeBundles.Scripts.Global,
        bundle =>
        {
            bundle.AddFiles("/global.js");
        }
    );
    
    // For Blazor WASM / MauiBlazor / Blazor Server
    options.ScriptBundles.Configure(
        BlazorLeptonXThemeBundles.Scripts.Global,
        bundle =>
        {
            bundle.AddFiles("/global.js");
        });
    

    3.For the MobileNavBar, is there a way to hide the "Settings" or at least move it in under the user menu so that "slot" in the tab bar can instead be used for something more useful, like navigating to a page just like Home/Dashboard? With only fem slots available, 4 including the hamburger menu, it seems like a waste to dedicate one of them to Settings that you might change once or twice (or never)

    It's a design decision, there is no configuration for it right now, you can customize it by overriding the MobileNavBar component in your project.

    4.How come the MobileNavBar can't be controlled like the normal main menu? Seems like the only way is to hardcode items using options.MobileMenuSelector = items => items.Where(...) which isn't ideal for various reasons.

    5.How can you control/change the number of items for MobileMenuSelector ? 2 seems to be default but have found not documentation on how to change that.

    It uses regular menu contributor to list menu items. Bottom bar is designed for mobile requirements and it has limited space. So only 2 items can be placed there, you can pick which ones will be there. But still all the menu items will be included in hamburger menu.

  • User Avatar
    0
    armagan created
    Support Team UI/UX Lead Designer

    Is the a way to make the hamburger menu a bit less "in your face" and perhaps also move it to be far right instead of in center which is a very odd location?

    For now, you need to override the styles to do something like this, but we are working on this and will change the design this way in the next versions.

  • User Avatar
    0
    improwise created

    Is the a way to make the hamburger menu a bit less "in your face" and perhaps also move it to be far right instead of in center which is a very odd location?

    For now, you need to override the styles to do something like this, but we are working on this and will change the design this way in the next versions.

    Thanks. I believe that is a very good idea as the current "theme" feels much more suitable for something like a game or a fashion app than something you would use in a more typical LOB app or similar. Since there are only 5 available slots on the navbar, using three of them for navigation seems like a waste. Like how often do you really need to change appearance and language that you need to have it available in one of the prime locations on the navbar when it could just as well be under the "my profile" section. Also please consider if the hamburger menu really need to be there and even if it is, it should probably be further to the right and bit toned down. Of course, the best would be if you could perhaps switch between a couple of different designs / themes, like the current one and the one I describe above. That should go a long way.

  • User Avatar
    0
    improwise created

    How can you hide language, container width and appearance menus, both in Main Header Toolbar (General Settings) and in MobileNavBar (MobileGeneralSettings)? Looking into the files for LeptonX, there seem to be switches like" @if (HasMultipleStyles)" and "@if (HasContainerWidth)" but we have not been able where to control/change those. Unlike previous Lepton theme, even if you disable all languages but one, the language menu still seem to render in LeptonX but with only one choice available (the enabled language).

    You can create the following component in your application:

    using Microsoft.AspNetCore.Components.Rendering; 
    using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common; 
    using Volo.Abp.DependencyInjection; 
     
    namespace LeptonXDemoApp.Blazor.Components; 
     
    [Dependency(ReplaceServices = true)] 
    [ExposeServices(typeof(GeneralSettings), typeof(EmptyGeneralSettings))] 
    public class EmptyGeneralSettings : GeneralSettings 
    { 
     
        protected override void BuildRenderTree(RenderTreeBuilder __builder) 
        { 
            __builder.OpenElement(0, "div"); 
            __builder.AddAttribute(1, "class", "empty-general-settings"); 
            __builder.CloseElement(); 
        } 
    } 
    

    How can you specify theme, container width and appearance either in code or settings (appsettings or similar) for Leptonx so you can control it but not allowing users to modify it?

    You can create the following script in wwwroot/globa.js

    $(function () { 
     
        const currentInitLeptonX = window.initLeptonX; 
        window.initLeptonX = function (layout, defaultStyle = "dim") { 
     
            currentInitLeptonX(layout, defaultStyle); 
     
            leptonx.globalConfig.defaultSettings = 
            { 
                appearance: "dark", 
                containerWidth: 'full', 
            }; 
     
            leptonx.init.run(); 
        } 
    }); 
    

    And add it to the bundle configuration: (Configure both for Blazor Server)

     
    // For Blazor Server 
    options.ScriptBundles.Configure( 
        LeptonXThemeBundles.Scripts.Global, 
        bundle => 
        { 
            bundle.AddFiles("/global.js"); 
        } 
    ); 
     
    // For Blazor WASM / MauiBlazor / Blazor Server 
    options.ScriptBundles.Configure( 
        BlazorLeptonXThemeBundles.Scripts.Global, 
        bundle => 
        { 
            bundle.AddFiles("/global.js"); 
        }); 
    

    3.For the MobileNavBar, is there a way to hide the "Settings" or at least move it in under the user menu so that "slot" in the tab bar can instead be used for something more useful, like navigating to a page just like Home/Dashboard? With only fem slots available, 4 including the hamburger menu, it seems like a waste to dedicate one of them to Settings that you might change once or twice (or never)

    It's a design decision, there is no configuration for it right now, you can customize it by overriding the MobileNavBar component in your project.

    4.How come the MobileNavBar can't be controlled like the normal main menu? Seems like the only way is to hardcode items using options.MobileMenuSelector = items => items.Where(...) which isn't ideal for various reasons.

    5.How can you control/change the number of items for MobileMenuSelector ? 2 seems to be default but have found not documentation on how to change that.

    It uses regular menu contributor to list menu items. Bottom bar is designed for mobile requirements and it has limited space. So only 2 items can be placed there, you can pick which ones will be there. But still all the menu items will be included in hamburger menu.

    Thank you. We will give this a try and report back on how it goes and if there are any additional questions.

Made with ❤️ on ABP v9.0.0-preview Updated on July 18, 2024, 06:07