Activities of "sumeyye.kurtulus"

Hi,

I didn't really get an answer for this topic before it was auto-closed. Could you have another look into this, or give me some feedback on what the right approach would be on providing global styling, that can override LeptonX Themes?

Kind Regards, Marc

Hello Marc,

The questions are automatically closed when we do not get interaction. Seeing that, we will be managing this issue internally. You can follow the process here https://github.com/abpframework/abp/releases

Until we publish the fix, you can extend the default service to override the related function.

import { DOCUMENT, inject, Injectable } from '@angular/core';
import { LPX_STYLE_FINAL, LpxStyle, StyleService } from '@volo/ngx-lepton-x.core';
@Injectable({
  providedIn: 'root',
})
export class MyStyleService extends StyleService {
  private myDocument = inject<Document>(DOCUMENT);

  constructor() {
    super(inject(LPX_STYLE_FINAL), inject(DOCUMENT));
  }

  override loadStyle(style: LpxStyle, direction: 'ltr' | 'rtl'): Promise<HTMLStyleElement | void> {
    return new Promise(resolve => {
      const linkElement = this.createLinkElem(style, direction, resolve);
      const styleLinks = Array.from(
        this.myDocument.head.querySelectorAll('link[rel="stylesheet"]')
      );
      const firstStyleLink = styleLinks[0];

      if (firstStyleLink) {
        firstStyleLink.insertAdjacentElement('beforebegin', linkElement);
      } else {
        this.myDocument.head.appendChild(linkElement);
      }

      this.lastInjectedStyle = linkElement;
      resolve(linkElement);
    });
  }
}

Then, in your app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    {
      provide: StyleService,
      useClass: MyStyleService,
    },
  ],
};

You can let us know if you need further assistance. Thank you for your cooperation.

I assumed that you were using the latest version. Could you try this instead?

// app.module.ts
 ThemeLeptonXModule.forRoot({
  styleFactory: styles => {
      const filtered = styles.filter(s => s.bundleName !== 'abp-bundle');
      filtered.push({ bundleName: 'my-bundle' }); // ← Matches your filename
      return filtered;
  },
}),

2- for call abp end points I didn't find a solution to replace abp controller call from angular

I may not fully understand what you meant here, but this document might be helpful https://abp.io/docs/latest/framework/ui/angular/environment

Yes, it will be fixed in an internal issue.

From my perspective, the only two possible solutions would be either to avoid the page refresh when LeptonX switches to mobile view (which is the case with Lepton), or to completely disable the mobile view.

You are right on this matter. However, the transition can be considered normal. Normally, if you suppress this setting, it should work as expected. For more details you can also check this source code https://github.com/abpframework/abp/blob/dd192604ac4da609c997daa4d63a16491999d14d/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts#L40

Since mobile view switches automatically, you may not directly disable this.

Hello again,

Could you clarify that the problem you have been facing is similar to this?

If this is the case, we have also detected the same issue and will be fixing within the next patch release. You can follow the status here https://github.com/abpframework/abp/releases

Hello,

You can follow these steps to replace the related bundles

First, create your custom CSS files

• src/assets/my-bundle.css

• src/assets/my-bundle.rtl.css

  You can copy the content from the abp-bundle.css, abp.bundle.rt.css. You can also give a direct reference inside as @import url('abp-bundle.css'); and @import url('abp-bundle.rtl.css');

Then, ensure the files are served from the site root. Add this to angular.json → build.options.assets

  {
    "glob": "my-bundle*.css",
    "input": "src/assets",
    "output": "."
  }

Lastly, you need to tell the theme to use your bundle instead. In your app config (where you call provideThemeLeptonX):

   import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
    // ...
    provideThemeLeptonX(
      withThemeLeptonXOptions({
        styleFactory: (styles) => {
          return [
            ...styles.filter(s => s.bundleName !== 'abp-bundle'),
            { bundleName: 'my-bundle' }, // loads /my-bundle.css (and .rtl.css)
          ];
        },
      }),
    );

You can let us know if you need further assistance. Thank you for your cooperation.

Hello,

I cannot produce the same problem on my end. Could you please specify the browser version you use? If you think that this does not relate to your problem, you could send a minimal reproducible example to this e-mail address sumeyye.kurtulus@volosoft.com so that I could assist you further.

Thank you for your cooperation.

You can follow this documentation in order to manage the custom layout structure https://abp.io/docs/latest/framework/ui/angular/component-replacement#how-to-replace-a-layout

Could you try again after removing one of these providers

// You can keep this
    provideThemeLeptonX(),
    provideSideMenuLayout(),
    
    // You can remove those
    importProvidersFrom(ThemeLeptonXModule.forRoot()),
    importProvidersFrom(SideMenuLayoutModule.forRoot()),

Hello again, I am glad that your problems are almost resolved. Could you clarify that you do not duplicate the theme providers in your app.config.ts?

//...
providers: [
  provideThemeLeptonX(),
  provideSideMenuLayout(),
  //You need to remove these if you have them
  //importProvidersFrom([
    //ThemeLeptonxModule.forRoot(),
    //SideMenuLayoutModule.forRoot()
  //])
]
//...