Use gap instead of individual paddings for header icons

Author: alexandrevryghem

src/app/header/context-help-toggle/context-help-toggle.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef } from '@angular/core';
 import { ContextHelpService } from '../../shared/context-help.service';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 /**
@@ -15,12 +15,23 @@ import { map } from 'rxjs/operators';
 export class ContextHelpToggleComponent implements OnInit {
   buttonVisible$: Observable<boolean>;
 
+  subscriptions: Subscription[] = [];
+
   constructor(
-    private contextHelpService: ContextHelpService,
-  ) { }
+    protected elRef: ElementRef,
+    protected contextHelpService: ContextHelpService,
+  ) {
+  }
 
   ngOnInit(): void {
     this.buttonVisible$ = this.contextHelpService.tooltipCount$().pipe(map(x => x > 0));
+    this.subscriptions.push(this.buttonVisible$.subscribe((showContextHelpToggle: boolean) => {
+      if (showContextHelpToggle) {
+        this.elRef.nativeElement.classList.remove('d-none');
+      } else {
+        this.elRef.nativeElement.classList.add('d-none');
+      }
+    }));
   }
 
   onClick() {

src/app/header/header.component.html

@@ -11,8 +11,8 @@
         <ds-context-help-toggle></ds-context-help-toggle>
         <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
         <ds-impersonate-navbar></ds-impersonate-navbar>
-        <div class="pl-2">
-          <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+        <div *ngIf="isXsOrSm$ | async" class="pl-2">
+          <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
                   aria-controls="collapsingNav"
                   aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
             <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>

src/app/header/header.component.scss

@@ -20,3 +20,7 @@
   }
 }
 
+.navbar {
+  display: flex;
+  gap: 0.25rem;
+}

src/app/header/header.component.spec.ts

@@ -10,6 +10,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuServiceStub } from '../shared/testing/menu-service.stub';
+import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowServiceStub } from '../shared/testing/host-window-service.stub';
 
 let comp: HeaderComponent;
 let fixture: ComponentFixture<HeaderComponent>;
@@ -26,6 +28,7 @@ describe('HeaderComponent', () => {
         ReactiveFormsModule],
       declarations: [HeaderComponent],
       providers: [
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
         { provide: MenuService, useValue: menuService }
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -40,7 +43,7 @@ describe('HeaderComponent', () => {
     fixture = TestBed.createComponent(HeaderComponent);
 
     comp = fixture.componentInstance;
-
+    fixture.detectChanges();
   });
 
   describe('when the toggle button is clicked', () => {

src/app/header/header.component.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
+import { HostWindowService } from '../shared/host-window.service';
 
 /**
  * Represents the header with the logo and simple navigation
@@ -11,20 +12,25 @@ import { MenuID } from '../shared/menu/menu-id.model';
   styleUrls: ['header.component.scss'],
   templateUrl: 'header.component.html',
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
   /**
    * Whether user is authenticated.
    * @type {Observable<string>}
    */
   public isAuthenticated: Observable<boolean>;
-  public showAuth = false;
+  public isXsOrSm$: Observable<boolean>;
   menuID = MenuID.PUBLIC;
 
   constructor(
-    private menuService: MenuService
+    protected menuService: MenuService,
+    protected windowService: HostWindowService,
   ) {
   }
 
+  ngOnInit(): void {
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
+  }
+
   public toggleNavbar(): void {
     this.menuService.toggleMenu(this.menuID);
   }

src/app/search-navbar/search-navbar.component.html

@@ -1,9 +1,9 @@
 <div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
-    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on">
+    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
+             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right pl-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
       <button class="submit-icon btn btn-link btn-link-inline" [attr.aria-label]="'nav.search.button' | translate" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </button>

src/app/search-navbar/search-navbar.component.scss

@@ -12,6 +12,7 @@ input[type="text"] {
   cursor: pointer;
   position: sticky;
   top: 0;
+  border: 0 !important;
 
   color: var(--ds-header-icon-color);
   &:hover, &:focus {

src/app/shared/animations/slide.ts

@@ -55,7 +55,7 @@ export const slideSidebarPadding = trigger('slideSidebarPadding', [
 
 export const expandSearchInput = trigger('toggleAnimation', [
   state('collapsed', style({
-    width: '30px',
+    width: '0',
     opacity: '0'
   })),
   state('expanded', style({

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -2,7 +2,7 @@
   <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
       (click)="$event.stopPropagation();">
     <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" class="dropdownLogin px-1" [attr.aria-label]="'nav.login' |translate"
+      <a href="javascript:void(0);" class="dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
          (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
          ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
       <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
@@ -13,7 +13,7 @@
     </div>
   </li>
   <li *ngIf="!(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a routerLink="/login" routerLinkActive="active" class="loginLink px-1">
+    <a routerLink="/login" routerLinkActive="active" class="loginLink px-0.5">
       {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
     </a>
   </li>

src/app/shared/impersonate-navbar/impersonate-navbar.component.html

@@ -1,4 +1,4 @@
-<ul class="navbar-nav" *ngIf="(isAuthenticated$ | async) && isImpersonating">
+<ul class="navbar-nav" *ngIf="isImpersonating$ | async">
   <li class="nav-item">
     <button class="btn btn-sm btn-dark" ngbTooltip="{{'nav.stop-impersonating' | translate}}" (click)="stopImpersonating()">
       <i class="fa fa-user-secret"></i>