Activities of "TimMackey"

UPDATE 28 October 2018:

With the release of 6.0.0 and the reorganization of metronic files, you cannot rely on the default style sequence in 'angular.json' when using 'fontawesome Pro' fonts. In the sytles section the Pro fonts css file must be listed after metronic to avoid metronic overriding Pro fonts with Free fonts:

"src/metronic/assets/vendors/base/vendors.bundle.css",
"node_modules/@fortawesome/fontawesome-pro/css/all.css",

Pro fonts should be installed in the "dependencies" section of 'package.json', not "devDependencies": yarn add @fortawesome/fontawesome-pro

I finally figured this out. For future reference, follow these instructions:

1. login to fontawesome.com with your Pro credentials.

2. follow instructions on this page: [https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers])

2a. configure with your key:

npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
  npm config set "//npm.fontawesome.com/:_authToken" YOUR-KEY-HERE

2b. use yarn to install:

yarn add --dev @fortawesome/fontawesome-pro

package.json and yarn.lock should have been modified if yarn was successful.

3. add this link to src/index.html just above the closing </head> tag:

<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-pro/css/all.css">

4. use fonts. ' fontawesome pro' and 'fontawesome free' work together with no known issues.

On the Angular page it says "If you are using Angular, we recommend the angular-fontawesome package or Web Fonts with CSS." Does that mean ignore what's on the rest of the page? The instructions assume you know what to do with the packages recommended. The src/app/app.component.ts file example is for a new project and looks nothing like the AspNet Zero file.

What about the Pro version? There's another set of instructions here: [https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself]) I followed the "Using Web Fonts with CSS" instructions to no avail. The browser command console has many 404 Not Found errors, like > <a class="postlink" href="http://localhost:4200/webfonts/fa-regular-400.ttf">http://localhost:4200/webfonts/fa-regular-400.ttf</a> How do I resolve this? All existing icons in my app no longer work. Does this mean I cannot mix the Pro icons and those that come with AspNet Zero package?

There's another page [https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers]) if you are using a package manager like yarn. Tried this, too. All I've been able to accomplish is breaking the existing icons. I backed out all the changes and am back to square one.

Would you please post a recipe for integrating the Pro icons into an AspNet Zero app?

Thank you.

The problem was in my code. Sorry for the initial post not making that clear. I have edited the original post to clarify the source of the error was mine.

@ismcagdas,

I discovered 16 instances of

@HostListener('window:resize', ['$event'])
    onResize(event?) { ... }

being created in my code. Modifying my code for a single instance has markedly improved performance. Please keep the changes for Version 5.6.0 related to this issue.

This issue can be closed. Thank you.

@ismcagdas,

I merged with my project with Ver 5.6. The performance is still unacceptably sluggish.

I will send my project to <a href="mailto:[email protected]">[email protected]</a> so that you can observe the performance first-hand, and hopefully diagnose the problem and devise a solution.

Thank you.

Hi @ismcagdas,

I added the latest changes. This is an improvement. I note the dashboard panels with charts cause events. Panels without charts do not cause events. What is the target date for v5.6 release?

Thank you.

Hi @ismcagdas, Would you please post a status update on this issue? Thank you.

@ismcagdas,

I downloaded ASP.NET CORE & Angular, version 5.5.2 , ASP.NET Core 2.1 (please refer my download log) and merged changes f9acc0a and e535576. I did NOT merge my development code.

I observed the console.log messages during cursor movement, scrolling, and window resize, but not when there is no movement. This is an improvement. However, when moving the cursor quickly, the CPU usage shot up to 30%. Moving the cursor caused the log messages to continue at greater than 16 per second for another 4 seconds after the cursor stopped moving.

This behavior is not present in the PrimeNg Master code (which is available for download). Resizing, scrolling, and cursor movement do not cause any log messages, and the CPU load is minimal - cursor movement never exceeded 5% CPU usage.

When an app has multiple levels of nested views (like my app) and a text input control is used, there is a 1-2 second delay between clicking a key and the character showing up on screen. This is not acceptable UX.

While the latest change represents an improvement, I don't think this issue is fully resolved. Why is it required that there must be hundreds of log messages (and CPU load) for simply moving the cursor?

@ismcagdas -

I implemented the first set of changes in PhoneBookDemo. I am unable to implement the second set of changes because you are changing 'aspnet-zero-core', and 'aspnet-zero-core' is significantly different from what I am using as a test bed: 'aspnet-zero-samples/PhoneBook-Angular', as reported since the beginning of this thread.

I don't know how this issue gets resolved without both of us using the same code base and inserting the test code in the same locations in .htm and .ts files.

I hesitate to merge the current release with my code (v5.3) since it is a full day ordeal. I would prefer to perform a merge after a solution has been verified and released.

To better illustrate the problem, I am logging...

showtime() {
        let time = new Date();
        console.log(time.getMinutes() + ':' + time.getSeconds() + '.' + time.getMilliseconds() );
    }

Here is a screen shot of my results: These results are consistent with what I see in my application.

@ASP.Net Zero Community:

Would you have 10 minutes to assist in finding a resolution to this issue? If yes, would you please drop in a few lines of code to the prescribed locations into your app and report the results (and your release version) in this thread?

Add this code as the last line in 'app.component.html':

<div [ngClass]="showtime()"></div>

Add this code after the constructor in 'app.component.ts':

showtime() {
        let time = new Date();
        console.log(time.getMinutes() + ':' + time.getSeconds() + '.' + time.getMilliseconds() );
    }

Thank you.