MENDELU/UI customization to v9 (#1042)

* enabling the custom theme in config.yml

* editing assetes

* first UI set-up changes

* Revert "first UI set-up changes"

This reverts commit d4d654b.

* enabling the custom theme in eager-themes.module

* header edit based on dspace-theme - to make it oneline

* Copy default global styles

* Header navbar wrapper edit to make oneline header

* Navbar component fix to make header oneline

* Render MENDELU logos

* Added mendelu specific fonts and colors

* Make footer COAR Notify logo white

* Hide home-coar and home-news

* Hide header-navbar border-bottom

* Hide all the languages except cs and en

* Adjusting colors to MENDELU design

* Adjusting sidebar links to be clickable as full rows, not only text

* Adjusted default coloring settings

* Made login/logout page logo larger

* Added custom/expandable-navbar-section.component

* Fixed coloring of navbar sections

* Changed config.yml to localhost server

* Removed unused css declaration block

* Lint fixes

* Added missing import

* Fixed paddings of search navbar icon

* Fixed padding and hover styling in expandable-navbar-section

* Fix lint errors

* Fix lint errors

* Adding the popperjs dependency

* Adjusted Unit tests for changes in login and logout page components

* Edit of build.yml to remove node_modules and package-lock.json before installing npm dependencies

* 2nd edit of build.yml workflow

* Revert of build.yml changes

* Trying to clean cache before installing dependecies

* Fixed garbage from previous commit

Author: jr-rk

.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

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