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 af233dd7b5..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,13 +1,8 @@ -.ds-context-help-toggle-enabled { +.ds-context-help-toggle { color: var(--ds-header-icon-color); background-color: var(--ds-header-bg); - &:hover, &focus { + &:hover, &:focus { 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 6804836246..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 @@ -1,33 +1,30 @@ 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'; +import { map } from 'rxjs/operators'; +/** + * Renders a "context help toggle" button that toggles the visibility of tooltip buttons on the page. + * If there are no tooltip buttons available on the current page, the toggle is unclickable. + */ @Component({ selector: 'ds-context-help-toggle', templateUrl: './context-help-toggle.component.html', styleUrls: ['./context-help-toggle.component.scss'] }) export class ContextHelpToggleComponent implements OnInit, OnDestroy { - buttonDisabled$: Observable; + buttonVisible$: 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()) - ]; + this.buttonVisible$ = this.contextHelpService.tooltipCount$().pipe(map(x => x > 0)); + this.subs = [this.buttonVisible$.subscribe()]; } ngOnDestroy() { @@ -35,6 +32,6 @@ export class ContextHelpToggleComponent implements OnInit, OnDestroy { } onClick() { - this.clickEvents.next(null); + this.contextHelpService.toggleIcons(); } } diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 922b2d02e1..546f6a06fa 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -15,7 +15,7 @@ a { color: var(--ds-header-icon-color); - &:hover, &focus { + &:hover, &:focus { color: var(--ds-header-icon-color-hover); } } diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss index c1ccd289b2..125aa82f1f 100644 --- a/src/app/search-navbar/search-navbar.component.scss +++ b/src/app/search-navbar/search-navbar.component.scss @@ -22,8 +22,5 @@ a.submit-icon { width: 40vw !important; } - a.submit-icon { - color: var(--bs-link-color); - } } diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss index ac51af27bf..36161ff3da 100644 --- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss +++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss @@ -13,9 +13,9 @@ } .dropdown-toggle { - color: var(--ds-header-icon-color) !important; + color: var(--ds-header-icon-color); - &:hover, &focus { + &:hover, &:focus { color: var(--ds-header-icon-color-hover); } } 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/app/shared/lang-switch/lang-switch.component.scss b/src/app/shared/lang-switch/lang-switch.component.scss index 6d79e6ab25..7b593a9bb5 100644 --- a/src/app/shared/lang-switch/lang-switch.component.scss +++ b/src/app/shared/lang-switch/lang-switch.component.scss @@ -2,12 +2,10 @@ display:none; } -@media screen and (min-width: map-get($grid-breakpoints, md)) { - .dropdown-toggle { - color: var(--ds-header-icon-color); +.dropdown-toggle { + color: var(--ds-header-icon-color); - &:hover, &focus { - color: var(--ds-header-icon-color-hover); - } + &:hover, &:focus { + color: var(--ds-header-icon-color-hover); } } diff --git a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss index 8f61f5ebf1..9e01e19d02 100644 --- a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss @@ -1,7 +1,7 @@ .filters { a { color: var(--bs-body-color); - &:hover, &focus { + &:hover, &:focus { text-decoration: none; } span.badge { diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss index 74cede54a8..1211d2d478 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss @@ -1,6 +1,6 @@ a { color: var(--bs-body-color); - &:hover, &focus { + &:hover, &:focus { text-decoration: none; } span.badge { diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss index 74cede54a8..1211d2d478 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss @@ -1,6 +1,6 @@ a { color: var(--bs-body-color); - &:hover, &focus { + &:hover, &:focus { text-decoration: none; } span.badge { diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 02700f76d9..f050ef6f33 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2864,8 +2864,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",