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.


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

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11