Hello Shiwei,
Thank you for your response.
Best, Burkay
Hello Shiwei,
I got an email saying this is closed by ServiceBot. You mentioned that you would be reaching out to the team for input, and I was wondering if there have been any updates or developments regarding it.
Thank you for your help, and I look forward to hearing back from you!
Best, Burkay
I created a new project with ABP CLI 8.3.3 as you suggested earlier. The problem is fixed. Thank you for the fix and for the refund :)
Hello,
Thank you for all the efforts you put into this framework. We have been happily using ABP Suite for a while now.
For our customers to report issues, we need a ticketing system pretty much like "ABP Support." We believe that such a feature would greatly enhance customer experience and streamline the support process for both your customers and ours. We just wanted to ask if you have any intentions of publishing this as a module in the near future?
We appreciate your consideration and look forward to your response.
Burkay
Thank you! I wlll check it as soon as possible. Meanwhile, since this required a fix on your part, could you refund our question credit?
Hello.
I used ABP CLI 8.3.2 to generate a new project. Below is the command I used and its output:
abp new Acme.BookStore -u angular -dbms PostgreSQL -m none --theme leptonx-lite -csf ABP CLI 8.3.2 Creating your project... Project name: Acme.BookStore DBMS: PostgreSQL UI Framework: Angular Output folder: d:\Source\Acme.BookStore Using cached template: app, version: 8.3.2 Theme: LeptonXLite Check out the documents at https://abp.io/docslatest/solution-templates/layered-web-application 'Acme.BookStore' has been successfully created to 'd:\Source\Acme.BookStore' Creating initial migrations... Initial migrations are created. Installing client-side packages... Found 2 projects. d:\Source\Acme.BookStore\angular d:\Source\Acme.BookStore\aspnet-core\src\Acme.BookStore.HttpApi.Host Running Yarn on d:\Source\Acme.BookStore\angular yarn install v1.22.22 info No lockfile found. [1/4] Resolving packages... warning eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options. warning eslint > @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead warning eslint > @humanwhocodes/config-array > @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead warning eslint > file-entry-cache > flat-cache > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported warning eslint > file-entry-cache > flat-cache > rimraf > glob@7.2.3: Glob versions prior to v9 are no longer supported warning eslint > file-entry-cache > flat-cache > rimraf > glob > inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. warning karma > glob@7.2.3: Glob versions prior to v9 are no longer supported warning karma > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported [2/4] Fetching packages... [3/4] Linking dependencies... warning "@abp/ng.account > @abp/ng.theme.shared > @ng-bootstrap/ng-bootstrap@16.0.0" has incorrect peer dependency "@angular/common@^17.0.0". warning "@abp/ng.account > @abp/ng.theme.shared > @ng-bootstrap/ng-bootstrap@16.0.0" has incorrect peer dependency "@angular/core@^17.0.0". warning "@abp/ng.account > @abp/ng.theme.shared > @ng-bootstrap/ng-bootstrap@16.0.0" has incorrect peer dependency "@angular/forms@^17.0.0". warning "@abp/ng.account > @abp/ng.theme.shared > @ng-bootstrap/ng-bootstrap@16.0.0" has incorrect peer dependency "@angular/localize@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/animations@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/common@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/forms@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/core@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/platform-browser@^17.0.0". warning "@abp/ng.components > ng-zorro-antd@17.4.1" has incorrect peer dependency "@angular/router@^17.0.0". warning "@abp/ng.components > ng-zorro-antd > @ant-design/icons-angular@17.0.0" has incorrect peer dependency "@angular/common@^17.0.1". warning "@abp/ng.components > ng-zorro-antd > @ant-design/icons-angular@17.0.0" has incorrect peer dependency "@angular/core@^17.0.1". warning "@abp/ng.components > ng-zorro-antd > @ant-design/icons-angular@17.0.0" has incorrect peer dependency "@angular/platform-browser@^17.0.1". warning " > @abp/ng.theme.lepton-x@3.3.2" has unmet peer dependency "@abp/ng.account.core@~8.3.2". warning " > @angular-eslint/eslint-plugin@18.1.0" has unmet peer dependency "@typescript-eslint/utils@^7.11.0 || ^8.0.0-alpha.37". warning "@angular-eslint/eslint-plugin > @angular-eslint/utils@18.1.0" has unmet peer dependency "@typescript-eslint/utils@^7.11.0 || ^8.0.0-alpha.37". warning " > @angular-eslint/eslint-plugin-template@18.1.0" has unmet peer dependency "@typescript-eslint/utils@^7.11.0 || ^8.0.0-alpha.37". warning " > @angular-eslint/schematics@18.1.0" has unmet peer dependency "@angular-devkit/core@>= 18.0.0 < 19.0.0". warning " > @angular-eslint/schematics@18.1.0" has unmet peer dependency "@angular-devkit/schematics@>= 18.0.0 < 19.0.0". [4/4] Building fresh packages... success Saved lockfile. Done in 85.25s. Running Yarn on d:\Source\Acme.BookStore\aspnet-core\src\Acme.BookStore.HttpApi.Host yarn install v1.22.22 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning "@abp/aspnetcore.mvc.ui.theme.leptonxlite > @abp/aspnetcore.mvc.ui.theme.shared > @abp/bootstrap > bootstrap@5.3.3" has unmet peer dependency "@popperjs/core@^2.11.8". [4/4] Building fresh packages... success Saved lockfile. Done in 16.34s. UPDATE angular.json (6635 bytes) UPDATE src/app/app.module.ts (2092 bytes)
Below is the content of home.component.html right after above command returns:
<div class="my-3 text-center">
<h3>Let's improve your application!</h3>
<p>Here are some links to help you get started:</p>
</div>
<div class="card mt-4 mb-5">
<div class="card-body">
<div class="row text-center justify-content-md-center">
<ng-container
*ngTemplateOutlet="
starterLinkTemplate;
context: {
$implicit: {
title: 'Learn the ABP Framework',
description:
'Explore the comprehensive documentation to learn how to build a modern web application.',
links: [
{
href: 'https://abp.io/docs/latest?ref=tmpl',
label: 'See Documents'
}
]
}
}
"
></ng-container>
<ng-container
*ngTemplateOutlet="
starterLinkTemplate;
context: {
$implicit: {
title: 'Samples',
description: 'See the example projects built with the ABP Framework.',
links: [
{
href: 'https://abp.io/docs/latest/samples?ref=tmpl',
label: 'All samples'
}
]
}
}
"
></ng-container>
<ng-container
*ngTemplateOutlet="
starterLinkTemplate;
context: {
$implicit: {
title: 'ABP Community',
description: 'Get involved with a vibrant community and become a contributor.',
links: [
{
href: 'https://abp.io/community/',
label: 'Community'
},
{
href: 'https://abp.io/docs/latest/contribution?ref=tmpl',
label: 'Contribute'
}
]
}
}
"
></ng-container>
</div>
<div class="row text-center mt-lg-3 justify-content-md-center">
<ng-container
*ngTemplateOutlet="
starterLinkTemplate;
context: {
$implicit: {
title: 'ABP Blog',
description: 'Take a look at our recently published articles.',
links: [
{
href: 'https://abp.io/blog?ref=tmpl',
label: 'See Blog'
}
]
}
}
"
></ng-container>
<ng-template #githubButtonsTemplate>
<p class="mb-1">
<iframe
scrolling="no"
src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp&amp;title=&amp;aria-label=Star%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-star&amp;data-text=Star&amp;data-size=large&amp;data-show-count=true"
style="
width: 122px;
height: 28px;
border: none;
display: inline-block;
margin-right: 4px;
"
></iframe>
<iframe
scrolling="no"
src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Fissues&amp;title=&amp;aria-label=Issue%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-issue-opened&amp;data-text=Issue&amp;data-size=large"
style="
width: 72px;
height: 28px;
border: none;
display: inline-block;
margin-right: 4px;
"
></iframe>
<iframe
scrolling="no"
src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Ffork&amp;title=&amp;aria-label=Fork%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-repo-forked&amp;data-text=Fork&amp;data-size=large&amp;"
style="width: 72px; height: 28px; border: none; display: inline-block"
></iframe>
</p>
</ng-template>
</div>
</div>
</div>
This file is missing some parts such as welcome message, login button and template definitions. Welcome message and login button is not critical, but the lack of template definitions causes angular compilation error.
Please note that if that is the case, the second rule is completely useless and unnecessarily increases the bundle size. I want to believe that it is there for a reason. We already have a workaround and just wanted to bring this to your attention. Could you also tell your teammate about this? Thank you.
In ngx-lepton-x's ng-bundle.css, there is the following CSS rules:
.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
background-color: var(--lpx-card-bg);
padding: 0.875rem 1rem !important;
vertical-align: middle;
border-top: 1px solid var(--lpx-border-color) !important;
color: var(--lpx-content-text);
}
...
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover {
background-color: var(--lpx-ngx-dt-hover) !important;
}
When setting the background color of a hovered datatable row, there is a specificity war between these two. The first is always more specific and the background color of the second rule is never used. This should not be on purpose. Because if it was, the second rule would be completely useless. Also, the default behavior of ngx-datatable when hovering on rows is changed. Highlight is lost. Check and compare these examples:
https://swimlane.github.io/ngx-datatable/ https://commercial-demo.abp.io/language-management/languages
Moreover, the selected row is not highlighted when datatable's selectionType is set to single. There are two problems with this. The background-color from the first rule gets precedence (1) over the "blue background" from "ngx-datatable's material.css" (2). Expected is highlighting the selected row with proper colors of both light and dark ngx-lepton-x themes.
Among many, one possible solution is updating the second rule's selector and adding new rules for the selected row as below. For now, we added them to our custom scss. However, we would like these fixed in ABP to prevent littering that file.
.ngx-datatable.material:not(.cell-selection) .datatable-body .datatable-body-row:hover .datatable-body-cell {
background-color: var(--lpx-ngx-dt-hover) !important;
}
.lpx-theme-dark {
--lpx-ngx-dt-active: #2d2d2f; // TODO: check colors
--lpx-ngx-dt-active-hover: #32323a;
}
.lpx-theme-light {
--lpx-ngx-dt-active: #dddddd;
--lpx-ngx-dt-active-hover: #c2c2c4;
}
.ngx-datatable.material:not(.cell-selection) .datatable-body .datatable-body-row.active .datatable-body-cell {
background-color: var(--lpx-ngx-dt-active) !important;
}
.ngx-datatable.material:not(.cell-selection) .datatable-body .datatable-body-row.active:hover .datatable-body-cell {
background-color: var(--lpx-ngx-dt-active-hover) !important;
}
Awesome, thank you!