Add support for dynamic themes

GauravD2t · Mar 1, 2021 · 5a6e4b1 · 5a6e4b1
1 parent 70dac6b
commit 5a6e4b1
Show file tree

Hide file tree

Showing 224 changed files with 3,438 additions and 1,026 deletions.
diff --git a/README.md b/README.md
@@ -339,7 +339,6 @@ dspace-angular
 ├── tslint.json                                         * TSLint (https://palantir.github.io/tslint/) configuration
 ├── typedoc.json                                        * TYPEDOC configuration
 ├── webpack                                             * Webpack (https://webpack.github.io/) config directory
-│   ├── helpers.js                                      *
 │   ├── webpack.aot.js                                  * Webpack (https://webpack.github.io/) config for AoT build
 │   ├── webpack.client.js                               * Webpack (https://webpack.github.io/) config for client build
 │   ├── webpack.common.js                               *

diff --git a/angular.json b/angular.json
@@ -17,6 +17,7 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "extractCss": true,
             "preserveSymlinks": true,
             "customWebpackConfig": {
               "path": "./webpack/webpack.browser.ts",
@@ -46,7 +47,16 @@
               "src/robots.txt"
             ],
             "styles": [
-              "src/styles.scss"
+              {
+                "input": "src/styles/base-theme.scss",
+                "inject": false,
+                "bundleName": "base-theme"
+              },
+              {
+                "input": "src/themes/custom/styles/theme.scss",
+                "inject": false,
+                "bundleName": "custom-theme"
+              }
             ],
             "scripts": []
           },
@@ -116,7 +126,11 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              {
+                "input": "src/styles/base-theme.scss",
+                "inject": false,
+                "bundleName": "base-theme"
+              }
             ],
             "scripts": []
           }

diff --git a/package.json b/package.json
@@ -20,7 +20,9 @@
     "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
     "start:dev": "npm-run-all --parallel config:dev:watch serve",
     "start:prod": "yarn run build:prod && yarn run serve:ssr",
+    "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
     "build": "ng build",
+    "build:stats": "ng build --stats-json",
     "build:prod": "yarn run build:ssr",
     "build:ssr": "yarn run build:client-and-server-bundles && yarn run compile:server",
     "build:client-and-server-bundles": "ng build --prod && ng run dspace-angular:server:production --bundleDependencies true",
@@ -179,7 +181,7 @@
     "tslint": "^6.1.3",
     "typescript": "~4.0.5",
     "webpack": "^4.44.2",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.2.0",
     "webpack-node-externals": "1.7.2"
   }

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
     require('postcss-import')(),
-    require('postcss-cssnext')(),
+    require('postcss-preset-env')(),
     require('postcss-apply')(),
     require('postcss-responsive-type')()
   ]

diff --git a/scripts/sync-build-dir.js b/scripts/sync-build-dir.js
diff --git a/...t-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts b/...t-grid-element/item-search-result/item-admin-search-result-grid-element.component.spec.ts
@@ -16,6 +16,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
 import { ItemAdminSearchResultGridElementComponent } from './item-admin-search-result-grid-element.component';
 import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 
 describe('ItemAdminSearchResultGridElementComponent', () => {
   let component: ItemAdminSearchResultGridElementComponent;
@@ -29,6 +31,8 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
     }
   };
 
