Add custom ILRI theme

angular.json

@@ -64,6 +64,11 @@
                 "input": "src/themes/cgspace/styles/theme.scss",
                 "inject": false,
                 "bundleName": "cgspace-theme"
+              },
+              {
+                "input": "src/themes/ilri/styles/theme.scss",
+                "inject": false,
+                "bundleName": "ilri-theme"
               }
             ],
             "scripts": [],

src/themes/eager-themes.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { EagerThemeModule as DSpaceEagerThemeModule } from './cgspace/eager-theme.module';
+import { EagerThemeModule as IlriEagerThemeModule } from './ilri/eager-theme.module';
 // import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module';
 
 /**
@@ -12,6 +13,7 @@ import { EagerThemeModule as DSpaceEagerThemeModule } from './cgspace/eager-them
 @NgModule({
   imports: [
     DSpaceEagerThemeModule,
+    IlriEagerThemeModule,
     // CustomEagerThemeModule,
   ],
 })

src/themes/ilri/eager-theme.module.ts

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SharedModule } from '../../app/shared/shared.module';
+import { SearchModule } from '../../app/shared/search/search.module';
+import { RootModule } from '../../app/root.module';
+import { NavbarModule } from '../../app/navbar/navbar.module';
+import { ItemPageModule } from '../../app/item-page/item-page.module';
+import { ItemSharedModule } from '../../app/item-page/item-shared.module';
+import { ResultsBackButtonModule } from '../../app/shared/results-back-button/results-back-button.module';
+import { DsoPageModule } from '../../app/shared/dso-page/dso-page.module';
+
+/**
+ * Add components that use a custom decorator to ENTRY_COMPONENTS as well as DECLARATIONS.
+ * This will ensure that decorator gets picked up when the app loads
+ */
+const ENTRY_COMPONENTS = [
+];
+
+const DECLARATIONS = [
+  ...ENTRY_COMPONENTS,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    SearchModule,
+    FormsModule,
+    RootModule,
+    NavbarModule,
+    ResultsBackButtonModule,
+    ItemPageModule,
+    ItemSharedModule,
+    DsoPageModule,
+  ],
+  declarations: DECLARATIONS,
+  providers: [
+    ...ENTRY_COMPONENTS.map((component) => ({ provide: component }))
+  ],
+})
+/**
+ * This module is included in the main bundle that gets downloaded at first page load. So it should
+ * contain only the themed components that have to be available immediately for the first page load,
+ * and the minimal set of imports required to make them work. Anything you can cut from it will make
+ * the initial page load faster, but may cause the page to flicker as components that were already
+ * rendered server side need to be lazy-loaded again client side
+ *
+ * Themed EntryComponents should also be added here
+ */
+export class EagerThemeModule {
+}

src/themes/ilri/lazy-theme.module.ts

@@ -0,0 +1,132 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AdminRegistriesModule } from '../../app/admin/admin-registries/admin-registries.module';
+import { AdminSearchModule } from '../../app/admin/admin-search-page/admin-search.module';
+import {
+  AdminWorkflowModuleModule
+} from '../../app/admin/admin-workflow-page/admin-workflow.module';
+import {
+  BitstreamFormatsModule
+} from '../../app/admin/admin-registries/bitstream-formats/bitstream-formats.module';
+import { BrowseByModule } from '../../app/browse-by/browse-by.module';
+import {
+  CollectionFormModule
+} from '../../app/collection-page/collection-form/collection-form.module';
+import { CommunityFormModule } from '../../app/community-page/community-form/community-form.module';
+import { CoreModule } from '../../app/core/core.module';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { EditItemPageModule } from '../../app/item-page/edit-item-page/edit-item-page.module';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { IdlePreloadModule } from 'angular-idle-preload';
+import {
+  JournalEntitiesModule
+} from '../../app/entity-groups/journal-entities/journal-entities.module';
+import { MyDspaceSearchModule } from '../../app/my-dspace-page/my-dspace-search.module';
+import { MenuModule } from '../../app/shared/menu/menu.module';
+import { NavbarModule } from '../../app/navbar/navbar.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ProfilePageModule } from '../../app/profile-page/profile-page.module';
+import { RegisterEmailFormModule } from '../../app/register-email-form/register-email-form.module';
+import {
+  ResearchEntitiesModule
+} from '../../app/entity-groups/research-entities/research-entities.module';
+import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
+import { SearchPageModule } from '../../app/search-page/search-page.module';
+import { SharedModule } from '../../app/shared/shared.module';
+import { StatisticsModule } from '../../app/statistics/statistics.module';
+import { StoreModule } from '@ngrx/store';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { TranslateModule } from '@ngx-translate/core';
+import { HomePageModule } from '../../app/home-page/home-page.module';
+import { AppModule } from '../../app/app.module';
+import { ItemPageModule } from '../../app/item-page/item-page.module';
+import { RouterModule } from '@angular/router';
+import { CommunityListPageModule } from '../../app/community-list-page/community-list-page.module';
+import { InfoModule } from '../../app/info/info.module';
+import { StatisticsPageModule } from '../../app/statistics-page/statistics-page.module';
+import { CommunityPageModule } from '../../app/community-page/community-page.module';
+import { CollectionPageModule } from '../../app/collection-page/collection-page.module';
+import { SubmissionModule } from '../../app/submission/submission.module';
+import { MyDSpacePageModule } from '../../app/my-dspace-page/my-dspace-page.module';
+import { SearchModule } from '../../app/shared/search/search.module';
+import {
+  ResourcePoliciesModule
+} from '../../app/shared/resource-policies/resource-policies.module';
+import { ComcolModule } from '../../app/shared/comcol/comcol.module';
+import { RootModule } from '../../app/root.module';
+import { BrowseByPageModule } from '../../app/browse-by/browse-by-page.module';
+import { ResultsBackButtonModule } from '../../app/shared/results-back-button/results-back-button.module';
+import { SharedBrowseByModule } from '../../app/shared/browse-by/shared-browse-by.module';
+import { ItemVersionsModule } from '../../app/item-page/versions/item-versions.module';
+import { ItemSharedModule } from 'src/app/item-page/item-shared.module';
+
+const DECLARATIONS = [
+];
+
+@NgModule({
+  imports: [
+    AdminRegistriesModule,
+    AdminSearchModule,
+    AdminWorkflowModuleModule,
+    AppModule,
+    RootModule,
+    BitstreamFormatsModule,
+    BrowseByModule,
+    BrowseByPageModule,
+    ResultsBackButtonModule,
+    CollectionFormModule,
+    CollectionPageModule,
+    CommonModule,
+    CommunityFormModule,
+    CommunityListPageModule,
+    CommunityPageModule,
+    CoreModule,
+    DragDropModule,
+    ItemSharedModule,
+    ItemPageModule,
+    EditItemPageModule,
+    ItemVersionsModule,
+    FormsModule,
+    HomePageModule,
+    HttpClientModule,
+    IdlePreloadModule,
+    InfoModule,
+    JournalEntitiesModule,
+    MenuModule,
+    MyDspaceSearchModule,
+    NavbarModule,
+    NgbModule,
+    ProfilePageModule,
+    RegisterEmailFormModule,
+    ResearchEntitiesModule,
+    RouterModule,
+    ScrollToModule,
+    SearchPageModule,
+    SharedModule,
+    SharedBrowseByModule,
+    StatisticsModule,
+    StatisticsPageModule,
+    StoreModule,
+    StoreRouterConnectingModule,
+    TranslateModule,
+    SubmissionModule,
+    MyDSpacePageModule,
+    MyDspaceSearchModule,
+    SearchModule,
+    FormsModule,
+    ResourcePoliciesModule,
+    ComcolModule,
+  ],
+  declarations: DECLARATIONS,
+})
+
+/**
+ * This module serves as an index for all the components in this theme.
+ * It should import all other modules, so the compiler knows where to find any components referenced
+ * from a component in this theme
+ * It is purposefully not exported, it should never be imported anywhere else, its only purpose is
+ * to give lazily loaded components a context in which they can be compiled successfully
+ */
+class LazyThemeModule {
+}

