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

8 Answer(s)

• 

  0

  improwise created 5 months ago

  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);
  

  Save Cancel
• 

  0

  improwise created 5 months ago

  Seems like this is the answer to question 5:

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

  Save Cancel
• 

  0

  improwise created 5 months ago

  Still waiting for a response here...

  Save Cancel
• 

  0

  enisn created 5 months ago

  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.

  Save Cancel

  1
• 

  0

  armagan created 5 months ago

  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.

  Save Cancel

  1
• 

  0

  improwise created 5 months ago

  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.

  Save Cancel
• 

  0

  improwise created 5 months ago

  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.

  Save Cancel
• 

  0

  liangshiwei created 4 months ago

  Support Team Fullstack Developer

  :)

  Save Cancel