diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts index fc8dfd1c6ec..5777f825e09 100644 --- a/src/app/shared/context-help.directive.ts +++ b/src/app/shared/context-help.directive.ts @@ -52,7 +52,7 @@ export class ContextHelpDirective implements OnChanges, OnDestroy { ngOnChanges() { this.clearMostRecentId(); this.mostRecentId = this.dsContextHelp.id; - this.contextHelpService.add({id: this.dsContextHelp.id, isTooltipVisible: false}); + this.contextHelpService.add({id: this.dsContextHelp.id, isTooltipVisible: false, translationKey: this.dsContextHelp.content}); if (this.wrapper === undefined) { const factory diff --git a/src/app/shared/context-help.model.ts b/src/app/shared/context-help.model.ts index ea6fd036cf4..729e0b8f081 100644 --- a/src/app/shared/context-help.model.ts +++ b/src/app/shared/context-help.model.ts @@ -1,4 +1,5 @@ export class ContextHelp { id: string; isTooltipVisible = false; + translationKey: string; } diff --git a/src/app/shared/context-help.service.ts b/src/app/shared/context-help.service.ts index f10f258be97..b52b049ce8c 100644 --- a/src/app/shared/context-help.service.ts +++ b/src/app/shared/context-help.service.ts @@ -10,8 +10,9 @@ import { ContextHelpHideTooltipAction, ContextHelpToggleTooltipAction } from './context-help.actions'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { from, Observable } from 'rxjs'; +import {map, mergeAll, reduce, switchMap, } from 'rxjs/operators'; +import {TranslateService} from '@ngx-translate/core'; const contextHelpStateSelector = createFeatureSelector('contextHelp'); @@ -33,7 +34,8 @@ const allContextHelpSelector = createSelector( providedIn: 'root' }) export class ContextHelpService { - constructor(private store: Store) { } + constructor(private store: Store, + private translateService: TranslateService) { } /** * Observable keeping track of whether context help icons should be visible globally. @@ -52,11 +54,23 @@ export class ContextHelpService { } /** - * Observable that yields true iff there are currently no context help entries in the store. + * Observable that emits the number of context help icons that have a translation key different from the key itself. + * This is done since we don't want to count the icons that have no translation key, as they won't be shown. */ tooltipCount$(): Observable { - return this.store.pipe(select(allContextHelpSelector)) - .pipe(map((models: ContextHelpModels) => Object.keys(models).length)); + return this.store.pipe( + select(allContextHelpSelector), + switchMap((models: ContextHelpModels) => { + return from(Object.values(models).map((contextHelp: ContextHelp) => this.translateService.get(contextHelp.translationKey).pipe( + map(translatedText => { + return translatedText !== contextHelp.translationKey ? 1 : 0; + }), + ))).pipe( + mergeAll(), + reduce((acc, count) => acc + count, 0), + ); + }), + ); } /** @@ -82,6 +96,8 @@ export class ContextHelpService { */ remove(id: string) { this.store.dispatch(new ContextHelpRemoveAction(id)); + // When a context help icon is removed, the visible tooltip count should be updated + this.tooltipCount$().subscribe(); } /** diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 3bf89c85e84..b5585e6974a 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -4817,6 +4817,10 @@ "person.orcid.registry.auth": "ORCID Authorizations", "home.recent-submissions.head": "Recent Submissions", + // Context tooltips + // Uncommenting the translation for a tooltip will enable it and make it visible, so make sure + // to add a translation for each tooltip you want to enable + // "context.help.top-level-community-list": "add your context tip here", // // "context.help.recent-item-list": "add your context tip here",