diff --git a/src/app/access-control/group-registry/group-form/group-form.component.html b/src/app/access-control/group-registry/group-form/group-form.component.html index c0bcc854e7..d86adc674b 100644 --- a/src/app/access-control/group-registry/group-form/group-form.component.html +++ b/src/app/access-control/group-registry/group-form/group-form.component.html @@ -9,15 +9,17 @@ - + - {{messagePrefix + '.head.edit' | translate}} + > + {{messagePrefix + '.head.edit' | translate}} + diff --git a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html index 80e13cfd5f..8b0ae35bd4 100644 --- a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html +++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html @@ -1,15 +1,17 @@ {{messagePrefix + '.head' | translate}} - + - {{messagePrefix + '.search.head' | translate}} + > + {{messagePrefix + '.search.head' | translate}} + diff --git a/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html index 438f3eed54..3be45c4452 100644 --- a/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html +++ b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html @@ -1,15 +1,17 @@ {{messagePrefix + '.head' | translate}} - - {{messagePrefix + '.search.head' | translate}} + + + {{messagePrefix + '.search.head' | translate}} + + diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.html b/src/app/header/context-help-toggle/context-help-toggle.component.html index 9fba8fa032..523874d461 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.html +++ b/src/app/header/context-help-toggle/context-help-toggle.component.html @@ -2,9 +2,11 @@ - + diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.scss b/src/app/header/context-help-toggle/context-help-toggle.component.scss index 89f0c65bd8..af233dd7b5 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.scss +++ b/src/app/header/context-help-toggle/context-help-toggle.component.scss @@ -1,4 +1,4 @@ -.ds-context-help-toggle { +.ds-context-help-toggle-enabled { color: var(--ds-header-icon-color); background-color: var(--ds-header-bg); @@ -6,3 +6,8 @@ color: var(--ds-header-icon-color-hover); } } + +.ds-context-help-toggle-disabled { + color: grey; + background-color: var(--ds-header-bg); +} diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts index 93a141cfb2..8f98aaaabc 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts +++ b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts @@ -3,17 +3,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ContextHelpToggleComponent } from './context-help-toggle.component'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; import { ContextHelpService } from '../../shared/context-help.service'; -import { of as observableOf } from 'rxjs'; +import { of as observableOf, BehaviorSubject } from 'rxjs'; import { By } from '@angular/platform-browser'; describe('ContextHelpToggleComponent', () => { let component: ContextHelpToggleComponent; let fixture: ComponentFixture; let contextHelpService; + let contextHelpEmpty$ = new BehaviorSubject(true); beforeEach(async () => { contextHelpService = jasmine.createSpyObj('contextHelpService', - ['toggleIcons']); + ['toggleIcons', 'contextHelpEmpty$']); + contextHelpService.contextHelpEmpty$.and.returnValue(contextHelpEmpty$); await TestBed.configureTestingModule({ declarations: [ ContextHelpToggleComponent ], providers: [ @@ -34,8 +36,28 @@ describe('ContextHelpToggleComponent', () => { expect(component).toBeTruthy(); }); - it('clicking the button should toggle context help icon visibility', () => { - fixture.debugElement.query(By.css('a')).nativeElement.click(); - expect(contextHelpService.toggleIcons).toHaveBeenCalled(); + describe('if there are elements on the page with a tooltip', () => { + beforeEach(() => { + contextHelpEmpty$.next(false); + fixture.detectChanges(); + }); + + it('clicking the button should toggle context help icon visibility', () => { + fixture.whenStable().then((done) => { + fixture.debugElement.query(By.css('a')).nativeElement.click(); + expect(contextHelpService.toggleIcons).toHaveBeenCalled(); + done(); + }); + }); + }); + + describe('if there are no elements on the page with a tooltip', () => { + it('clicking the button does not toggle context help icon visibility', () => { + fixture.whenStable().then((done) => { + fixture.debugElement.query(By.css('a')).nativeElement.click(); + expect(contextHelpService.toggleIcons).toHaveBeenCalledTimes(0); + done(); + }); + }); }); }); diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.ts b/src/app/header/context-help-toggle/context-help-toggle.component.ts index 2956d3ef4c..6804836246 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.ts +++ b/src/app/header/context-help-toggle/context-help-toggle.component.ts @@ -1,23 +1,40 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { ContextHelpService } from '../../shared/context-help.service'; import { TranslateService } from '@ngx-translate/core'; +import { Observable, Subscription, BehaviorSubject } from 'rxjs'; +import { combineLatest } from 'rxjs'; @Component({ selector: 'ds-context-help-toggle', templateUrl: './context-help-toggle.component.html', styleUrls: ['./context-help-toggle.component.scss'] }) -export class ContextHelpToggleComponent implements OnInit { +export class ContextHelpToggleComponent implements OnInit, OnDestroy { + buttonDisabled$: Observable; constructor( private contextHelpService: ContextHelpService, private translateService: TranslateService ) { } + private clickEvents: BehaviorSubject = new BehaviorSubject(null); + private subs: Subscription[]; + ngOnInit(): void { + this.buttonDisabled$ = this.contextHelpService.contextHelpEmpty$(); + this.subs = [ + this.buttonDisabled$.subscribe(), + combineLatest([this.clickEvents, this.buttonDisabled$]) + .subscribe(([_, disabled]) => + disabled ? null : this.contextHelpService.toggleIcons()) + ]; + } + + ngOnDestroy() { + this.subs.forEach(sub => sub.unsubscribe()); } onClick() { - this.contextHelpService.toggleIcons(); + this.clickEvents.next(null); } } diff --git a/src/app/shared/context-help.service.ts b/src/app/shared/context-help.service.ts index 7bbd1216e1..68f6cfd92c 100644 --- a/src/app/shared/context-help.service.ts +++ b/src/app/shared/context-help.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ContextHelp } from './context-help.model'; import { Store, createFeatureSelector, createSelector, select, MemoizedSelector } from '@ngrx/store'; -import { ContextHelpState } from './context-help.reducer'; +import { ContextHelpState, ContextHelpModels } from './context-help.reducer'; import { ContextHelpToggleIconsAction, ContextHelpAddAction, @@ -11,6 +11,7 @@ import { ContextHelpToggleTooltipAction } from './context-help.actions'; import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; const contextHelpStateSelector = createFeatureSelector('contextHelp'); @@ -23,6 +24,10 @@ const contextHelpSelector = contextHelpStateSelector, (state: ContextHelpState) => state.models[id] ); +const allContextHelpSelector = createSelector( + contextHelpStateSelector, + ((state: ContextHelpState) => state.models) +); @Injectable({ providedIn: 'root' @@ -46,6 +51,14 @@ export class ContextHelpService { return this.store.pipe(select(contextHelpSelector(id))); } + /** + * Observable that yields true iff there are currently no context help entries in the store. + */ + contextHelpEmpty$(): Observable { + return this.store.pipe(select(allContextHelpSelector)) + .pipe(map((models: ContextHelpModels) => Object.keys(models).length === 0)); + } + /** * Toggles the visibility of all context help icons. */ diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 03596f2292..5a8c27da0d 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2680,6 +2680,8 @@ "nav.context-help-toggle": "Toggle context help", + "nav.context-help-toggle-disabled": "No context help available on this page", + "nav.language": "Language switch", "nav.login": "Log In",