Theming migrated to v8

CottageLabs · May 15, 2024 · 4639250 · 4639250
1 parent f395ab9
commit 4639250
Show file tree

Hide file tree

Showing 18 changed files with 332 additions and 288 deletions.
diff --git a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,3 +1,9 @@
-<div [class.open]="!(isNavBarCollapsed | async)" id="header-navbar-wrapper">
-  <ds-themed-header></ds-themed-header>
+<div id="header-navbar-wrapper"><!-- [class.open]="!(isNavBarCollapsed$ | async)" -->
+  <ds-header></ds-header>
+  <!-- Collapsible navbar (mobile only) -->
+  <div *ngIf="(isMobile$ | async)" id="mobile-navbar-wrapper" [@slideMobileNav]="(isNavBarCollapsed$ | async) ? 'collapsed' : 'expanded'">
+    <nav class="px-3" id="collapsible-mobile-navbar" [attr.aria-hidden]="(isNavBarCollapsed$ | async)" [attr.aria-label]="'nav.main.description' | translate">
+      <ds-navbar></ds-navbar>
+    </nav>
+  </div>
 </div>
diff --git a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,7 +1,81 @@
 :host {
-  // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
-  position: relative;
+  --ds-header-navbar-border-bottom-style: solid var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color);
+  --ds-expandable-navbar-border-top-style: solid var(--ds-expandable-navbar-border-top-height) var(--ds-expandable-navbar-border-top-color);
+  --ds-expandable-navbar-height: calc(100vh - var(--ds-header-height));
+
   div#header-navbar-wrapper {
-    border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
+    // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
+    position: relative; // required by the mobile collapsible navbar
+    border-bottom: var(--ds-header-navbar-border-bottom-style); // gets covered by mobile navbar wrapper, when open
+
+    div#mobile-navbar-wrapper {
+      width: 100%;
+      background-color: var(--ds-expandable-navbar-bg);
+      position: absolute;
+      z-index: var(--ds-nav-z-index);
+      overflow: hidden;
+
+      nav#collapsible-mobile-navbar {
+        // Following parameters are changed by slideMobileNav animation
+        min-height: var(--ds-expandable-navbar-height);
+        height: auto;
+        border-bottom: var(--ds-header-navbar-border-bottom-style);
+      }
+    }
+  }
+
+  /* MENU ITEMS */
+
+  ::ng-deep {
+    .ds-menu-item, .ds-menu-toggler-wrapper {
+      white-space: nowrap;
+      text-decoration: none;
+    }
+
+    nav#desktop-navbar { // in header component
+      #main-site-navigation {
+        /* Desktop menu */
+
+        .ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
+          // fill navbar height (required by dropdown menus) and center content
+          display: flex;
+          align-items: center;
+          height: 100%;
+        }
+        .ds-menu-item {
+          // define here the style for top-level navbar menu items
+          padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
+        }
+        .ds-menu-item, .ds-menu-toggler-wrapper {
+          color: var(--ds-navbar-link-color) !important;
+          &:hover, &:focus {
+            color: var(--ds-navbar-link-color-hover) !important;
+          }
+        }
+
+        /* desktop submenu */
+
+        .dropdown-menu {
+          .ds-menu-item {
+            // define here the style for second-level navbar menu items
+            padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
+          }
+        }
+
+      }
+    }
+
+    nav#collapsible-mobile-navbar { // in header-navbar-wrapper component
+
+      border-top: var(--ds-expandable-navbar-border-top-style);
+      padding-top: var(--ds-expandable-navbar-padding-top);
+
+      #main-site-navigation {
+        .ds-menu-item {
+          padding: var(--ds-expandable-navbar-item-vertical-padding) 0;
+        }
+      }
+
+    }
   }
 }
diff --git a/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -1,13 +1,26 @@
+import {
+  AsyncPipe,
+  NgClass,
+  NgIf,
+} from '@angular/common';
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ThemedHeaderComponent } from '../../../../app/header/themed-header.component';
 import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+import { ThemedNavbarComponent } from '../../../../app/navbar/themed-navbar.component';
