After migrating to LeptonX Angular UI, I am getting following error in browser and UI doesnt load.

"Refused to apply style from 'http://localhost:4200/bootstrap-dim.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
"

Hi,

I have put this code on my pages :

@inject IPageLayout PageLayout @{ PageLayout.Content.Title = "test"; }

But I see no H1 on the top of the pages.

BTW on the base page of a startup template (tenant, settings..) there is no title too.

Thanks for your help.

Nicolas.

The Sidebar is open by default, is there a way to change its behavior and make it closed by default?

The question on StackOverflow

Hello,

• There is an issue with RTL, when changing the language to Arabic the configs in the sidebar became hidden.

thanx.

The npm package @abp/aspnetcore.mvc.ui.theme.leptonxlite depends on the @abp/aspnetcore.mvc.ui.theme.shared package, but its version has remained at v7.2.1 since version v2.2.0.

While this is not a problem, it is not consistent with abp's strategy for other npm packages. Is it possible to use the same dependency version update policy for future releases?

https://www.npmjs.com/package/@abp/aspnetcore.mvc.ui.theme.leptonxlite/v/3.0.1?activeTab=code

https://www.npmjs.com/package/@abp/aspnetcore.mvc.ui.theme.leptonxlite/v/2.2.0?activeTab=code

https://github.com/abpframework/abp/blob/dev/npm/packs/aspnetcore.mvc.ui.theme.basic/package.json

Hi,
I recently switched from Lite theme to LeptonX theme. I had created all modals in the project with abp-modal. Due to a need in the project I had to prevent the modal from closing on click or pressing the 'esc' key. I saw in the docs that I could do this in abp-modal's settings and changed the settings to backdrop:static keyboard:false. While backdrop static worked, pressing 'esc' still caused the modal to close. And when I tried it is nothing specific to this component, it was the same for all modals in the project.

Is there such a bug in using abp-modal with LeptonX? I would appreciate it if you could comment, I don't understand if there is something I missed, other than that everything works.

modal.html

<abp-modal [busy]="isModalBusy" [(visible)]="isModalOpen" [options]="modalOptions" (disappear)="closeModal()" (appear)="openModal()">
    <ng-template #abpHeader>
        <h3>
            //My Header
        </h3>
    </ng-template>

    <ng-template #abpBody>
        <form [formGroup]="form" id="form-template" (ngSubmit)="submitForm()" validateOnSubmit>
            <ul ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeTabId" [destroyOnHide]="false">
                <li [ngbNavItem]="0">
                    <a ngbNavLink>
                        {{ 'FormTemplate' | abpLocalization }}
                    </a>
                    <ng-template ngbNavContent>
                        <div class="fade-in-top">
                            <div class="mb-3">
                                <label class="form-label" for="name">
                                   //my label
                                </label>

                                <input
                                       // input values
                                />
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="description">
                                    //Description
                                </label>

                                <textarea
                                       //another input
								</textarea>
                            </div>
                        </div>
                    </ng-template>
                </li>
                <li [ngbNavItem]="1">
                    <a ngbNavLink>
                        //Second Tab Header
                    </a>
                    <ng-template ngbNavContent>
                        <div class="fade-in-top">
                            <div class="mb-3">
                                <tab2-content-component></tab2-content-component>
                            </div>
                        </div>
                    </ng-template>
                </li>
            </ul>

            <div [ngbNavOutlet]="nav"></div>
        </form>
    </ng-template>

    <ng-template #abpFooter>
        <button type="button" class="btn btn-secondary" abpClose>
            {{ 'AbpUi::Cancel' | abpLocalization }}
        </button>

        <abp-button iconClass="fa fa-save" buttonType="submit" formName="form-template">
            {{ 'AbpUi::Save' | abpLocalization }}
        </abp-button>
    </ng-template>
</abp-modal>

modal.ts (deleted unneccesary part)

export class CreateOrEditFormTemplateComponent implements OnInit {
    @Input() isModalOpen = false;
    @Output() onCreateOrEditModalClose = new EventEmitter<boolean>();
	isModalBusy = false;
    modalOptions = {modalDialogClass: "builder-modal",backdrop:'static',keyboard:false} as NgModalOptions	;
    form: FormGroup;
    public formOptions: any = {
        components: []
    };
    activeTabId = 0;

    constructor(private fb: FormBuilder) {
    }

    ngOnInit(): void {
    }

    closeModal(refreshList = false) {
        this.isModalBusy = false;
        this.form?.reset();
        this.selected = null;
        this.isModalOpen = false;
        this.activeTabId = 0;
        this.onCreateOrEditModalClose.emit(refreshList);
    }

