Activities of "Mehmet"

Hi,

It can get it like this:

let idTokenClaims = localStorage.getItem('id_token_claims_obj')
if (idTokenClaims) {
idTokenClaims = JSON.parse(idTokenClaims)
}

Hi William

Yes, this can be done in v4.3. Let me explain how to do this step by step:

1. Copy the node_modules/@volo/abp.ng.theme.lepton/dist folder to the src/assets folder and rename the folder as lepton.
2. Find colors which you want to change in the src/assets/lepton/global/styles/lepton1.min.css file and change the colors with the color you prefer by replacing all
3. Import lepton1.min.css file to the src/styles.scss as shown below:

/* styles.scss */
@import url('./assets/lepton/global/styles/lepton1.min.css');

4. Open the app.module.ts and add a configuration to the forRoot of the LeptonThemeModule like this:

ThemeLeptonModule.forRoot({ customStyle: true })

That's it, see the result with the colors I prefer:

You can override the styles easily.

1- Find the target class name via the browser's dev-tools:

2- Add custom style to the src/styles.scss file like this:

// styles.scss

.user-avatar-big {
  border-radius: 3px !important;
  border: 1px solid red;
}

That's it, see the result:

Hi @lalitChougule,

Please see the component replacement document. If you have any questions after reading the doc, please ask in detail.

The directive project the LoadingComponent to the DOM. You can override classes in the LoadingComponent.

See an example:

.abp-loading {
  background: rgba(0, 0, 0, 0.4) !important;

  .abp-spinner {
    font-size: 30px !important;
    color: white;
  }
}

Add styles above to the styles.scss

See the result:

Or you can use a library like ngx-loading

Hi,

You can use the abpLoading directive.

See the usage:

<div class="your-container" [abpLoading]="isLoading">
    some content here
</div>

Hi @gvnuysal,

I examined the current-user.component in v3.3. See the code:

The tenant name is already placed in the DOM.

Hi

Can you share the oAuthConfig in the environment file with us?

Please try code below in the home page and check the console, network tab. If you see any error, please share that with us.

 import { OAuthService } from 'angular-oauth2-oidc';
 
constructor(private oAuthService: OAuthService) {}

ngOnInit() {
    this.oAuthService.initCodeFlow()
}

Hi @devteam

The DateParserFormatter exposed by @abp/ng.core package sets the ng-bootstrap's date format. You can see this: https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/theme-shared/src/lib/utils/date-parser-formatter.ts#L51

It gets the date format from application-configuration response (applicationConfiguration.localization.currentCulture.dateTimeFormat.shortDatePattern). So the date format is determined from the backend according to current language. You can change the format in the backend or override the DateParserFormatter class in the Angular UI like this:

// app.module.ts
import { DateParserFormatter } from '@abp/ng.core';

//...

providers: [{provide: DateParserFormatter, useClass: YourDateParserFormatter}]

@maliming will help you for the backend configuration.

Hi

I've created an issue: https://github.com/abpframework/abp/issues/8580

It will be fixed in v4.3 stable version. Thanks for the reporting.