MENDELU/UI customization to v9

.github/workflows/build.yml

@@ -88,6 +88,11 @@ jobs:
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
           restore-keys: ${{ runner.os }}-npm-
 
+      # Workaround for npm bug with optional dependencies (https://github.com/npm/cli/issues/4828)
+      # Clean npm cache to avoid corrupted Rollup optional dependencies
+      - name: Clean npm cache
+        run: npm cache clean --force
+
       - name: Install NPM dependencies
         run: npm clean-install
 
@@ -331,8 +336,6 @@ jobs:
         uses: Wandalen/wretry.action@v1.3.0
         with:
           action: codecov/codecov-action@v4
-          # Ensure codecov-action throws an error when it fails to upload
-          # This allows us to auto-restart the action if an error is thrown
           with: |
             fail_ci_if_error: true
             token: ${{ secrets.CODECOV_TOKEN }}

config/config.yml

@@ -1,5 +1,141 @@
 rest:
-  ssl: true
-  host: sandbox.dspace.org
-  port: 443
+  ssl: false
+  host: localhost
+  port: 8080
   nameSpace: /server
+
+
+# Theme Config
+themes:
+  # Add additional themes here. In the case where multiple themes match a route, the first one
+  # in this list will get priority. It is advisable to always have a theme that matches
+  # every route as the last one
+  #
+  # # A theme with a handle property will match the community, collection or item with the given
+  # # handle, and all collections and/or items within it
+  # - name: custom
+  #   handle: 10673/1233
+  #
+  # # A theme with a regex property will match the route using a regular expression. If it
+  # # matches the route for a community or collection it will also apply to all collections
+  # # and/or items within it
+  # - name: custom
+  #   regex: collections\/e8043bc2.*
+  #
+  # # A theme with a uuid property will match the community, collection or item with the given
+  # # ID, and all collections and/or items within it
+  # - name: custom
+  #   uuid: 0958c910-2037-42a9-81c7-dca80e3892b4
+  #
+  # # The extends property specifies an ancestor theme (by name). Whenever a themed component is not found
+  # # in the current theme, its ancestor theme(s) will be checked recursively before falling back to default.
+  # - name: custom-A
+  #   extends: custom-B
+  #   # Any of the matching properties above can be used
+  #   handle: 10673/34
+  #
+  # - name: custom-B
+  #   extends: custom
+  #   handle: 10673/12
+  #
+  # # A theme with only a name will match every route
+  # name: custom
+  #
+  # # This theme will use the default bootstrap styling for DSpace components
+  # - name: BASE_THEME_NAME
+  #
+  - name: custom
+    headTags:
+      - tagName: link
+        attributes:
+          rel: icon
+          href: assets/custom/images/favicons/favicon.ico
+          sizes: any
+      - tagName: link
+        attributes:
+          rel: icon
+          href: assets/custom/images/favicons/favicon.svg
+          type: image/svg+xml
+      - tagName: link
+        attributes:
+          rel: apple-touch-icon
+          href: assets/custom/images/favicons/apple-touch-icon.png
+      - tagName: link
+        attributes:
+          rel: manifest
+          href: assets/custom/images/favicons/manifest.webmanifest
+
+
+#info:
+#  # Whether the end user agreement is required before users may use the repository.
+#  # If enabled, the user will be required to accept the agreement before they can use the repository.
+#  # If disabled, the page will not exist and no agreement is required to use the repository
+#  enableEndUserAgreement: false
+#  # Whether the privacy statement should exist or not.
+#  enablePrivacyStatement: false
+
+# Allow only EN and CS languages
+languages:
+  - code: en
+    label: English
+    active: true
+  - code: ca
+    label: Català
+    active: false
+  - code: cs
+    label: Čeština
+    active: true
+  - code: de
+    label: Deutsch
+    active: false
+  - code: es
+    label: Español
+    active: false
+  - code: fr
+    label: Français
+    active: false
+  - code: gd
+    label: Gàidhlig
+    active: false
+  - code: lv
+    label: Latviešu
+    active: false
+  - code: hu
+    label: Magyar
+    active: false
+  - code: nl
+    label: Nederlands
+    active: false
+  - code: pl
+    label: Polski
+    active: false
+  - code: pt-PT
+    label: Português
+    active: false
+  - code: pt-BR
+    label: Português do Brasil
+    active: false
+  - code: fi
+    label: Suomi
+    active: false
+  - code: sv
+    label: Svenska
+    active: false
+  - code: tr
+    label: Türkçe
+    active: false
+  - code: kk
+    label: Қазақ
+    active: false
+  - code: bn
+    label: বাংলা
+    active: false
+  - code: hi
+    label: हिंदी
+    active: false
+  - code: el
+    label: Ελληνικά
+    active: false
+  - code: uk
+    label: Yкраї́нська
+    active: false

