From bceca43580e2e10896e281079ecc3abf6ad43e6a Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Fri, 27 Jan 2023 11:59:24 +0100 Subject: [PATCH] 97732 Context help toggle button only appears when there is at least one element with a tooltip on the page --- .../context-help-toggle.component.html | 10 ++++------ .../context-help-toggle.component.scss | 7 +------ .../context-help-toggle.component.spec.ts | 12 +++++------- .../context-help-toggle.component.ts | 15 +++++---------- src/app/shared/context-help.service.ts | 4 ++-- src/assets/i18n/en.json5 | 2 -- 6 files changed, 17 insertions(+), 33 deletions(-) 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 523874d461..1ec2050497 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 @@ -1,12 +1,10 @@ -
+
- +
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 a8c6100fae..f3e5e01880 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-enabled { +.ds-context-help-toggle { color: var(--ds-header-icon-color); background-color: var(--ds-header-bg); @@ -6,8 +6,3 @@ 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 93421b58eb..2d1b5bad20 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 @@ -13,9 +13,9 @@ describe('ContextHelpToggleComponent', () => { beforeEach(async () => { contextHelpService = jasmine.createSpyObj('contextHelpService', [ - 'contextHelpEmpty$', 'toggleIcons' + 'tooltipCount$', 'toggleIcons' ]); - contextHelpService.contextHelpEmpty$.and.returnValue(observableOf(true)); + contextHelpService.tooltipCount$.and.returnValue(observableOf(0)); await TestBed.configureTestingModule({ declarations: [ ContextHelpToggleComponent ], providers: [ @@ -37,19 +37,17 @@ describe('ContextHelpToggleComponent', () => { }); describe('if there are no elements on the page with a tooltip', () => { - it('clicking the button does not toggle context help icon visibility', fakeAsync(() => { + it('the toggle should not be visible', fakeAsync(() => { fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.debugElement.query(By.css('a')).nativeElement.click(); - tick(); - expect(contextHelpService.toggleIcons).toHaveBeenCalledTimes(0); + expect(fixture.debugElement.query(By.css('div'))).toBeNull(); }); })); }); describe('if there are elements on the page with a tooltip', () => { beforeEach(() => { - contextHelpService.contextHelpEmpty$.and.returnValue(observableOf(false)); + contextHelpService.tooltipCount$.and.returnValue(observableOf(1)); fixture.detectChanges(); }); 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 7adaffa1c0..1bd6eb4b17 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 @@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { ContextHelpService } from '../../shared/context-help.service'; import { Observable, Subscription, BehaviorSubject } from 'rxjs'; import { combineLatest } from 'rxjs'; +import { map } from 'rxjs/operators'; /** * Renders a "context help toggle" button that toggles the visibility of tooltip buttons on the page. @@ -13,23 +14,17 @@ import { combineLatest } from 'rxjs'; styleUrls: ['./context-help-toggle.component.scss'] }) export class ContextHelpToggleComponent implements OnInit, OnDestroy { - buttonDisabled$: Observable; + buttonVisible$: Observable; constructor( private contextHelpService: ContextHelpService, ) { } - 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()) - ]; + this.buttonVisible$ = this.contextHelpService.tooltipCount$().pipe(map(x => x > 0)); + this.subs = [this.buttonVisible$.subscribe()]; } ngOnDestroy() { @@ -37,6 +32,6 @@ export class ContextHelpToggleComponent implements OnInit, OnDestroy { } onClick() { - this.clickEvents.next(null); + this.contextHelpService.toggleIcons(); } } diff --git a/src/app/shared/context-help.service.ts b/src/app/shared/context-help.service.ts index 68f6cfd92c..f10f258be9 100644 --- a/src/app/shared/context-help.service.ts +++ b/src/app/shared/context-help.service.ts @@ -54,9 +54,9 @@ export class ContextHelpService { /** * Observable that yields true iff there are currently no context help entries in the store. */ - contextHelpEmpty$(): Observable { + tooltipCount$(): Observable { return this.store.pipe(select(allContextHelpSelector)) - .pipe(map((models: ContextHelpModels) => Object.keys(models).length === 0)); + .pipe(map((models: ContextHelpModels) => Object.keys(models).length)); } /** diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 5a8c27da0d..03596f2292 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2680,8 +2680,6 @@ "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",