fix: translate back button title

This commit is contained in:
2022-09-26 11:18:39 +02:00
committed by Rainer Killinger
parent 92eb0ee3b0
commit b8db0f3e70
2 changed files with 48 additions and 11 deletions

View File

@@ -1,27 +1,46 @@
/* /*
* Copyright (C) 2022 StApps * Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it * This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free * under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3. * Software Foundation, version 3.
* *
* This program is distributed in the hope that it will be useful, but WITHOUT * This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details. * more details.
* *
* You should have received a copy of the GNU General Public License along with * You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>. * this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import {Directive, ElementRef, ViewContainerRef} from '@angular/core'; import {
Directive,
ElementRef,
Host,
Optional,
Self,
ViewContainerRef,
} from '@angular/core';
import {SCIcon} from './icon'; import {SCIcon} from './icon';
import {IconReplacer} from './replace-util'; import {IconReplacer} from './replace-util';
import {TranslateService} from '@ngx-translate/core';
import {Subscription} from 'rxjs';
import {IonBackButton} from '@ionic/angular';
import {TitleCasePipe} from '@angular/common';
@Directive({ @Directive({
selector: 'ion-back-button', selector: 'ion-back-button',
}) })
export class IonBackButtonDirective extends IconReplacer { export class IonBackButtonDirective extends IconReplacer {
constructor(element: ElementRef, viewContainerRef: ViewContainerRef) { private subscriptions: Subscription[] = [];
constructor(
element: ElementRef,
viewContainerRef: ViewContainerRef,
@Host() @Self() @Optional() private ionBackButton: IonBackButton,
private translateService: TranslateService,
private titleCasePipe: TitleCasePipe,
) {
super(element, viewContainerRef, 'shadow'); super(element, viewContainerRef, 'shadow');
} }
@@ -32,4 +51,18 @@ export class IonBackButtonDirective extends IconReplacer {
size: 24, size: 24,
}); });
} }
init() {
this.subscriptions.push(
this.translateService.stream('back').subscribe((value: string) => {
this.ionBackButton.text = this.titleCasePipe.transform(value);
}),
);
}
destroy() {
for (const subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
} }

View File

@@ -20,8 +20,11 @@ import {IonBackButtonDirective} from './ion-back-button.directive';
import {IonSearchbarDirective} from './ion-searchbar.directive'; import {IonSearchbarDirective} from './ion-searchbar.directive';
import {IonBreadcrumbDirective} from './ion-breadcrumb.directive'; import {IonBreadcrumbDirective} from './ion-breadcrumb.directive';
import {IonReorderDirective} from './ion-reorder.directive'; import {IonReorderDirective} from './ion-reorder.directive';
import {TranslateModule, TranslateService} from '@ngx-translate/core';
import {CommonModule, TitleCasePipe} from '@angular/common';
@NgModule({ @NgModule({
imports: [TranslateModule, CommonModule],
declarations: [ declarations: [
IconComponent, IconComponent,
IonIconDirective, IonIconDirective,
@@ -37,5 +40,6 @@ import {IonReorderDirective} from './ion-reorder.directive';
IonSearchbarDirective, IonSearchbarDirective,
IonBreadcrumbDirective, IonBreadcrumbDirective,
], ],
providers: [TranslateService, TitleCasePipe],
}) })
export class IonIconModule {} export class IonIconModule {}