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

Author: alexandrevryghem

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>