New themed components & minor CSS fixes (DSpace#2442)

* 100839: Created themeable BrowseByComponent

* 100839: Added themed BrowseByComponent to custom theme

* 100839: Added themed BrowseEntryListElementComponent to custom theme

* Added PersonComponent to custom theme

* Themed LogInComponent

* Fix focus on navbar using different color

* Fix ccLicense checkbox margin

* Fix long search facets name not displaying correctly

* Removed RecentItemListComponent's unnecessary float causing alignment issues when adding components underneath it

* Themed RegisterEmailFormComponent

src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts

@@ -89,19 +89,19 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
     const lastItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
     this.subs.push(
       observableCombineLatest([firstItemRD, lastItemRD]).subscribe(([firstItem, lastItem]) => {
-        let lowerLimit = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
-        let upperLimit = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
-        const options = [];
-        const oneYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
-        const fiveYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
+        let lowerLimit: number = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
+        let upperLimit: number = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
+        const options: number[] = [];
+        const oneYearBreak: number = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
+        const fiveYearBreak: number = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
         if (lowerLimit <= fiveYearBreak) {
           lowerLimit -= 10;
         } else if (lowerLimit <= oneYearBreak) {
           lowerLimit -= 5;
         } else {
           lowerLimit -= 1;
         }
-        let i = upperLimit;
+        let i: number = upperLimit;
         while (i > lowerLimit) {
           options.push(i);
           if (i <= fiveYearBreak) {

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html

@@ -32,7 +32,7 @@
 
     <section class="comcol-page-browse-section">
     <div class="browse-by-metadata w-100">
-    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+    <ds-themed-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
       title="{{'browse.title' | translate:
       {
         collection: dsoNameService.getName((parent$ | async)?.payload),
@@ -48,7 +48,7 @@
       [startsWithOptions]="startsWithOptions"
       (prev)="goPrev()"
       (next)="goNext()">
-    </ds-browse-by>
+    </ds-themed-browse-by>
     <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
   </div>
   </section>

src/app/browse-by/browse-by.module.ts

@@ -14,6 +14,7 @@ import { ThemedBrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/t
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { FormModule } from '../shared/form/form.module';
+import { SharedModule } from '../shared/shared.module';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -35,6 +36,7 @@ const ENTRY_COMPONENTS = [
     ComcolModule,
     DsoPageModule,
     FormModule,
+    SharedModule,
   ],
   declarations: [
     BrowseBySwitcherComponent,

src/app/forgot-password/forgot-password-email/forgot-email.component.html

@@ -1,3 +1,3 @@
-<ds-register-email-form
+<ds-themed-register-email-form
     [MESSAGE_PREFIX]="'forgot-email.form'" [typeRequest]="typeRequest">
-</ds-register-email-form>
+</ds-themed-register-email-form>

src/app/home-page/recent-item-list/recent-item-list.component.html

@@ -1,12 +1,12 @@
 <ng-container *ngVar="(itemRD$ | async) as itemRD">
         <div class="mt-4" [ngClass]="placeholderFontClass" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
-                <div class="d-flex flex-row border-bottom mb-4 pb-4 ng-tns-c416-2"></div>
+                <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
                 <h2> {{'home.recent-submissions.head' | translate}}</h2>
                 <div class="my-4" *ngFor="let item of itemRD?.payload?.page">
                         <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
                         </ds-listable-object-component-loader>
                 </div>
-                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-left ng-tns-c290-40"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
+                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
         </div>
         <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
         <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">

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

@@ -3,8 +3,8 @@
     <div>
       <img class="mb-4 login-logo" src="assets/images/dspace-logo.png" alt="{{'repository.image.logo' | translate}}">
       <h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
-      <ds-log-in
-      [isStandalonePage]="true"></ds-log-in>
+      <ds-themed-log-in
+      [isStandalonePage]="true"></ds-themed-log-in>
     </div>
   </div>
 </div>

src/app/navbar/navbar.component.scss

@@ -39,8 +39,9 @@ nav.navbar {
 .navbar-nav {
   ::ng-deep a.nav-link {
     color: var(--ds-navbar-link-color);
-  }
-  ::ng-deep a.nav-link:hover {
-    color: var(--ds-navbar-link-color-hover);
+
+    &:hover, &:focus {
+      color: var(--ds-navbar-link-color-hover);
+    }
   }
 }

src/app/register-email-form/register-email-form.module.ts

@@ -2,18 +2,24 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '../shared/shared.module';
 import { RegisterEmailFormComponent } from './register-email-form.component';
+import { ThemedRegisterEmailFormComponent } from './themed-registry-email-form.component';
+
+const DECLARATIONS = [
+  RegisterEmailFormComponent,
+  ThemedRegisterEmailFormComponent,
+];
 
 @NgModule({
   imports: [
     CommonModule,
     SharedModule
   ],
   declarations: [
-    RegisterEmailFormComponent,
+    ...DECLARATIONS,
   ],
   providers: [],
   exports: [
-    RegisterEmailFormComponent,
+    ...DECLARATIONS,
   ]
 })
 

src/app/register-email-form/themed-registry-email-form.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { RegisterEmailFormComponent } from './register-email-form.component';
+
+/**
+ * Themed wrapper for {@link RegisterEmailFormComponent}
+ */
+@Component({
+  selector: 'ds-themed-register-email-form',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedRegisterEmailFormComponent extends ThemedComponent<RegisterEmailFormComponent> {
+
+  @Input() MESSAGE_PREFIX: string;
+
+  @Input() typeRequest: string;
+
+  protected inAndOutputNames: (keyof RegisterEmailFormComponent & keyof this)[] = [
+    'MESSAGE_PREFIX',
+    'typeRequest',
+  ];
+
+  protected getComponentName(): string {
+    return 'RegisterEmailFormComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/register-email-form/register-email-form.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./register-email-form.component');
+  }
+
+}

src/app/register-page/register-email/register-email.component.html

@@ -1,3 +1,3 @@
-<ds-register-email-form
+<ds-themed-register-email-form
         [MESSAGE_PREFIX]="'register-page.registration'" [typeRequest]="typeRequest">
-</ds-register-email-form>
+</ds-themed-register-email-form>

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

@@ -7,8 +7,8 @@
          ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
       <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
            [attr.aria-label]="'nav.login' | translate">
-        <ds-log-in
-          [isStandalonePage]="false"></ds-log-in>
+        <ds-themed-log-in
+          [isStandalonePage]="false"></ds-themed-log-in>
       </div>
     </div>
   </li>

src/app/shared/browse-by/shared-browse-by.module.ts

@@ -1,15 +1,21 @@
 import { NgModule } from '@angular/core';
 import { BrowseByComponent } from './browse-by.component';
+import { ThemedBrowseByComponent } from './themed-browse-by.component';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '../shared.module';
 import { ResultsBackButtonModule } from '../results-back-button/results-back-button.module';
 import { BrowseByRoutingModule } from '../../browse-by/browse-by-routing.module';
 import { AccessControlRoutingModule } from '../../access-control/access-control-routing.module';
 
+const DECLARATIONS = [
+  BrowseByComponent,
+  ThemedBrowseByComponent,
+];
+
 @NgModule({
   declarations: [
-    BrowseByComponent,
-],
+    ...DECLARATIONS,
+  ],
   imports: [
     ResultsBackButtonModule,
     BrowseByRoutingModule,
@@ -18,8 +24,7 @@ import { AccessControlRoutingModule } from '../../access-control/access-control-
     SharedModule,
   ],
   exports: [
-    BrowseByComponent,
-    SharedModule,
+    ...DECLARATIONS,
   ]
 })
 export class SharedBrowseByModule { }

src/app/shared/browse-by/themed-browse-by.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { BrowseByComponent } from './browse-by.component';
+import { Observable } from 'rxjs';
+import { RemoteData } from '../../core/data/remote-data';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
+import { StartsWithType } from '../starts-with/starts-with-decorator';
+
+/**
+ * Themed wrapper for {@link BrowseByComponent}
+ */
+@Component({
+  selector: 'ds-themed-browse-by',
+  styleUrls: [],
+  templateUrl: '../theme-support/themed.component.html',
+})
+export class ThemedBrowseByComponent extends ThemedComponent<BrowseByComponent> {
+
+  @Input() title: string;
+
+  @Input() parentname: string;
+
+  @Input() objects$: Observable<RemoteData<PaginatedList<ListableObject>>>;
+
+  @Input() paginationConfig: PaginationComponentOptions;
+
+  @Input() sortConfig: SortOptions;
+
+  @Input() type: StartsWithType;
+
+  @Input() startsWithOptions: number[];
+
+  @Input() showPaginator: boolean;
+
+  @Input() hideGear: boolean;
+
+  @Output() prev: EventEmitter<boolean> = new EventEmitter();
+
+  @Output() next: EventEmitter<boolean> = new EventEmitter();
+
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter();
+
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter();
+
+  protected inAndOutputNames: (keyof BrowseByComponent & keyof this)[] = [
+    'title',
+    'parentname',
+    'objects$',
+    'paginationConfig',
+    'sortConfig',
+    'type',
+    'startsWithOptions',
+    'showPaginator',
+    'hideGear',
+    'prev',
+    'next',
+    'pageSizeChange',
+    'sortDirectionChange',
+  ];
+
+  protected getComponentName(): string {
+    return 'BrowseByComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/browse-by/browse-by.component.ts`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./browse-by.component');
+  }
+
+}

src/app/shared/log-in/log-in.component.spec.ts

@@ -21,6 +21,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { HardRedirectService } from '../../core/services/hard-redirect.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { of } from 'rxjs';
+import { ThemeService } from '../theme-support/theme.service';
+import { getMockThemeService } from '../mocks/theme-service.mock';
 
 describe('LogInComponent', () => {
 
@@ -75,6 +77,7 @@ describe('LogInComponent', () => {
         { provide: HardRedirectService, useValue: hardRedirectService },
         { provide: AuthorizationDataService, useValue: authorizationService },
         provideMockStore({ initialState }),
+        { provide: ThemeService, useValue: getMockThemeService() },
         LogInComponent
       ],
       schemas: [
@@ -91,7 +94,7 @@ describe('LogInComponent', () => {
 
     // synchronous beforeEach
     beforeEach(() => {
-      const html = `<ds-log-in [isStandalonePage]="isStandalonePage"> </ds-log-in>`;
+      const html = `<ds-themed-log-in [isStandalonePage]="isStandalonePage"> </ds-themed-log-in>`;
 
       testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
       testComp = testFixture.componentInstance;

src/app/shared/log-in/themed-log-in.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { LogInComponent } from './log-in.component';
+
+/**
+ * Themed wrapper for {@link LogInComponent}
+ */
+@Component({
+  selector: 'ds-themed-log-in',
+  styleUrls: [],
+  templateUrl: './../theme-support/themed.component.html'
+})
+export class ThemedLogInComponent extends ThemedComponent<LogInComponent> {
+
+  @Input() isStandalonePage: boolean;
+
+  protected inAndOutputNames: (keyof LogInComponent & keyof this)[] = [
+    'isStandalonePage',
+  ];
+
+  protected getComponentName(): string {
+    return 'LogInComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/log-in/log-in.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./log-in.component');
+  }
+
+}

src/app/shared/search/search-filters/search-filter/search-filter.component.html

@@ -6,7 +6,7 @@
           [attr.aria-label]="(((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate) + ' ' + (('search.filters.filter.' + filter.name + '.head') | translate | lowercase)"
           [attr.data-test]="'filter-toggle' | dsBrowserOnly"
   >
-    <h4 class="d-inline-block mb-0">
+    <h4 class="d-inline-block text-left mt-auto mb-auto">
       {{'search.filters.filter.' + filter.name + '.head'| translate}}
     </h4>
     <span class="filter-toggle flex-grow-1 fas p-auto"

src/app/shared/search/search-filters/search-filter/search-filter.component.scss

@@ -17,7 +17,6 @@
     line-height: var(--bs-line-height-base);
     text-align: right;
     position: relative;
-    top: -0.125rem;           // Fix weird outline shape in Chrome
   }
 
   > button {

src/app/shared/shared.module.ts

@@ -192,6 +192,7 @@ import {
 import { LogInContainerComponent } from './log-in/container/log-in-container.component';
 import { LogInPasswordComponent } from './log-in/methods/password/log-in-password.component';
 import { LogInComponent } from './log-in/log-in.component';
+import { ThemedLogInComponent } from './log-in/themed-log-in.component';
 import { MissingTranslationHelper } from './translate/missing-translation.helper';
 import { FileValidator } from './utils/require-file.validator';
 import { FileValueAccessorDirective } from './utils/file-value-accessor.directive';
@@ -339,6 +340,7 @@ const COMPONENTS = [
   LoadingComponent,
   ThemedLoadingComponent,
   LogInComponent,
+  ThemedLogInComponent,
   LogOutComponent,
   ObjectListComponent,
   ThemedObjectListComponent,

src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html

@@ -134,6 +134,7 @@ <h5>
       <div class="m-2">
         <div (click)="setAccepted(!accepted)">
           <input type="checkbox"
+                 class="mr-2"
                  title="accepted"
                  [checked]="accepted">
           <span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>