    openModal() {
        this.buildForm();
    }

    buildForm() {
        //build form 
    }

    submitForm() {
       //submit
    }
}

And thats how I call modal component in its parent
<app-create-template [isModalOpen]="isCreateOrEditModalOpen" (onCreateOrEditModalClose)="onCreateOrEditModalClosed($event)" [selected]="selected"></app-create-template>

I got an application I migrated from 5.3.4 -> 6 and I realized that when I type 20.1 in the input field, I got 201 in the ViewModel.
I created a new project from scratch and it works... I really don't understand what can be gone wrong

 public class CreateMetalloViewModel
        {
            [Required]
            [StringLength(128)]
            public string Metallo { get; set; }

            [Required]
            [Display(Name ="Euro)]
            public float Euro{ get; set; }
        }

here I got 201 for Item.Euro

    public async Task<IActionResult> OnPostAsync()
        {
            var dto = ObjectMapper.Map<CreateMetalloViewModel, CreateOrUpdateAnagraficaMetalloDto>(Item);
            await _anagraficaMetalloAppService.CreateAsync(dto);
            return NoContent();
        }

And the form is really simple

<abp-dynamic-form abp-model="Item" asp-page="/Anagrafiche/Metalli/CreateModal">
    <abp-modal>
        <abp-modal-header title="Aggiungi nuovo metallo"></abp-modal-header>
        <abp-modal-body>
            <abp-form-content />
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
</abp-dynamic-form>

Any suggestion?

Hi,

When I follow the LeptonX migration instructions, I get an error in the console and localization stops working.

Error: Could not find localization source: ThemeLeptonX

First, doing the Angular LeptonX migration works and the menus localize as expected.

Then, when I migrate the API Host project (using MVC instructions) to update the login page, the menus generated by the Angular routes stop localizing and I get the error. Skipping this step means that the login page theme doesn't match the main UI.

I'm enquiring as to why this content max width is set to 1280px.
It means that the full width is not used, most users have a higher resolution than this.

.lpx-content-container .lpx-content {
padding: 2em;
max-width: 1280px;
margin: 0 auto;

I will be remove the setting from my projects to get a better layout:

For more detail: https://support.abp.io/QA/Questions/1748/Scroll-Issues-with-Lepton-X---Freezes-after-scrolling

Reproduction steps:

• run abp new Acme.BookStore
• run migrations
• Change global-styles.css: add :root with new colors

:root {
    --lpx-brand: red;
    --lpx-primary: red;
}

• Take note that the icons are red, instead of pink/purple (original)
• Take note that the button is still the lepton default

versions

• ABP Version 7.4.0, commercial & non-commercial
• LeptonX version 2.4.* (and also 2.3.*)

Expectation

I would expect that if I change lpx-primary, that it will have effect on all primary elements. Here are some examples that remain unchanged, similar to the button mentioned in the reproduction steps.

Hello,

I'm very excited about leptonx since its first announcement.

As there has not been a code update since the first alpha version (released in August), could you please give us an update regarding the project status/ release date? Is it still on track to be released "just after ABP 5.0 final" (which has been published last week)? And additionally, will 1.0 stable include support for MVC?

Thanks and best regards
Claus

Hi,I had abp commercial license (Business),can I get source code of this package(@abp/ng.theme.lepton-x
@volosoft/abp.ng.theme.lepton-x)?

Hello,

since a couple of weeks, the menu items "Bootstrap Components" and "Bootstrap Forms" on the lepton-x marketing page (https://x.leptontheme.com) can't be expanded. Therefore we can't access these samples.

Regards
Claus

One issues with the existing Lepton theme is that this is a lot of wasted / white space on the page. In business applications the user wants to maximize the page real estate.

The screen shot is from you recent community demo with mark up to show an example of where space is lost. It would be good to have the lost space recovered to show more content below.

(PS I assume this is the place to provide the requested feedback?)

I tried to use NavItemsService to add new Componet to the top right nav items but it's not being rendered don't know what is the reason, I tried the same with UserMenuService and It worked fine but I don't need it there, however I tried another solution to replace the Language Selection Component using ReplaceableComponentsService with a new Component which should include both the Language Selection Component and My New Component and it's rendered but the issue is I can't reuse the Language Selection Component,
I tried to use the selector <abp-language-selection> </abp-language-selection> and <lpx-language-selection></lpx-language-selection> but both can't be found or treated as existing Components

Hi,

I've intensively tested LeptonX (MVC), as I'm very excited about it.
I encountered several issues, some have been fixed with beta.3 (e.g. the tenantbox is now showing :)), but the following issues still exist:

• Login/ Register: Page Alerts aren't displayed; if you enter wrong username/ password, no error message is displayed; there is also no error message if you register and the username already exists.
• "Linked Accounts" user menu item is not working
• Breadcrumb clicks aren't working
• User Toolbar has small display error, the chevron icon is missing, therefore it's quite confusing

Additionally, I have a question: Some colors are still "hand-coded" in bootstrap-[themename].css, e.g. btn-primay. If we change the colors from the variables, the buttons are still blue. Therefore, we have to replace all the colors manually using search and replace, which is not a huge problem, but means that we have to do it with every update again. Do you plan to use css variables for all classes in future?

btw, I love the new design! Great work!

PS: I'm using LeptonX Commercial.

Hi

I added LeptonX-lite(@abp/ng.theme.lepton-x@preview) theme into my project by following the instruction below.
https://blog.abp.io/abp/LeptonX-Theme-for-ABP-Framework-Alpha-Release?msclkid=eea22aa6a94511ecbf935405b5f6e105

It looks very nice. But the modal window is disabled when adding or editing user, role, tenant etc.

Actually all modal windows are disabled.

My project was created with Angular and Entity Framework Core
Here is the style in my angular.json file
"styles": [
{
"input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"inject": true,
"bundleName": "fontawesome-all.min"
},
{
"input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
"inject": true,
"bundleName": "fontawesome-v4-shims.min"
},
{
"input": "node_modules/@swimlane/ngx-datatable/index.css",
"inject": true,
"bundleName": "ngx-datatable-index"
},
{
"input": "node_modules/@swimlane/ngx-datatable/assets/icons.css",
"inject": true,
"bundleName": "ngx-datatable-icons"
},
{
"input": "node_modules/@swimlane/ngx-datatable/themes/material.css",
"inject": true,
"bundleName": "ngx-datatable-material"
},
{
"input": "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css",
"inject": false,
"bundleName": "bootstrap-rtl.min"
},
"node_modules/@volo/ngx-lepton-x.lite/styles/sidemenu-layout.min.css",
"node_modules/bootstrap-icons/font/bootstrap-icons.css",
"src/styles.scss"
],

Any idea what caused this issue and how to fix it? Is this a bug?

Thank you in advance.

Problem

Menu items keep selected if the user changes the page before the page is loaded.

Loom Video

Reproduce Steps

• Open Network Throttling setting in Slow 3G.
• Click items randomly.

Additional Information

"@angular/animations": "~15.1.1",
"@angular/common": "~15.1.1",
"@angular/compiler": "~15.1.1",
"@angular/core": "~15.1.1",
"@angular/forms": "~15.1.1",
"@angular/localize": "~15.1.1",
"@angular/platform-browser": "~15.1.1",
"@angular/platform-browser-dynamic": "~15.1.1",
"@angular/router": "~15.1.1",


"@abp/ng.components": "~7.1.0",
"@abp/ng.core": "~7.1.0",
"@abp/ng.oauth": "~7.1.0",
"@abp/ng.setting-management": "~7.1.0",
"@abp/ng.theme.shared": "~7.1.0",
"@volo/abp.commercial.ng.ui": "~7.1.0",
"@volo/abp.ng.account": "~7.1.0",
"@volo/abp.ng.audit-logging": "~7.1.0",
"@volo/abp.ng.identity": "~7.1.0",
"@volo/abp.ng.language-management": "~7.1.0",
"@volo/abp.ng.openiddictpro": "~7.1.0",
"@volo/abp.ng.saas": "~7.1.0",
"@volo/abp.ng.text-template-management": "~7.1.0",
"@volosoft/abp.ng.theme.lepton-x": "^1.0.4",

Create a new project with ABP Framework
Blazor Webassembly - LeptonX Lite
Like: abp new Acme.BookStore -u blazor

Reduce the size of the browser until the mobile menu appears.
Try to open the menu: nothing happens.

Configuring this project is too cumbersome，Please provide a simple installation script，thanks

The action items (Edit and Delete) do not render correctly.

1. When there is only 1 item in the grid the Delete option does not show:
   

2. When there are 2 or more and the last item is chosen, the pop up appears above the Action button.
   This is confusing as it is not clear which row is being actioned:
   

Hello ,

On the leptonx website, you mentioned that we can customize the app using the SCSS style

but in the angular project, there is only a reference for CSS files.