Ensures theming of components

- If there is no theme applied, the default theme is loaded and applied.
This commit is contained in:
GabrielMeyer 2019-06-17 14:43:38 +02:00
parent a5e1646f3c
commit 4fc7731f1a
2 changed files with 34 additions and 9 deletions

View File

@ -41,17 +41,26 @@ export class ThemeService {
if (!newTheme) { if (!newTheme) {
return; return;
} }
this.currentTheme = newTheme; this.changeTheme(newTheme);
const classList = document.getElementsByTagName('body')[0].classList; // Get the classlist of the body.
const toRemove = Array.from(classList).filter((item: string) => item.includes('theme'));
if (toRemove.length) {
classList.remove(...toRemove); // Remove all old themes.
}
classList.add(newTheme, ThemeService.DEFAULT_THEME); // Add the new theme.
}); });
} }
/**
* Function to change the theme and ensures, that old themes are removed.
*
* @param theme The theme which is applied.
*/
private changeTheme(theme: string): void {
this.currentTheme = theme;
const classList = document.getElementsByTagName('body')[0].classList; // Get the classlist of the body.
const toRemove = Array.from(classList).filter((item: string) => item.includes('theme'));
if (toRemove.length) {
classList.remove(...toRemove); // Remove all old themes.
}
classList.add(theme, ThemeService.DEFAULT_THEME); // Add the new theme.
}
/** /**
* Returns the logo relative to the used theme. * Returns the logo relative to the used theme.
* *
@ -68,4 +77,17 @@ export class ThemeService {
return null; return null;
} }
} }
/**
* Function to ensure, that there is at least one theme set to define
* the colors of the components.
*
* If a theme is already set, nothing happens, otherwise the
* `DEFAULT_THEME` will be set.
*/
public checkTheme(): void {
if (!this.currentTheme || this.currentTheme === '') {
this.changeTheme(ThemeService.DEFAULT_THEME);
}
}
} }

View File

@ -9,6 +9,7 @@ import { TranslateService } from '@ngx-translate/core';
import { environment } from 'environments/environment'; import { environment } from 'environments/environment';
import { BaseComponent } from '../../../../base.component'; import { BaseComponent } from '../../../../base.component';
import { HttpService } from 'app/core/core-services/http.service'; import { HttpService } from 'app/core/core-services/http.service';
import { ThemeService } from 'app/core/ui-services/theme.service';
/** /**
* Reset password component. * Reset password component.
@ -34,7 +35,8 @@ export class ResetPasswordComponent extends BaseComponent implements OnInit {
private http: HttpService, private http: HttpService,
formBuilder: FormBuilder, formBuilder: FormBuilder,
private matSnackBar: MatSnackBar, private matSnackBar: MatSnackBar,
private router: Router private router: Router,
private themeService: ThemeService
) { ) {
super(titleService, translate); super(titleService, translate);
this.resetPasswordForm = formBuilder.group({ this.resetPasswordForm = formBuilder.group({
@ -47,6 +49,7 @@ export class ResetPasswordComponent extends BaseComponent implements OnInit {
*/ */
public ngOnInit(): void { public ngOnInit(): void {
super.setTitle('Reset password'); super.setTitle('Reset password');
this.themeService.checkTheme();
} }
/** /**