From dab7280dd2f52778a5e53994b78df6413c7fe8b3 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Wed, 17 Sep 2025 10:58:32 +0300 Subject: [PATCH 1/3] Add logo provider and tokens to theme-shared package --- .../theme-shared/src/lib/providers/index.ts | 1 + .../src/lib/providers/logo.provider.ts | 51 +++++++++++++++++++ .../theme-shared/src/lib/tokens/index.ts | 1 + .../theme-shared/src/lib/tokens/logo.token.ts | 6 +++ .../angular/src/app/app.config.ts | 3 +- templates/app/angular/src/app/app.config.ts | 3 +- 6 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tokens/logo.token.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/providers/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/providers/index.ts index cf462deae8..a61d514c14 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/providers/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/providers/index.ts @@ -3,3 +3,4 @@ export * from './route.provider'; export * from './tenant-not-found.provider'; export * from './error-handlers.provider'; export * from './theme-shared-config.provider'; +export * from './logo.provider'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts b/npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts new file mode 100644 index 0000000000..5cf004562c --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts @@ -0,0 +1,51 @@ +import { Environment } from '@abp/ng.core'; +import { + EnvironmentProviders, + makeEnvironmentProviders, + Provider, +} from '@angular/core'; +import { LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN } from '../tokens/logo.token'; + +export enum LpxLogoFeatureKind { + Options, +} + +export interface LpxLogoFeature { + ɵkind: KindT; + ɵproviders: (Provider | EnvironmentProviders)[]; +} + +function makeLpxLogoFeature( + kind: KindT, + providers: (Provider | EnvironmentProviders)[], +): LpxLogoFeature { + return { + ɵkind: kind, + ɵproviders: providers, + }; +} + +export function withEnvironmentOptions( + options = {} as Environment, +): LpxLogoFeature { + const { name, logoUrl } = options.application || {}; + + return makeLpxLogoFeature(LpxLogoFeatureKind.Options, [ + { + provide: LOGO_URL_TOKEN, + useValue: logoUrl || '', + }, + { + provide: LOGO_APP_NAME_TOKEN, + useValue: name || 'ProjectName', + }, + ]); +} + +export function provideLogo( + ...features: LpxLogoFeature[] +): EnvironmentProviders { + const providers: (Provider | EnvironmentProviders)[] = []; + features.forEach(({ ɵproviders }) => providers.push(...ɵproviders)); + return makeEnvironmentProviders(providers); +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts index b38eb7ae3e..fc60386b7d 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts @@ -3,3 +3,4 @@ export * from './http-error.token'; export * from './ngx-datatable-messages.token'; export * from './suppress-unsaved-changes-warning.token'; export * from './confirmation-icons.token'; +export * from './logo.token'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tokens/logo.token.ts b/npm/ng-packs/packages/theme-shared/src/lib/tokens/logo.token.ts new file mode 100644 index 0000000000..8e5f3ae716 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tokens/logo.token.ts @@ -0,0 +1,6 @@ +import { InjectionToken } from '@angular/core'; + +export const LOGO_URL_TOKEN = new InjectionToken('LOGO_URL_TOKEN'); +export const LOGO_APP_NAME_TOKEN = new InjectionToken( + 'LOGO_APP_NAME_TOKEN', +); diff --git a/templates/app-nolayers/angular/src/app/app.config.ts b/templates/app-nolayers/angular/src/app/app.config.ts index 69d4496706..4e39a977ce 100644 --- a/templates/app-nolayers/angular/src/app/app.config.ts +++ b/templates/app-nolayers/angular/src/app/app.config.ts @@ -7,7 +7,7 @@ import { provideAbpCore, withOptions } from '@abp/ng.core'; import { environment } from '../environments/environment'; import { registerLocale } from '@abp/ng.core/locale'; import { provideAbpOAuth } from '@abp/ng.oauth'; -import { provideAbpThemeShared } from '@abp/ng.theme.shared'; +import { provideAbpThemeShared, provideLogo, withEnvironmentOptions} from '@abp/ng.theme.shared'; import { provideSettingManagementConfig } from '@abp/ng.setting-management/config'; import { provideAccountConfig } from '@abp/ng.account/config'; import { provideIdentityConfig } from '@abp/ng.identity/config'; @@ -15,7 +15,6 @@ import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config' import { provideFeatureManagementConfig } from '@abp/ng.feature-management'; import { provideThemeLeptonX } from '@abp/ng.theme.lepton-x'; import { provideSideMenuLayout } from '@abp/ng.theme.lepton-x/layouts'; -import { provideLogo, withEnvironmentOptions } from '@volo/ngx-lepton-x.core'; export const appConfig: ApplicationConfig = { providers: [ diff --git a/templates/app/angular/src/app/app.config.ts b/templates/app/angular/src/app/app.config.ts index 3aa6963d1c..0afccfde31 100644 --- a/templates/app/angular/src/app/app.config.ts +++ b/templates/app/angular/src/app/app.config.ts @@ -8,7 +8,7 @@ import { provideAbpCore, withOptions } from '@abp/ng.core'; import { environment } from '../environments/environment'; import { registerLocale } from '@abp/ng.core/locale'; import { provideAbpOAuth } from '@abp/ng.oauth'; -import { provideAbpThemeShared } from '@abp/ng.theme.shared'; +import { provideAbpThemeShared, provideLogo, withEnvironmentOptions} from '@abp/ng.theme.shared'; import { provideSettingManagementConfig } from '@abp/ng.setting-management/config'; import { provideAccountConfig } from '@abp/ng.account/config'; import { provideIdentityConfig } from '@abp/ng.identity/config'; @@ -16,7 +16,6 @@ import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config' import { provideFeatureManagementConfig } from '@abp/ng.feature-management'; import { provideThemeLeptonX } from '@abp/ng.theme.lepton-x'; import { provideSideMenuLayout } from '@abp/ng.theme.lepton-x/layouts'; -import { provideLogo, withEnvironmentOptions } from '@volo/ngx-lepton-x.core'; export const appConfig: ApplicationConfig = { providers: [ From 0e5325dce5eaaf2310cdd227469bae8a4f98109c Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Mon, 22 Sep 2025 10:50:21 +0300 Subject: [PATCH 2/3] Rename LpxLogoFeature to LogoFeature in provider --- .../src/lib/providers/logo.provider.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts b/npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts index 5cf004562c..e0d7c02707 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/providers/logo.provider.ts @@ -6,19 +6,19 @@ import { } from '@angular/core'; import { LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN } from '../tokens/logo.token'; -export enum LpxLogoFeatureKind { +export enum LogoFeatureKind { Options, } -export interface LpxLogoFeature { +export interface LogoFeature { ɵkind: KindT; ɵproviders: (Provider | EnvironmentProviders)[]; } -function makeLpxLogoFeature( +function makeLogoFeature( kind: KindT, providers: (Provider | EnvironmentProviders)[], -): LpxLogoFeature { +): LogoFeature { return { ɵkind: kind, ɵproviders: providers, @@ -27,10 +27,10 @@ function makeLpxLogoFeature( export function withEnvironmentOptions( options = {} as Environment, -): LpxLogoFeature { +): LogoFeature { const { name, logoUrl } = options.application || {}; - return makeLpxLogoFeature(LpxLogoFeatureKind.Options, [ + return makeLogoFeature(LogoFeatureKind.Options, [ { provide: LOGO_URL_TOKEN, useValue: logoUrl || '', @@ -43,7 +43,7 @@ export function withEnvironmentOptions( } export function provideLogo( - ...features: LpxLogoFeature[] + ...features: LogoFeature[] ): EnvironmentProviders { const providers: (Provider | EnvironmentProviders)[] = []; features.forEach(({ ɵproviders }) => providers.push(...ɵproviders)); From 1010923215e93d6fcc966b302587321c88812683 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Wed, 24 Sep 2025 08:59:22 +0300 Subject: [PATCH 3/3] Refactor LogoComponent to use injectable tokens Updated LogoComponent to use LOGO_URL_TOKEN and LOGO_APP_NAME_TOKEN for logo URL and app name, falling back to environment values if tokens are not provided. This improves flexibility and allows for easier customization of the logo and app name. --- .../src/lib/components/logo/logo.component.ts | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts index 0bc2266e0c..ff526f608f 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts @@ -1,24 +1,37 @@ -import { ApplicationInfo, EnvironmentService } from '@abp/ng.core'; +import { EnvironmentService } from '@abp/ng.core'; import { RouterLink } from '@angular/router'; import { Component, inject } from '@angular/core'; +import { LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN } from '@abp/ng.theme.shared'; @Component({ selector: 'abp-logo', template: ` - @if (appInfo.logoUrl) { - + @if (logoUrl) { + } @else { - {{ appInfo.name }} + {{ appName }} } `, + standalone: true, imports: [RouterLink], }) export class LogoComponent { private environment = inject(EnvironmentService); - get appInfo(): ApplicationInfo { - return this.environment.getEnvironment().application; + private readonly providedLogoUrl = inject(LOGO_URL_TOKEN, { optional: true }); + private readonly providedAppName = inject(LOGO_APP_NAME_TOKEN, { optional: true }); + + get logoUrl(): string { + return ( + this.providedLogoUrl ?? this.environment.getEnvironment().application?.logoUrl + ); + } + + get appName(): string { + return ( + this.providedAppName ?? this.environment.getEnvironment().application?.name + ); } }