+import { slideMobileNav } from '../../../../app/shared/animations/slide';
 
 /**
  * This component represents a wrapper for the horizontal navbar and the header
  */
 @Component({
-  selector: 'ds-header-navbar-wrapper',
+  selector: 'ds-themed-header-navbar-wrapper',
   styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
+  standalone: true,
+  imports: [NgClass, ThemedHeaderComponent, ThemedNavbarComponent, AsyncPipe, TranslateModule, NgIf],
+  animations: [slideMobileNav],
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {
 }
diff --git a/src/themes/cottagelabs/app/header/header.component.html b/src/themes/cottagelabs/app/header/header.component.html
@@ -1,26 +1,37 @@
-<header class="header">
-  <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
-    <div class="d-flex flex-grow-1">
-      <a class="navbar-brand m-2" routerLink="/home">
-        <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
+<header id="main-site-header">
+  <div class="container h-100 d-flex flex-row flex-wrap align-items-center justify-content-between gapx-3 gapy-2" id="main-site-header-container">
+    <!-- Logo and navbar wrapper -->
+    <div id="header-left"
+         [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
+         [attr.aria-label]="(isMobile$ | async) ? ('nav.main.description' | translate) : null"
+         class="h-100 flex-fill d-flex flex-row flex-nowrap justify-content-start align-items-center gapx-3">
+      <a class="d-block my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate">
+        <img id="header-logo" src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
+      <a class="d-block my-2" routerLink="https://or2024.openrepositories.org/">
+        <img id="or-logo" src="assets/cottagelabs/images/open_repositories.webp"/>
+      </a>
+      <nav *ngIf="(isMobile$ | async) !== true" class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">
+        <ds-navbar></ds-navbar>
+      </nav>
     </div>
+    <!-- Search bar and other menus -->
+    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1 ml-auto">
+      <ds-search-navbar></ds-search-navbar>
+      <div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
+        <ds-lang-switch></ds-lang-switch>
+        <ds-context-help-toggle></ds-context-help-toggle>
+        <ds-impersonate-navbar></ds-impersonate-navbar>
+        <ds-auth-nav-menu></ds-auth-nav-menu>
+      </div>
 
-    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center gapx-1">
-      <!--<ds-themed-search-navbar></ds-themed-search-navbar>-->
-      <ds-themed-lang-switch></ds-themed-lang-switch>
-      <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()"
-                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>
+      <div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
+        <button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
+                [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="(isNavBarCollapsed$ | async) !== true">
+          <span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
         </button>
       </div>
-    </div>
-  </nav>
-  <ds-themed-navbar></ds-themed-navbar>
 
+    </div>
+  </div>
 </header>
diff --git a/src/themes/cottagelabs/app/header/header.component.scss b/src/themes/cottagelabs/app/header/header.component.scss
@@ -1,26 +1,32 @@
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
-  nav.navbar {
-    display: none;
-  }
-  .header {
+:host {
+  #main-site-header {
+    min-height: var(--ds-header-height);
+
+    @include media-breakpoint-up(md) {
+      height: var(--ds-header-height);
+    }
+
     background-color: var(--ds-header-bg);
+
+    &-container {
+      min-height: var(--ds-header-height);
+    }
   }
-}
 
-.navbar-brand img {
-  @media screen and (max-width: map-get($grid-breakpoints, md)) {
-    height: var(--ds-header-logo-height-xs);
+  img#header-logo {
+    height: var(--ds-header-logo-height);
   }
-}
-.navbar-toggler .navbar-toggler-icon {
-  background-image: none !important;
-  line-height: 1.5;
-}
 
-.navbar-toggler {
-  color: var(--ds-header-icon-color);
+  img#or-logo {
+    height: var(--ds-header-logo-height);
+  }
 
-  &:hover, &:focus {
-    color: var(--ds-header-icon-color-hover);
+  button#navbar-toggler {
+    color: var(--ds-header-icon-color);
+
+    &:hover, &:focus {
+      color: var(--ds-header-icon-color-hover);
+    }
   }
+
 }
diff --git a/src/themes/cottagelabs/app/header/header.component.ts b/src/themes/cottagelabs/app/header/header.component.ts
@@ -1,13 +1,39 @@
-import { Component } from '@angular/core';
+import {
+  AsyncPipe,
+  NgIf,
+} from '@angular/common';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { ThemedLangSwitchComponent } from 'src/app/shared/lang-switch/themed-lang-switch.component';
+
+import { ContextHelpToggleComponent } from '../../../../app/header/context-help-toggle/context-help-toggle.component';
 import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
+import { ThemedNavbarComponent } from '../../../../app/navbar/themed-navbar.component';
+import { ThemedSearchNavbarComponent } from '../../../../app/search-navbar/themed-search-navbar.component';
+import { ThemedAuthNavMenuComponent } from '../../../../app/shared/auth-nav-menu/themed-auth-nav-menu.component';
+import { ImpersonateNavbarComponent } from '../../../../app/shared/impersonate-navbar/impersonate-navbar.component';
 
 /**
  * Represents the header with the logo and simple navigation
  */
 @Component({
-  selector: 'ds-header',
+  selector: 'ds-themed-header',
   styleUrls: ['header.component.scss'],
   templateUrl: 'header.component.html',
+  standalone: true,
+  imports: [NgbDropdownModule, ThemedLangSwitchComponent, RouterLink, ThemedSearchNavbarComponent, ContextHelpToggleComponent, ThemedAuthNavMenuComponent, ImpersonateNavbarComponent, ThemedNavbarComponent, TranslateModule, AsyncPipe, NgIf],
 })
-export class HeaderComponent extends BaseComponent {
+export class HeaderComponent extends BaseComponent implements OnInit {
+  public isNavBarCollapsed$: Observable<boolean>;
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.isNavBarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
+  }
 }
diff --git a/src/themes/cottagelabs/app/home-page/home-news/home-news.component.html b/src/themes/cottagelabs/app/home-page/home-news/home-news.component.html
@@ -4,7 +4,7 @@
       <div class="d-flex flex-wrap">
         <div style="padding-top: 3em;">
           <h3 class="display-5">Comparing three institutional repository software platforms at OR2024</h3>
-          <h1 class="display-3" style="padding: 2rem;">DSpace 7.6.1</h1>
+          <h1 class="display-3" style="padding: 2rem;">DSpace 8.x</h1>
           <!--<p class="lead">DSpace is the ! leading open source repository platform that enables
             organisations to:</p>-->
         </div>
@@ -36,5 +36,5 @@ <h3>DISCOVERABILITY</h3>
     <source type="image/jpg" srcset="assets/cottagelabs/images/Clarion_Hotel_Post_(Gamla_posthuset),_Göteborg.jpg">
     <img alt="" [src]="'assets/cottagelabs/images/Clarion_Hotel_Post_2015_01.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
   </picture>
-  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
+  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">&#64;inspiredimages</a></small>
 </div>
diff --git a/src/themes/cottagelabs/app/home-page/home-news/home-news.component.ts b/src/themes/cottagelabs/app/home-page/home-news/home-news.component.ts
@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
+
 import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page/home-news/home-news.component';
 
 @Component({
-  selector: 'ds-home-news',
+  selector: 'ds-themed-home-news',
   styleUrls: ['./home-news.component.scss'],
-  templateUrl: './home-news.component.html'
+  templateUrl: './home-news.component.html',
+  standalone: true,
 })
 
 /**

diff --git a/src/themes/cottagelabs/app/navbar/navbar.component.html b/src/themes/cottagelabs/app/navbar/navbar.component.html
@@ -1,31 +1,9 @@
-<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-  class="navbar navbar-expand-md navbar-light p-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
-  <div class="navbar-inner-container w-100 h-100" [class.container]="!(isXsOrSm$ | async)">
-    <a class="navbar-brand my-2" routerLink="/home">
-      <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate" />
-    </a>
-
-    <a class="navbar-brand my-2" routerLink="https://or2024.openrepositories.org/">
-      <img src="assets/cottagelabs/images/open_repositories.webp"/>
-    </a>
-
-
-    <div id="collapsingNav" class="w-100 h-100">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
-        <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
-            <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
-        </li>
-        <li *ngFor="let section of (sections | async)">
-          <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
-        </li>
-      </ul>
-    </div>
-    <div class="navbar-buttons d-flex align-items-center gapx-1">
-      <ds-themed-search-navbar class="navbar-collapsed"></ds-themed-search-navbar>
-      <ds-themed-lang-switch class="navbar-collapsed"></ds-themed-lang-switch>
-      <ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>
-      <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
-      <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
-    </div>
-  </div>
-</nav>
+<ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
+  <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
+</ng-container>
+<div class="navbar-nav h-100 align-items-md-stretch gapx-3" role="menubar" id="main-site-navigation" [ngClass]="(isMobile$ | async) ? 'navbar-nav-mobile' : 'navbar-nav-desktop'">
+  <ng-container *ngFor="let section of (sections | async)">
+    <ng-container
+      *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
+  </ng-container>
+</div>