src/themes/ilri/styles/_global-styles.scss

@@ -0,0 +1,4 @@
+// Add any global css for the theme here
+
+// imports the cgspace global style
+@import '../../cgspace/styles/_global-styles.scss';

src/themes/ilri/styles/_theme_css_variable_overrides.scss

@@ -0,0 +1,28 @@
+// Override or add CSS variables for your theme here
+
+:root {
+  --ds-header-logo-height: 40px;
+  --ds-banner-text-background: $white;
+  --ds-banner-background-gradient-width: 300px;
+  --ds-home-news-link-color: #{$brand-primary};
+  --ds-home-news-link-hover-color: var(--brand-primary-darker);
+  --ds-thumbnail-max-width: 200px;
+  // override DSpace navbar link colors (note the special variable syntax here)
+  --ds-navbar-link-color: #{$cgiar-white};
+  --ds-navbar-link-color-hover: #{$brand-secondary};
+  // override DSpace search, language, and login colors
+  --ds-header-icon-color: #{$cgiar-white};
+  --ds-header-icon-color-hover: #{$brand-secondary};
+  // override DSpace header background color
+  --ds-header-bg: #{$brand-primary};
+  // override DSpace footer background color
+  --ds-footer-bg: #{$brand-primary};
+  // override DSpace header trail text color
+  --ds-breadcrumb-link-color: #{$brand-primary};
+  --ds-breadcrumb-link-active-color: #{$cgiar-gray};
+  --brand-primary: #{$brand-primary};
+  --brand-primary-darker: #{darken($brand-primary, 10%)};
+  --cgiar-white: #{$cgiar-white};
+  --cgiar-gray: #{$cgiar-gray};
+}
+

src/themes/ilri/styles/_theme_sass_variable_overrides.scss

@@ -0,0 +1,15 @@
+// Note that we only add styles we want to override from the cgspace theme here.
+// We do not use the SASS "!default" here because we want to set the values no
+// matter whether they are already defined or not.
+
+// dark ILRI red background
+$brand-primary: #702D3E;
+
+// ILRI light red
+$brand-secondary: #E3D7D7;
+
+// ILRI gray
+$cgiar-gray: #333;
+
+// ILRI white
+$cgiar-white: #fcfcfc;

src/themes/ilri/styles/theme.scss

@@ -0,0 +1,14 @@
+// This file combines the other scss files in to one. You usually shouldn't edit this file directly
+
+// Define our theme's sass overrides first, then the cgspace theme's
+@import './_theme_sass_variable_overrides.scss';
+@import '../../cgspace/styles/_theme_sass_variable_overrides.scss';
+@import '../../../styles/_variables.scss';
+@import '../../../styles/_mixins.scss';
+@import '../../../styles/helpers/font_awesome_imports.scss';
+@import '../../../styles/_vendor.scss';
+@import '../../../styles/_custom_variables.scss';
+@import './_theme_css_variable_overrides.scss';
+@import '../../../styles/bootstrap_variables_mapping.scss';
+@import '../../../styles/_truncatable-part.component.scss';
+@import './_global-styles.scss';