package.json

@@ -114,6 +114,7 @@
     "@ngrx/store": "^18.1.1",
     "@ngx-translate/core": "^16.0.3",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
+    "@popperjs/core": "^2.11.8",
     "@terraformer/wkt": "^2.2.1",
     "altcha": "^0.9.0",
     "angulartics2": "^12.2.0",

src/app/admin/admin-sidebar/admin-sidebar.component.html

@@ -13,7 +13,7 @@
     <div class="sidebar-full-width-container" id="sidebar-header-container" aria-hidden="true">
       <div class="sidebar-section-wrapper">
         <div class="sidebar-fixed-element-wrapper">
-          <img id="admin-sidebar-logo" src="assets/images/dspace-logo-mini.svg" [alt]="('menu.header.image.logo') | translate" aria-hidden="true">
+          <img id="admin-sidebar-logo" src="assets/images/mendelu-symbol-w.svg" [alt]="('menu.header.image.logo') | translate" aria-hidden="true">
         </div>
         <div class="sidebar-collapsible-element-outer-wrapper">
           <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">

src/app/admin/admin-sidebar/admin-sidebar.component.scss

@@ -56,6 +56,15 @@
         padding-bottom: var(--ds-admin-sidebar-item-padding);
       }
 
+      // Remove vertical padding from the wrapper and apply it to the anchor
+      // In case an anchor also has .sidebar-item, reset it to avoid double padding
+      .sidebar-sub-level-item-list {
+        .sidebar-item, .ds-menu-item.sidebar-item {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+
       // These classes handle the collapsing behavior
       .sidebar-section-wrapper {
 
@@ -133,8 +142,7 @@
     }
 
     div#sidebar-collapse-toggle-container {
-      .sidebar-collapsible-element-inner-wrapper {
-      }
+      background-color: var(--ds-admin-sidebar-header-bg);
     }
   }
 }

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss

@@ -3,8 +3,19 @@
     list-style: none;
     margin: 0;
     padding: 0;
-    ::ng-deep .ds-menu-item {
-      margin-left: var(--ds-admin-sidebar-section-indent);
+    /* Make the entire sub-level row clickable by applying padding to the anchor */
+    ::ng-deep {
+      /* Ensure anchors are full-width blocks */
+      .ds-menu-item {
+        display: block;
+        width: 100%;
+        padding-left: var(--ds-admin-sidebar-section-indent);
+      }
+
+      .sidebar-item .ds-menu-item {
+        padding-top: var(--ds-admin-sidebar-item-padding);
+        padding-bottom: var(--ds-admin-sidebar-item-padding);
+      }
     }
   }
 

src/app/footer/footer.component.scss

