volosoft / lepton-theme Goto Github PK
View Code? Open in Web Editor NEWIssues & discussions for the Lepton Theme
Issues & discussions for the Lepton Theme
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?
Hello,
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:
Reproduction steps:
abp new Acme.BookStore
migrations
global-styles.css
: add :root with new colors:root {
--lpx-brand: red;
--lpx-primary: red;
}
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:
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.
Menu items keep selected if the user changes the page before the page is loaded.
"@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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.