Angular logo replacement #256 | Support

saintpoida created 4 years ago

ABP Framework version: v2.9.0
UI type: Angular
Tiered (MVC) or Identity Server Seperated (Angular): Tiered and seperated
Exception message and stack trace:
Steps to reproduce the issue:

I can see the docs about replacing the logo component which i have not tried yet but it only looks like it would allow me to set a single logo. To be useable with your base set of theme styles how can we specify the normal and reversed logo? I can see what looks to be css properties/variables called --logo and --logo-reverse but how would i go about replacing them in my project?

Alternatively using the logo component replacement how can I hook into some property to know if i should show reversed or normal logo?

8 Answer(s)

0

armanozak created 4 years ago

Hi,

Unfortunately, there is no hook that directly signals a dark/light background. The /api/lepton-theme-management/settings endpoint responds with a style number, e.g. 4 and that is stored in the layout state. You can reach the style number via the getStyle method of the LayoutStateService in your logo component.

Another way is, replacing the PNG files inside assets/images/logo directory. This may be more practical if the logo does not change per tenant.

On the other hand, both means require knowing which style number has a light background. Currently, only style 4 (theme 5) has a light background. Yet, of course, that may change. We will take this into consideration and may introduce an alternative indicator in the future.

Please let me know if this answers your question.

Have a nice day.
0

saintpoida created 4 years ago

Ok so that works for primary app view of angular. Now where to do I find and override the component with selector abp-account-logo which is what is shown on the angular login page?

Also can you guys move the default background style for the default logos to an additional class so that when we override the logo component we can just drop that class and not have to overload the css with background: none?
0

saintpoida created 4 years ago

Similarly for Identity login endpoint which i have seperated I have overloaded branding provider and provided two urls for LogoUrl and LogoReverseUrl.

I can then see in the rendered login page two css vars --logo and --logo-reverse which have the correct URLs. However the login page doesnt seem to have a dark theme? And its picking the logo reverse variable, how can i fix that?
0

alper created 4 years ago
Support Team Director

then you rename your logo images. logo.png => logo-reverse.png logo-reverse.png => logo.png

armanozak created 4 years ago

Hi,

You can replace the account login logo too.

Create a second logo component.

import { Component } from '@angular/core';

@Component({
  template: `
    &lt;div class=&quot;account-brand p-4 text-center mb-1&quot;&gt;
      &lt;a class=&quot;navbar-brand&quot; routerLink=&quot;/&quot; [style.background-image]=&quot;logoUrl&quot;&gt;&lt;/a&gt;
    &lt;/div&gt;
  `,
})
export class LogoComponent {
  logoUrl = 'url(http://satyr.io/100x50/acdc?text=LOGO)';
}

Dispatch AddReplaceableComponent action.

this.store.dispatch(
  new AddReplaceableComponent({
    component: LogoComponent,
    key: eAccountComponents.Logo,
  }),
);

We will discuss your idea of moving the default background style for the default logos to an additional class. We are currently making a few changes about the logos. Therefore, it may or may not make sense. We will see, but thanks for the idea. Much appreciated.

0

armanozak created 4 years ago

Hi,

Can we close this issue?

Thanks.
0

saintpoida created 4 years ago

Umm yeah i think so
0

armanozak created 4 years ago

Hi,

I have good news for you. As of ABP 3.0, replacing logos are quite simple. Please refer to the migration guide:

https://docs.abp.io/en/abp/latest/UI/Angular/Migration-Guide-v3#lepton-theme-logos-commercial

Have a nice day.

Have an answer to this question? Log in and write your answer.