@@ -34,6 +34,7 @@
         .n-coar {
           height: var(--ds-footer-n-coar-height);
           margin-bottom: 8.5px;
+          filter: brightness(0) invert(1);
         }
 
         @media screen and (min-width: map-get($grid-breakpoints, md))  {

src/app/home-page/home-page.component.html

@@ -1,5 +1,5 @@
-<ds-home-coar></ds-home-coar>
-<ds-home-news></ds-home-news>
+<!-- <ds-home-coar></ds-home-coar> -->
+<!-- <ds-home-news></ds-home-news> -->
 @if (showDiscoverFilters) {
   <ds-configuration-search-page
     [sideBarWidth]="3"

src/app/login-page/login-page.component.html

@@ -1,7 +1,7 @@
 <div class="container w-100 h-100">
   <div class="text-center mt-5 row justify-content-center">
     <div>
-      <img class="mb-4 login-logo" src="assets/images/dspace-logo.svg" [alt]="'repository.image.logo' | translate">
+      <img class="mb-4 login-logo" [src]="logoSrc" [alt]="'repository.image.logo' | translate">
       <h1 class="h3 mb-0 fw-normal">{{"login.form.header" | translate}}</h1>
       <ds-log-in
       [isStandalonePage]="true"></ds-log-in>

src/app/login-page/login-page.component.spec.ts

@@ -12,6 +12,7 @@ import { of } from 'rxjs';
 
 import { APP_DATA_SERVICES_MAP } from '../../config/app-config.interface';
 import { AuthService } from '../core/auth/auth.service';
+import { LocaleService } from '../core/locale/locale.service';
 import { XSRFService } from '../core/xsrf/xsrf.service';
 import { AuthServiceMock } from '../shared/mocks/auth.service.mock';
 import { ActivatedRouteStub } from '../shared/testing/active-router.stub';
@@ -42,6 +43,7 @@ describe('LoginPageComponent', () => {
         { provide: AuthService, useValue: new AuthServiceMock() },
         { provide: XSRFService, useValue: {} },
         { provide: APP_DATA_SERVICES_MAP, useValue: {} },
+        { provide: LocaleService, useValue: { getCurrentLanguageCode: () => 'en' } },
         provideMockStore({}),
       ],
       schemas: [NO_ERRORS_SCHEMA],

src/app/login-page/login-page.component.ts

@@ -24,6 +24,7 @@ import {
 } from '../core/auth/auth.actions';
 import { AuthTokenInfo } from '../core/auth/models/auth-token-info.model';
 import { isAuthenticated } from '../core/auth/selectors';
+import { LocaleService } from '../core/locale/locale.service';
 import {
   hasValue,
   isNotEmpty,
@@ -51,21 +52,25 @@ export class LoginPageComponent implements OnDestroy, OnInit {
    */
   sub: Subscription;
 
+  logoSrc: string;
+
   /**
    * Initialize instance variables
    *
    * @param {ActivatedRoute} route
    * @param {Store<AppState>} store
    */
   constructor(private route: ActivatedRoute,
-              private store: Store<AppState>) {}
+              private store: Store<AppState>,
+              private localeService: LocaleService) {}
 
   /**
    * Initialize instance variables
    */
   ngOnInit() {
     const queryParamsObs = this.route.queryParams;
     const authenticated = this.store.select(isAuthenticated);
+    this.setLogo();
     this.sub = observableCombineLatest(queryParamsObs, authenticated).pipe(
       filter(([params, auth]) => isNotEmpty(params.token) || isNotEmpty(params.expired)),
       take(1),
@@ -87,6 +92,11 @@ export class LoginPageComponent implements OnDestroy, OnInit {
       }
     });
   }
+  setLogo() {
+    this.logoSrc = this.localeService.getCurrentLanguageCode() === 'cs'
+      ? '/assets/images/mendel-uni-logo-cs.svg'
+      : '/assets/images/mendel-uni-logo-en.svg';
+  }
 
   /**
    * Unsubscribe from subscription

src/app/logout-page/logout-page.component.html

@@ -1,7 +1,7 @@
 <div class="container w-100 h-100">
   <div class="text-center mt-5 row justify-content-md-center">
     <div class="mx-auto">
-      <img class="mb-4 login-logo" src="assets/images/dspace-logo.svg" [alt]="'repository.image.logo' | translate">
+      <img class="mb-4 login-logo" [src]="logoSrc" [alt]="'repository.image.logo' | translate">
       <h1 class="h3 mb-0 fw-normal">{{"logout.form.header" | translate}}</h1>
       <ds-log-out></ds-log-out>
     </div>

src/app/logout-page/logout-page.component.spec.ts

@@ -7,6 +7,7 @@ import {
 import { provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { LocaleService } from '../core/locale/locale.service';
 import { LogoutPageComponent } from './logout-page.component';
 
 describe('LogoutPageComponent', () => {
@@ -20,6 +21,7 @@ describe('LogoutPageComponent', () => {
         LogoutPageComponent,
       ],
       providers: [
+        { provide: LocaleService, useValue: { getCurrentLanguageCode: () => 'en' } },
         provideMockStore(),
       ],
       schemas: [NO_ERRORS_SCHEMA],

src/app/logout-page/logout-page.component.ts

@@ -1,6 +1,10 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { LocaleService } from '../core/locale/locale.service';
 import { LogOutComponent } from '../shared/log-out/log-out.component';
 
 @Component({
@@ -13,6 +17,20 @@ import { LogOutComponent } from '../shared/log-out/log-out.component';
     TranslateModule,
   ],
 })
-export class LogoutPageComponent {
+export class LogoutPageComponent implements OnInit {
+
+  logoSrc: string;
+
+  constructor(private localeService: LocaleService) {}
+
+  ngOnInit() {
+    this.setLogo();
+  }
+
+  setLogo() {
+    this.logoSrc = this.localeService.getCurrentLanguageCode() === 'cs'
+      ? '/assets/images/mendel-uni-logo-cs.svg'
+      : '/assets/images/mendel-uni-logo-en.svg';
+  }
 
 }

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

@@ -7,7 +7,7 @@
              [class.display]="searchExpanded ? 'inline-block' : 'none'"
              [tabIndex]="searchExpanded ? 0 : -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" tabindex="0" role="button">
+      <button class="submit-icon btn btn-link px-1" [attr.aria-label]="'nav.search.button' | translate" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly" tabindex="0" role="button">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </button>
     </form>

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

@@ -18,6 +18,7 @@ input[type="text"] {
   color: var(--ds-header-icon-color);
   &:hover, &:focus {
     color: var(--ds-header-icon-color-hover);
+    background-color: var(--ds-header-icon-color);
   }
 }