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",