+  const mockThemeService = getMockThemeService();
+
   function init() {
     id = '780b2588-bda5-4112-a1cd-0b15000a5339';
     searchResult = new ItemSearchResult();
@@ -50,6 +54,7 @@ describe('ItemAdminSearchResultGridElementComponent', () => {
         providers: [
           { provide: TruncatableService, useValue: mockTruncatableService },
           { provide: BitstreamDataService, useValue: mockBitstreamDataService },
+          { provide: ThemeService, useValue: mockThemeService },
         ],
         schemas: [NO_ERRORS_SCHEMA]
       })

diff --git a/...result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts b/...result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts
@@ -12,6 +12,7 @@ import { TruncatableService } from '../../../../../shared/truncatable/truncatabl
 import { BitstreamDataService } from '../../../../../core/data/bitstream-data.service';
 import { GenericConstructor } from '../../../../../core/shared/generic-constructor';
 import { ListableObjectDirective } from '../../../../../shared/object-collection/shared/listable-object/listable-object.directive';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 
 @listableObjectComponent(ItemSearchResult, ViewMode.GridElement, Context.AdminSearch)
 @Component({
@@ -29,6 +30,7 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
 
   constructor(protected truncatableService: TruncatableService,
               protected bitstreamDataService: BitstreamDataService,
+              private themeService: ThemeService,
               private componentFactoryResolver: ComponentFactoryResolver
   ) {
     super(truncatableService, bitstreamDataService);
@@ -63,6 +65,6 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
    * @returns {GenericConstructor<Component>}
    */
   private getComponent(): GenericConstructor<Component> {
-    return getListableObjectComponent(this.object.getRenderTypes(), ViewMode.GridElement, undefined);
+    return getListableObjectComponent(this.object.getRenderTypes(), ViewMode.GridElement, undefined, this.themeService.getThemeName());
   }
 }
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
@@ -1,12 +1,12 @@
-$icon-z-index: 10;
-
 :host {
+  --ds-icon-z-index: 10;
+
     left: 0;
     top: 0;
     height: 100vh;
     flex: 1 1 auto;
     nav {
-        background-color: $admin-sidebar-bg;
+        background-color: var(--ds-admin-sidebar-bg);
         height: 100%;
         flex-direction: column;
         > div {
@@ -19,12 +19,12 @@ $icon-z-index: 10;
         }
 
         &.inactive ::ng-deep .sidebar-collapsible {
-            margin-left: -#{$sidebar-items-width};
+            margin-left: calc(-1 * var(--ds-sidebar-items-width));
         }
 
         .navbar-nav {
             .admin-menu-header {
-                background-color: $admin-sidebar-header-bg;
+                background-color: var(--ds-admin-sidebar-header-bg);
                 .logo-wrapper {
                     img {
                         height: 20px;
@@ -43,34 +43,34 @@ $icon-z-index: 10;
                 .sidebar-section {
                     display: flex;
                     align-content: stretch;
-                    background-color: $admin-sidebar-bg;
+                    background-color: var(--ds-admin-sidebar-bg);
                     .nav-item {
-                        padding-top: $spacer;
-                        padding-bottom: $spacer;
+                        padding-top: var(--bs-spacer);
+                        padding-bottom: var(--bs-spacer);
                     }
                     .shortcut-icon {
-                        padding-left: $icon-padding;
-                        padding-right: $icon-padding;
+                        padding-left: var(--ds-icon-padding);
+                        padding-right: var(--ds-icon-padding);
                     }
                     .shortcut-icon, .icon-wrapper {
                         background-color: inherit;
-                        z-index: $icon-z-index;
+                        z-index: var(--ds-icon-z-index);
                     }
                     .sidebar-collapsible {
-                        width: $sidebar-items-width;
+                        width: var(--ds-sidebar-items-width);
                         position: relative;
                         a {
-                            padding-right: $spacer;
+                            padding-right: var(--bs-spacer);
                             width: 100%;
                         }
                     }
                     &.active > .sidebar-collapsible > .nav-link {
-                        color: $navbar-dark-active-color;
+                        color: var(--bs-navbar-dark-active-color);
                     }
                 }
             }
         }
 
     }
 
-}
+}
diff --git a/...-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/...-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -1,13 +1,13 @@
 :host ::ng-deep {
     .fa-chevron-right {
-        padding-left: $spacer/2;
+        padding-left: calc(var(--bs-spacer) / 2);
         font-size: 0.5rem;
         line-height: 3;
     }
 
     .sidebar-sub-level-items {
         list-style: disc;
-        color: $navbar-dark-color;
+        color: var(--bs-navbar-dark-color);
         overflow: hidden;
 
     }

diff --git a/...t/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.spec.ts b/...t/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.spec.ts
@@ -19,6 +19,8 @@ import { BitstreamDataService } from '../../../../../core/data/bitstream-data.se
 import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
 import { of as observableOf } from 'rxjs';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 
 describe('WorkflowItemAdminWorkflowGridElementComponent', () => {
   let component: WorkflowItemSearchResultAdminWorkflowGridElementComponent;
@@ -28,6 +30,7 @@ describe('WorkflowItemAdminWorkflowGridElementComponent', () => {
   let itemRD$;
   let linkService;
   let object;
+  let themeService;
 
   function init() {
     itemRD$ = createSuccessfulRemoteDataObject$(new Item());
@@ -37,6 +40,7 @@ describe('WorkflowItemAdminWorkflowGridElementComponent', () => {
     wfi.item = itemRD$;
     object.indexableObject = wfi;
     linkService = getMockLinkService();
+    themeService = getMockThemeService();
   }
 
   beforeEach(waitForAsync(() => {
@@ -51,6 +55,7 @@ describe('WorkflowItemAdminWorkflowGridElementComponent', () => {
         ],
         providers: [
           { provide: LinkService, useValue: linkService },
+          { provide: ThemeService, useValue: themeService },
           {
             provide: TruncatableService, useValue: {
               isCollapsed: () => observableOf(true),

diff --git a/...lement/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts b/...lement/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts
@@ -1,7 +1,10 @@
 import { Component, ComponentFactoryResolver, ElementRef, ViewChild } from '@angular/core';
 import { Item } from '../../../../../core/shared/item.model';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
-import { getListableObjectComponent, listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import {
+  getListableObjectComponent,
+  listableObjectComponent
+} from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { Context } from '../../../../../core/shared/context.model';
 import { SearchResultGridElementComponent } from '../../../../../shared/object-grid/search-result-grid-element/search-result-grid-element.component';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
@@ -13,9 +16,13 @@ import { Observable } from 'rxjs';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { followLink } from '../../../../../shared/utils/follow-link-config.model';
 import { RemoteData } from '../../../../../core/data/remote-data';
-import { getAllSucceededRemoteData, getRemoteDataPayload } from '../../../../../core/shared/operators';
+import {
+  getAllSucceededRemoteData,
+  getRemoteDataPayload
+} from '../../../../../core/shared/operators';
 import { take } from 'rxjs/operators';
 import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.GridElement, Context.AdminWorkflowSearch)
 @Component({
@@ -51,6 +58,7 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
     private componentFactoryResolver: ComponentFactoryResolver,
     private linkService: LinkService,
     protected truncatableService: TruncatableService,
+    private themeService: ThemeService,
     protected bitstreamDataService: BitstreamDataService
   ) {
     super(truncatableService, bitstreamDataService);
@@ -92,7 +100,7 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
    * @returns {GenericConstructor<Component>}
    */
   private getComponent(item: Item): GenericConstructor<Component> {
-    return getListableObjectComponent(item.getRenderTypes(), ViewMode.GridElement, undefined);
+    return getListableObjectComponent(item.getRenderTypes(), ViewMode.GridElement, undefined, this.themeService.getThemeName());
   }
 
 }
diff --git a/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.scss b/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.scss
@@ -2,7 +2,7 @@
   ::ng-deep {
     .switch {
       position: absolute;
-      top: $spacer*2.5;
+      top: calc(var(--bs-spacer) * 2.5);
     }
   }
 }
diff --git a/src/app/+collection-page/collection-page.resolver.spec.ts b/src/app/+collection-page/collection-page.resolver.spec.ts
@@ -6,17 +6,21 @@ describe('CollectionPageResolver', () => {
   describe('resolve', () => {
     let resolver: CollectionPageResolver;
     let collectionService: any;
+    let store: any;
     const uuid = '1234-65487-12354-1235';
 
     beforeEach(() => {
       collectionService = {
         findById: (id: string) => createSuccessfulRemoteDataObject$({ id })
       };
-      resolver = new CollectionPageResolver(collectionService);
+      store = jasmine.createSpyObj('store', {
+        dispatch: {},
+      });
+      resolver = new CollectionPageResolver(collectionService, store);
     });
 
     it('should resolve a collection with the correct id', (done) => {
-      resolver.resolve({ params: { id: uuid } } as any, undefined)
+      resolver.resolve({ params: { id: uuid } } as any, { url: 'current-url' } as any)
         .pipe(first())
         .subscribe(
           (resolved) => {